@extends('layouts/layoutMaster')

@section('title', 'Job Schedule')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body:not(.modal-open) .select2-container--open{
            z-index:99
        }
    </style>
    <!-- Vendor Styles -->
@section('vendor-style')
    @vite([
        'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
        'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
        'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
        'resources/assets/vendor/libs/select2/select2.scss',
        'resources/assets/vendor/libs/@form-validation/form-validation.scss',
        'resources/assets/vendor/libs/animate-css/animate.scss',
        'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss',
        'resources/assets/vendor/libs/toastr/toastr.scss'
    ])
@endsection

<!-- Vendor Scripts -->
@section('vendor-script')
    @vite([
        'resources/assets/vendor/libs/moment/moment.js',
        'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
        'resources/assets/vendor/libs/select2/select2.js',
        'resources/assets/vendor/libs/@form-validation/popular.js',
        'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
        'resources/assets/vendor/libs/@form-validation/auto-focus.js',
        'resources/assets/vendor/libs/cleavejs/cleave.js',
        'resources/assets/vendor/libs/cleavejs/cleave-phone.js',
        'resources/assets/vendor/libs/sweetalert2/sweetalert2.js',
        'resources/assets/vendor/libs/toastr/toastr.js'
    ])
@endsection

<!-- Page Scripts -->
@section('page-script')
    @vite([
        'resources/js/toastr-bootstrap.js',
        'resources/js/jobSchedule-manage.js'
    ])
@endsection

