@extends('dashboard.layouts.app')

@section('content')
    <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 h6">
                        <iconify-icon icon="mdi:arrow-left"></iconify-icon>
                        @if ($mode === 'create')
                            <div>Add Employee</div>
                        @else
                            <div>Edit Employee</div>
                        @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">
                                <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>
                                    <button class="nav-link d-none custom-nav-link" id="activities-tab"
                                        data-bs-toggle="pill" data-bs-target="#activities" type="button"
                                        role="tab">Activities</button>
                                   
                                    <button class="nav-link d-none custom-nav-link" id="specilization-tab"
                                        data-bs-toggle="pill" data-bs-target="#specilization" type="button"
                                        role="tab">Specialization</button>
                                        <button class="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="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>
                                </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.contact_details')
                                    @include('dashboard.staff.tabs.job')
                                    @include('dashboard.staff.tabs.summary')
                                    @include('dashboard.staff.tabs.tickets')
                                    @include('dashboard.staff.tabs.recorded_sessions')
                                    @include('dashboard.staff.tabs.payslip')
                                    @include('dashboard.staff.tabs.referrals')
                                    @include('dashboard.staff.tabs.payroll')
                                    @include('dashboard.staff.tabs.bank_info')
                                    @include('dashboard.staff.tabs.social')
                                    @include('dashboard.staff.tabs.project_access')
                                    @include('dashboard.staff.tabs.document_info')
                                    @include('dashboard.staff.tabs.educations')
                                    @include('dashboard.staff.tabs.work_experience')
                                    @include('dashboard.staff.tabs.activities')
                                    @include('dashboard.staff.tabs.teacher_slots')
                                    @include('dashboard.staff.tabs.tester_slots')
                                    @include('dashboard.staff.tabs.specialization')
                                </div>
                                <div class="mt-3">
                                    @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>
    </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>
