@extends('layout.layout')

@section('content')
    <section class="my-4">
        <div class="container-fluid">
            <div class="card px-4 py-3" style="border-radius: 50px;">
                <div class="d-flex justify-content-between align-items-center gap-2">
                    <button onclick="history.back()" class="btn d-flex align-items-center gap-2 p-0 h6 m-0">
                        <iconify-icon icon="mdi:arrow-left"></iconify-icon>
                        <div>Back</div>
                    </button>
                    <div class="d-flex gap-2">
                        <a href="{{ route('profile') }}" class="btn btn-sm rounded-pill">EDIT</a>
                        <a href="{{ route('changePassword') }}" class="btn btn-sm rounded-pill">Change Password</a>
                    </div>
                </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">
                            <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="contact-tab" data-bs-toggle="pill"
                                    data-bs-target="#contact_details" type="button" role="tab">Contact
                                    Details</button>
                                <button class="nav-link custom-nav-link" id="job-tab" data-bs-toggle="pill"
                                    data-bs-target="#job" type="button" role="tab">Job</button>
                                <button class="nav-link custom-nav-link" id="educations-tab" data-bs-toggle="pill"
                                    data-bs-target="#educations" type="button" role="tab">Educations</button>
                                <button class="nav-link custom-nav-link" id="work-experience-tab" data-bs-toggle="pill"
                                    data-bs-target="#work-experience" type="button" role="tab">Work
                                    Experience</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>
                                <button class="nav-link custom-nav-link" id="tickets-tab" data-bs-toggle="pill"
                                    data-bs-target="#tickets" type="button" role="tab">Tickets</button>
                                <button class="nav-link custom-nav-link" id="recorded_sessions-tab" data-bs-toggle="pill"
                                    data-bs-target="#recorded_sessions" type="button" role="tab">Recorded
                                    Sessions</button>
                                <button class="nav-link custom-nav-link" id="payslip-tab" data-bs-toggle="pill"
                                    data-bs-target="#payslip" type="button" role="tab">Payslip</button>
                                <button class="nav-link custom-nav-link" id="referrals-tab" data-bs-toggle="pill"
                                    data-bs-target="#referrals" type="button" role="tab">Referrals</button>
                                <button class="nav-link custom-nav-link" id="payroll-details-tab" data-bs-toggle="pill"
                                    data-bs-target="#payroll-details" type="button" role="tab">Payroll
                                    Details</button>
                                <button class="nav-link custom-nav-link" id="bank-info-tab" data-bs-toggle="pill"
                                    data-bs-target="#bank-info" type="button" role="tab">Bank Info</button>
                                <button class="nav-link custom-nav-link" id="social-links-tab" data-bs-toggle="pill"
                                    data-bs-target="#social-links" type="button" role="tab">Social Links</button>
                                <button class="nav-link custom-nav-link" id="document-info-tab" data-bs-toggle="pill"
                                    data-bs-target="#document-info" type="button" role="tab">Document
                                    Info</button>
                               
                                @if (strtoupper($staff->departments->name) == 'TEACHER')
                                    <button class="nav-link custom-nav-link" id="activities-tab" data-bs-toggle="pill"
                                        data-bs-target="#activities" type="button" role="tab">Activities</button>
                                    <button class="nav-link custom-nav-link" id="specilization-tab" data-bs-toggle="pill"
                                        data-bs-target="#specilization" type="button"
                                        role="tab">Specialization</button>
                                        <button class="nav-link custom-nav-link" id="slots-tab" data-bs-toggle="pill"
                                        data-bs-target="#teacher_slots" type="button" role="tab">Teacher Shift</button>
                                @endif
                                @if (strtoupper($staff->departments->name) == 'TESTER')
                                    <button class="nav-link custom-nav-link" id="slots-tab" data-bs-toggle="pill"
                                        data-bs-target="#tester_slots" type="button" role="tab">Tester Shift</button>
                                @endif
                            </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.contact_details')
                                @include('dashboard.staff.show_tabs.job')
                                @include('dashboard.staff.show_tabs.summary')
                                @include('dashboard.staff.show_tabs.tickets')
                                @include('dashboard.staff.show_tabs.recorded_sessions')
                                @include('dashboard.staff.show_tabs.payslip')
                                @include('dashboard.staff.show_tabs.referrals')
                                @include('dashboard.staff.show_tabs.payroll')
                                @include('dashboard.staff.show_tabs.bank_info')
                                @include('dashboard.staff.show_tabs.social')
                                @include('dashboard.staff.show_tabs.project_access')
                                @include('dashboard.staff.show_tabs.document_info')
                                @include('dashboard.staff.show_tabs.educations')
                                @include('dashboard.staff.show_tabs.work_experience')
                                @if (strtoupper($staff->departments->name) == 'TEACHER')
                                    @include('dashboard.staff.show_tabs.activities')
                                    @include('dashboard.staff.show_tabs.specialization')
                                    @include('dashboard.staff.show_tabs.teacher_slots')
                                @endif
                                @if (strtoupper($staff->departments->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: 10px !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 }}', '#teacher_slots');
        fetchSlots($('#department_id').val(), '{{ $staff->id }}', '#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) {
        // Store slots for use in checkbox event handler
        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
        });
    }
</script>