@extends('dashboard.layouts.app')

@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>
                        @if ($mode === 'create')
                            <div>Add Employee</div>
                        @else
                            <div>Edit Employee</div>
                            <a href="{{ route('staffs.show', $staff->id) }}" class="btn btn-sm btn-outline-primary radius-8"
                                title="Show">
                                <iconify-icon icon="lucide:eye" class="text-lg"></iconify-icon>
                            </a>
                        @endif
                    </a>
                </div>
            </div>
        </div>
    </section>
    <section>
        <form class="form" action="{{ $mode === 'create' ? route('staffs.store') : route('staffs.update', $staff->id) }}"
            method="POST" enctype="multipart/form-data" accept-charset="UTF-8">
            @csrf
            @method($mode === 'create' ? 'POST' : 'PUT')
            <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="sideTabs 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="sideTabs nav-link custom-nav-link" id="contact_details-tab"
                                        data-bs-toggle="pill" data-bs-target="#contact_details" type="button"
                                        role="tab">Contact Details
                                    </button>
                                    <button class="sideTabs nav-link custom-nav-link" id="password-tab"
                                        data-bs-toggle="pill" data-bs-target="#passwordPage" type="button"
                                        role="tab">password</button>
                                    <button class="sideTabs nav-link custom-nav-link" id="job-tab" data-bs-toggle="pill"
                                        data-bs-target="#job" type="button" role="tab">Job</button>

                                    <button class="sideTabs 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="sideTabs nav-link custom-nav-link" id="bank-info-tab"
                                        data-bs-toggle="pill" data-bs-target="#bank-info" type="button" role="tab">Other
                                        Info</button>
                                    <button class="sideTabs nav-link d-none custom-nav-link" id="specilization-tab"
                                        data-bs-toggle="pill" data-bs-target="#specilization" type="button"
                                        role="tab">Specialization</button>
                                    @if ($mode === 'edit')
                                        <button class="sideTabs nav-link d-none custom-nav-link" id="teacher_slots-tab"
                                            data-bs-toggle="pill" data-bs-target="#teacher_slots" type="button"
                                            role="tab">Teacher Shift</button>
                                        <button class="sideTabs nav-link d-none custom-nav-link" id="tester_slots-tab"
                                            data-bs-toggle="pill" data-bs-target="#tester_slots" type="button" role="tab">Tester
                                            Shift</button>

                                        @if($staff->jobTitle->slug === 'supervisor')
                                            <button class="sideTabs nav-link custom-nav-link" id="session_staff_slot-tab"
                                                data-bs-toggle="pill" data-bs-target="#session_staff_slot" type="button"
                                                role="tab">Slots</button>
                                        @endif
                                    @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.tabs.basic_info')
                                    @include('dashboard.staff.tabs.password')
                                    @include('dashboard.staff.tabs.job')
                                    @include('dashboard.staff.tabs.payroll')
                                    @include('dashboard.staff.tabs.bank_info')
                                    @include('dashboard.staff.tabs.project_access')
                                    @include('dashboard.profile.edit_tabs.contact_details')

                                    @if ($mode === 'edit')
                                        @include('dashboard.staff.tabs.teacher_slots')
                                        @include('dashboard.staff.tabs.tester_slots')
                                        @include('dashboard.staff.tabs.staff_session_slots')
                                    @endif
                                    @include('dashboard.staff.tabs.specialization')

                                </div>
                                <div class="mt-3 d-flex gap-2 justify-content-end" id="submit-buttons-wrapper">
                                    @if ($mode === 'create')
                                        <button type="submit" class="btn btn-primary">Submit</button>
                                        {{-- <button type="submit" name="submit_and_new" class="btn btn-secondary">Submit and
                                            New</button> --}}
                                    @else
                                        <button type="submit" class="btn btn-primary">Update</button>
                                    @endif
                                    <a href="{{ route('staffs.index') }}" class="btn btn-outline-secondary">Cancel</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        @include('dashboard.staff.tabs.new_slots')
        @include('dashboard.staff.tabs.select_slots')
    </section>