<meta name="csrf-token" content="{{ csrf_token() }}">

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

    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        var teacherDepartmentId = $("#department_id option").filter(function() {
            return $(this).text().trim().toLowerCase() === "teacher";
        }).val();
        var testerDepartmentId = $("#department_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) {
                productSelect.find('option').each(function() {
                    if ($(this).data('slug') === 'demo') {
                        $(this).prop('selected', true);
                    }
                });
                productSelect.trigger('change');
            }
        }

        autoSelectDemoActivity($('#department_id').val());


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



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

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

        // Existing JavaScript for other functionalities (unchanged)
        $('#addMoreEducationBtn').on('click', function(e) {
            e.preventDefault();
            $('#newEducationRow').append(`
                    <div class="row new-Educationentry mb-3">
                        <div class="col-md-2">
                            <input type="text" class="form-control" name="university[]" value="">
                        </div>
                        <div class="col-md-2">
                            <input type="text" class="form-control" name="degree[]" value="">
                        </div>
                        <div class="col-md-2">
                            <input type="text" class="form-control" name="specialization[]" value="">
                        </div>
                        <div class="col-md-2">
                            <input type="date" class="form-control" name="date_of_completion[]" value="">
                        </div>
                        <div class="col-md-2">
                            <input type="text" class="form-control" name="notes[]" value="">
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-danger btn-sm removeEducationRow"><iconify-icon icon="mdi:delete"></iconify-icon></button>
                        </div>
                    </div>
                `);
        });

        $(document).on('click', '.removeEducationRow', function(e) {
            e.preventDefault();
            $(this).closest('.new-Educationentry').remove();
        });

        $('#addMoreContactBtn').on('click', function(e) {
            e.preventDefault();
            $('#newContactRow').append(`
                    <div class="row new-Contactentry mb-3">
                        <div class="col-md-2">
                            <input type="text" class="form-control" name="emergency_name[]" value="">
                        </div>
                        <div class="col-md-2">
                            <select class="form-select" name="emergency_relationship[]">
                                <option value="">Select Relationship</option>
                                <option value="father">Father</option>
                                <option value="mother">Mother</option>
                                <option value="brother">Brother</option>
                                <option value="sister">Sister</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <input type="text" class="form-control" name="emergency_mobile[]" value="">
                        </div>
                        <div class="col-md-2">
                            <input type="text" class="form-control" name="emergency_home_telephone[]" value="">
                        </div>
                        <div class="col-md-2">
                            <input type="text" class="form-control" name="emergency_work_telephone[]" value="">
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-danger btn-sm removeContactRow"><iconify-icon icon="mdi:delete"></iconify-icon></button>
                        </div>
                    </div>
                `);
        });

        $(document).on('click', '.removeContactRow', function(e) {
            e.preventDefault();
            $(this).closest('.new-Contactentry').remove();
        });

        $('#addMoreBtn').on('click', function(e) {
            e.preventDefault();
            $('#newRow').append(`
                    <div class="row new-entry mb-3">
                        <div class="col-md-3">
                            <input type="text" class="form-control" name="company_name[]" value="">
                        </div>
                        <div class="col-md-3">
                            <input type="text" class="form-control" name="title[]" value="">
                        </div>
                        <div class="col-md-2">
                            <input type="date" class="form-control" name="from[]" value="">
                        </div>
                        <div class="col-md-2">
                            <input type="date" class="form-control" name="to[]" value="">
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-danger btn-sm removeRow"><iconify-icon icon="mdi:delete"></iconify-icon></button>
                        </div>
                    </div>
                `);
        });

        $(document).on('click', '.removeRow', function(e) {
            e.preventDefault();
            $(this).closest('.new-entry').remove();
        });

        $('#category_id').on('change', function() {
            $('#checkbox-container').addClass('d-none');
            var catId = $(this).val();
            const trackSelect = $('#track_id');

            if (catId) {
                $.ajax({
                    url: '/tracks-by-category/' + catId,
                    type: 'GET',
                    success: function(data) {
                        trackSelect.empty();
                        data.tracks.forEach(function(track) {
                            var optionText = ($locale === 'en') ? track.name_en :
                                track.name_ar;
                            trackSelect.append(
                                '<option value="' + track.id +
                                '" data-level="' + track.level_number + '">' +
                                optionText + '</option>'
                            );
                        });
                        trackSelect.trigger('change');
                    },
                    error: function() {
                        alert('Failed to fetch tracks. Please try again.');
                    }
                });
            } else {
                trackSelect.empty();
            }
        });

        $('#track_id').on('change', function() {
            const selectedOptions = $(this).find(':selected');
            const $checkboxContainer = $('#checkbox-row');

            if (selectedOptions.length > 0) {
                $('#checkbox-container').removeClass('d-none');
                $checkboxContainer.empty();

                selectedOptions.each(function() {
                    const trackId = $(this).val();
                    const trackName = $(this).text();
                    const levelNumber = parseInt($(this).data('level'), 10);

                    if (levelNumber && levelNumber > 0) {
                        const trackHeader = `
                                <div class="mt-4">
                                    <h5 class="fw-bold">${trackName}</h5>
                                </div>
                                <div class="row" id="track-${trackId}-levels"></div>
                            `;
                        $checkboxContainer.append(trackHeader);

                        const $trackLevelContainer = $(`#track-${trackId}-levels`);

                        for (let i = 1; i <= levelNumber; i++) {
                            const checkboxHTML = `
                                    <div class="col-md-4">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="track${trackId}-level${i}" name="levels[${trackId}][]" value="${i}">
                                            <label class="form-check-label fw-bold" for="track${trackId}-level${i}">
                                               <iconify-icon icon="mdi:checkbox-marked-circle-outline"></iconify-icon> Level ${i}
                                            </label>
                                        </div>
                                    </div>`;
                            $trackLevelContainer.append(checkboxHTML);
                        }
                    }
                });
            } else {
                $('#checkbox-container').addClass('d-none');
                $checkboxContainer.empty();
            }
        });

        function getRoleTypeVal(select) {
            var rateLabelElement = document.getElementById("rate_label");
            if (!rateLabelElement) {
                console.error("Element with ID 'rate_label' not found.");
                return;
            }
            var selectedOption = select.options[select.selectedIndex];
            var selectedText = selectedOption.text.toLowerCase().trim();
            var hourlyRateLabel = "Hourly Rate";
            var overtimeRateLabel = "Overtime Rate";

            if (selectedText.includes("part-time") || selectedText.includes("part time") ||
                selectedText.includes("full-time") || selectedText.includes("full time")) {
                rateLabelElement.innerText = overtimeRateLabel;
            } else {
                rateLabelElement.innerText = hourlyRateLabel;
            }
        }

        $('#role_type').on('change', function() {
            getRoleTypeVal(this);
        });

        $('button[data-bs-target="#payroll-details"]').on('shown.bs.tab', function() {
            if ($('#role_type').length) {
                getRoleTypeVal(document.getElementById("role_type"));
            }
        });

        if ($('#role_type').length) {
            getRoleTypeVal(document.getElementById("role_type"));
        }

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