@extends('dashboard.layouts.app')


@section('content')
    <section class="my-4">
        <div class="container-fluid">
            <div class="row justify-content-between align-items-center">
                <div class="col">
                    <h4>Edit Employee</h4>
                </div>
            </div>
        </div>
    </section>

    <section>
        <form class="form" action="{{ route('staffs.update', $staff->id) }}" method="POST" enctype="multipart/form-data"
            accept-charset="UTF-8">
            @csrf
            @method('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="project_access-tab"
                                        data-bs-toggle="pill" data-bs-target="#project_access" type="button"
                                        role="tab">Project
                                        Access</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="slots-tab" data-bs-toggle="pill"
                                        data-bs-target="#slots" type="button" role="tab">Shift</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>
                                </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.slots') --}}
                                    @include('dashboard.staff.tabs.specialization')
                                </div>
                                <div class="mt-3">
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                    <button type="submit" class="btn btn-secondary">Submit and New</button>
                                    <button type="button" class="btn btn-outline-secondary">Cancel</button>
                                </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>


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

    $(document).ready(function() {

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

        console.log('teacherDepartmentId', teacherDepartmentId);

        function toggleTabsBasedOnDepartment(selectedValue) {
            if (selectedValue == teacherDepartmentId) {
                $('#slots-tab, #specilization-tab, #activities-tab').removeClass('d-none');
            } else {
                $('#slots-tab, #specilization-tab, #activities-tab').addClass('d-none');
            }
        }
        toggleTabsBasedOnDepartment($('#department_id').val());
        $(document).on('change', '#department_id', function() {
            toggleTabsBasedOnDepartment($(this).val());
        });



        $('#track_type_id').select2({
            placeholder: "Select Track types"
        });
        $('#product').select2({
            placeholder: "Select Products"
        });
        $('#track_id').select2({
            placeholder: "Select Track"
        });
        $('#access').select2({
            placeholder: "Select"
        });

        $('#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"><i class="bi bi-trash"></i> Remove</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"><i class="bi bi-trash"></i> Remove</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');
            const trackTypeSelect = $('#track_type_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}">
                                                <i class="bi bi-check-circle-fill text-success me-1"></i> 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();
            console.log("Selected role_type text: ", selectedText);
            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;
                console.log("Set label to: ", overtimeRateLabel);
            } else {
                rateLabelElement.innerText = hourlyRateLabel;
                console.log("Set label to: ", hourlyRateLabel);
            }
        }

        $('#role_type').on('change', function() {
            console.log("role_type changed, selected text: ", $(this).find(':selected').text());
            getRoleTypeVal(this);
        });

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

        if ($('#role_type').length) {
            console.log("Running initial getRoleTypeVal");
            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>