@extends('app')

@section('title', 'Cuti')

@push('styles')
@endpush

@section('content')
    <!-- Page Header -->
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Cuti</h1>
            <p class="mt-1 text-sm text-gray-600">Manage leave requests</p>
        </div>
        <button onclick="openCreateModal()" class="btn btn-primary">
            <i data-lucide="plus" class="w-4 h-4"></i>
            Request Leave
        </button>
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-lg shadow mb-6 p-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div class="space-y-2">
                <label class="label">Employee</label>
                <select id="filter-user" class="select w-full select2-basic">
                    <option value="">All Employees</option>
                </select>
            </div>
            <div class="space-y-2">
                <label class="label">Status</label>
                <select id="filter-status" class="select w-full select2-basic">
                    <option value="">Semua Statuses</option>
                    <option value="pending">Tertangguh</option>
                    <option value="approved">Diluluskan</option>
                    <option value="rejected">Ditolak</option>
                </select>
            </div>
            <div class="space-y-2">
                <label class="label">Type</label>
                <select id="filter-type" class="select w-full select2-basic">
                    <option value="">All Types</option>
                    <option value="annual">Cuti Tahunan</option>
                    <option value="sick">Cuti Sakit</option>
                    <option value="unpaid">Cuti Tanpa Gaji</option>
                    <option value="maternity">Maternity Leave</option>
                    <option value="paternity">Paternity Leave</option>
                </select>
            </div>
            <div class="flex items-end">
                <button onclick="loadLeaves()" class="btn btn-secondary">
                    <i data-lucide="search" class="w-4 h-4"></i>
                    Filter
                </button>
            </div>
        </div>
    </div>

    <!-- Table -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <div class="overflow-x-auto">
            <table class="table w-full">
                <thead>
                    <tr>
                        <th>Employee</th>
                        <th>Tarikh Mula</th>
                        <th>Tarikh Tamat</th>
                        <th>Type</th>
                        <th>Status</th>
                        <th>Sebab</th>
                        <th>Prodaripada</th>
                        <th>Tindakan</th>
                    </tr>
                </thead>
                <tbody id="leaves-table">
                    <tr>
                        <td colspan="8" class="text-center py-8">
                            <span class="loading loading-spinner loading-lg"></span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="p-4 border-t border-gray-200">
            <div id="pagination" class="flex items-center justify-between"></div>
        </div>
    </div>

    <!-- Create/Edit Modal -->
    <dialog id="leave-modal" class="modal">
        <div class="modal-box max-w-2xl">
            <h3 class="font-bold text-lg mb-4" id="modal-title">Request Leave</h3>
            <form id="leave-form">
                <input type="hidden" id="leave-id">

                <div class="mb-4 space-y-2">
                    <label for="id_user" class="label">Employee <span class="text-red-500">*</span></label>
                    <select id="id_user" class="select w-full select2-modal" required>
                        <option value="">Pilih Pekerja</option>
                    </select>
                    <span id="error-id_user" class="text-red-500 text-sm hidden"></span>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="mb-4 space-y-2">
                        <label for="start_date" class="label">Tarikh Mula <span class="text-red-500">*</span></label>
                        <input type="date" id="start_date" class="input w-full" required>
                        <span id="error-start_date" class="text-red-500 text-sm hidden"></span>
                    </div>
                    <div class="mb-4 space-y-2">
                        <label for="end_date" class="label">Tarikh Tamat <span class="text-red-500">*</span></label>
                        <input type="date" id="end_date" class="input w-full" required>
                        <span id="error-end_date" class="text-red-500 text-sm hidden"></span>
                    </div>
                </div>

                <div class="mb-4 space-y-2">
                    <label for="type" class="label">Jenis Cuti <span class="text-red-500">*</span></label>
                    <select id="type" class="select w-full select2-modal" required>
                        <option value="">Select Type</option>
                        <option value="annual">Cuti Tahunan</option>
                        <option value="sick">Cuti Sakit</option>
                        <option value="unpaid">Cuti Tanpa Gaji</option>
                        <option value="maternity">Maternity Leave</option>
                        <option value="paternity">Paternity Leave</option>
                    </select>
                    <span id="error-type" class="text-red-500 text-sm hidden"></span>
                </div>

                <div class="mb-4 space-y-2">
                    <label for="reason" class="label">Sebab <span class="text-red-500">*</span></label>
                    <textarea id="reason" class="textarea w-full" rows="3" required></textarea>
                    <span id="error-reason" class="text-red-500 text-sm hidden"></span>
                </div>

                <div class="mb-4 space-y-2">
                    <label for="proof_file" class="label">Proof (Optional)</label>
                    <input type="file" id="proof_file" class="file-input w-full" accept="image/*,application/pdf">
                    <p class="text-xs text-gray-500 mt-1">Max 5MB. Supported: JPG, PNG, PDF, WebP</p>
                    <span id="error-proof_file" class="text-red-500 text-sm hidden"></span>
                    <div id="proof-preview" class="mt-2 hidden">
                        <img id="preview-img" src="" alt="Prodaripada preview" class="max-w-xs rounded-md mb-2">
                        <a id="preview-link" href="" target="_blank" class="link link-primary">View current proof</a>
                    </div>
                </div>
                
                <div class="mb-4 space-y-2">
                    <label for="status" class="label">Status <span class="text-red-500">*</span></label>
                    <select id="status" class="select w-full select2-modal" required>
                        <option value="pending">Tertangguh</option>
                        <option value="approved">Diluluskan</option>
                        <option value="rejected">Ditolak</option>
                    </select>
                    <span id="error-status" class="text-red-500 text-sm hidden"></span>
                </div>

                <div class="modal-action">
                    <button type="button" onclick="closeModal()" class="btn">Batal</button>
                    <button type="submit" id="btn-submit" class="btn btn-primary">
                        <span id="btn-text">Simpan</span>
                        <span id="btn-loading" class="loading loading-spinner hidden"></span>
                    </button>
                </div>
            </form>
        </div>
        <form method="dialog" class="modal-backdrop">
            <button>close</button>
        </form>
    </dialog>
