@extends('layouts.app')

@section('title', 'Manage Records')
@section('page-title', 'Manage Records')

@section('content')
<div x-data="manageData()" x-init="initManage()">
    <!-- Filters -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 mb-6" data-aos="fade-up">
        <div class="p-6">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                <span class="material-icons text-primary-600 mr-2">filter_list</span>
                Filters & Actions
            </h2>
            
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Type</label>
                    <select x-model="filters.type" @change="loadRecords()" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500">
                        <option value="payroll">Payroll</option>
                        <option value="contribution">Contribution</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Month</label>
                    <select x-model="filters.month" @change="loadRecords()" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500">
                        <option value="">All Months</option>
                        <option value="1">January</option>
                        <option value="2">February</option>
                        <option value="3">March</option>
                        <option value="4">April</option>
                        <option value="5">May</option>
                        <option value="6">June</option>
                        <option value="7">July</option>
                        <option value="8">August</option>
                        <option value="9">September</option>
                        <option value="10">October</option>
                        <option value="11">November</option>
                        <option value="12">December</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Year</label>
                    <select x-model="filters.year" @change="loadRecords()" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500">
                        <option value="">All Years</option>
                        <template x-for="year in years" :key="year">
                            <option :value="year" x-text="year"></option>
                        </template>
                    </select>
                </div>

                <div class="flex items-end">
                    <button @click="showDeleteModal = true" class="w-full px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors flex items-center justify-center">
                        <span class="material-icons mr-2">delete</span>
                        Delete Records
                    </button>
                </div>
            </div>
        </div>
    </div>

 

           

            
    <!-- Delete Confirmation Modal -->
    <div x-show="showDeleteModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" style="display: none;">
        <div class="bg-white dark:bg-gray-800 rounded-xl p-6 max-w-md w-full mx-4">
            <div class="flex items-center mb-4">
                <span class="material-icons text-red-600 text-2xl mr-3">warning</span>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Delete Records</h3>
            </div>
            
            <div class="mb-6">
                <p class="text-gray-600 dark:text-gray-400 mb-4">
                    Select the period for which you want to delete records. This action cannot be undone.
                </p>
                
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Month</label>
                        <select x-model="deleteForm.month" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-red-500">
                            <option value="">Select Month</option>
                            <template x-for="(month, index) in monthNames" :key="index">
                                <option :value="index + 1" x-text="month"></option>
                            </template>
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Year</label>
                        <select x-model="deleteForm.year" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-red-500">
                            <option value="">Select Year</option>
                            <template x-for="year in years" :key="year">
                                <option :value="year" x-text="year"></option>
                            </template>
                        </select>
                    </div>
                </div>
            </div>

            <div class="flex justify-end space-x-4">
                <button @click="showDeleteModal = false" class="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                    Cancel
                </button>
                <button @click="deleteRecords()" :disabled="deleting" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50 transition-colors">
                    <span x-show="!deleting">Delete Records</span>
                    <span x-show="deleting" class="flex items-center">
                        <span class="animate-spin material-icons mr-2">refresh</span>
                        Deleting...
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>

<script>
function manageData() {
    return {
        filters: {
            type: 'payroll',
            month: '',
            year: ''
        },
        records: [],
        loading: false,
        years: [],
        showDeleteModal: false,
        deleteForm: {
            month: '',
            year: ''
        },
        deleting: false,
        monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        
        // Pagination
        currentPage: 1,
        recordsPerPage: 25,

        get totalPages() {
            return Math.ceil(this.records.length / this.recordsPerPage);
        },

        get paginatedRecords() {
            const start = (this.currentPage - 1) * this.recordsPerPage;
            return this.records.slice(start, start + this.recordsPerPage);
        },

        get visiblePages() {
            const pages = [];
            const start = Math.max(1, this.currentPage - 2);
            const end = Math.min(this.totalPages, this.currentPage + 2);
            
            for (let i = start; i <= end; i++) {
                pages.push(i);
            }
            return pages;
        },

        initManage() {
            // Generate years
            const currentYear = new Date().getFullYear();
            for (let year = 2020; year <= currentYear + 2; year++) {
                this.years.push(year);
            }
            this.loadRecords();
        },

        async loadRecords() {
            this.loading = true;
            this.currentPage = 1;
            
            try {
                const params = new URLSearchParams();
                params.append('type', this.filters.type);
                if (this.filters.month) params.append('month', this.filters.month);
                if (this.filters.year) params.append('year', this.filters.year);

                const response = await fetch(`{{ route('payroll.records') }}?${params}`);
                const result = await response.json();
                
                if (result.success) {
                    this.records = result.data.data || [];
                } else {
                    showToast('Failed to load records', 'error');
                }
            } catch (error) {
                showToast('Error loading records: ' + error.message, 'error');
            } finally {
                this.loading = false;
            }
        },

        async deleteRecords() {
            if (!this.deleteForm.month || !this.deleteForm.year) {
                showToast('Please select both month and year', 'error');
                return;
            }

            this.deleting = true;
            
            try {
                const response = await fetch('{{ route("payroll.delete-records") }}', {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify({
                        type: this.filters.type,
                        month: this.deleteForm.month,
                        year: this.deleteForm.year
                    })
                });

                const result = await response.json();
                
                if (result.success) {
                    showToast(result.message, 'success');
                    this.showDeleteModal = false;
                    this.deleteForm = { month: '', year: '' };
                    this.loadRecords();
                } else {
                    showToast(result.message, 'error');
                }
            } catch (error) {
                showToast('Error deleting records: ' + error.message, 'error');
            } finally {
                this.deleting = false;
            }
        },

        previousPage() {
            if (this.currentPage > 1) {
                this.currentPage--;
            }
        },

        nextPage() {
            if (this.currentPage < this.totalPages) {
                this.currentPage++;
            }
        },

        formatCurrency(amount) {
            if (!amount) return '-';
            return new Intl.NumberFormat('en-US', {
                style: 'currency',
                currency: 'USD'
            }).format(amount);
        },

        getMonthName(month) {
            return this.monthNames[month - 1] || '';
        }
    }
}
</script>
@endsection