@extends('layouts.app_hr')

@section('title', __('hr.employee_vacations'))

@section('content')

    <section class="content-header">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-style1">
                <li class="breadcrumb-item">
                    <a href="#">{{__('home.home')}}</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#">{{__('hr.attendance')}}</a>
                </li>
                <li class="breadcrumb-item active">{{__('hr.employee_vacations')}}</li>
            </ol>
        </nav>

    </section>

    <div class="card tw-transition-all tw-duration-200 tw-bg-white tw-shadow-sm hover:tw-shadow-md tw-rounded-xl hover:tw-translate-y-0.5 tw-ring-1 tw-ring-gray-200 no-print">
        <div class="card-widget-separator-wrapper">
            <span class="badge bg-blue-gradient badge-pro ">{{__('report.filters')}}</span>

            <div class="card-body card-widget-separator" >

                <div class="row gy-4 gy-sm-1 ">
                    <div class="col-md-3 form-floating-outline form-floating">
                        <select id="filter_location" class="form-select">
                            <option value="">{{ __('hr.select_location') }}</option>
                            @foreach($locations as $location)
                                <option value="{{ $location->id }}">{{ $location->name }}</option>
                            @endforeach
                        </select>
                        <label >{{__('hr.location')}}</label>
                    </div>
                    <div class="col-md-3   form-floating-outline form-floating">
                        <select id="filter_department" class="form-select">
                            <option value="">{{ __('hr.select_department') }}</option>
                            @foreach($departments as $department)
                                <option value="{{ $department->id }}">{{ $department->name }}</option>
                            @endforeach
                        </select>
                        <label>{{__('hr.department')}}</label>
                    </div>
                    <div class="col-md-3   form-floating-outline form-floating">
                        <select id="filter_job" class="form-select">
                            <option value="">{{ __('hr.select_job') }}</option>
                            @foreach($jobs as $job)
                                <option value="{{ $job->id }}">{{ $job->name }}</option>
                            @endforeach
                        </select>
                        <label>{{__('hr.job')}}</label>
                    </div>
                    <div class="col-md-3 form-floating form-floating-outline ">
                        <input type="month" id="filter_month" class="form-control">
                        <label>{{__('hr.month')}}</label>

                    </div>

                </div>
            </div>
        </div>
    </div>


    <section class="content">
        <div class="card tw-transition-all tw-duration-200 tw-bg-white tw-shadow-sm hover:tw-shadow-md tw-rounded-xl hover:tw-translate-y-0.5 tw-ring-1 tw-ring-gray-200 no-print">
            <div class="card-body">
                <div class="add-new">
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#add_vacation_modal">
                        {{ __('messages.add') }}
                    </button>
                </div>

                <table class="table table-bordered table-hover" id="vacation_requests_table">
                    <thead>
                    <tr>
                        <th>{{ __('hr.employee_name') }}</th>
                        <th>{{ __('hr.department') }}</th>
                        <th>{{ __('hr.job') }}</th>
                        <th>{{ __('hr.location') }}</th>
                        <th>{{ __('hr.start_date') }}</th>
                        <th>{{ __('hr.end_date') }}</th>
                        <th>{{ __('hr.days_count') }}</th>
                        <th>{{ __('hr.status') }}</th>
                        <th>{{ __('messages.action') }}</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </section>

    <!-- مودال الموافقة -->
    <div class="modal fade" id="approval_modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('hr.approval') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p id="approval_message"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary confirm_approval">{{ __('messages.confirm') }}</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('messages.close') }}</button>
                </div>
            </div>
        </div>
    </div>

    @include('hr.employee_vacations.create')

@endsection

