@extends('layouts.app_hr')

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

@section('content')
    <!-- Content Header (Page header) -->
    <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.add_policy')}}</li>
            </ol>
        </nav>

    </section>

    <div class="container">
         <form action="{{ route('attendance-policies.store') }}" method="POST" id="add_policy_form">
            @csrf
             <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">
                    <!-- Basic Policy Information -->
                    <h5>{{ __('hr.policy_info') }}</h5>
                    <div class="row mb-3">
                        <div class="col-6">
                            <div class="form-floating form-floating-outline mt-5">
                                <input type="text" name="policy_name" id="policy_name" class="form-control" required>
                                <label for="policy_name">{{ __('hr.policy_name') }}</label>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-floating form-floating-outline mt-5">
                                <input type="number" name="grace_period_minutes" id="grace_period_minutes" class="form-control">
                                <label for="grace_period_minutes">{{ __('hr.grace_period_minutes') }}</label>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-6">
                            <div class="form-floating form-floating-outline mt-5">
                                <input type="number" name="max_occurrences_per_policy" id="max_occurrences_per_policy" class="form-control">
                                <label for="max_occurrences_per_policy">{{ __('hr.max_occurrences_per_policy') }}</label>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-floating form-floating-outline mt-5">
                                <select name="recurrence_scale" id="recurrence_scale" class="form-control select2">
                                    <option value="monthly">{{ __('hr.monthly') }}</option>
                                    <option value="yearly">{{ __('hr.yearly') }}</option>
                                    <option value="lifetime">{{ __('hr.lifetime') }}</option>
                                </select>
                                <label for="recurrence_scale">{{ __('hr.recurrence_scale') }}</label>
                            </div>
                        </div>
                    </div>


                     </div>
                <div class="card-body">
                    <!-- Late Penalties -->
                    <h6>{{ __('hr.late_penalties') }}</h6>
                    <table class="table table-bordered" id="late_penalties_table">
                        <thead>
                        <tr>
                            <th>{{ __('hr.minutes_from') }}</th>
                            <th>{{ __('hr.minutes_to') }}</th>
                            <th>{{ __('hr.penalty_type') }}</th>
                            <th>{{ __('hr.penalty_value') }}</th>
                            <th>{{ __('hr.suspension_days') }}</th>
                            <th>{{ __('messages.actions') }}</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                    <button type="button" class="btn btn-primary" id="add_late_penalty_row">{{ __('hr.add_row') }}</button>

                    <!-- Absence Penalties -->
                    <h6 class="mt-4">{{ __('hr.absence_penalties') }}</h6>
                    <table class="table table-bordered" id="absence_penalties_table">
                        <thead>
                        <tr>
                            <th>{{ __('hr.occurrence_from') }}</th>
                            <th>{{ __('hr.occurrence_to') }}</th>
                            <th>{{ __('hr.penalty_type') }}</th>
                            <th>{{ __('hr.penalty_value') }}</th>
                            <th>{{ __('hr.suspension_days') }}</th>
                            <th>{{ __('messages.actions') }}</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                    <button type="button" class="btn btn-primary" id="add_absence_penalty_row">{{ __('hr.add_row') }}</button>

                    <!-- Overtime Rewards -->
                    <h6 class="mt-4">{{ __('hr.overtime_rewards') }}</h6>
                    <table class="table table-bordered" id="overtime_rewards_table">
                        <thead>
                        <tr>
                            <th>{{ __('hr.minutes_from') }}</th>
                            <th>{{ __('hr.minutes_to') }}</th>
                            <th>{{ __('hr.reward_value') }}</th>
                            <th>{{ __('messages.actions') }}</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                    <button type="button" class="btn btn-primary" id="add_overtime_reward_row">{{ __('hr.add_row') }}</button>

                    <!-- Early Leave Penalties -->
                    <h6 class="mt-4">{{ __('hr.early_leave_penalties') }}</h6>
                    <table class="table table-bordered" id="early_leave_penalties_table">
                        <thead>
                        <tr>
                            <th>{{ __('hr.minutes_from') }}</th>
                            <th>{{ __('hr.minutes_to') }}</th>
                            <th>{{ __('hr.penalty_type') }}</th>
                            <th>{{ __('hr.penalty_value') }}</th>
                            <th>{{ __('hr.suspension_days') }}</th>
                            <th>{{ __('messages.actions') }}</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                    <button type="button" class="btn btn-primary" id="add_early_leave_penalty_row">{{ __('hr.add_row') }}</button>

                </div>
            </div>

            <div class="mt-4">
                <button type="submit" class="btn btn-success">{{ __('messages.save') }}</button>
                <a href="{{ route('attendance-policies.index') }}" class="btn btn-secondary">{{ __('messages.cancel') }}</a>
            </div>
        </form>
    </div>
@endsection

