@extends('layouts.adminnav')

@section('title', 'Admin Timetable Management')

@section('content')
<style>
    .bg-custom-header {
        background: linear-gradient(135deg, #2c2a4a 0%, #4a4773 100%);
        color: white;
        border-radius: 12px;
    }

    /* Badge Colors matching the design */
    .badge-type {
        font-size: 11px;
        font-weight: 600;
        padding: 3px 12px;
        border-radius: 12px;
        letter-spacing: 0.3px;
        display: inline-block;
    }
    .badge-theory { background-color: #1e2035; color: #ffffff; }
    .badge-practical { background-color: #6b1d1d; color: #ffffff; }
    .badge-workshop { background-color: #ea580c; color: #ffffff; }
    .badge-exam { background-color: #ca8a04; color: #ffffff; }

    /* Table Custom Styles */
    .table-timetable {
        border-collapse: separate;
        border-spacing: 0;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        overflow: hidden;
    }
    .table-timetable th {
        text-align: center;
        vertical-align: middle;
        font-weight: 700;
        padding: 14px 10px;
        color: #334155;
        background-color: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
    }
    .table-timetable td {
        text-align: center;
        vertical-align: middle;
        height: 90px;
        padding: 6px;
        border-bottom: 1px solid #e2e8f0;
        border-right: 1px solid #e2e8f0;
    }
    .table-timetable tr:last-child td {
        border-bottom: none;
    }
    .table-timetable td:last-child {
        border-right: none;
    }

    /* Cell Hover & Click */
    .timetable-cell {
        cursor: pointer;
        padding: 8px;
        border-radius: 8px;
        transition: all 0.2s ease-in-out;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .timetable-cell:hover {
        background-color: #f1f5f9;
        transform: translateY(-1px);
    }

    /* Today's Red Header Highlight */
    .today-header {
        background-color: #d9383a !important;
        color: white !important;
    }
</style>

<div class="container-fluid py-4">

    <!-- Header Banner -->
    <div class="p-4 mb-4 bg-custom-header shadow-sm d-flex justify-content-between align-items-center">
        <div>
            <h3 class="fw-bold mb-1"><i class="fa-solid fa-calendar-days me-2"></i>My Class Timetable</h3>
            <p class="mb-0 text-white-50 small">Automobile Engineering Academy Timetable Management</p>
        </div>
    </div>

    <!-- Alert Messages -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
            <i class="fa-solid fa-circle-check me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row g-4 mb-4">
        <!-- Today's Schedule Card -->
        <div class="col-lg-5">
            <div class="card border-0 shadow-sm rounded-3 h-100">
                <div class="card-header bg-white py-3 border-0">
                    <h6 class="fw-bold mb-0 text-danger">
                        <i class="fa-solid fa-clock me-2"></i>Today's Schedule ({{ $today }})
                    </h6>
                </div>
                <div class="card-body">
                    @forelse($todaySchedule as $item)
                        <div class="p-3 mb-2 bg-light rounded border-start border-4 border-danger d-flex justify-content-between align-items-center">
                            <div>
                                <span class="badge badge-type badge-{{ strtolower($item->type) }} mb-1">{{ $item->type }}</span>
                                <h6 class="fw-bold mb-0 text-dark">{{ $item->subject_name }}</h6>
                            </div>
                            <small class="text-muted fw-bold">{{ $item->time_slot }}</small>
                        </div>
                    @empty
                        <p class="text-muted text-center py-4 mb-0">No classes scheduled for today.</p>
                    @endforelse
                </div>
            </div>
        </div>

        <!-- Legend Card -->
        <div class="col-lg-7">
            <div class="card border-0 shadow-sm rounded-3 h-100">
                <div class="card-header bg-white py-3 border-0">
                    <h6 class="fw-bold mb-0 text-primary">
                        <i class="fa-solid fa-layer-group me-2"></i>Timetable Legend
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-flex flex-wrap gap-2 mb-3">
                        <span class="badge badge-type badge-theory">Theory</span>
                        <span class="badge badge-type badge-practical">Practical</span>
                        <span class="badge badge-type badge-workshop">Workshop</span>
                        <span class="badge badge-type badge-exam">Exam</span>
                    </div>
                    <hr>
                    <p class="text-muted small mb-0">
                        <i class="fa-solid fa-hand-pointer me-1 text-primary"></i> <strong>How to Edit / Add:</strong> Click on any timetable slot in the table below to add or edit class details.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Timetable Grid -->
    <div class="card border-0 shadow-sm rounded-3">
        <div class="card-body p-3">
            <div class="table-responsive">
                <table class="table table-timetable mb-0 align-middle">
                    <thead>
                        <tr>
                            <th style="width: 15%;">Time</th>
                            @foreach($days as $day)
                                <th class="{{ strtolower($today) == strtolower($day) ? 'today-header' : '' }}">
                                    {{ $day }} {{ strtolower($today) == strtolower($day) ? '(Today)' : '' }}
                                </th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($timeSlots as $slot)
                            <tr>
                                <!-- Time Column -->
                                <td class="fw-bold text-secondary bg-light" style="font-size: 13px;">{{ $slot }}</td>

                                @if($slot == '12:30 - 01:30')
                                    <!-- Lunch / Rest Time Row -->
                                    <td colspan="5" class="bg-light text-center fw-bold text-secondary py-3" style="letter-spacing: 0.5px;">
                                        🍱 LUNCH BREAK / REST TIME
                                    </td>
                                @else
                                    <!-- Days Columns -->
                                    @foreach($days as $day)
                                        @php
                                            $item = $grid[$slot][$day] ?? null;
                                        @endphp
                                        <td>
                                            <div class="timetable-cell" 
                                                 data-bs-toggle="modal" 
                                                 data-bs-target="#editSlotModal"
                                                 onclick="openEditModal('{{ $day }}', '{{ $slot }}', '{{ $item->subject_name ?? '' }}', '{{ $item->type ?? 'Theory' }}', '{{ $item->id ?? '' }}')">
                                                
                                                @if($item)
                                                    <span class="badge badge-type badge-{{ strtolower($item->type) }} mb-1">
                                                        {{ $item->type }}
                                                    </span>
                                                    <div class="fw-bold text-dark small">{{ $item->subject_name }}</div>
                                                @else
                                                    <span class="text-muted small opacity-50"><i class="fa-solid fa-plus text-primary me-1"></i>Add</span>
                                                @endif

                                            </div>
                                        </td>
                                    @endforeach
                                @endif
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal for Edit / Add Slot -->
<div class="modal fade" id="editSlotModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-custom-header text-white">
                <h5 class="modal-title" id="modalTitle"><i class="fa-solid fa-pen-to-square me-2"></i>Update Timetable Slot</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('admin.timetable.store') }}" method="POST">
                @csrf
                <input type="hidden" name="day" id="modal_day">
                <input type="hidden" name="time_slot" id="modal_time_slot">

                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Day & Time Slot</label>
                        <input type="text" id="display_day_time" class="form-control bg-light" readonly>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold">Subject Name</label>
                        <input type="text" name="subject_name" id="modal_subject" class="form-control" placeholder="e.g. Engine Fundamentals" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold">Subject Type</label>
                        <select name="type" id="modal_type" class="form-select" required>
                            <option value="Theory">Theory</option>
                            <option value="Practical">Practical</option>
                            <option value="Workshop">Workshop</option>
                            <!-- <option value="Exam">Exam</option> -->
                        </select>
                    </div>
                </div>

                <div class="modal-footer d-flex justify-content-between">
                    <button type="button" id="clearBtn" class="btn btn-outline-danger d-none" onclick="clearSlotData()">
                        <i class="fa-solid fa-trash me-1"></i> Clear Slot
                    </button>
                    <div>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-success"><i class="fa-solid fa-floppy-disk me-1"></i> Save Changes</button>
                    </div>
                </div>
            </form>

            <!-- Hidden Form to Clear Slot -->
            <form id="deleteSlotForm" method="POST" class="d-none">
                @csrf
                @method('DELETE')
            </form>
        </div>
    </div>
</div>

<script>
    var currentSlotId = null;

    function openEditModal(day, timeSlot, subject, type, id) {
        document.getElementById('modal_day').value = day;
        document.getElementById('modal_time_slot').value = timeSlot;
        document.getElementById('display_day_time').value = day + ' (' + timeSlot + ')';
        document.getElementById('modal_subject').value = subject;
        document.getElementById('modal_type').value = type || 'Theory';

        currentSlotId = id;
        var clearBtn = document.getElementById('clearBtn');
        var modalTitle = document.getElementById('modalTitle');

        if(id) {
            clearBtn.classList.remove('d-none');
            modalTitle.innerHTML = '<i class="fa-solid fa-pen-to-square me-2"></i>Edit Class Slot';
        } else {
            clearBtn.classList.add('d-none');
            modalTitle.innerHTML = '<i class="fa-solid fa-plus me-2"></i>Add Class Slot';
        }
    }

    function clearSlotData() {
        if(currentSlotId && confirm('Are you sure you want to clear this timetable slot?')) {
            var form = document.getElementById('deleteSlotForm');
            form.action = "/admin/timetable/delete/" + currentSlotId;
            form.submit();
        }
    }
</script>
@endsection