<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>

<?import javafx.scene.control.*?>

<?import javafx.scene.layout.*?>

<?import javafx.scene.text.*?>

<AnchorPane xmlns:fx="http://javafx.com/fxml" fx:controller="VistaMisReservasController"

minWidth="800" minHeight="600" prefWidth="1200" prefHeight="800">

<children>

<!-- Barra superior -->

<HBox spacing="20" style="-fx-background-color: #e6f0ff;" alignment="CENTER_LEFT"

AnchorPane.topAnchor="0" AnchorPane.leftAnchor="0" AnchorPane.rightAnchor="0">

<padding>

<Insets top="10" right="20" bottom="10" left="20"/>

</padding>

<Button text="Reservar Canchas" onAction="#irAReservarCanchas" style="-fx-font-weight: normal; -fx-background-color: transparent;"/>

<Button text="Mis Reservas" style="-fx-font-weight: bold; -fx-background-color: #002b80; -fx-text-fill: white;"/>

<!-- Espaciador para empujar los botones a la derecha -->

<Region HBox.hgrow="ALWAYS"/>

<!-- Información de la semana -->

<Label fx:id="labelSemana" text="Semana del 5 de julio hasta 11 de julio" style="-fx-font-size: 14px; -fx-font-weight: bold; -fx-text-fill: #002b80;"/>

<!-- Botón de reiniciar semana (solo para admin) -->

<Button fx:id="btnReiniciarSemana" text="🔄 Reiniciar Semana" onAction="#reiniciarSemana"

style="-fx-font-weight: bold; -fx-background-color: #ff6b35; -fx-text-fill: white; -fx-padding: 8 16 8 16; -fx-background-radius: 5;"

visible="false" managed="false"/>

<!-- Botón de logout -->

<Button text="🚪 Cerrar Sesión" onAction="#logout" style="-fx-font-weight: bold; -fx-background-color: #dc3545; -fx-text-fill: white; -fx-padding: 8 16 8 16;"/>

</HBox>

<!-- Contenido principal -->

<ScrollPane fitToWidth="true" fitToHeight="true"

AnchorPane.topAnchor="60" AnchorPane.leftAnchor="0" AnchorPane.rightAnchor="0" AnchorPane.bottomAnchor="0"

style="-fx-background-color: transparent;">

<content>

<VBox spacing="25" alignment="TOP_CENTER" minWidth="750">

<padding>

<Insets top="30" right="30" bottom="30" left="30"/>

</padding>

<!-- Encabezado -->

<VBox spacing="15" alignment="CENTER">

<Label text="Mis Reservas" style="-fx-font-size: 28px; -fx-font-weight: bold;"/>

<Label fx:id="labelUsuario" text="Usuario: " style="-fx-font-size: 16px; -fx-text-fill: #666666;"/>

<Label fx:id="labelResumenReservas" text="Reservas esta semana: 0/2" style="-fx-font-size: 14px; -fx-text-fill: #28a745;"/>

</VBox>

<!-- Contenedor para las reservas -->

<VBox fx:id="containerReservas" spacing="20" alignment="TOP_CENTER" maxWidth="1000" minWidth="600">

<!-- Mensaje cuando no hay reservas -->

<VBox fx:id="mensajeSinReservas" spacing="15" alignment="CENTER"

style="-fx-background-color: #f8f9fa; -fx-border-radius: 15; -fx-background-radius: 15; -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.1), 8, 0, 0, 3);">

<padding>

<Insets top="40" right="40" bottom="40" left="40"/>

</padding>

<Label text="📅" style="-fx-font-size: 48px;"/>

<Label text="No tienes reservas actualmente" style="-fx-font-size: 18px; -fx-font-weight: bold;"/>

<Label text="¡Haz tu primera reserva!" style="-fx-font-size: 16px; -fx-text-fill: #666666;"/>

<Button text="Ir a Reservar Canchas" onAction="#irAReservarCanchas"

style="-fx-background-color: #28a745; -fx-text-fill: white; -fx-font-weight: bold; -fx-padding: 15 25; -fx-font-size: 14px; -fx-background-radius: 8;"/>

</VBox>

</VBox>

<!-- Leyenda y estadísticas -->

<VBox spacing="15" alignment="CENTER" maxWidth="800">

<Separator style="-fx-background-color: #e0e0e0;"/>

<HBox spacing="50" alignment="CENTER">

<VBox spacing="8" alignment="CENTER">

<Label text="📊 Estadísticas" style="-fx-font-weight: bold; -fx-font-size: 16px;"/>

<Label fx:id="labelTotalReservas" text="Total de reservas: 0" style="-fx-font-size: 14px;"/>

</VBox>

<VBox spacing="8" alignment="CENTER">

<Label text="🎯 Estados" style="-fx-font-weight: bold; -fx-font-size: 16px;"/>

<HBox spacing="20" alignment="CENTER">

<HBox spacing="8" alignment="CENTER">

<Label text="●" style="-fx-text-fill: #28a745; -fx-font-size: 18px;"/>

<Label text="Confirmada" style="-fx-font-size: 13px;"/>

</HBox>

<HBox spacing="8" alignment="CENTER">

<Label text="●" style="-fx-text-fill: #ffc107; -fx-font-size: 18px;"/>

<Label text="Pendiente" style="-fx-font-size: 13px;"/>

</HBox>

</HBox>

</VBox>

</HBox>

</VBox>

</VBox>

</content>

</ScrollPane>

</children>

</AnchorPane>