@section('javascript')

    <script>


        @if ($errors->any())
        @foreach ($errors->all() as $error)
        toastr.error("{{ $error }}");
        @endforeach
        @endif
        $('.select2').select2();

        function addRowToTableWithValidation(tableId, columnsHtml, validator) {
            const tableBody = document.querySelector(`#${tableId} tbody`);
            const lastRow = tableBody.lastElementChild;

            // تحقق من أن الصف الأخير يحتوي على القيم الصحيحة
            if (lastRow) {
                const requiredInputs = lastRow.querySelectorAll("input[required], select[required]");
                for (const input of requiredInputs) {
                    if (!input.value) {
                        alert('{{ __('hr.row_validation_error') }}: {{ __('hr.fill_required_fields') }}');
                        return; // إذا كان هناك حقل مطلوب فارغ، منع إضافة الصف الجديد
                    }
                }

                // تحقق إضافي حسب الحاجة (مثل مقارنة القيم)
                if (validator && !validator(lastRow)) {
                    alert('{{ __('hr.row_validation_error') }}: {{ __('hr.invalid_values') }}');
                    return;
                }
            }

            // إضافة الصف الجديد إذا كان كل شيء صحيحًا
            const row = document.createElement('tr');
            row.innerHTML = columnsHtml;
            tableBody.appendChild(row);
        }


        document.getElementById('add_late_penalty_row').addEventListener('click', () => {
            addRowToTableWithValidation('late_penalties_table', `
        <td><input type="number" name="late_penalties[minutes_from][]" class="form-control" required></td>
        <td><input type="number" name="late_penalties[minutes_to][]" class="form-control"></td>
        <td>
            <select name="late_penalties[penalty_type][]" class="  select2" required>
                <option value="deduction">{{ __('hr.deduction') }}</option>
                <option value="warning">{{ __('hr.warning') }}</option>
                <option value="suspension">{{ __('hr.suspension') }}</option>
            </select>
        </td>
        <td><input type="number" name="late_penalties[penalty_value][]" class="form-control"></td>
        <td><input type="number" name="late_penalties[suspension_days][]" class="form-control"></td>
        <td><button type="button" class="btn btn-danger btn-sm remove-row">{{ __('hr.delete_row') }}</button></td>
    `, (lastRow) => {
                const lastMinutesTo = lastRow.querySelector('input[name="late_penalties[minutes_to][]"]').value;
                return lastMinutesTo && !isNaN(lastMinutesTo);
            });
        });

        document.getElementById('add_absence_penalty_row').addEventListener('click', () => {
            addRowToTableWithValidation('absence_penalties_table', `
        <td><input type="number" name="absence_penalties[occurrence_from][]" class="form-control " required></td>
        <td><input type="number" name="absence_penalties[occurrence_to][]" class="form-control"></td>
        <td>
            <select name="absence_penalties[penalty_type][]" class=" select2" required>
                <option value="deduction">{{ __('hr.deduction') }}</option>
                <option value="warning">{{ __('hr.warning') }}</option>
                <option value="suspension">{{ __('hr.suspension') }}</option>
            </select>
        </td>
        <td><input type="number" name="absence_penalties[penalty_value][]" class="form-control"></td>
        <td><input type="number" name="absence_penalties[suspension_days][]" class="form-control"></td>
        <td><button type="button" class="btn btn-danger btn-sm remove-row">{{ __('hr.delete_row') }}</button></td>
    `);
        });

        document.getElementById('add_overtime_reward_row').addEventListener('click', () => {
            addRowToTableWithValidation('overtime_rewards_table', `
        <td><input type="number" name="overtime_rewards[minutes_from][]" class="form-control" required></td>
        <td><input type="number" name="overtime_rewards[minutes_to][]" class="form-control"></td>
        <td><input type="number" name="overtime_rewards[reward_value][]" class="form-control"></td>
        <td><button type="button" class="btn btn-danger btn-sm remove-row">{{ __('hr.delete_row') }}</button></td>
    `);
        });

        document.getElementById('add_early_leave_penalty_row').addEventListener('click', () => {
            addRowToTableWithValidation('early_leave_penalties_table', `
        <td><input type="number" name="early_leave_penalties[minutes_from][]" class="form-control" required></td>
        <td><input type="number" name="early_leave_penalties[minutes_to][]" class="form-control"></td>
        <td>
            <select name="early_leave_penalties[penalty_type][]" class=" select2" required>
                <option value="deduction">{{ __('hr.deduction') }}</option>
                <option value="warning">{{ __('hr.warning') }}</option>
                <option value="suspension">{{ __('hr.suspension') }}</option>
            </select>
        </td>
        <td><input type="number" name="early_leave_penalties[penalty_value][]" class="form-control"></td>
        <td><input type="number" name="early_leave_penalties[suspension_days][]" class="form-control"></td>
        <td><button type="button" class="btn btn-danger btn-sm remove-row">{{ __('hr.delete_row') }}</button></td>
    `);
        });

        // Handle row deletion
        document.addEventListener('click', function (e) {
            if (e.target.classList.contains('remove-row')) {
                e.target.closest('tr').remove();
            }
        });


    </script>
@endsection