@extends('admin.layouts.layouts')

@section('title', 'Monthly Leave Allocation')
@section('page-css')
    <style>
        .table-scroll-wrapper {
            overflow-x: auto;
            padding-bottom: 10px;
            width: 100%;
        }

        .leave-allocation-container {
            display: flex;
            gap: 20px;
            min-width: auto;
            overflow-x: auto;
            width: 100%;
            flex-wrap: nowrap;
        }

        .leave-half-table {
            flex: 1;
            min-width: 300px;
            overflow-x: auto;
        }

        .leave-allocation-table {
            width: 100%;
            min-width: 600px;
            border-collapse: separate;
            border-spacing: 0;
        }

        .leave-allocation-table th,
        .leave-allocation-table td {
            white-space: nowrap;
            text-align: center;
            vertical-align: middle;
            padding: 8px 12px;
        }

        .leave-allocation-table thead th.sticky-col,
        .leave-allocation-table tbody td.sticky-col {
            position: sticky;
            left: 0;
            background: #fff;
            z-index: 3;
        }

        .leave-allocation-table thead th.sticky-col-2,
        .leave-allocation-table tbody td.sticky-col-2 {
            position: sticky;
            background: #fff;
            z-index: 2;
        }

        .leave-allocation-table thead th {
            position: sticky;
            top: 0;
            z-index: 4;
            background: #f8f9fa !important;
        }

        .leave-allocation-table thead th:not(.sticky-col):not(.sticky-col-2) {
            z-index: 1;
        }

        .table-responsive {
            border: 1px solid #dee2e6;
            border-radius: 4px;
            overflow-x: auto;
        }

        .leave-type-error {
            display: block;
            white-space: normal;
            word-wrap: break-word;
            max-width: 120px;
            margin-top: 5px;
            text-align: center;
        }

        .leave-allocation-container::-webkit-scrollbar,
        .leave-half-table::-webkit-scrollbar,
        .table-responsive::-webkit-scrollbar {
            height: 8px;
        }

        .leave-allocation-container::-webkit-scrollbar-thumb,
        .leave-half-table::-webkit-scrollbar-thumb,
        .table-responsive::-webkit-scrollbar-thumb {
            background-color: #6c757d;
            border-radius: 4px;
        }

        .leave-allocation-container::-webkit-scrollbar-track,
        .leave-half-table::-webkit-scrollbar-track,
        .table-responsive::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
    </style>
@endsection
    