@endsection
<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;
        }
    }

    #loadingSpinner {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        z-index: 9999;
        justify-content: center;
        align-items: center;
    }

    .spinner-overlay {
        display: flex;
    }

    .spinner-container {
        /* background: white; */
        padding: 3rem 2rem;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        text-align: center;
        min-width: 200px;
    }

    .spinner-border {
        width: 3rem !important;
        height: 3rem !important;
        margin: 0 auto;
    }

    .spinner-container p {
        margin: 0 !important;
    }

    @media (max-width: 576px) {
        .spinner-container {
            padding: 2rem 1rem;
            min-width: 150px;
        }

        .spinner-border {
            width: 2rem !important;
            height: 2rem !important;
        }

        .spinner-container p {
            font-size: 0.875rem;
        }
    }

    .modern-section {
        background: #f8fafc;
        border-radius: 18px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
        padding: 2rem 1.5rem 1.5rem 1.5rem;
        margin-bottom: 2rem;
    }

    .modern-section-title {
        font-size: 1.15rem;
        font-weight: 600;
        color: #1976d2;
        margin-bottom: 1.2rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .modern-label {
        font-weight: 500;
        color: #495057;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: #1976d2;
        box-shadow: 0 0 0 0.15rem rgba(25, 118, 210, 0.08);
    }

    .modern-badge-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 1px 6px rgba(25, 118, 210, 0.07);
        padding: 1rem 1.5rem;
        display: flex;
        align-items: center;
        gap: 2rem;
        margin-top: 1rem;
    }

    .modern-badge-card .badge {
        font-size: 1.1em;
        padding: 0.7em 1.2em;
    }
