@extends('layout.layout')

@section('content')
@include('components.alert')
<section class="my-4">
    <div class="container-fluid">
        <div class="card" style="border-radius: 50px;">
            <div class="card-body d-flex justify-content-between align-items-center">
                <a href="{{ route('staffs.index') }}" class="d-flex align-items-center gap-2 fs-5">
                    <iconify-icon icon="mdi:arrow-left"></iconify-icon>
                    <div>Show Employee</div>
                </a>

            </div>
        </div>
    </div>
</section>

<section>
    <div class="container-fluid">
        <div class="card mt-3" style="border-radius: 50px;">
            <div class="card-body">
                <div class="row">
                    <!-- Sidebar Tabs (Left Column) -->
                    <div class="col-md-2" style="padding: 2vh !important;">
                        <div class="nav flex-column nav-pills" id="staffTabs" role="tablist"
                            aria-orientation="vertical">
                            <button class="nav-link active custom-nav-link" id="basic-info-tab" data-bs-toggle="pill"
                                data-bs-target="#basic-info" type="button" role="tab">Personal Details</button>
                            <button class="nav-link custom-nav-link" id="summary-tab" data-bs-toggle="pill"
                                data-bs-target="#summary" type="button" role="tab">Summary</button>
                            @if ($staff->department && strtolower($staff->department->name) === 'teacher')
                            <button class="nav-link custom-nav-link" id="teacher_slots-tab" data-bs-toggle="pill"
                                data-bs-target="#teacher_slots" type="button" role="tab">Teacher
                                Shift</button>
                            @endif
                            <button class="nav-link custom-nav-link" id="tester_slots-tab" data-bs-toggle="pill"
                                data-bs-target="#tester_slots" type="button" role="tab">Tester
                                Shift</button>
                        </div>
                    </div>
                    <div class="col-md-1">
                        <div style="width:1px; background-color:#dee2e6; height: 100%;"></div>
                    </div>
                    <!-- Tab Content (Right Column) -->
                    <div class="col-md-9">
                        <div class="tab-content" id="staffTabsContent">
                            @include('dashboard.staff.show_tabs.basic_info')
                            @include('dashboard.staff.show_tabs.summary')
                            @if ($staff->jobTitle && strtolower($staff->jobTitle->name) === 'teacher')
                            @include('dashboard.staff.show_tabs.teacher_slots')
                            @endif
                            @if ($staff->jobTitle && strtolower($staff->jobTitle->name) === 'tester')
                            @include('dashboard.staff.show_tabs.tester_slots')
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<style>
    .select2-container {
        display: block !important;
    }

    span {
        display: block !important;
    }

    .nav-pills .nav-link {
        padding: 1.5vh !important;
        margin-bottom: 1vh !important;
        border-radius: 15px !important;
    }

    .custom-nav-link {
        background-color: #f2f2f2 !important;
        color: #303030 !important;
        margin-top: 5px !important;
        font-weight: 500 !important;
    }

    .custom-nav-link.active {
        background-color: #8a8a8a !important;
        color: #fff !important;
        margin-top: 5px !important;
        font-weight: 500 !important;
    }

    @media (min-width: 768px) {
        .col-md-1 {
            flex: 0 0 auto !important;
            width: 2% !important;
        }
    }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
{{-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> --}}