@section('content')
    <!-- JobSchedule List Table -->
    <div class="toast-container position-fixed top-1 end-0 p-3" id="toastContainer"></div>

    <div class="card">
        <div class="card-header pb-0">
            <h5 class="card-schedule mb-0">Job Schedules</h5>
        </div>

        <div class="card-datatable table-responsive">
            <table class="datatables-jobSchedule table">
                <thead>
                    <tr>
                        <th></th>
                        <th>Id</th>
                        <th>Job</th>
                        <th>User</th>
                        <th>Patient</th>
                        <th>Approval Status</th>
                        <th>Start Date</th>
                        <th>End Date</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>

        <!-- Offcanvas to add new jobSchedule -->
        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAddJobSchedule" aria-labelledby="offcanvasAddJobScheduleLabel">
            <div class="offcanvas-header border-bottom">
                <h5 id="offcanvasAddJobScheduleLabel" class="offcanvas-schedule">Schedule Job</h5>
                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body mx-0 flex-grow-0 h-100">
                <form class="add-new-jobSchedule pt-0" id="addNewjobScheduleForm">
                    <input type="hidden" name="id" id="jobSchedule_id">
                    <div class="form-floating form-floating-outline mb-5">
                        <select class="form-select select2" id="job_id" name="job_id" aria-label="Select Job">
                            <option selected disabled>Select a job</option>
                            @foreach ($jobs as $job)
                                <option value="{{$job->id}}">{{$job->name}}</option>
                            @endforeach
                        </select>
                        <label for="job_id">Job</label>
                    </div>
                    <div class="form-floating form-floating-outline mb-5">
                        <select class="form-select select2" id="employee_id" name="employee_id" aria-label="Select Job">
                            <option selected disabled>Select a Employee</option>
                            @foreach ($employees as $employee)
                                <option value="{{$employee->id}}">{{$employee->name}}</option>
                            @endforeach
                        </select>
                        <label for="employee_id">Employee</label>
                    </div>
                    <div class="form-floating form-floating-outline mb-5">
                        <select class="form-select select2" id="patient_id" name="patient_id" aria-label="Select Job">
                            <option selected disabled>Select a Patient</option>
                            @foreach ($patients as $patient)
                                <option value="{{$patient->id}}">{{$patient->name}}</option>
                            @endforeach
                        </select>
                        <label for="patient_id">Patient</label>
                    </div>
                    <div class="form-floating form-floating-outline mb-5">
                        <select class="form-select select2" id="form_id" name="form_id[]" multiple aria-label="Select Forms">
                            @foreach ($forms as $form)
                                <option value="{{ $form->id }}">{{ $form->name }}</option>
                            @endforeach                            
                        </select>
                        <label for="form_id">Forms</label>
                        <div class="d-flex justify-content-end mt-1">
                            <a href="{{ route('form-list.create') }}" target="_blank" class="btn btn-sm btn-outline-primary me-2">Add Form <i class="ri-arrow-right-long-fill"></i></a>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="reloadForms"><i class="ri-refresh-line"></i></button>
                        </div>
                    </div>
                    <div class="form-floating form-floating-outline mb-5">
                        <input type="date" class="form-control" id="start_date" placeholder="Start Date" name="start_date" aria-label="Start Date" />
                        <label for="start_date">Start Date</label>
                    </div>
                    <div class="form-floating form-floating-outline mb-5">
                        <input type="date" class="form-control" id="end_date" placeholder="End Date" name="end_date" aria-label="End Date" />
                        <label for="end_date">End Date</label>
                    </div>
                    <div class="form-floating form-floating-outline mb-5">
                        <textarea class="form-control" placeholder="Description" id="description" name="description" aria-label="Description" style="height: 100px;"></textarea>
                        <label for="description">Description</label>
                    </div>
                    <!-- Repeat Toggle -->
                    <div class="form-check form-switch mb-4">
                        <input class="form-check-input" name="status" type="checkbox" id="repeatToggle">
                        <label class="form-check-label" for="repeatToggle">Repeat</label>
                    </div>

                    <!-- Repeat Options - Hidden by default -->
                    <div id="repeatOptions" style="display: none;">
                        <div class="form-floating form-floating-outline mb-4">
                            <select class="form-select" id="repeat" name="repeat">
                                <option value="none">None</option>
                                <option value="daily">Daily</option>
                                <option value="weekly">Weekly</option>
                                <option value="weekdays">Weekdays (Mon - Fri)</option>
                                <option value="monthly">Monthly</option>
                                <option value="yearly">Yearly</option>
                                <option value="custom">Custom</option>
                            </select>
                            <label for="repeat">Repeat Type</label>
                        </div>

                        <!-- Custom Repeat Options -->
                        <div id="customRepeatOptions" style="display: none;">
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <input type="number" class="form-control" id="custom_interval" name="custom_repeat[interval]" min="1" value="1">
                                </div>
                                <div class="col-md-8">
                                    <select class="form-select" id="custom_unit" name="custom_repeat[unit]">
                                        <option value="days">Days</option>
                                        <option value="weeks" selected>Weeks</option>
                                        <option value="months">Months</option>
                                        <option value="years">Years</option>
                                    </select>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Repeat on</label>
                                <div class="d-flex justify-content-center gap-1">
                                    @foreach(['Su','Mo','Tu','We','Th','Fr','Sa'] as $day)
                                        <input type="checkbox" class="btn-check" id="repeat_{{ $day }}" name="custom_repeat[days][]" value="{{ $day }}">
                                        <label class="btn btn-outline-primary" for="repeat_{{ $day }}">{{ $day }}</label>
                                    @endforeach
                                </div>
                            </div>
                        </div>

                    </div>

                    <button type="submit" class="btn btn-dark me-sm-3 me-1 data-submit">Submit</button>
                    <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="offcanvas">Cancel</button>
                </form>
            </div>
        </div>
    </div>

    <script>
        $('#reloadForms').on('click', function () {
            $.ajax({
                url: '{{ route("forms.fetch") }}',
                method: 'GET',
                success: function (data) {
                    const $select = $('#form_id');
                    const selectedValues = $select.val(); // save selected values

                    $select.empty(); // Clear options

                    data.forEach(form => {
                        const isSelected = selectedValues.includes(form.id.toString()) ? 'selected' : '';
                        $select.append(`<option value="${form.id}" ${isSelected}>${form.name}</option>`);
                    });

                    $select.trigger('change'); // Refresh Select2 display
                },
                error: function () {
                    alert('Unable to fetch forms.');
                }
            });
        });
    </script>


    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const repeatToggle = document.getElementById('repeatToggle');
            const repeatOptions = document.getElementById('repeatOptions');
            const repeatSelect = document.getElementById('repeat');
            const customRepeatOptions = document.getElementById('customRepeatOptions');

            repeatToggle.addEventListener('change', function () {
                repeatOptions.style.display = this.checked ? 'block' : 'none';
                if (!this.checked) {
                    repeatSelect.value = 'none';
                    customRepeatOptions.style.display = 'none';
                }
            });

            repeatSelect.addEventListener('change', function () {
                customRepeatOptions.style.display = this.value === 'custom' ? 'block' : 'none';
            });
        });

        document.addEventListener("DOMContentLoaded", function () {
            const unitSelect = document.getElementById("custom_unit");
            const repeatOnDays = document.querySelector(".mb-3:nth-child(2)"); // "Repeat on" section

            function toggleRepeatDays() {
                if (unitSelect.value === "weeks") {
                    repeatOnDays.style.display = "block";
                } else {
                    repeatOnDays.style.display = "none";
                }
            }

            unitSelect.addEventListener("change", toggleRepeatDays);

            // Initialize on page load
            toggleRepeatDays();
        });
    </script>

    <script>
        var canCreate = @json(auth()->user()->can('job-scheduleManage.create'));
        var canView = @json(auth()->user()->can('job-scheduleManage.view'));
        var canEdit = @json(auth()->user()->can('job-scheduleManage.edit'));
        var canDelete = @json(auth()->user()->can('job-scheduleManage.delete'));
        var canApprove = @json(auth()->user()->can('jobApproval.edit'));
        $(document).ready(function() {
            $('.select2').select2({
                dropdownParent: $('.offcanvas')
            });
        });
        var approvalStat = "{{ route("approval.updateStatus") }}";

    </script>

@endsection