@extends('layouts.yellow')
@section('content')
<style>
    :root {
        --azul-primario: #2A4E6D;
        --azul-secundario: #3B6EA5;
        --azul-destacado: #4A90E2;
        --azul-suave: #E3F2FD;
        --degradado-azul: linear-gradient(135deg, #4A90E2 0%, #2A4E6D 100%);
        --amarillo-primario: #FFD54F;
        --amarillo-secundario: #FFECB3;
        --naranja-destacado: #FF9800;
        --verde-exito: #4CAF50;
        --rojo-error: #F44336;
        --gris-claro: #F5F7FA;
        --gris-medio: #E1E5E9;
        --gris-oscuro: #6C757D;
        --borde-principal: #D0D7DE;
        --sombra-suave: 0 4px 12px rgba(0, 0, 0, 0.05);
        --sombra-media: 0 6px 16px rgba(0, 0, 0, 0.08);
        --sombra-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
        --transicion: all 0.3s ease;
        --fuente-principal: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        --rojo-primario: #c30d0d;
    }

    .schedules-container {
        font-family: var(--fuente-principal);
        padding: 20px 0;
    }

    .schedules-card {
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid #dee2e6;
        box-shadow: var(--sombra-suave);
        transition: var(--transicion);
    }

    .schedules-card:hover {
        box-shadow: var(--sombra-media);
    }

    .schedules-header {
        background: var(--degradado-azul);
        color: white;
        border-bottom: 1px solid #dee2e6;
        padding: 15px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .schedules-header h5 {
        font-weight: 600;
        color: white;
        margin-bottom: 0;
    }

    .btn-add {
        background-color: white;
        border-color: white;
        color: var(--azul-primario);
        border-radius: 4px;
        transition: var(--transicion);
        padding: 8px 15px;
        font-weight: 500;
    }

    .btn-add:hover {
        background-color: var(--amarillo-primario);
        border-color: var(--amarillo-primario);
        color: var(--azul-primario);
        transform: translateY(-2px);
        box-shadow: var(--sombra-suave);
    }

    .btn-add i {
        margin-right: 5px;
    }

    .schedules-body {
        padding: 20px;
    }

    .schedules-table {
        width: 100%;
        margin-bottom: 0;
    }

    .schedules-table thead th {
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        color: var(--gris-oscuro);
        font-weight: 600;
        padding: 12px 15px;
    }

    .schedules-table tbody tr {
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        transition: var(--transicion);
    }

    .schedules-table tbody tr:hover {
        background-color: rgba(74, 144, 226, 0.05);
    }

    .schedules-table td {
        padding: 12px 15px;
        vertical-align: middle;
    }

    .badge-status {
        padding: 5px 10px;
        border-radius: 30px;
        font-weight: 500;
        font-size: 0.85rem;
    }

    .badge-active {
        background-color: rgba(76, 175, 80, 0.15);
        color: var(--verde-exito);
    }

    .badge-inactive {
        background-color: rgba(244, 67, 54, 0.15);
        color: var(--rojo-error);
    }

    .btn-group .btn {
        margin: 0 2px;
        border-radius: 4px;
        padding: 6px 10px;
    }

    .btn-edit {
        background-color: var(--azul-destacado);
        border-color: var(--azul-destacado);
        color: white;
    }

    .btn-edit:hover {
        background-color: var(--azul-secundario);
        border-color: var(--azul-secundario);
    }

    .btn-delete {
        background-color: var(--rojo-error);
        border-color: var(--rojo-error);
        color: white;
    }

    .btn-delete:hover {
        background-color: #d32f2f;
        border-color: #d32f2f;
    }

    .no-schedules {
        padding: 30px;
        text-align: center;
        color: var(--gris-oscuro);
        background-color: #f8f9fa;
        border-radius: 8px;
    }

    .no-schedules i {
        font-size: 2rem;
        color: var(--gris-medio);
        margin-bottom: 10px;
    }
</style>

<div class="schedules-container">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="schedules-card">
                    <div class="schedules-header">
                        <h5>{{ __('Horarios de Doctores') }}</h5>
                    </div>

                    <div class="schedules-body">
                        @if (session('success'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                {{ session('success') }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endif

                        @if (session('error'))
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                {{ session('error') }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endif

                        @if(count($schedules) > 0)
                            <div class="table-responsive">
                                <table class="schedules-table">
                                    <thead>
                                        <tr>
                                            <th>{{ __('Doctor.') }}</th>
                                            <th>{{ __('Día') }}</th>
                                            <th>{{ __('Hora Inicio') }}</th>
                                            <th>{{ __('Hora Fin') }}</th>
                                            <th>{{ __('Zona Horaria') }}</th>
                                            <th>{{ __('Estado') }}</th>
                                            <th class="text-center">{{ __('Acciones') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($schedules as $schedule)
                                            <tr>
                                                <td>{{ $schedule->doctor->name }} {{ $schedule->doctor->lastname }}</td>
                                                <td>{{ $schedule->day_name }}</td>
                                                <td>{{ date('h:i A', strtotime($schedule->start_time)) }}</td>
                                                <td>{{ date('h:i A', strtotime($schedule->end_time)) }}</td>
                                                <td>{{ $schedule->timezone }}</td>
                                                <td>
                                                    @if($schedule->active)
                                                        <span class="badge-status badge-active">{{ __('Activo') }}</span>
                                                    @else
                                                        <span class="badge-status badge-inactive">{{ __('Inactivo') }}</span>
                                                    @endif
                                                </td>
                                                <td class="text-center">
                                                    <div class="btn-group">
                                                        <a href="{{ route('doctor.schedules.edit', $schedule->id) }}" class="btn btn-edit btn-sm">
                                                            <i class="fas fa-edit"></i>
                                                        </a>
                                                        <button type="button" class="btn btn-delete btn-sm" onclick="confirmDelete('{{ $schedule->id }}')">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </div>
                                                    <form id="delete-form-{{ $schedule->id }}" 
                                                        action="{{ route('doctor.schedules.destroy', $schedule->id) }}" 
                                                        method="POST" style="display: none;">
                                                        @csrf
                                                        @method('DELETE')
                                                    </form>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <div class="no-schedules">
                                <i class="fas fa-calendar-times"></i>
                                <p>{{ __('No hay horarios registrados') }}</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    function confirmDelete(id) {
        if (confirm("{{ __('¿Está seguro que desea eliminar este horario?') }}")) {
            document.getElementById('delete-form-' + id).submit();
        }
    }
</script>
@endsection 