@extends('admin.layouts.master')

@section('title', 'Horarios Bloqueados - Lash Vanshy')

@section('page-title', 'Horarios Bloqueados')

@section('content')
<!-- Breadcrumb -->
<nav aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
        <li class="breadcrumb-item active" aria-current="page">Horarios Bloqueados</li>
    </ol>
</nav>

<!-- Actions & Filters -->
<div class="card-admin mb-4">
    <div class="card-body">
        <div class="filters-bar">
            <form method="GET" class="d-flex gap-3 flex-wrap align-items-center">
                <div class="search-box">
                    <i class="fas fa-calendar"></i>
                    <input type="date" name="fecha" class="form-control" 
                           value="{{ request('fecha') }}">
                </div>
                
                <button type="submit" class="btn btn-primary-admin">
                    <i class="fas fa-filter me-2"></i>Filtrar
                </button>
                
                @if(request('fecha'))
                <a href="{{ route('admin.horarios.index') }}" class="btn btn-secondary-admin">
                    <i class="fas fa-times me-2"></i>Limpiar
                </a>
                @endif
            </form>
            
            <div class="d-flex gap-2 ms-auto">
                <a href="{{ route('admin.horarios.create') }}" class="btn btn-primary-admin">
                    <i class="fas fa-plus me-2"></i>Bloquear Horario
                </a>
                <a href="{{ route('admin.citas.index') }}" class="btn btn-secondary-admin">
                    <i class="fas fa-arrow-left me-2"></i>Volver a Citas
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Horarios Table -->
<div class="card-admin">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span>
            <i class="fas fa-clock me-2"></i>Horarios Bloqueados
        </span>
        <span class="text-muted small">
            Total: {{ $bloqueados->total() }} bloqueos
        </span>
    </div>
    <div class="card-body p-0">
        @if($bloqueados->isEmpty())
        <div class="empty-state">
            <i class="fas fa-calendar-check"></i>
            <h4>No hay horarios bloqueados</h4>
            <p>No se encontraron horarios bloqueados.</p>
            <a href="{{ route('admin.horarios.create') }}" class="btn btn-primary-admin mt-3">
                <i class="fas fa-plus me-2"></i>Bloquear Primer Horario
            </a>
        </div>
        @else
        <div class="table-responsive">
            <table class="table-admin">
                <thead>
                    <tr>
                        <th>Fecha</th>
                        <th>Hora Inicio</th>
                        <th>Hora Fin</th>
                        <th>Motivo</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($bloqueados as $bloqueado)
                    <tr>
                        <td>
                            <span class="fw-bold">
                                <i class="fas fa-calendar-alt me-1 text-primary"></i>
                                {{ \Carbon\Carbon::parse($bloqueado->fecha)->format('d/m/Y') }}
                            </span>
                            <span class="text-muted small d-block">
                                {{ \Carbon\Carbon::parse($bloqueado->fecha)->format('l') }}
                            </span>
                        </td>
                        <td>{{ \Carbon\Carbon::parse($bloqueado->hora_inicio)->format('h:i A') }}</td>
                        <td>{{ \Carbon\Carbon::parse($bloqueado->hora_fin)->format('h:i A') }}</td>
                        <td>
                            @if($bloqueado->motivo)
                            <span class="text-muted">{{ $bloqueado->motivo }}</span>
                            @else
                            <span class="text-muted">-</span>
                            @endif
                        </td>
                        <td>
                            <div class="actions">
                                <a href="{{ route('admin.horarios.edit', $bloqueado) }}" 
                                   class="btn btn-sm btn-secondary-admin" 
                                   title="Editar">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form action="{{ route('admin.horarios.destroy', $bloqueado) }}" method="POST" 
                                      onsubmit="return confirm('¿Estás seguro de desbloquear este horario?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-danger-admin" title="Eliminar">
                                        <i class="fas fa-unlock"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        <div class="pagination-wrapper p-3">
            {{ $bloqueados->withQueryString()->links() }}
        </div>
        @endif
    </div>
</div>

<!-- Info Box -->
<div class="alert alert-info mt-4">
    <i class="fas fa-info-circle me-2"></i>
    <strong>Nota:</strong> Los horarios bloqueados impedirán que se agenden citas en esos horarios. 
    Utilice esta función para bloquear días completos o tramos específicos (ej: vacaciones, mantenimiento).
</div>
@endsection