@extends('layouts.app_hr')
@section('title', __('hr.employee_shifts'))

@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_shifts') }}</li>
            </ol>
        </nav>
    </section>

    <section class="content">
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table" id="employee_shifts_table">
                        <thead>
                        <tr>
                            <th>{{ __('hr.employee_name') }}</th>
                            <th>{{ __('hr.shift_name') }}</th>
                            <th>{{ __('hr.has_fixed_shift') }}</th>
                            <th>{{ __('messages.action') }}</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </section>

@endsection
<!-- تضمين مودال الإضافة -->
@include('hr.employee_shifts.create')

<!-- تضمين مودال التعديل -->
<div class="modal fade edit_shift_modal" id="edit_shift_modal" tabindex="-1" aria-labelledby="editShiftModalLabel" aria-hidden="true">
</div>

@section('javascript')
    <script>
        $(document).ready(function() {
          let table=  $('#employee_shifts_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route("employee-shifts.index") }}',
                columns: [
                    { data: 'employee_name', name: 'employee_name' },
                    { data: 'shift_name', name: 'shift_name' },
                    { data: 'has_fixed_shift', name: 'has_fixed_shift' },
                    { data: 'action', name: 'action', orderable: false, searchable: false },
                ],
            });

            $(document).on('click', '.add_shift_button', function() {
                var userId = $(this).data('user-id'); // جلب user_id من الزر
                $('#add_shift_modal #user_id').val(userId); // وضع القيمة في الحقل المخفي
                $('#add_shift_modal').modal('show'); // عرض المودال
            });

            $('form#add_shift_form').submit(function (e) {
                e.preventDefault();
                var form = $(this);
                var data = form.serialize();

                $.ajax({
                    method: 'POST',
                    url: form.attr('action'),
                    data: data,
                    success: function (result) {
                        if (result.success) {
                            $('#add_shift_modal').modal('hide');
                            toastr.success(result.msg);
                            table.DataTable().ajax.reload();
                        } else {
                            toastr.error(result.msg);
                        }
                    },
                    error: function (xhr) {
                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            $.each(xhr.responseJSON.errors, function (key, error) {
                                toastr.error(error[0]);
                            });
                        } else {
                            toastr.error("{{ __('messages.something_went_wrong') }}");
                        }
                    }
                });
            });


            $(document).on('click', 'button.edit_shift_button', function() {
                $('div.edit_shift_modal').load($(this).data('href'), function() {
                    $(this).modal('show');

                    $('form#edit_shift_form').submit(function(e) {
                        e.preventDefault();
                        var form = $(this);
                        var data = form.serialize();

                        $.ajax({
                            method: 'POST',
                            url: $(this).attr('action'),
                            dataType: 'json',
                            data: data,
                            beforeSend: function(xhr) {
                                __disable_submit_button(form.find('button[type="submit"]'));
                            },
                            success: function(result) {
                                if (result.success == true) {
                                    $('div.edit_shift_modal').modal('hide');
                                    toastr.success(result.msg);
                                    form[0].reset();
                                    table.ajax.reload();
                                } else {
                                    $('div.edit_shift_modal').modal('hide');
                                    form[0].reset();
                                    toastr.error(result.msg);
                                    form.find('button[type="submit"]').removeAttr('disabled');
                                }
                            },
                        });
                    });
                });
            });


        });
    </script>
@endsection