@extends('admin.layouts.layouts')

@section('title', 'Leave Setting')

@section('content')
   <div class="page-header">
        <h3 class="page-title">Leave Setting</h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item" aria-current="page">Leave Setting</li>
            </ol>
        </nav>
    </div>

    <div class="container">

        <div class="card">

            <form method="POST" action="{{ route('leave-settings.update') }}" id="leaveSettingForm">
                @csrf
                <input type="hidden" name="id" id="id" value="{{ $currentSetting->id ?? '' }}">

                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <label for="total_leave" class="form-label">Total Leave</label>
                            <input type="text" class="form-control number" id="total_leave" name="total_leave"
                                value="{{ old('total_leave', $currentSetting->total_leave ?? '') }}" required placeholder="Enter Total Leave" data-parsley-required
                                data-parsley-trigger="keyup" data-parsley-type="digits" data-parsley-required-message='Please enter total leave'
                                data-parsley-type-message="Please enter valid total leave"
                                data-parsley-errors-container='#total_leave_error'>
                            <span class="text-danger" id="total_leave_error"></span>
                        </div>

                        <div class="col-md-6">
                            <label for="effective_date" class="form-label">Effective Month</label>
                            <input type="month" class="form-control" id="effective_date" name="effective_date"
                            value="{{ old('effective_date', isset($currentSetting) ? date('Y-m', strtotime($currentSetting->effective_date)) : '') }}"
                            required data-parsley-required data-parsley-required-message="Please select effective month"
                            data-parsley-errors-container='#effective_date_error'>
                            <span class="text-danger" id="effective_date_error"></span>
                        </div>
                    </div>

                    <div class="card mt-3">
                        <div class="card-header">
                            <h5>Leave Type Allocations</h5>
                            <p class="mb-0 text-muted">Total allocated for normal leaves: <span id="total-allocated">0</span>/<span id="total-available">{{ old('total_leave', $currentSetting->total_leave ?? 0) }}</span></p>
                        </div>

                        <div class="card-body">
                            <div id="leave-type-fields">
                                <div class="row mb-2">
                                    <div class="col-md-4"><strong>Leave Type</strong></div>
                                    <div class="col-md-4">
                                        <strong>Allocate Leaves</strong>
                                        <div class="invalid-feedback1" style="color:#BA3838; display: none;" id="outofavailable"></div>
                                    </div>
                                    <div class="col-md-4"><strong>Carry Forward Leaves</strong></div>
                                </div>

                                @foreach($leaveTypes as $type)
                                    <div class="row mt-3 leave-type-row" data-type-id="{{ $type->id }}" data-is-extra="{{ $type->extra_or_normal }}">
                                        <div class="col-md-4">
                                            <label class="form-label">
                                                {{ $type->name }} ({{ $type->short_name }}) <span
                                            class="text-danger">*</span>
                                                {{-- @if($type->extra_or_normal)
                                                    <span class="badge bg-info">Extra</span>
                                                @endif --}}
                                            </label>
                                        </div>

                                        <div class="col-md-4">
                                            <input type="text" class="form-control leave-count number"
                                                name="leave_counts[{{ $type->id }}]"
                                                value="{{ old('leave_counts.'.$type->id, $settingData[$type->id]->leave_count ?? '') }}"
                                                required placeholder="Enter Allocate Leaves" data-parsley-required
                                                data-parsley-trigger="keyup" data-parsley-type="digits" data-parsley-required-message='Please enter allocate leaves'
                                                data-parsley-type-message="Please enter valid allocate leaves"
                                                data-parsley-errors-container='#leave_counts.$type->id_error'>
                                                <span class="text-danger" id="leave_counts_error"></span>
                                        </div>

                                        @if($type->carry_forward)
                                            <div class="col-md-4">
                                                <input type="text" class="form-control carry-forward-input number"
                                                    name="carry_forward_counts[{{ $type->id }}]"
                                                    placeholder="No of carry forward leave"
                                                    value="{{ old('carry_forward_counts.'.$type->id, $settingData[$type->id]->carry_forward_count ?? '') }}" data-parsley-required
                                                    data-parsley-trigger="keyup" data-parsley-type="digits" data-parsley-required-message='Please enter allocate leaves'
                                                    data-parsley-type-message="Please enter valid allocate leaves"
                                                    data-parsley-errors-container='#leave_counts.$type->id_error'>
                                                    <div class="invalid-feedback1 carry-forward-error" style="color:#BA3838; display: none;">
                                                        Carry forward leave cannot exceed allocated leaves
                                                    </div>
                                            </div>
                                        @else
                                            <div class="col-md-4"></div> <!-- Empty column for alignment -->
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-footer">
                    <button type="submit" class="btn btn-primary" id="updateLeaveSetting">Update</button>
                </div>
            </form>
        </div>
    </div>

    <div class="container py-4">

        <div class="card shadow-sm rounded border-0">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold">Leave Setting History</h5>
            </div>
            <div class="card-body">
                @if($leaveSettings->isEmpty())
                    <p style="text-align: center; font-weight: bold;">No leave settings found.</p>
                @else
                    <div class="table-responsive">
                        <table class="table table-hover" id="leaveSettingsTable">
                            <thead>
                                <tr>
                                    <th>Effective Month</th>
                                    <th>Total Days</th>
                                    <th>Created At</th>
                                    <th>Created By</th>
                                    <th>Updated At</th>
                                    <th>Updated By</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($leaveSettings as $setting)
                                    <tr>
                                        <td>{{ date('F, Y', strtotime($setting->effective_date)) }}</td>
                                        <td>{{ $setting->total_leave }}</td>
                                        <td>{{ $setting->created_at->format('d-m-Y') }}</td>
                                        <td>{{ $setting->creator->name }}</td>
                                        <td>{{ isset($setting->updated_by) ? $setting->updated_at->format('d-m-Y') : '-' }}</td>
                                        <td>{{ isset($setting->updated_by) ? $setting->editor->name : '-' }}</td>
                                        <td>
                                            <a href="{{ route('leave-settings.show', $setting->id) }}" class="btn btn-icon btn-dark">
                                                <i class="fa fa-eye"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script type="text/javascript">
        $(document).ready(function() {
            $('#leaveSettingsTable').DataTable({
                "paging": true,
                "searching": true,
                "info": true,
                "autoWidth": false,
                "pageLength": 10,
                "order": [[0, 'desc']],
                "columnDefs": [{"targets": [6],"orderable": false}]
            });

            var minDate = null;
            @if(isset($latestEffectiveDate))
                minDate = new Date('{{ date('d-m-Y', strtotime($latestEffectiveDate)) }}');
                minDate.setDate(minDate.getDate() + 1);
            @endif

            $('.effectiveDate').datepicker({
                dateFormat: "dd-mm-yy",
                changeMonth: true,
                changeYear: true,
                yearRange: "2010:" + (new Date().getFullYear() + 10),
                minDate: minDate,
                beforeShow: function(input, inst) {
                    // Re-validate min date when picker is shown
                    var currentMinDate = $(this).datepicker('option', 'minDate');
                    @if(isset($latestEffectiveDate))
                        var newMinDate = new Date('{{ date('d-m-Y', strtotime($latestEffectiveDate)) }}');
                        newMinDate.setDate(newMinDate.getDate() + 1);
                        if (!currentMinDate || newMinDate > currentMinDate) {
                            $(this).datepicker('option', 'minDate', newMinDate);
                        }
                    @endif
                }
            }).attr('autocomplete', 'off');

            const $totalLeaveInput = $('#total_leave');
            const $totalAvailableSpan = $('#total-available');
            const $totalAllocatedSpan = $('#total-allocated');
            const $form = $('#leaveSettingForm');
            const $outOfAvailableDiv = $('#outofavailable');

            calculateTotalAllocated();
            // Update available total when main input changes
            $totalLeaveInput.on('input', function() {
                $totalAvailableSpan.text(this.value);
                calculateTotalAllocated();
            });

            // Calculate total allocated normal leaves
            function calculateTotalAllocated() {
                let total = 0;

                $('.leave-type-row').each(function() {
                    if ($(this).data('is-extra') === 0) { // Only count normal leaves
                        const inputValue = parseFloat($(this).find('.leave-count').val()) || 0;
                        total += inputValue;
                    }
                });

                $totalAllocatedSpan.text(total);

                // Highlight if over total
                const available = parseFloat($totalAvailableSpan.text()) || 0;

                if (total > available) {
                    $totalAllocatedSpan.css('color', 'red');
                    $outOfAvailableDiv.text('Total allocated leaves cannot exceed available leaves!').show();
                } else {
                    $totalAllocatedSpan.css('color', '');
                    $outOfAvailableDiv.text('').hide();
                }
            }

            function validateCarryForwardLeaves() {
                let allValid = true;

                $('.leave-type-row').each(function() {
                    const $row = $(this);
                    if ($row.find('.carry-forward-input').length) {
                        const allocated = parseFloat($row.find('.leave-count').val()) || 0;
                        const carryForward = parseFloat($row.find('.carry-forward-input').val()) || 0;
                        const $errorDiv = $row.find('.carry-forward-error');

                        if (carryForward > allocated) {
                            $errorDiv.show();
                            allValid = false;
                        } else {
                            $errorDiv.hide();
                        }
                    }
                });

                return allValid;
            }

            // Rest of your existing jQuery code...
            // Add event listeners to all leave count inputs
            $('.leave-count, .carry-forward-input').on('input', function() {
                calculateTotalAllocated();
                validateCarryForwardLeaves();
            });
            // Load setting when clicking on a previous setting
            $('.load-setting').on('click', function() {
                const settingId = $(this).data('id');
                const $button = $(this);

                $button.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...');

                $.ajax({
                    url: `/leave-settings/${settingId}/load`,
                    method: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        if (data.success) {
                            // Update form fields
                            $('#id').val(data.setting.id);
                            $('#total_leave').val(data.setting.total_leave);
                            $('#effective_date').val(data.setting.effective_date);

                            // Update leave counts
                            data.settingData.forEach(function(item) {
                                $(`input[name="leave_counts[${item.leave_type_id}]"]`).val(item.leave_count);
                                $(`input[name="carry_forward_counts[${item.leave_type_id}]"]`).val(item.carry_forward_count);
                            });

                            // Recalculate totals
                            calculateTotalAllocated();
                            $totalAvailableSpan.text(data.setting.total_leave);
                        }
                    },
                    complete: function() {
                        $button.prop('disabled', false).text('Load');
                    },
                    error: function(xhr, status, error) {
                        console.error('Error:', error);
                    }
                });
            });

            // Handle form submission with AJAX
            $form.on('submit', function(e) {
                e.preventDefault();

                const available = parseFloat($totalAvailableSpan.text()) || 0;
                const allocated = parseFloat($totalAllocatedSpan.text()) || 0;

                if (allocated > available) {
                    $outOfAvailableDiv.text('Total allocated leaves cannot exceed available leaves!').show();
                    return false;
                }

                if (!validateCarryForwardLeaves()) {
                    return false;
                }

                const formData = new FormData(this);
                const $submitButton = $('#updateLeaveSetting');
                $submitButton.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Updating...');

                // Clear previous errors
                $('.is-invalid').removeClass('is-invalid');
                $('.invalid-feedback').remove();
                $outOfAvailableDiv.hide();

                $.ajax({
                    url: $(this).attr('action'),
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    },
                    success: function(data) {
                        if (data.success) {
                            toastr.success(data.message);
                            window.location.reload();
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            // Handle validation errors
                            const errors = xhr.responseJSON.errors;
                            for (const [field, messages] of Object.entries(errors)) {
                                const $field = $(`[name="${field}"]`);

                                if ($field.length) {
                                    $field.addClass('is-invalid');
                                    const $errorDiv = $('<div class="invalid-feedback"></div>').text(messages[0]);
                                    $field.after($errorDiv);
                                } else if (field.includes('leave_counts.') || field.includes('carry_forward_counts.')) {
                                    // Handle leave type specific errors
                                    const typeId = field.match(/\d+/)[0];
                                    const isCarryForward = field.includes('carry_forward_counts');
                                    const $input = $(`[name="${isCarryForward ? 'carry_forward_counts' : 'leave_counts'}[${typeId}]"]`);

                                    $input.addClass('is-invalid');
                                    const $errorDiv = $('<div class="invalid-feedback"></div>').text(messages[0]);
                                    $input.after($errorDiv);
                                }
                            }
                        } else {
                            toastr.error('Something went wrong. Please try again.');
                        }
                    },
                    complete: function() {
                        $submitButton.prop('disabled', false).text('Update');
                    }
                });
            });
        });
    </script>
@endsection