@extends('admin_dashboard')
@section('admin')

<div class="content">
    <div class="container-fluid">
        <div class="page-title-box mb-2">
            <h4 class="page-title">Employee Leave History</h4>
        </div>

        <div class="card shadow-sm">
            <div class="card-body">
                {{-- 🔹 SID Selector --}}
                <div class="row">
                    <div class="col-md-4 mb-2">
                        <label for="sid">Choose your SID:</label>
                        <input class="form-control shadow-sm" list="emp_list" name="sid" id="sid"
                            placeholder="Enter SID">
                        <datalist id="emp_list">
                            @foreach($employees as $emp)
                            <option value="{{ $emp->account_number }}">{{ $emp->account_number }} -
                                {{ $emp->member_name }}
                            </option>
                            @endforeach
                        </datalist>
                    </div>
                </div>

                {{-- 🔹 Employee Info --}}
                <div class="row">
                    <div class="col-md-4 mb-2">
                        <label>Name:</label>
                        <p id="emp_name" class="fw-bold"></p>
                        <label>Father Name:</label>
                        <p id="emp_father"></p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label>Designation:</label>
                        <p id="emp_desig"></p>
                        <label>Join Date:</label>
                        <p id="emp_join_date"></p>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label>Cell No:</label>
                        <p id="emp_cell"></p>
                        <label>Address:</label>
                        <p id="emp_address"></p>
                    </div>
                </div>

                {{-- 🔹 Editable Table --}}
                <div class="table-responsive">
                    <table id="editableTable" class="table table-bordered table-hover align-middle">
                        <thead class="table-dark text-center">
                            <tr>
                                <th rowspan="2" class="uprow">SID</th>
                                <th rowspan="2" class="uprow">Year</th>
                                <th rowspan="2" class="uprow">Allocated</th>
                                <th colspan="12">Leave Taken</th>
                                <th rowspan="2" class="uprow">Total</th>
                                <th rowspan="2" class="uprow">Remain</th>
                                <th rowspan="2" class="uprow">Action</th>
                            </tr>
                            <tr>
                                <th>Jul</th>
                                <th>Aug</th>
                                <th>Sep</th>
                                <th>Oct</th>
                                <th>Nov</th>
                                <th>Dec</th>
                                <th>Jan</th>
                                <th>Feb</th>
                                <th>Mar</th>
                                <th>Apr</th>
                                <th>May</th>
                                <th>Jun</th>
                            </tr>
                        </thead>

                        {{-- 🔹 Editable Row --}}
                        <tr id="editableRow" class="bg-light">
                            <td class="sid-cell"></td>
                            @for ($i = 0; $i < 14; $i++) <td contenteditable="true">
                                </td>
                                @endfor
                                <td class="total-cell text-center fw-bold">0</td>
                                <td class="remain-cell text-center fw-bold">0</td>
                                <td class="text-center">
                                    <button type="button" id="saveRow" class="btn btn-primary btn-sm">Save</button>
                                </td>
                        </tr>

                        <tbody id="dataRows"></tbody>
                    </table>
                </div>

                {{-- Loader --}}
                <div id="loader" class="text-center my-3 d-none">
                    <div class="spinner-border text-primary" role="status"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<meta name="csrf-token" content="{{ csrf_token() }}">

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const empList = @json($employees);
        const sidInput = document.getElementById('sid');
        const editableRow = document.getElementById('editableRow');
        const saveBtn = document.getElementById('saveRow');
        const dataRows = document.getElementById('dataRows');
        const loader = document.getElementById('loader');
        let editId = null;

        // 🔹 SID Auto-fill & Fetch
        sidInput.addEventListener('input', function() {
            const enteredSid = this.value.trim();
            const matched = empList.find(e => e.account_number == enteredSid);
            const sidCell = editableRow.querySelector('.sid-cell');

            if (matched) {
                sidCell.textContent = matched.account_number;
                document.getElementById('emp_name').textContent = matched.member_name ?? '';
                document.getElementById('emp_father').textContent = matched.fat_hus_name ?? '';
                document.getElementById('emp_desig').textContent = matched.designation ?? '';
                document.getElementById('emp_join_date').textContent = matched.join_date ?? '';
                document.getElementById('emp_cell').textContent = matched.member_mobile ?? '';
                document.getElementById('emp_address').textContent = matched.member_address ?? '';
                fetchData(matched.account_number);
            } else {
                sidCell.textContent = '';
                dataRows.innerHTML = '';
                ['emp_name', 'emp_father', 'emp_desig', 'emp_join_date', 'emp_cell', 'emp_address'].forEach(
                    id => document.getElementById(id).textContent = ''
                );
            }
        });

        // 🔹 Fetch Data
        function fetchData(sid) {
            showLoader();
            fetch(`/leave/fetch/${sid}`)
                .then(res => res.json())
                .then(rows => {
                    dataRows.innerHTML = '';
                    if (!rows.length) {
                        dataRows.innerHTML =
                            `<tr><td colspan="17" class="text-center text-muted">No leave history found.</td></tr>`;
                    } else {
                        rows.forEach(r => appendRow(r));
                    }
                })
                .finally(hideLoader);
        }

        // 🔹 Auto Total Calculation
        editableRow.querySelectorAll('td[contenteditable="true"]').forEach(td => {
            td.addEventListener('input', updateTotals);
        });

        function updateTotals() {
            const cells = editableRow.querySelectorAll('td[contenteditable="true"]');
            const allocated = parseFloat(cells[1].textContent.trim()) || 0; // Allocated
            const months = Array.from(cells).slice(2, 14); // Jul–Jun
            const total = months.reduce((sum, td) => sum + (parseFloat(td.textContent.trim()) || 0), 0);
            const remain = allocated - total;

            editableRow.querySelector('.total-cell').textContent = total.toFixed();
            editableRow.querySelector('.remain-cell').textContent = remain.toFixed();
        }

        // 🔹 Save / Update
        saveBtn.addEventListener('click', function() {
            const sidCell = editableRow.querySelector('.sid-cell');
            const cells = editableRow.querySelectorAll('td[contenteditable="true"]');
            const data = {
                sid: sidCell.textContent.trim(),
                year: cells[0].textContent.trim(),
                allocated_leave: cells[1].textContent.trim(),
                july: cells[2].textContent.trim(),
                august: cells[3].textContent.trim(),
                september: cells[4].textContent.trim(),
                october: cells[5].textContent.trim(),
                november: cells[6].textContent.trim(),
                december: cells[7].textContent.trim(),
                january: cells[8].textContent.trim(),
                february: cells[9].textContent.trim(),
                march: cells[10].textContent.trim(),
                april: cells[11].textContent.trim(),
                may: cells[12].textContent.trim(),
                june: cells[13].textContent.trim(),
            };

            if (!data.sid) return alert('⚠️ Please select a valid SID first!');

            const url = editId ? `{{ url('/leave/update') }}/${editId}` : "{{ route('leave.store') }}";
            const method = editId ? "PUT" : "POST";

            showLoader();
            fetch(url, {
                    method: method,
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify(data)
                })
                .then(res => res.json())
                .then(resp => {
                    if (resp.success) {
                        alert(editId ? '✅ Updated successfully!' : '✅ Saved successfully!');
                        resetRow();
                        fetchData(data.sid);
                    }
                })
                .catch(() => alert('❌ Something went wrong!'))
                .finally(hideLoader);
        });

        // 🔹 Append Row
        function appendRow(r) {
            const total = [
                r.july, r.august, r.september, r.october, r.november, r.december,
                r.january, r.february, r.march, r.april, r.may, r.june
            ].map(v => parseFloat(v) || 0).reduce((a, b) => a + b, 0);
            const remain = (parseFloat(r.allocated_leave) || 0) - total;

            const row = document.createElement('tr');
            row.dataset.id = r.id;
            row.innerHTML = `
            <td>${r.sid}</td>
            <td>${r.year ?? ''}</td>
            <td>${r.allocated_leave ?? ''}</td>
            <td>${r.july ?? ''}</td><td>${r.august ?? ''}</td><td>${r.september ?? ''}</td>
            <td>${r.october ?? ''}</td><td>${r.november ?? ''}</td><td>${r.december ?? ''}</td>
            <td>${r.january ?? ''}</td><td>${r.february ?? ''}</td><td>${r.march ?? ''}</td>
            <td>${r.april ?? ''}</td><td>${r.may ?? ''}</td><td>${r.june ?? ''}</td>
            <td>${total.toFixed()}</td>
            <td>${remain.toFixed()}</td>
            <td class="text-center">
                <button class="btn btn-outline-success btn-xs editRow">Edit</button>
                <button class="btn btn-outline-danger btn-xs deleteRow" data-id="${r.id}">Delete</button>
            </td>`;
            dataRows.appendChild(row);
        }

        // 🔹 Edit
        dataRows.addEventListener('click', function(e) {
            if (e.target.classList.contains('editRow')) {
                const tr = e.target.closest('tr');
                const tds = tr.querySelectorAll('td');
                const sidCell = editableRow.querySelector('.sid-cell');
                sidCell.textContent = tds[0].textContent.trim();
                const inputs = editableRow.querySelectorAll('td[contenteditable="true"]');
                for (let i = 0; i < inputs.length; i++) {
                    inputs[i].textContent = tds[i + 1].textContent.trim();
                }
                editableRow.querySelector('.total-cell').textContent = tds[15].textContent.trim();
                editableRow.querySelector('.remain-cell').textContent = tds[16].textContent.trim();
                editId = tr.dataset.id;
                saveBtn.textContent = "Update";
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            }
        });

        // 🔹 Delete
        dataRows.addEventListener('click', function(e) {
            if (e.target.classList.contains('deleteRow')) {
                const id = e.target.dataset.id;
                if (confirm('Are you sure you want to delete this record?')) {
                    showLoader();
                    fetch(`{{ url('/leave/delete') }}/${id}`, {
                            method: "DELETE",
                            headers: {
                                "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]')
                                    .content
                            }
                        })
                        .then(res => res.json())
                        .then(resp => {
                            if (resp.success) {
                                e.target.closest('tr').remove();
                                alert('🗑️ Record deleted successfully!');
                            }
                        })
                        .finally(hideLoader);
                }
            }
        });

        // 🔹 Reset Row
        function resetRow() {
            editableRow.querySelectorAll('td[contenteditable="true"]').forEach(td => td.textContent = '');
            editableRow.querySelector('.total-cell').textContent = '0';
            editableRow.querySelector('.remain-cell').textContent = '0';
            editableRow.querySelector('.sid-cell').textContent = '';
            saveBtn.textContent = "Save";
            editId = null;
        }

        function showLoader() {
            loader.classList.remove('d-none');
        }

        function hideLoader() {
            loader.classList.add('d-none');
        }
    });
</script>

<style>
    .table td[contenteditable="true"]:focus {
        outline: 2px solid #0d6efd;
        background-color: #f0f8ff;
    }

    #editableRow {
        position: sticky;
        top: 45px;
        background: #fff;
        z-index: 10;
    }

    .btn-xs {
        padding: 1px 5px !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
        border-radius: 3px !important;
    }

    .uprow {
        vertical-align: middle !important;
    }
</style>

@endsection