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

@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.holidays') }}</a>
                </li>
                <li class="breadcrumb-item active">{{ __('hr.vacation_balance_adjustments') }}</li>
            </ol>
        </nav>
    </section>

    <section class="content">
        <div class="card">
            <div class="card-body">
                <div class="add-new">
                    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#add_adjustment_modal">
                        <i class="ri-add-line"></i> {{ __('messages.add') }}
                    </button>
                </div>
                <div class="table-responsive mt-4">
                    <table class="table" id="adjustments_table">
                        <thead>
                        <tr>
                            <th>{{ __('hr.employee_name') }}</th>
                            <th>{{ __('hr.adjusted_amount') }}</th>
                            <th>{{ __('hr.adjustment_type') }}</th>
                            <th>{{ __('hr.reason') }}</th>
                            <th>{{ __('hr.adjusted_by') }}</th>
                            <th>{{ __('hr.approved_by') }}</th>
                            <th>{{ __('messages.action') }}</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>

    @include('hr.vacation_balance_adjustments.create')

    <div class="modal fade" id="approve_adjustment_modal" tabindex="-1" aria-labelledby="approveAdjustmentModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                {!! Form::open(['url' => '', 'method' => 'post', 'id' => 'approve_adjustment_form']) !!}
                <div class="modal-header">
                    <h5 class="modal-title" id="approveAdjustmentModalLabel">{{ __('Approve Adjustment') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>{{ __('Are you sure you want to approve this adjustment?') }}</p>
                    <input type="hidden" name="adjustment_id" id="adjustment_id">
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">{{ __('Approve') }}</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>


@stop


@section('javascript')
    <script>
        $(document).ready(function() {
            var table = $('#adjustments_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route("vacation-balance-adjustments.index") }}',
                columns: [
                    { data: 'employee_name', name: 'employee_name' },
                    { data: 'adjusted_amount', name: 'adjusted_amount' },
                    { data: 'adjustment_type', name: 'adjustment_type' },
                    { data: 'reason', name: 'reason' },
                    { data: 'adjusted_by', name: 'adjusted_by' },
                    { data: 'approved_by', name: 'approved_by' },
                    { data: 'action', name: 'action', orderable: false, searchable: false },
                ]
            });
            table.buttons().container().appendTo( '.add-new' );

            $(document).on('submit', '#add_adjustment_form', function (e) {
                e.preventDefault();

                var form = $(this);
                $.ajax({
                    method: 'POST',
                    url: form.attr('action'),
                    data: form.serialize(),
                    success: function (response) {
                        if (response.success) {
                            toastr.success(response.msg);
                            $('#add_adjustment_modal').modal('hide');
                            // تحديث الجدول
                            $('#adjustments_table').DataTable().ajax.reload();
                        } else {
                            toastr.error(response.msg);
                        }
                    },
                    error: function (xhr) {
                        toastr.error("{{ __('messages.something_went_wrong') }}");
                    }
                });
            });
            $(document).on('click', '.approve_adjustment_button', function () {
                var adjustmentId = $(this).data('id');
                $('#approve_adjustment_form').attr('action', '/hr/vacation-balance-adjustments/' + adjustmentId + '/approve');
                $('#adjustment_id').val(adjustmentId);
            });
            $(document).on('submit', '#approve_adjustment_form', function (e) {
                e.preventDefault();
                var form = $(this);
                var actionUrl = form.attr('action');

                $.ajax({
                    method: 'POST',
                    url: actionUrl,
                    dataType: 'json',
                    data: form.serialize(),
                    success: function (result) {
                        if (result.success) {
                            $('#approve_adjustment_modal').modal('hide');
                            toastr.success(result.msg);
                            $('#adjustments_table').DataTable().ajax.reload();
                        } else {
                            toastr.error(result.msg);
                        }
                    },
                    error: function () {
                        toastr.error('{{ __('Something went wrong') }}');
                    }
                });
            });


        });
    </script>
@stop