@extends('dashboard.layouts.app')

@section('title', __('dashboard.Schedules'))
@section('page_heading', __('dashboard.Schedules'))

@section('breadcrumb')
    <li class="breadcrumb-item text-muted">
        <a href="{{ route('dashboard.home') }}" class="text-muted text-hover-primary">{{ __('dashboard.Home') }}</a>
    </li>
    <li class="breadcrumb-item text-muted">{{ __('dashboard.Schedules') }}</li>
@endsection

@section('content')
<div class="card">
    <div class="card-header">
        <h3 class="card-title">{{ __('dashboard.Schedules') }}</h3>
        <div class="card-toolbar">
            <a href="{{ route('dashboard.schedules.create') }}" class="btn btn-sm btn-primary me-2">
                <i class="bi bi-plus-lg fs-2"></i> {{ __('dashboard.Create Schedule') }}
            </a>
            <button class="btn btn-sm btn-light btn-active-light-primary" type="button" data-bs-toggle="collapse"
                data-bs-target="#filter-collapse" aria-expanded="{{ request()->except('page') ? 'true' : 'false' }}"
                aria-controls="filter-collapse">
                <i class="bi bi-funnel-fill fs-5 me-1"></i> {{ __('dashboard.Filter') }}
            </button>
        </div>
    </div>
    <div class="card-body">
        <div class="collapse {{ request()->except('page') ? 'show' : '' }}" id="filter-collapse">
            <div class="card card-body mb-5 p-5 border rounded">
                <form action="{{ route('dashboard.schedules.index') }}" method="GET" id="filter-form">
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <label for="search" class="form-label">{{ __('dashboard.Search') }}</label>
                            <input type="text" name="search" id="search" class="form-control form-control-solid"
                                value="{{ request('search') }}" placeholder="{{ __('dashboard.Search') }}...">
                        </div>

                        <div class="col-md-3 mb-3">
                            <label for="teacher_id" class="form-label">{{ __('dashboard.Teacher') }}</label>
                            <select name="teacher_id" id="teacher_id" class="form-select form-select-solid"
                                data-control="select2" data-placeholder="{{ __('dashboard.Select Teacher') }}"
                                data-allow-clear="true">
                                <option value=""></option>
                                @foreach($teachers as $teacher)
                                    <option value="{{ $teacher->id }}"
                                        {{ request('teacher_id') == $teacher->id ? 'selected' : '' }}>
                                        {{ $teacher->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-3 mb-3">
                            <label for="status" class="form-label">{{ __('dashboard.Status') }}</label>
                            <select name="status" id="status" class="form-select form-select-solid"
                                data-control="select2" data-placeholder="{{ __('dashboard.Select Status') }}"
                                data-allow-clear="true">
                                <option value=""></option>
                                <option value="available" {{ request('status') == 'available' ? 'selected' : '' }}>
                                    {{ __('dashboard.Available') }}</option>
                                <option value="scheduled" {{ request('status') == 'scheduled' ? 'selected' : '' }}>
                                    {{ __('dashboard.Scheduled') }}</option>
                                <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>
                                    {{ __('dashboard.Completed') }}</option>
                                <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>
                                    {{ __('dashboard.Cancelled') }}</option>
                            </select>
                        </div>

                        <div class="col-md-3 mb-4">
                            <label class="form-label" for="sort">{{ __('dashboard.Sort') }}</label>
                            <select name="sort" id="sort" class="form-select form-select-solid" data-control="select2"
                                data-placeholder="{{ __('dashboard.Select an option') }}" data-allow-clear="true">
                                <option value=""></option>
                                <option value="created_at" {{ request('sort') == 'created_at' ? 'selected' : '' }}>
                                    {{ __('dashboard.Created At') }}</option>
                                <option value="id" {{ request('sort') == 'id' ? 'selected' : '' }}>ID</option>
                                <option value="start_date" {{ request('sort') == 'start_date' ? 'selected' : '' }}>
                                    {{ __('dashboard.Start Date') }}
                                </option>
                                <option value="status" {{ request('sort') == 'status' ? 'selected' : '' }}>
                                    {{ __('dashboard.Status') }}
                                </option>
                            </select>
                        </div>

                        <div class="col-md-3 mb-4">
                            <label class="form-label" for="direction">{{ __('dashboard.Direction') }}</label>
                            <select name="direction" id="direction" class="form-select form-select-solid"
                                data-control="select2" data-placeholder="{{ __('dashboard.Select an option') }}"
                                data-allow-clear="true">
                                <option value=""></option>
                                <option value="desc" {{ request('direction') == 'desc' ? 'selected' : '' }}>
                                    {{ __('dashboard.Descending') }}</option>
                                <option value="asc" {{ request('direction') == 'asc' ? 'selected' : '' }}>
                                    {{ __('dashboard.Ascending') }}</option>
                            </select>
                        </div>
                        <div class="col-md-3 mb-4">
                            <label class="form-label" for="per_page">{{ __('dashboard.Per Page') }}</label>
                            <select name="per_page" id="per_page" class="form-select form-select-solid"
                                data-control="select2" data-placeholder="{{ __('dashboard.Select an option') }}"
                                data-allow-clear="true">
                                <option value=""></option>
                                <option value="10" {{ request('per_page') == '10' ? 'selected' : '' }}>10</option>
                                <option value="25" {{ request('per_page') == '25' ? 'selected' : '' }}>25</option>
                                <option value="50" {{ request('per_page') == '50' ? 'selected' : '' }}>50</option>
                                <option value="100" {{ request('per_page') == '100' ? 'selected' : '' }}>100</option>
                            </select>
                        </div>

                        <div class="col-md-12 text-end">
                            <a href="{{ route('dashboard.schedules.index') }}"
                                class="btn btn-sm btn-secondary me-2">{{ __('dashboard.Reset') }}</a>
                            <button type="submit" class="btn btn-sm btn-primary">{{ __('dashboard.Filter') }}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        @if($schedules->isEmpty())
            <div class="alert alert-info">
                {{ __('dashboard.No schedules found') }}.
            </div>
        @else
            <div class="table-responsive">
                <table class="table table-striped table-row-bordered align-middle gy-5 gs-7">
                    <thead>
                        <tr class="fw-bold fs-6 text-gray-800">
                            <th>{{ __('dashboard.ID') }}</th>
                            <th>{{ __('dashboard.Name') }}</th>
                            <th>{{ __('dashboard.Teacher') }}</th>
                            <th>{{ __('dashboard.Status') }}</th>
                            <th>{{ __('dashboard.Start Date') }}</th>
                            <th>{{ __('dashboard.End Date') }}</th>
                            <th class="text-center">{{ __('dashboard.Subscribers') }}</th>
                            <th class="text-center">{{ __('dashboard.Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($schedules as $schedule)
                            <tr>
                                <td>{{ $schedule->id }}</td>
                                <td>{{ $schedule->item_name ?? ($schedule->trackLevel->name ?? $schedule->item->name ?? 'Unnamed') }}</td>
                                <td>
                                    @if($schedule->teacher)
                                        {{ $schedule->teacher->name }}
                                    @else
                                        {{ __('dashboard.No Teacher Assigned') }}
                                    @endif
                                </td>
                                <td>
                                    <span @class([
                                        'badge',
                                        'badge-light-success' => $schedule->status === 'scheduled',
                                        'badge-light-warning' => $schedule->status === 'pending',
                                        'badge-light-danger' => $schedule->status === 'cancelled',
                                        'badge-light-info' => $schedule->status === 'rescheduled',
                                        'badge-light-primary' => $schedule->status === 'completed',
                                    ])>
                                        {{ __("dashboard." . ucfirst($schedule->status)) }}
                                    </span>
                                </td>
                                <td>{{ $schedule->start_date?->format('Y-m-d') ?? '-' }}</td>
                                <td>
                                    @php
                                        $weeklySlots = json_decode($schedule->weekly_slots, true);
                                        $slotsPerWeek = count($weeklySlots);
                                        $weeksNeeded = $slotsPerWeek ? ceil($schedule->sessions_count / $slotsPerWeek) : 0;
                                        $endDate = $schedule->start_date && $weeksNeeded ? $schedule->start_date->copy()->addWeeks($weeksNeeded)->subDay() : null;
                                    @endphp
                                    {{ $endDate?->format('Y-m-d') ?? '-' }}
                                </td>
                                <td class="text-center">
                                    <a href="{{ route('dashboard.schedules.subscribers', $schedule) }}" class="btn btn-sm btn-icon btn-light-info">
                                        <i class="bi bi-people-fill"></i>
                                        <span class="d-none d-sm-inline">{{ __('dashboard.Subscribers') }}</span>
                                    </a>
                                </td>
                                <td class="text-center">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-sm btn-secondary dropdown-toggle"
                                            data-bs-toggle="dropdown" aria-expanded="false">
                                            {{ __('dashboard.Actions') }}
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end">
                                            <li>
                                                <a class="dropdown-item"
                                                    href="{{ route('dashboard.schedules.show', $schedule) }}">
                                                    <i class="bi bi-eye-fill me-2"></i>{{ __('dashboard.View') }}
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item"
                                                    href="{{ route('dashboard.schedules.edit', $schedule) }}">
                                                    <i class="bi bi-pencil-fill me-2"></i>{{ __('dashboard.Edit') }}
                                                </a>
                                            </li>
                                            <li>
                                                <hr class="dropdown-divider">
                                            </li>
                                            <li>
                                                <form action="{{ route('dashboard.schedules.destroy', $schedule) }}"
                                                    method="POST" style="display: inline-block;">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="dropdown-item text-danger"
                                                        onclick="return confirm('{{ __('dashboard.Are you sure?') }}')">
                                                        <i class="bi bi-trash-fill me-2"></i>{{ __('dashboard.Delete') }}
                                                    </button>
                                                </form>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            {{ $schedules->appends(request()->query())->links() }}
        @endif
    </div>
</div>
@endsection

@section('scripts')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#status, #teacher_id, #sort, #direction, #per_page').select2({
                placeholder: $(this).data('placeholder') || "{{ __('dashboard.Select an option') }}",
                allowClear: true,
                theme: 'bootstrap-5',
                width: '100%'
            });

            // Adjust Select2 container styling
            $('.select2-container').addClass('form-control-solid').css('padding', '0');

            let filterApplied = {{ request()->except('page') ? 'true' : 'false' }};
            if (filterApplied) {
                $('#filter-collapse').collapse('show');
            }
        });
    </script>
@endsection