@endsection

@push('scripts')
    <script>
        let currentPage = 1;
        let currentLeaveId = null;

        $(document).ready(function() {
            initializeSelect2();
            loadUsers();
            loadLeaves();

            $('#leave-form').on('submit', function(e) {
                e.preventDefault();
                saveLeave();
            });
        });

        function initializeSelect2() {
            $('.select2-basic').select2();
            
            $('.select2-modal').select2({
                dropdownParent: $('#leave-modal')
            });
        }

        function formatDate(dateString) {
            if (!dateString) return 'N/A';
            const options = { year: 'numeric', month: 'short', day: 'numeric' };
            return new Date(dateString).toLocaleDateString('en-US', options);
        }

        function formatInputDate(dateString) {
            if (!dateString) return '';
            const date = new Date(dateString);
            const year = date.getFullYear();
            const month = ('0' + (date.getMonth() + 1)).slice(-2);
            const day = ('0' + date.getDate()).slice(-2);
            return `${year}-${month}-${day}`;
        }

        function loadUsers() {
            window.authHelper.apiRequest('/api/employees?per_page=1000', { method: 'GET' })
                .then(function(response) {
                    console.log('Users response:', response);
                    let users = [];
                    if (response.data.data.data && Array.isArray(response.data.data.data)) {
                        users = response.data.data.data;
                    } else if (Array.isArray(response.data.data)) {
                        users = response.data.data;
                    }

                    const userSelect = $('#filter-user, #id_user');
                    
                    userSelect.each(function() {
                        const selectedValue = $(this).val();
                        $(this).find('option:not(:first)').remove();
                        users.forEach(user => {
                            $(this).append(new Option(user.name, user.id));
                        });
                        $(this).val(selectedValue).trigger('change');
                    });
                })
                .catch(function(error) {
                    console.error('Error loading users:', error);
                });
        }

        function loadLeaves(page = 1) {
            currentPage = page;
            const user = $('#filter-user').val();
            const status = $('#filter-status').val();
            const type = $('#filter-type').val();

            let url = `/api/leaves?page=${page}&per_page=10`;
            if (user) url += `&id_user=${user}`;
            if (status) url += `&status=${status}`;
            if (type) url += `&type=${type}`;

            $('#leaves-table').html(`
                <tr>
                    <td colspan="8" class="text-center py-8">
                        <span class="loading loading-spinner loading-lg"></span>
                    </td>
                </tr>
            `);

            window.authHelper.apiRequest(url, { method: 'GET' })
                .then(function(response) {
                    const paginationData = response.data.data;
                    renderLeaves(paginationData.data);
                    renderPagination(paginationData);
                })
                .catch(function(error) {
                    console.error('Error:', error);
                    $('#leaves-table').html(`
                        <tr>
                            <td colspan="8" class="text-center py-8 text-red-500">
                                Failed to load leave requests.
                            </td>
                        </tr>
                    `);
                });
        }

        function renderLeaves(leaves) {
            if (leaves.length === 0) {
                $('#leaves-table').html(`
                    <tr>
                        <td colspan="8" class="text-center py-8">
                            Tiada permohonan cuti dijumpai.
                        </td>
                    </tr>
                `);
                return;
            }

            let html = '';
            leaves.forEach(function(leave) {
                const statusBadges = {
                    pending: '<span class="badge badge-warning">Tertangguh</span>',
                    approved: '<span class="badge badge-success">Diluluskan</span>',
                    rejected: '<span class="badge badge-error">Ditolak</span>',
                };

                let proofKandungan = '-';
                if (leave.proof_file) {
                    const fileExtension = leave.proof_file.split('.').pop().toLowerCase();
                    const isImage = ['jpeg', 'png', 'jpg', 'webp'].includes(fileExtension);
                    const filePath = `/storage/${leave.proof_file}`;

                    if (isImage) {
                        proofKandungan = `<a href="${filePath}" target="_blank"><img src="${filePath}" alt="Prodaripada" class="w-16 h-16 object-cover rounded-md"></a>`;
                    } else if (fileExtension === 'pdf') {
                        proofKandungan = `<a href="${filePath}" target="_blank" class="link link-primary">View PDF</a>`;
                    } else {
                        proofKandungan = `<a href="${filePath}" target="_blank" class="link link-primary">View File</a>`;
                    }
                }

                html += `
                    <tr>
                        <td>${leave.user ? leave.user.name : 'N/A'}</td>
                        <td>${formatDate(leave.start_date)}</td>
                        <td>${formatDate(leave.end_date)}</td>
                        <td class="capitalize">${leave.type}</td>
                        <td>${statusBadges[leave.status] || leave.status}</td>
                        <td class="max-w-xs truncate">${leave.reason}</td>
                        <td>
                            ${proofKandungan}
                        </td>
                        <td>
                            <div class="flex gap-2">
                                <button onclick="editLeave(${leave.id})" class="btn btn-sm btn-ghost">
                                    <i data-lucide="edit" class="w-4 h-4"></i>
                                </button>
                                <button onclick="deleteLeave(${leave.id})" class="btn btn-sm btn-ghost text-red-500">
                                    <i data-lucide="trash" class="w-4 h-4"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                `;
            });

            $('#leaves-table').html(html);
            lucide.createIcons();
        }

        function renderPagination(data) {
            if (data.last_page <= 1) {
                $('#pagination').html('');
                return;
            }

            let html = `
                <div class="text-sm text-gray-600">
                    Showing ${data.from} to ${data.to} daripada ${data.total} rekod
                </div>
                <div class="btn-group">
            `;

            html += `<button onclick="loadLeaves(${data.current_page - 1})" class="btn btn-sm" ${data.current_page === 1 ? 'disabled' : ''}>Sebelum</button>`;

            for (let i = 1; i <= data.last_page; i++) {
                if (i === data.current_page) {
                    html += `<button class="btn btn-sm btn-active">${i}</button>`;
                } else {
                    html += `<button onclick="loadLeaves(${i})" class="btn btn-sm">${i}</button>`;
                }
            }

            html += `<button onclick="loadLeaves(${data.current_page + 1})" class="btn btn-sm" ${data.current_page === data.last_page ? 'disabled' : ''}>Seterusnya</button>`;
            html += '</div>';
            $('#pagination').html(html);
        }

        function openCreateModal() {
            currentLeaveId = null;
            $('#modal-title').text('Request Leave');
            $('#leave-form')[0].reset();
            $('#leave-id').val('');
            $('.select2-modal').val(null).trigger('change');
            $('.text-red-500').addClass('hidden').text('');
            $('#proof-preview').addClass('hidden');
            document.getElementById('leave-modal').showModal();
        }

        function editLeave(id) {
            currentLeaveId = id;
            $('#modal-title').text('Edit Leave Request');
            $('.text-red-500').addClass('hidden').text('');
            
            window.authHelper.apiRequest(`/api/leaves/${id}`, { method: 'GET' })
                .then(function(response) {
                    console.log('Edit leave response:', response);
                    const leave = response.data.data;
                    $('#leave-id').val(leave.id);
                    $('#id_user').val(leave.id_employee).trigger('change');
                    $('#start_date').val(formatInputDate(leave.start_date));
                    $('#end_date').val(formatInputDate(leave.end_date));
                    $('#type').val(leave.type).trigger('change');
                    $('#reason').val(leave.reason);
                    $('#status').val(leave.status).trigger('change');

                    if (leave.proof_file) {
                        $('#proof-preview').removeClass('hidden');
                        $('#preview-link').attr('href', `/storage/${leave.proof_file}`);
                    } else {
                        $('#proof-preview').addClass('hidden');
                    }

                    document.getElementById('leave-modal').showModal();
                })
                .catch(function(error) {
                    alert('Failed to load leave data.');
                });
        }

        function saveLeave() {
            $('.text-red-500').addClass('hidden').text('');
            $('#btn-submit').prop('disabled', true);
            $('#btn-text').text('Saving...');
            $('#btn-loading').removeClass('hidden');

            const formData = new FormData();
            formData.append('id_user', $('#id_user').val());
            formData.append('start_date', $('#start_date').val());
            formData.append('end_date', $('#end_date').val());
            formData.append('type', $('#type').val());
            formData.append('reason', $('#reason').val());
            formData.append('status', $('#status').val());

            const proofFile = $('#proof_file')[0].files[0];
            if (proofFile) {
                formData.append('proof_file', proofFile);
            }

            const url = currentLeaveId ? `/api/leaves/${currentLeaveId}` : '/api/leaves';
            const method = 'POST'; 

            const token = window.authHelper.getToken();

            $.ajax({
                url: url,
                type: method,
                data: formData,
                contentType: false,
                processData: false,
                headers: {
                    'Authorization': `Bearer ${token}`,
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    closeModal();
                    loadLeaves(currentPage);
                    alert(response.message || 'Leave request saved successfully.');
                },
                error: function(xhr) {
                    if (xhr.status === 400 || xhr.status === 422) {
                        const errors = xhr.responseJSON.data;
                        Object.keys(errors).forEach(function(key) {
                            $(`#error-${key}`).removeClass('hidden').text(errors[key][0]);
                        });
                    } else {
                        alert('Failed to save leave request.');
                    }
                },
                complete: function() {
                    $('#btn-submit').prop('disabled', false);
                    $('#btn-text').text('Save');
                    $('#btn-loading').addClass('hidden');
                }
            });
        }

        function deleteLeave(id) {
            if (!confirm('Are you sure you want to delete this leave request?')) {
                return;
            }

            window.authHelper.apiRequest(`/api/leaves/${id}`, { method: 'DELETE' })
                .then(function(response) {
                    loadLeaves(currentPage);
                    alert(response.data.message || 'Leave request deleted successfully.');
                })
                .catch(function(error) {
                    alert('Failed to delete leave request.');
                });
        }

        function closeModal() {
            document.getElementById('leave-modal').close();
        }
    </script>
@endpush