@section('content')
    <div class="page-header">
        <h3 class="page-title">Monthly Leave Allocation</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">Monthly Leave Allocation</li>
            </ol>
        </nav>
    </div>

    <div class="card">
        <form method="POST" action="{{ route('monthly-leave-allocations.update') }}" id="leaveSettingForm">
            @csrf
            <input type="hidden" name="id" id="id" value="{{ $currentMonthlyLeave->id ?? '' }}">

            <div class="card-body">
                <div class="row">
                    <div class="col-md-auto">
                        <label for="year" class="form-label me-2"><strong>Year</strong></label>
                        <select name="year" class="form-control d-inline-block w-auto" required data-parsley-required
                            data-parsley-trigger="keyup" data-parsley-required-message='Please select year'
                            data-parsley-errors-container='#year_error'>
                            @for($i = now()->year; $i <= now()->year + 2; $i++)
                                <option value="{{ $i }}" {{ (isset($currentMonthlyLeave->year) && ($currentMonthlyLeave->year == $i)) ? 'selected' : '' }}>{{ $i }}</option>
                            @endfor
                        </select>
                        <span class="text-danger" id="year_error">{{ $errors->first('year') }}</span>
                    </div>    
                </div>

                <div class="table-scroll-wrapper mt-3">
                    <div class="leave-allocation-container">
                        @php
                            $firstHalfMonths = $months->slice(0, 6);
                            $secondHalfMonths = $months->slice(6);
                        @endphp
                        
                        <div class="leave-half-table">
                            <div class="table-responsive">
                                @include('admin.monthly-leave-allocation.leave-allocation-table', ['monthsChunk' => $firstHalfMonths])
                            </div>
                        </div>
                        
                        <div class="leave-half-table">
                            <div class="table-responsive">
                                @include('admin.monthly-leave-allocation.leave-allocation-table', ['monthsChunk' => $secondHalfMonths])
                            </div>
                        </div>
                    </div>
                </div>

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

    <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">Monthly Leave Allocation History</h5>
        </div>
        <div class="card-body">
            @if($yearWiseAllocations->isEmpty())
                <p style="text-align: center; font-weight: bold;">No leave settings found.</p>
            @else
                <table class="table table-hover" id="leaveSettingsTable">
                    <thead>
                        <tr>
                            <th>Year</th>
                            <th>Created At</th>
                            <th>Created By</th>
                            <th>Updated At</th>
                            <th>Updated By</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($yearWiseAllocations as $yearRow)
                            <tr>
                                <td>{{ $yearRow->year }}</td>
                                <td>{{ $yearRow?->created_at?->format('d-m-Y') }}</td>
                                <td>{{ $yearRow?->creator?->name ?? '' }}</td>
                                <td>{{ isset($yearRow?->updated_by) ? $yearRow?->updated_at?->format('d-m-Y') : '' }}</td>
                                <td>{{ isset($yearRow?->updated_by) ? $yearRow?->editor?->name : '' }}</td>
                                <td>
                                    <a href="{{ route('monthly-leave-allocations.show', $yearRow->year) }}" class="btn btn-icon btn-dark">
                                        <i class="fa fa-eye"></i>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @endif
        </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": [5], "orderable": false }]
            });

            $(document).on('input', '.form-control', function () {
                let value = $(this).val().trim();

                if (value === '') return;

                const floatValue = parseFloat(value);

                if (isNaN(floatValue) || ((floatValue * 10) % 5 !== 0)) {
                    if (value.includes('.') && parseFloat(value.split('.')[1]) < 5 && parseFloat(value.split('.')[1]) > 0) {
                        const integerPart = Math.floor(floatValue);
                        $(this).val(integerPart);
                    } else if (value.includes('.') && parseFloat(value.split('.')[1]) > 5) {
                        $(this).val(Math.ceil(floatValue));
                    } else if (isNaN(floatValue) && value.length > 0) {
                        $(this).val('');
                    }
                }
            });

            window.Parsley.addValidator('halfIncrement', {
                validateString: function(value) {
                    const num = parseFloat(value);

                    if (isNaN(num)) {
                        return false;
                    }

                    const fractionalPart = num - Math.floor(num);

                    return fractionalPart === 0 || Math.abs(fractionalPart - 0.5) < 0.00001;
                },
                messages: {
                    en: 'Please enter a value in increments of 0.5 (e.g., 0.5, 1, 1.5).'
                }
            });

            function validateLeaveTypeSum(index) {
                let totalLeaveInput = $(`input[name='months[${index}][total_leave]']`);
                let totalLeave = parseFloat(totalLeaveInput.val()) || 0;
                let sum = 0;
                let exceeded = false;

                const inputs = $(`input[name^='months[${index}][leave_types]']`);

                inputs.each(function () {
                    $(this).next('.leave-type-error').text('');
                });

                inputs.each(function () {
                    if (exceeded) return;

                    let $this = $(this);
                    let val = parseFloat($this.val()) || 0;
                    sum += val;

                    if (sum > totalLeave) {
                        const errorMsg = `This leave exceeds total leave (${totalLeave})`;
                        $this.next('.leave-type-error').text(errorMsg);
                        exceeded = true;
                    }
                });

                return !exceeded;
            }

            $(document).on('keyup change', '.total-leave, .leave-type', function () {
                let $input = $(this);
                let index;

                if ($input.hasClass('total-leave')) {
                    const match = $input.attr('name').match(/months\[(\d+)\]/);
                    if (match) {
                        index = match[1];
                    }
                } else if ($input.hasClass('leave-type')) {
                    index = $input.data('month-index');
                }

                if (typeof index !== 'undefined') {
                    validateLeaveTypeSum(index);
                }
            });

            $('#leaveSettingForm').parsley();
            const $form = $('#leaveSettingForm');

            $form.on('submit', function (e) {
                e.preventDefault();

                // Validate all months
                let isValid = true;
                $('.total-leave').each(function () {
                    const match = $(this).attr('name').match(/months\[(\d+)\]/);
                    if (match) {
                        const index = match[1];
                        if (!validateLeaveTypeSum(index)) {
                            isValid = false;
                        }
                    }
                });

                if (!isValid) {
                    toastr.error('Please fix the errors in leave type distribution before submitting.');
                    return false;
                }

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

                // Clear previous error messages
                $('.text-danger').text('');
                $('.is-invalid').removeClass('is-invalid');

                $.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) {
                            const errors = xhr.responseJSON.errors;

                            // Loop through Laravel validation errors
                            $.each(errors, function (key, messages) {
                                const message = messages[0];
                                const formattedKey = key.replace(/\./g, '][').replace(/^/, 'months[') + '_error';
                                const $errorSpan = $('#' + CSS.escape(formattedKey));
                                if ($errorSpan.length) {
                                    $errorSpan.text(message);
                                }
                            });
                        } else {
                            toastr.error('Something went wrong. Please try again.');
                        }
                    },
                    complete: function () {
                        $submitButton.prop('disabled', false).text('Update');
                    }
                });
            });
        });
    </script>
@endsection