@extends('dashboard.layouts.app')

@section('content')
    <div class="container mt-3">
        <div class="fw-bold my-3">Configuration</div>

        @can('hr_configuration_late_minutes')

            {{-- Late Minutes Section --}}
            <div class="card mb-3 p-3">
                <form class="form-late-minutes" data-id="{{ $setting->id }}">
                    <div class="mb-3">
                        <label class="form-label">Late Minutes</label>
                        <input type="number" class="form-control late_minutes" value="{{ $setting->late_minutes }}">
                    </div>
                    @can('hr_configuration_update')
                        <button class="btn btn-sm btn-outline-success radius-8 btn-save">Save</button>
                    @endcan
                </form>
            </div>

        @endcan

        @can('hr_configuration_shift_start')


            {{-- Shift Start Section --}}
            <div class="card mb-3 p-3">
                <form class="form-shift-start" data-id="{{ $setting->id }}">
                    <div class="mb-3">
                        <label class="form-label">Shift Start</label>
                        <input type="time" class="form-control shift_start_at" value="{{ $setting->shift_start_at }}">
                    </div>
                    @can('hr_configuration_update')
                        <button class="btn btn-sm btn-outline-success radius-8 btn-save">Save</button>
                    @endcan
                </form>
            </div>

        @endcan

        @can('hr_configuration_shift_end')


            {{-- Shift End Section --}}
            <div class="card mb-3 p-3">
                <form class="form-shift-end" data-id="{{ $setting->id }}">
                    <div class="mb-3">
                        <label class="form-label">Shift End</label>
                        <input type="time" class="form-control shift_end_at" value="{{ $setting->shift_end_at }}">
                    </div>
                    @can('hr_configuration_update')
                        <button class="btn btn-sm btn-outline-success radius-8 btn-save">Save</button>
                    @endcan
                </form>
            </div>

        @endcan

        @can('hr_configuration_attendance_start')

            {{-- Attendance Start Section --}}
            <div class="card mb-3 p-3">
                <form class="form-attendance-start" data-id="{{ $setting->id }}">
                    <div class="mb-3">
                        <label class="form-label">Attendance Start</label>
                        <input type="time" class="form-control attendence_start_at" value="{{ $setting->attendence_start_at }}">
                    </div>
                    @can('hr_configuration_update')
                        <button class="btn btn-sm btn-outline-success radius-8 btn-save">Save</button>
                    @endcan
                </form>
            </div>

        @endcan

        @can('hr_configuration_allowed_period_to_pay_invoices')

            {{-- Allowed Period Section --}}
            <div class="card mb-3 p-3">
                <form class="form-allowed-period" data-id="{{ $setting->id }}">
                    <div class="mb-3">
                        <label class="form-label">Allowed Period To Pay Invoices <small class="fw-bold text-danger">(Per
                                Hour)</small></label>
                        <input type="number" class="form-control allowed_period_to_pay_invoices"
                            value="{{ $setting->allowed_period_to_pay_invoices }}">
                    </div>
                    @can('hr_configuration_update')
                        <button class="btn btn-sm btn-outline-success radius-8 btn-save">Save</button>
                    @endcan
                </form>
            </div>
        @endcan


    </div>
@endsection


@push('scripts')
    <script>
        $(document).ready(function () {
            $('.btn-save').on('click', function (e) {
                e.preventDefault();

                const form = $(this).closest('form');
                const id = form.data('id');
                const data = {
                    _token: '{{ csrf_token() }}',
                    late_minutes: form.find('.late_minutes').val(),
                    shift_start_at: form.find('.shift_start_at').val(),
                    shift_end_at: form.find('.shift_end_at').val(),
                    attendence_start_at: form.find('.attendence_start_at').val(),
                    allowed_period_to_pay_invoices: form.find('.allowed_period_to_pay_invoices').val(),
                };

                $.ajax({
                    url: "{{ url('hrsettings') }}/" + id,
                    method: 'PUT',
                    data: data,
                    success: function () {
                        toastr.success('HR Setting updated successfully');
                    },
                    error: function (xhr) {
                        toastr.error(xhr.responseJSON?.message || 'An error occurred while saving');
                    }
                });
            });
        });
    </script>
@endpush