<script>
    var $locale = '{{ app()->getLocale() }}';

    $(document).ready(function() {
        fetchSlots($('#department_id').val(), '{{ $staff->id ?? 0 }}', '#tester_slots');

        function fetchSlots(departmentId, staffId, targetTab) {
            if (!departmentId) {
                $(targetTab).html('<p>Please select a department.</p>');
                return;
            }
            $.ajax({
                url: '/slots-by-department/' + departmentId + '/' + (staffId || 0),
                type: 'GET',
                success: function(response) {
                    if (response.success) {
                        renderSlots(response.slots, response.selectedSlots, targetTab);
                    } else {
                        $(targetTab).html('<p>Failed to load slots: ' + response.message + '</p>');
                    }
                },
                error: function(xhr) {
                    $(targetTab).html('<p>Error fetching slots. Please try again.</p>');
                }
            });
        }
    });
    // Store slots globally to access in event handlers
    let currentSlots = [];

    function renderSlots(slots, selectedSlots, targetTab) {
        currentSlots = slots;
        const daysOfWeek = ['Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday'];
        const morningSlots = slots.filter(slot => new Date('1970-01-01T' + slot.slot_start).getHours() < 16.30);
        const nightSlots = slots.filter(slot => new Date('1970-01-01T' + slot.slot_start).getHours() >= 17.30);

        const groupedMorning = {};
        const groupedNight = {};
        morningSlots.forEach(slot => {
            const timeRange = `${formatTime(slot.slot_start)} - ${formatTime(slot.slot_end)}`;
            if (!groupedMorning[timeRange]) groupedMorning[timeRange] = [];
            groupedMorning[timeRange].push(slot);
        });
        nightSlots.forEach(slot => {
            const timeRange = `${formatTime(slot.slot_start)} - ${formatTime(slot.slot_end)}`;
            if (!groupedNight[timeRange]) groupedNight[timeRange] = [];
            groupedNight[timeRange].push(slot);
        });
        let html = `
        <div class="row g-3">
            <!-- Morning Shift Table -->
            <div class="table-responsive">
                <div class="fw-bold">Morning Shift</div>
                <table class="table table-bordered table-sm table bordered-table sm-table mb-0">
                    <thead class="table-primary">
                        <tr>
                            <th>Time Slot</th>
                            ${daysOfWeek.map(day => `<th>${day}</th>`).join('')}
                        </tr>
                    </thead>
                    <tbody>
                        ${Object.entries(groupedMorning).length === 0 ?
                            `<tr><td colspan="${daysOfWeek.length + 1}" class="text-center">No morning slots found</td></tr>` :
                            Object.entries(groupedMorning).map(([timeRange, slots]) => `
                                <tr>
                                    <td><strong>${timeRange}</strong></td>
                                    ${daysOfWeek.map(day => {
                                        const slot = slots.find(s => s.slot_day.toLowerCase() === day.toLowerCase());
                                        return `
                                            <td>
                                                ${slot ? `
                                                    <div class="form-check justify-content-center d-flex">
                                                        <input disabled class="form-check-input slot-checkbox" type="checkbox"
                                                            name="selected_slots[]" value="${slot.id}"
                                                            id="slot_${slot.id}"
                                                            ${selectedSlots.includes(slot.id) ? 'checked' : ''}>
                                                    </div>
                                                ` : ''}
                                            </td>
                                        `;
                                    }).join('')}
                                </tr>
                            `).join('')}
                    </tbody>
                </table>
            </div>
            <!-- Night Shift Table -->
            <div class="table-responsive">
                <div class="fw-bold">Night Shift</div>
                <table class="table table-bordered table-sm table bordered-table sm-table mb-0">
                    <thead class="table-danger">
                        <tr>
                            <th>Time Slot</th>
                            ${daysOfWeek.map(day => `<th>${day}</th>`).join('')}
                        </tr>
                    </thead>
                    <tbody>
                        ${Object.entries(groupedNight).length === 0 ?
                            `<tr><td colspan="${daysOfWeek.length + 1}" class="text-center">No night slots found</td></tr>` :
                            Object.entries(groupedNight).map(([timeRange, slots]) => `
                                <tr>
                                    <td><strong>${timeRange}</strong></td>
                                    ${daysOfWeek.map(day => {
                                        const slot = slots.find(s => s.slot_day.toLowerCase() === day.toLowerCase());
                                        return `
                                            <td>
                                                ${slot ? `
                                                    <div class="form-check justify-content-center d-flex">
                                                        <input disabled class="form-check-input slot-checkbox" type="checkbox"
                                                            name="selected_slots[]" value="${slot.id}"
                                                            id="slot_${slot.id}"
                                                            ${selectedSlots.includes(slot.id) ? 'checked' : ''}>
                                                    </div>
                                                ` : ''}
                                            </td>
                                        `;
                                    }).join('')}
                                </tr>
                            `).join('')}
                    </tbody>
                </table>
            </div>
        </div>
    `;

        $(targetTab).html(html);

        // Add paired day selection logic only for #teacher_slots
        if (targetTab === '#teacher_slots') {
            setupPairedDaySelection();
        }
    }

    function formatTime(time) {
        const date = new Date(`1970-01-01T${time}`);
        return date.toLocaleTimeString('en-US', {
            hour: '2-digit',
            minute: '2-digit',
            hour12: true
        });
    }



    function setupPairedDaySelection() {
        const dayPairs = {
            'saturday': 'tuesday',
            'tuesday': 'saturday',
            'sunday': 'wednesday',
            'wednesday': 'sunday',
            'monday': 'thursday',
            'thursday': 'monday'
        };

        $('#teacher_slots').on('change', '.slot-checkbox', function() {
            const slotId = parseInt($(this).val());
            const isChecked = $(this).is(':checked');
            const currentSlot = currentSlots.find(slot => slot.id === slotId);

            if (!currentSlot) return;

            const pairedDay = dayPairs[currentSlot.slot_day.toLowerCase()];
            if (!pairedDay) return;

            const pairedSlot = currentSlots.find(slot =>
                slot.slot_day.toLowerCase() === pairedDay &&
                slot.slot_start === currentSlot.slot_start &&
                slot.slot_end === currentSlot.slot_end
            );

            if (pairedSlot) {
                $(`#slot_${pairedSlot.id}`).prop('checked', isChecked);
            }
        });
    }

    function findPairedSlot(slotId) {
        const dayPairs = {
            'saturday': 'tuesday',
            'tuesday': 'saturday',
            'sunday': 'wednesday',
            'wednesday': 'sunday',
            'monday': 'thursday',
            'thursday': 'monday'
        };

        const currentSlot = currentSlots.find(slot => slot.id === slotId);
        if (!currentSlot) return null;

        const pairedDay = dayPairs[currentSlot.slot_day.toLowerCase()];
        if (!pairedDay) return null;

        return currentSlots.find(slot =>
            slot.slot_day.toLowerCase() === pairedDay &&
            slot.slot_start === currentSlot.slot_start &&
            slot.slot_end === currentSlot.slot_end
        );
    }
</script>