@extends('layout.layout')

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

    <section>
        <form class="form" action="{{ route('updateProfile') }}" method="POST" enctype="multipart/form-data"
            accept-charset="UTF-8">
            @csrf
            @method('POST')
            <div class="container-fluid">
                <div class="card">
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-8">
                                <h3 class="card-title">Staff Information</h3>
                            </div>
                        </div>

                        <ul class="nav nav-tabs" id="staffTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="basic-info-tab" data-bs-toggle="tab"
                                    data-bs-target="#basic-info" type="button" role="tab">Basic Info</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="bank-info-tab" data-bs-toggle="tab" data-bs-target="#bank-info"
                                    type="button" role="tab">Bank Info</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="social-links-tab" data-bs-toggle="tab"
                                    data-bs-target="#social-links" type="button" role="tab">Social Links</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="document-info-tab" data-bs-toggle="tab"
                                    data-bs-target="#document-info" type="button" role="tab">Document Info</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="educations-tab" data-bs-toggle="tab"
                                    data-bs-target="#educations" type="button" role="tab">Educations</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="work-experience-tab" data-bs-toggle="tab"
                                    data-bs-target="#work-experience" type="button" role="tab">Work Experience</button>
                            </li>
                            <li class="nav-item d-none" id="activities_tab" role="presentation">
                                <button class="nav-link" id="activities-tab" data-bs-toggle="tab"
                                    data-bs-target="#activities" type="button" role="tab">Activities</button>
                            </li>
                            <li class="nav-item d-none" id="slots_tab" role="presentation">
                                <button class="nav-link" id="slots-tab" data-bs-toggle="tab" data-bs-target="#slots"
                                    type="button" role="tab">Slots</button>
                            </li>
                            <li class="nav-item d-none" id="specilization_tab" role="presentation">
                                <button class="nav-link" id="specilization-tab" data-bs-toggle="tab"
                                    data-bs-target="#specilization" type="button" role="tab">Specialization</button>
                            </li>
                            <li class="nav-item ms-auto">
                                <button type="submit" class="btn btn-primary"><i class="bi bi-check"></i> Update
                                    Staff</button>
                            </li>
                        </ul>

                        <div class="tab-content mt-3" id="staffTabsContent">
                            <!-- Basic Info Tab -->
                            @include('dashboard.staff.tabs.basic_info', ['staff' => $staff])

                            <!-- Bank Info Tab -->
                            @include('dashboard.staff.tabs.bank_info', ['staff' => $staff])

                            <!-- Social Links Tab -->
                            @include('dashboard.staff.tabs.social', ['staff' => $staff])

                            <!-- Document Info Tab -->
                            @include('dashboard.staff.tabs.document_info', ['staff' => $staff])

                            <!-- Specialization Tab -->
                            @include('dashboard.staff.tabs.specialization', ['staff' => $staff])

                            <!-- Activities Tab -->
                            @include('dashboard.staff.tabs.activities', ['staff' => $staff])

                            <!-- Educations Tab -->
                            @include('dashboard.staff.tabs.educations', ['staff' => $staff])

                            <!-- Work Experience Tab -->
                            @include('dashboard.staff.tabs.work_experience', ['staff' => $staff])

                            <!-- Slots Tab -->
                            @include('dashboard.staff.tabs.slots', ['staff' => $staff])
                        </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;
    }
</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();
        });

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