@section('javascript')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            flatpickr("#filter_month", {
                plugins: [
                    new monthSelectPlugin({
                        shorthand: true, // Use shorthand month names (e.g., Jan, Feb)
                        dateFormat: "Y-m", // Format for the stored value (YYYY-MM)
                        altFormat: "F Y", // Format for display (e.g., January 2025)
                    }),
                ],
                allowInput: true, // Allow manual input
            });
        });
        $(document).ready(function() {

            $('.datepicker').datepicker();
            var table = $('#vacation_requests_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route("employee-vacations.index") }}',
                    data: function(d) {
                        d.location_id = $('#filter_location').val();
                        d.department_id = $('#filter_department').val();
                        d.job_id = $('#filter_job').val();
                        d.month = $('#filter_month').val();
                    }
                },
                columns: [
                    { data: 'employee_name', name: 'employee_name' },
                    { data: 'department', name: 'department' },
                    { data: 'job', name: 'job' },
                    { data: 'location', name: 'location' },
                    { data: 'start_date', name: 'start_date' },
                    { data: 'end_date', name: 'end_date' },
                    { data: 'number_of_days', name: 'number_of_days' },
                    { data: 'status', name: 'status' },
                    { data: 'action', name: 'action', orderable: false, searchable: false }

                ]
            });

            table.buttons().container().appendTo( '.add-new' );

            // تطبيق الفلاتر
            $('#filter_location, #filter_department, #filter_job, #filter_month').on('change', function() {
                table.ajax.reload();
            });
            // حذف طلب
            $(document).on('click', '.delete_vacation_button', function() {
                var href = $(this).data('href');
                swal({
                    title: '{{ __("messages.are_you_sure") }}',
                    text: '{{ __("messages.confirm_delete") }}',
                    icon: 'warning',
                    buttons: true,
                    dangerMode: true,
                }).then((willDelete) => {
                    if (willDelete) {
                        $.ajax({
                            method: 'DELETE',
                            url: href,
                            success: function(result) {
                                if (result.success) {
                                    toastr.success(result.msg);
                                    table.ajax.reload();
                                } else {
                                    toastr.error(result.msg);
                                }
                            }
                        });
                    }
                });
            });
            $(document).on('submit', 'form#add_vacation_form', function (e) {
                e.preventDefault();
                var form = $(this);
                var data = form.serialize();

                $.ajax({
                    method: 'POST',
                    url: form.attr('action'),
                    data: data,
                    dataType: 'json',
                    beforeSend: function () {
                        __disable_submit_button(form.find('button[type="submit"]'));
                    },
                    success: function (result) {
                        if (result.success) {
                            toastr.success(result.msg);
                            form[0].reset();
                            $('#add_vacation_modal').modal('hide');
                            // إعادة تحميل الجدول أو الصفحة
                            vacation_table.ajax.reload();
                        } else {
                            if (result.errors) {
                                $.each(result.errors, function (key, messages) {
                                    messages.forEach(function (msg) {
                                        toastr.error(msg);
                                    });
                                });
                            } else {
                                toastr.error(result.msg);
                            }
                        }
                    },
                    error: function () {
                        toastr.error("{{ __('messages.something_went_wrong') }}");
                    },
                    complete: function () {
                        __enable_submit_button(form.find('button[type="submit"]'));
                    }
                });
            });
            $(document).on('click', '.approve_request, .reject_request', function() {
                var id = $(this).data('id');
                var type = $(this).hasClass('approve_request') ? 'approve' : 'reject';
                var url = type === 'approve'
                    ? '{{ route("employee-vacations.final-approve", ":id") }}'
                    : '{{ route("employee-vacations.final-reject", ":id") }}';
                url = url.replace(':id', id);
                $('#approval_modal').data('url', url).modal('show');
            });

            // تأكيد الموافقة أو الرفض
            $(document).on('click', '.confirm_approval', function() {
                var url = $('#approval_modal').data('url');
                $.ajax({
                    method: 'POST',
                    url: url,
                    success: function(response) {
                        toastr.success(response.msg);
                        $('#approval_modal').modal('hide');
                        table.ajax.reload();
                    },
                    error: function(xhr) {
                        toastr.error(xhr.responseJSON.msg);
                    }
                });
            });

        });
    </script>
@endsection