<?php
session_start();

if (!isset($_SESSION['rol']) || $_SESSION['rol'] !== 'propietario') {
    header("Location: login.php");
    exit;
}

include 'conexion.php';

$id_usuario = $_SESSION['id_usuario'];

$prop = $conn->query("
    SELECT id_propietario, numero_departamento, estacionamiento
    FROM propietarios
    WHERE id_usuario = $id_usuario
")->fetch_assoc();

$id_propietario = $prop['id_propietario'];

/* ====== STATS ====== */
$stats = $conn->query("
    SELECT
        COUNT(*) total,
        SUM(CASE WHEN CURDATE() BETWEEN fecha_inicio AND fecha_salida THEN 1 ELSE 0 END) activos,
        SUM(CASE WHEN CURDATE() < fecha_inicio THEN 1 ELSE 0 END) pendientes,
        SUM(CASE WHEN CURDATE() > fecha_salida THEN 1 ELSE 0 END) finalizados
    FROM arrendatarios
    WHERE id_propietario = $id_propietario
")->fetch_assoc();
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Dashboard Propietario</title>

<!-- FullCalendar core -->
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/main.min.css" rel="stylesheet">

<!-- FullCalendar Bootstrap 5 adapter (OBLIGATORIO) -->
<link href="https://cdn.jsdelivr.net/npm/@fullcalendar/bootstrap5@6.1.11/index.global.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/bootstrap5@6.1.11/index.global.min.js"></script>


<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/main.min.css">

<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/js/adminlte.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>

<body class="hold-transition layout-top-nav">
<div class="wrapper">

<!-- NAVBAR -->
<nav class="main-header navbar navbar-expand navbar-dark bg-primary">
    <span class="navbar-brand">🏖️ Sistema Arriendos</span>
    <ul class="navbar-nav ms-auto">
        <li class="nav-item text-white me-3">
            Depto <?= $prop['numero_departamento'] ?> | Estac <?= $prop['estacionamiento'] ?>
        </li>
        <li class="nav-item">
            <a href="login.php" class="btn btn-outline-light btn-sm">
                <i class="fas fa-sign-out-alt"></i> Salir
            </a>
        </li>
    </ul>
</nav>

<!-- CONTENIDO -->
<div class="content-wrapper">
<section class="content pt-4">
<div class="container">

<!-- ====== CARDS ====== -->
<div class="row mb-4">
<?php
$cards = [
    ['Total', $stats['total'], 'primary'],
    ['En Arriendo', $stats['activos'], 'success'],
    ['Pendientes', $stats['pendientes'], 'warning'],
    ['Finalizados', $stats['finalizados'], 'secondary']
];
foreach ($cards as $c): ?>
<div class="col-md-3">
    <div class="card shadow-sm border-start border-<?= $c[2] ?> border-4">
        <div class="card-body">
            <h6><?= $c[0] ?></h6>
            <h3><?= $c[1] ?></h3>
        </div>
    </div>
</div>
<?php endforeach; ?>
</div>

<style>
  .fc {
    background: #fff;
    border-radius: .5rem;
  }
</style>


<!-- ====== CALENDARIO ====== -->
<div class="card shadow-sm mb-4">
    <div class="card-header">
        <h5 class="mb-0">📅 Calendario de Arriendos</h5>
    </div>

    <!-- CLAVE: overflow visible -->
    <div class="card-body" style="overflow: visible;">
        <div id="calendario" style="min-height: 700px;"></div>
    </div>
</div>

</div>
</section>
</div>

</div>

<!-- ====== SCRIPT CALENDARIO (FIX ADMINLTE) ====== -->
<script>
document.addEventListener('DOMContentLoaded', function () {

    const el = document.getElementById('calendario');
    if (!el) {
        console.error('No existe #calendario');
        return;
    }

    const calendar = new FullCalendar.Calendar(el, {
        locale: 'es',
        themeSystem: 'bootstrap5',
        initialView: 'dayGridMonth',
        height: 650,
        events: 'eventos_calendario.php'
    });

    calendar.render();
});
</script>


</body>
</html>
