@extends('dashboard.layouts.app')

@section('content')
    <style>
        .ui-card {
            border: 0;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            padding: 1.25rem;
        }

        .form-section__head {
            margin-bottom: 1rem;
            padding-bottom: 0.9rem;
            border-bottom: 1px solid #eef2f7;
        }

        .form-section__title {
            font-size: 1rem;
            font-weight: 700;
            color: #111827;
        }

        .form-section__sub {
            color: #6b7280;
            font-size: 0.92rem;
        }

        .staff-layout {
            display: grid;
            grid-template-columns: 270px minmax(0, 1fr);
            gap: 1.25rem;
            align-items: start;
        }

        .staff-sidebar {
            position: sticky;
            top: 1rem;
        }

        .staff-sidebar__inner {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .staff-tab-btn {
            width: 100%;
            text-align: left;
            border: 1px solid #e5e7eb;
            background: #f8fafc;
            color: #334155;
            border-radius: 14px;
            padding: 0.85rem 1rem;
            font-weight: 600;
            transition: 0.2s ease;
            box-shadow: none !important;
        }

        .staff-tab-btn:hover {
            background: #f1f5f9;
            border-color: #dbe2ea;
        }

        .staff-tab-btn.active {
            background: #111827 !important;
            color: #fff !important;
            border-color: #111827 !important;
        }

        .staff-content-card {
            min-height: 100%;
        }

        .staff-content-area {
            padding-top: 0.25rem;
        }

        .asset-actions {
            display: flex;
            justify-content: end;
            gap: 0.75rem;
            margin-top: 1.25rem;
            flex-wrap: wrap;
        }

        .select2-container {
            display: block !important;
            width: 100% !important;
        }

        .select2-container .selection {
            display: block !important;
        }

        #loadingSpinner {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.35);
            display: none;
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }

        .spinner-overlay {
            display: flex;
        }

        .spinner-container {
            padding: 2.5rem 2rem;
            border-radius: 18px;
            backdrop-filter: blur(6px);
            text-align: center;
            min-width: 220px;
        }

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

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

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

        .modern-section-title {
            font-size: 1.05rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }

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

        .form-control:focus,
        .form-select:focus {
            border-color: #b8c4d6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
        }

        .modern-badge-card {
            background: #fff;
            border: 1px solid #edf2f7;
            border-radius: 14px;
            box-shadow: 0 1px 6px rgba(15, 23, 42, 0.05);
            padding: 1rem 1.25rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-top: 1rem;
            flex-wrap: wrap;
        }

        .modern-badge-card .badge {
            font-size: 1em;
            padding: 0.7em 1.1em;
        }

        @media (max-width: 991.98px) {
            .staff-layout {
                grid-template-columns: 1fr;
            }

            .staff-sidebar {
                position: static;
            }

            .staff-sidebar__inner {
                display: grid;
                grid-template-columns: 1fr;
            }
        }

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

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

            .spinner-container p {
                font-size: 0.875rem;
            }
        }
    </style>

    @include('components.loader')
    @include('components.alert')

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title
                    title="{{ $mode === 'create' ? 'Add Employee' : 'Edit Employee' }}"
                    description="{{ $mode === 'create'
                        ? 'Create a new employee profile with personal details, job data, payroll settings, and related access.'
                        : 'Update employee information, assignments, payroll settings, and related access from the sections below.' }}">
                    
                        @if ($mode === 'edit')
                            @can('hr_staffs_review_new')
                                @if (is_null($staff->reviewed_at))
                                    <form action="{{ route('staffs.markReviewed', $staff->id) }}" method="POST"
                                        class="d-inline">
                                        @csrf
                                        <button type="submit" class="asset-btn asset-btn--primary">
                                            <iconify-icon icon="lucide:check-check"></iconify-icon>
                                            Mark as Reviewed
                                        </button>
                                    </form>
                                @endif
                            @endcan

                            <a href="{{ route('staffs.show', $staff->id) }}" class="asset-btn asset-btn--primary">
                                <iconify-icon icon="lucide:eye"></iconify-icon>
                                Show Employee
                            </a>
                        @endif

                        <a href="{{ route('staffs.index') }}" class="asset-btn asset-btn--secondary">
                            Back to Employees
                        </a>
                    
                </x-page-title>

                <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="ui-card">
                        <div class="staff-layout">
                            <div class="staff-sidebar">
                                <div class="form-section">
                                    <div class="form-section__head">
                                        <h5 class="form-section__title mb-1">Employee Sections</h5>
                                        <p class="form-section__sub mb-0">
                                            Navigate between sections to complete employee information.
                                        </p>
                                    </div>

                                    <div class="nav staff-sidebar__inner" id="staffTabs" role="tablist" aria-orientation="vertical">
                                        @php
                                            $canUpdateStaffPersonalDetails = $mode === 'create' || (auth()->user()?->can('hr_staffs_update_personal_details') ?? false);
                                            $canUpdateStaffContactDetails = $mode === 'create' || (auth()->user()?->can('hr_staffs_update_contact_details') ?? false);
                                            $canUpdateStaffJob = $mode === 'create' || (auth()->user()?->can('hr_staffs_update_job') ?? false);
                                            $canUpdateStaffSpecialization = $mode === 'create' || (auth()->user()?->can('hr_staffs_update_specialization') ?? false);
                                            $canUpdateStaffTeacherShift = $mode === 'create' || (auth()->user()?->can('hr_staffs_update_teacher_shift') ?? false);
                                            $canUpdateStaffPassword = $mode === 'create'
                                                ? (auth()->user()?->can('hr_staffs_view_password') ?? false)
                                                : (auth()->user()?->can('hr_staffs_update_password') ?? false);
                                            $canUpdateStaffPayroll = $mode === 'create'
                                                ? (auth()->user()?->can('hr_staffs_view_payroll') ?? false)
                                                : (auth()->user()?->can('hr_staffs_update_payroll') ?? false);
                                            $canUpdateStaffInfo = $mode === 'create'
                                                ? (auth()->user()?->can('hr_staffs_view_info') ?? false)
                                                : (auth()->user()?->can('hr_staffs_update_info') ?? false);
                                            $activeStaffTab = collect([
                                                'basic-info' => $canUpdateStaffPersonalDetails,
                                                'contact_details' => $canUpdateStaffContactDetails,
                                                'passwordPage' => $canUpdateStaffPassword,
                                                'job' => $canUpdateStaffJob,
                                                'payroll-details' => $canUpdateStaffPayroll,
                                                'bank-info' => $canUpdateStaffInfo,
                                            ])->filter()->keys()->first();
                                        @endphp

                                        @if ($canUpdateStaffPersonalDetails)
                                            <button class="sideTabs nav-link staff-tab-btn {{ $activeStaffTab === 'basic-info' ? 'active' : '' }}"
                                                    id="basic-info-tab"
                                                    data-bs-toggle="pill"
                                                    data-bs-target="#basic-info"
                                                    type="button"
                                                    role="tab">
                                                Personal Details
                                            </button>
                                        @endif

                                        @if ($canUpdateStaffContactDetails)
                                            <button class="sideTabs nav-link staff-tab-btn {{ $activeStaffTab === 'contact_details' ? 'active' : '' }}"
                                                    id="contact_details-tab"
                                                    data-bs-toggle="pill"
                                                    data-bs-target="#contact_details"
                                                    type="button"
                                                    role="tab">
                                                Contact Details
                                            </button>
                                        @endif

                                        @if ($canUpdateStaffPassword)
                                            <button class="sideTabs nav-link staff-tab-btn {{ $activeStaffTab === 'passwordPage' ? 'active' : '' }}"
                                                    id="password-tab"
                                                    data-bs-toggle="pill"
                                                    data-bs-target="#passwordPage"
                                                    type="button"
                                                    role="tab">
                                                Password
                                            </button>
                                        @endif

                                        @if ($canUpdateStaffJob)
                                            <button class="sideTabs nav-link staff-tab-btn {{ $activeStaffTab === 'job' ? 'active' : '' }}"
                                                    id="job-tab"
                                                    data-bs-toggle="pill"
                                                    data-bs-target="#job"
                                                    type="button"
                                                    role="tab">
                                                Job
                                            </button>
                                        @endif

                                        @if ($canUpdateStaffPayroll)
                                            <button class="sideTabs nav-link staff-tab-btn {{ $activeStaffTab === 'payroll-details' ? 'active' : '' }}"
                                                    id="payroll-details-tab"
                                                    data-bs-toggle="pill"
                                                    data-bs-target="#payroll-details"
                                                    type="button"
                                                    role="tab">
                                                Payroll Details
                                            </button>
                                        @endif

                                        @if ($canUpdateStaffInfo)
                                            <button class="sideTabs nav-link staff-tab-btn {{ $activeStaffTab === 'bank-info' ? 'active' : '' }}"
                                                    id="bank-info-tab"
                                                    data-bs-toggle="pill"
                                                    data-bs-target="#bank-info"
                                                    type="button"
                                                    role="tab">
                                                Other Info
                                            </button>
                                        @endif

                                        @if ($canUpdateStaffSpecialization)
                                            <button class="sideTabs nav-link d-none staff-tab-btn {{ $activeStaffTab === 'specilization' ? 'active' : '' }}"
                                                    id="specilization-tab"
                                                    data-bs-toggle="pill"
                                                    data-bs-target="#specilization"
                                                    type="button"
                                                    role="tab">
                                                Specialization
                                            </button>
                                        @endif

                                        @if ($mode === 'edit')
                                            @if ($canUpdateStaffTeacherShift)
                                                <button class="sideTabs nav-link d-none staff-tab-btn {{ $activeStaffTab === 'teacher_slots' ? 'active' : '' }}"
                                                        id="teacher_slots-tab"
                                                        data-bs-toggle="pill"
                                                        data-bs-target="#teacher_slots"
                                                        type="button"
                                                        role="tab">
                                                    Teacher Shift
                                                </button>
                                            @endif

                                            <button class="sideTabs nav-link d-none staff-tab-btn"
                                                    id="tester_slots-tab"
                                                    data-bs-toggle="pill"
                                                    data-bs-target="#tester_slots"
                                                    type="button"
                                                    role="tab">
                                                Tester Shift
                                            </button>

                                            @if ($staff->jobTitle && $staff->jobTitle->slug === 'supervisor')
                                                <button class="sideTabs nav-link staff-tab-btn"
                                                        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>

                            <div class="staff-content-area">
                                <div class="form-section staff-content-card">
                                    <div class="form-section__head">
                                        <h5 class="form-section__title mb-1">
                                            {{ $mode === 'create' ? 'Employee Information' : 'Employee Update Form' }}
                                        </h5>
                                        <p class="form-section__sub mb-0">
                                            Fill and review the employee data across the tabs before submitting.
                                        </p>
                                    </div>

                                    <div class="tab-content" id="staffTabsContent">
                                        @if ($canUpdateStaffPersonalDetails)
                                            @include('dashboard.staff.tabs.basic_info')
                                        @endif
                                        @if ($canUpdateStaffPassword)
                                            @include('dashboard.staff.tabs.password')
                                        @endif
                                        @if ($canUpdateStaffJob)
                                            @include('dashboard.staff.tabs.job')
                                        @endif
                                        @if ($canUpdateStaffPayroll)
                                            @include('dashboard.staff.tabs.payroll')
                                        @endif
                                        @if ($canUpdateStaffInfo)
                                            @include('dashboard.staff.tabs.bank_info')
                                        @endif
                                        @include('dashboard.staff.tabs.project_access')
                                        @if ($canUpdateStaffContactDetails)
                                            @include('dashboard.profile.edit_tabs.contact_details')
                                        @endif

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

                                        @if ($canUpdateStaffSpecialization)
                                            @include('dashboard.staff.tabs.specialization')
                                        @endif
                                    </div>

                                    <div class="asset-actions" id="submit-buttons-wrapper">
                                        <a href="{{ route('staffs.index') }}" class="asset-btn asset-btn--secondary">
                                            Cancel
                                        </a>

                                        @if ($mode === 'create')
                                            <button type="submit" class="asset-btn asset-btn--primary">
                                                Submit
                                            </button>
                                        @else
                                            <button type="submit" class="asset-btn asset-btn--primary">
                                                Update
                                            </button>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

                @include('dashboard.staff.tabs.new_slots')
                @include('dashboard.staff.tabs.select_slots')

            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $('.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 = 'POST';

            if (isEditMode) {
                formData.append('_method', 'PUT');
            }

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

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

                        setTimeout(() => {
                            window.location.href = '/staffs';
                        }, 2000);
                    } else {
                        toastr.error(response.message);
                    }
                },
                error: function (xhr) {
                    hideLoadingSpinner();

                    if (xhr.status === 422) {
                        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() {
            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-white fw-semibold">Processing...</p>
                        </div>
                    </div>
                `;
                $('body').append(spinnerHTML);
            }

            $('#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'];

        $('.general-select').not('.select2-hidden-accessible').select2({
            placeholder: "Select",
            allowClear: true,
            width: '100%'
        });

        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 () {
                    $(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, #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());

        $('#track_type_id, #product, #track_id, #access, #accent').select2({
            placeholder: function () {
                return $(this).data('placeholder');
            }
        });

        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);
            }
        });

        $(window).on('load', function () {
            $('#loadingSpinner').fadeOut(400);
        });
    </script>
@endpush