@extends('layouts.app_hr')

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

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

    <div class="container">
        <form action="{{ route('attendance-policies.update', $policy->id) }}" method="POST" id="edit_policy_form">
            @csrf
            @method('PUT')

            <div class="card">
                <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">
                                <input type="text" name="policy_name" id="policy_name" class="form-control"
                                       value="{{ $policy->policy_name }}" required>
                                <label for="policy_name">{{ __('hr.policy_name') }}</label>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-floating">
                                <input type="number" name="grace_period_minutes" id="grace_period_minutes" class="form-control"
                                       value="{{ $policy->grace_period_minutes }}">
                                <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">
                                <input type="number" name="max_occurrences_per_policy" id="max_occurrences_per_policy"
                                       class="form-control" value="{{ $policy->max_occurrences_per_policy }}">
                                <label for="max_occurrences_per_policy">{{ __('hr.max_occurrences_per_policy') }}</label>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-floating">
                                <select name="recurrence_scale" id="recurrence_scale" class="form-control">
                                    <option value="monthly" {{ $policy->recurrence_scale == 'monthly' ? 'selected' : '' }}>
                                        {{ __('hr.monthly') }}</option>
                                    <option value="yearly" {{ $policy->recurrence_scale == 'yearly' ? 'selected' : '' }}>
                                        {{ __('hr.yearly') }}</option>
                                    <option value="lifetime" {{ $policy->recurrence_scale == 'lifetime' ? 'selected' : '' }}>
                                        {{ __('hr.lifetime') }}</option>
                                </select>
                                <label for="recurrence_scale">{{ __('hr.recurrence_scale') }}</label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <!-- Dynamic Tables -->
                    <h5>{{ __('hr.attendance_policies') }}</h5>

                    <!-- Tables for Penalties -->
                    @foreach (['late', 'absence', 'early_leave'] as $type)
                        @php
                            $tableTitle = __('hr.' . $type . '_penalties');
                            $tableId = $type . '_table';
                            $penalties = $policy->{$type . 'Penalties'} ?? [];
                        @endphp

                        <h6 class="mt-4">{{ $tableTitle }}</h6>
                        <table class="table table-bordered" id="{{ $tableId }}">
                            <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>
                            @foreach ($penalties as $penalty)
                                <tr>
                                    <td><input type="number" name="{{ $type }}_penalties[minutes_from][]" value="{{ $penalty->minutes_from }}" class="form-control" required></td>
                                    <td><input type="number" name="{{ $type }}_penalties[minutes_to][]" value="{{ $penalty->minutes_to }}" class="form-control"></td>
                                    <td>
                                        <select name="{{ $type }}_penalties[penalty_type][]" class="form-control">
                                            <option value="deduction" {{ $penalty->penalty_type == 'deduction' ? 'selected' : '' }}>{{ __('hr.deduction') }}</option>
                                            <option value="warning" {{ $penalty->penalty_type == 'warning' ? 'selected' : '' }}>{{ __('hr.warning') }}</option>
                                            <option value="suspension" {{ $penalty->penalty_type == 'suspension' ? 'selected' : '' }}>{{ __('hr.suspension') }}</option>
                                        </select>
                                    </td>
                                    <td><input type="number" name="{{ $type }}_penalties[penalty_value][]" value="{{ $penalty->penalty_value }}" class="form-control"></td>
                                    <td><input type="number" name="{{ $type }}_penalties[suspension_days][]" value="{{ $penalty->suspension_days }}" class="form-control"></td>
                                    <td><button type="button" class="btn btn-danger btn-sm remove-row">{{ __('hr.delete_row') }}</button></td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                        <button type="button" class="btn btn-primary add-row-button" data-table-id="{{ $tableId }}" data-row-html='
                            <td><input type="number" name="{{ $type }}_penalties[minutes_from][]" class="form-control" required></td>
                            <td><input type="number" name="{{ $type }}_penalties[minutes_to][]" class="form-control"></td>
                            <td>
                                <select name="{{ $type }}_penalties[penalty_type][]" class="form-control">
                                    <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="{{ $type }}_penalties[penalty_value][]" class="form-control"></td>
                            <td><input type="number" name="{{ $type }}_penalties[suspension_days][]" class="form-control"></td>
                            <td><button type="button" class="btn btn-danger btn-sm remove-row">{{ __('hr.delete_row') }}</button></td>
                        '>{{ __('hr.add_row') }}</button>
                    @endforeach

                    <!-- Overtime Rewards Table -->
                    <h6 class="mt-4">{{ __('hr.overtime_rewards') }}</h6>
                    <table class="table table-bordered" id="overtime_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>
                        @foreach ($policy->overtimeRewards ?? [] as $reward)
                            <tr>
                                <td><input type="number" name="overtime_rewards[minutes_from][]" value="{{ $reward->minutes_from }}" class="form-control" required></td>
                                <td><input type="number" name="overtime_rewards[minutes_to][]" value="{{ $reward->minutes_to }}" class="form-control"></td>
                                <td><input type="number" name="overtime_rewards[reward_value][]" value="{{ $reward->reward_value }}" class="form-control"></td>
                                <td><button type="button" class="btn btn-danger btn-sm remove-row">{{ __('hr.delete_row') }}</button></td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                    <button type="button" class="btn btn-primary add-row-button" data-table-id="overtime_table" data-row-html='
                        <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>
                    '>{{ __('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>
        document.addEventListener('DOMContentLoaded', () => {
            function addRowToTable(tableId, columnsHtml) {
                const tableBody = document.querySelector(`#${tableId} tbody`);
                const row = document.createElement('tr');
                row.innerHTML = columnsHtml;
                tableBody.appendChild(row);
            }

            document.querySelectorAll('.add-row-button').forEach(button => {
                button.addEventListener('click', () => {
                    const tableId = button.dataset.tableId;
                    const rowHtml = button.dataset.rowHtml;
                    addRowToTable(tableId, rowHtml);
                });
            });

            document.addEventListener('click', e => {
                if (e.target.classList.contains('remove-row')) {
                    e.target.closest('tr').remove();
                }
            });
        });
    </script>
@endsection