</style>
@push('scripts')
    <script>
        // Form submission handler
        $('.form').on('submit', function (e) {
            e.preventDefault();
            const form = $(this);

            function removeEmptyRows(selector) {
                $(selector).each(function () {
                    let isEmpty = true;

                    $(this).find('input').each(function () {
                        if ($(this).val().trim() !== '') {
                            isEmpty = false;
                            return false;
                        }
                    });

                    if (isEmpty) $(this).remove();
                });
            }
            removeEmptyRows('.new-Educationentry');
            removeEmptyRows('.new-entry');


            const formData = new FormData(this);
            const staffId = '{{ $staff->id ?? null }}';
            const isEditMode = staffId !== 'null' && staffId !== '';
            const url = isEditMode ? `/staffs/${staffId}` : form.attr('action');
            const method = isEditMode ? 'POST' : 'POST';

            // Add PUT method for edit mode
            if (isEditMode) {
                formData.append('_method', 'PUT');
            }

            $.ajax({
                url: url,
                type: method,
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function () {
                    // Show loading indicator
                    showLoadingSpinner();
                },
                success: function (response) {
                    hideLoadingSpinner();

                    if (response.status) {
                        // Show success message
                        toastr.success(response.message);


                        // Redirect after 2 seconds
                        setTimeout(() => {
                            window.location.href = '/staffs';
                        }, 2000);
                    } else {
                        toastr.error(response.message);

                    }
                },
                error: function (xhr) {
                    hideLoadingSpinner();

                    if (xhr.status === 422) {
                        // Validation errors
                        const errors = xhr.responseJSON.errors;
                        let errorMessage = 'Validation failed:<br>';

                        $.each(errors, function (field, messages) {
                            errorMessage += `${messages[0]}<br>`;
                        });

                        toastr.error(errorMessage);

                    } else {
                        const errorMsg = xhr.responseJSON?.message || 'An error occurred';
                        toastr.error(errorMsg);

                    }
                }
            });
        });

        function showLoadingSpinner() {
            // Create spinner HTML if it doesn't exist
            if ($('#loadingSpinner').length === 0) {
                const spinnerHTML = `
                            <div id="loadingSpinner" class="spinner-overlay">
                                <div class="spinner-container">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                    <p class="mt-3 text-primary fw-semibold">Processing...</p>
                                </div>
                            </div>
                        `;
                $('body').append(spinnerHTML);
            }

            // Show the spinner
            $('#loadingSpinner').fadeIn(200);
            toastr.info('Processing your request...', 'Please wait', {
                timeOut: 0,
                extendedTimeOut: 0,
                closeButton: false
            });
        }

        function hideLoadingSpinner() {
            $('#loadingSpinner').fadeOut(200, function () {
                $(this).hide();
            });
            toastr.clear();
        }


        window.departmentsData = @json($departmentsNotTeacherTester);
        var productDemo = @json($productDemo);
        const HIDDEN_TABS = ['#teacher_slots', '#tester_slots'];

        function toggleSubmitButtons(tabId) {
            if (HIDDEN_TABS.includes(tabId)) {
                $('#submit-buttons-wrapper').addClass('d-none');
            } else {
                $('#submit-buttons-wrapper').removeClass('d-none');
            }
        }


        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, response.admins, response
                            .oldAdmins);
                    } else {
                        $(targetTab).html('<p>Failed to load slots: ' + response.message + '</p>');
                    }
                },
                error: function (xhr) {
                    $(targetTab).html('<p>Error fetching slots. Please try again.</p>');
                }
            });
        }


        $('[data-bs-toggle="pill"]').on('shown.bs.tab', function (e) {
            const tabId = $(e.target).data('bsTarget');
            toggleSubmitButtons(tabId);
        });
        const initialTabId = $('.sideTabs.active').data('bsTarget');
        toggleSubmitButtons(initialTabId);


        var teacherDepartmentId = $("#job_title_id option").filter(function () {

            return $(this).text().trim().toLowerCase() === "teacher";
        }).val();
        var testerDepartmentId = $("#job_title_id option").filter(function () {
            return $(this).text().trim().toLowerCase() === "tester";
        }).val();

        function toggleTabsBasedOnDepartment(selectedValue) {
            // $('#teacher_slots-tab, #tester_slots-tab, #specilization-tab, #activities-tab').addClass('d-none');
            $('#teacher_slots, #tester_slots').html('');


            if (selectedValue == teacherDepartmentId) {
                $('#teacher_slots-tab').removeClass('d-none');
                $('#activities-tab').removeClass('d-none');
                $('#specilization-tab').removeClass('d-none');
                $('#tester_slots-tab').addClass('d-none');

                fetchSlots(selectedValue, '{{ $staff->id ?? 0 }}', '#teacher_slots');
            } else if (selectedValue == testerDepartmentId) {
                $('#tester_slots-tab').removeClass('d-none');
                $('#teacher_slots-tab').addClass('d-none');
                $('#specilization-tab').addClass('d-none');
                $('#activities-tab').addClass('d-none');

                fetchSlots(selectedValue, '{{ $staff->id ?? 0 }}', '#tester_slots');
            } else {
                $('#teacher_slots-tab').addClass('d-none');
                $('#tester_slots-tab').addClass('d-none');
                $('#specilization-tab').addClass('d-none');
                $('#activities-tab').addClass('d-none');
            }
        }

        function autoSelectDemoActivity(departmentId) {
            var productSelect = $('#product');
            productSelect.val(null).trigger('change');
            if (departmentId == testerDepartmentId && productDemo) {
                if (productSelect.find(`option[value="${productDemo.id}"]`).length === 0) {
                    productSelect.append(`<option value="${productDemo.id}" data-slug="${productDemo.slug}">${productDemo.name_en}</option>`);
                }
                productSelect.find(`option[value="${productDemo.id}"]`).prop('selected', true);
                productSelect.trigger('change');
            } else {
                productSelect.find(`option[data-slug="demo"]`).remove();
                productSelect.trigger('change');
            }
        }



        autoSelectDemoActivity($('#job_title_id').val());
        // Initialize Select2
        $('#track_type_id, #product, #track_id, #access').select2({
            placeholder: function () {
                return $(this).data('placeholder');
            }
        });

        // Department change handler
        toggleTabsBasedOnDepartment($('#job_title_id').val());
        $('#job_title_id').on('change', function () {
            toggleTabsBasedOnDepartment($(this).val());
            autoSelectDemoActivity($(this).val());
        });

        $('#staff_photo').on('change', function (event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    $('#staffImageShow').removeClass('d-none').attr('src', e.target.result);
                };
                reader.readAsDataURL(file);
            }
        });
        // });
    </script>
@endpush