@extends('business.layouts.app')

@section('content')
<style type="text/css">
/* --- Header & Search Refinement --- */
.saas-card .card-header {
    background-color: #ffffff;
    border-bottom: 1px solid #f1f3f5;
}

/* Subtle labels like your Flutter UI */
.form-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

/* Modernized Search Input */
.input-group-merge {
    border-radius: 8px;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    transition: all 0.2s;
}

.input-group-merge:focus-within {
    border-color: #0d6efd;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
    background-color: #fff;
}

.input-group-merge .form-control, 
.input-group-merge .input-group-text {
    background: transparent;
    border: none;
    height: 42px;
}

.input-group-merge .form-control:focus {
    box-shadow: none;
}

/* --- Action Column & Dropdown --- */

/* Eye Icon (Preview) */
.btn-icon i {
    font-size: 1.1rem;
    color: #64748b;
    transition: color 0.2s;
}

.btn-icon:hover i {
    color: #0d6efd;
}

/* Custom Dropdown Trigger */
.hide-arrow::after {
    display: none !important;
}

.dropdown-toggle i {
    font-size: 1.25rem;
    color: #94a3b8;
    transition: all 0.2s;
}

.dropdown-toggle:hover i {
    color: #475569;
}

/* Premium Dropdown Menu */
.dropdown-menu {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 0.5rem;
    min-width: 180px;
}

.dropdown-item {
    border-radius: 8px;
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s;
}

.dropdown-item i {
    font-size: 1.1rem;
    opacity: 0.7;
}

.dropdown-item:hover {
    background-color: #f1f5f9;
    color: #0d6efd;
}

.dropdown-item.text-danger:hover {
    background-color: #fff1f2;
    color: #e11d48 !important;
}

/* Currency Styling in Table */
.table-custom td:nth-child(4) {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    color: #111827;
}
</style>
<main class="main-content" x-data="productCrud()">
    <div class="row align-items-center mb-5">
        <div class="col-md-6">
            <div class="d-flex align-items-center">
                <div class="bg-primary bg-opacity-10 text-primary rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 48px; height: 48px;">
                    <i class="ph-fill ph-package fs-3"></i>
                </div>
                <div>
                    <h4 class="fw-bold text-dark mb-0">Packages</h4>
                    <p class="text-muted mb-0 small">Manage all of your Packages.</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Party Management Table --}}
    <div class="card saas-card">
        <div class="card-header pt-4">
            <div class="d-flex flex-column flex-lg-row justify-content-between align-items-end gap-3">

                <div class="w-100" style="max-width: 100px">
                </div>

                {{-- Right Side: Action Buttons --}}
                <div class="d-flex align-items-center flex-wrap gap-2 justify-content-end w-100">
                    
                    <button type="button" 
                            x-show="filters.search !== '' || per_page != 10" 
                            x-cloak
                            @click="resetFilters()" 
                            class="btn btn-outline-danger border-danger border-opacity-25 btn-icon" 
                            data-bs-toggle="tooltip" 
                            title="Clear Filters">
                        <i class="ph-bold ph-funnel-x"></i>
                    </button>

                    <button @click="openModal(null)" class="btn btn-primary shadow-sm">
                        <i class="ph-bold ph-plus-circle me-2"></i> Add Package
                    </button>
                </div>

            </div>
        </div>
        <div class="table-responsive text-nowrap">
            <table class="table table-custom">
                <thead>
                    <tr>
                        <th>From & To</th>
                        <th>Total Days</th>
                        <th>Price</th>
                        <th>Image</th>
                        <th>Description</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody class="table-border-bottom-0">
                    <template x-for="tourPackage in tourPackages" :key="tourPackage.id">
                        <tr x-show="!isLoading">
                            <td class="fw-semibold">
                                <span x-text="'From: ' + tourPackage.from ?? '--'"></span><br>
                                <span x-text="'To: ' + tourPackage.to ?? '--'"></span>
                            </td>
                            <td x-text="tourPackage.total_days ?? '--'"></td>
                            <td class="small">
                                <div x-show="tourPackage.discounted_amount == null">
                                    <span x-text="'₹'+tourPackage.amount ?? '--'"></span>
                                </div>
                                <div x-show="tourPackage.discounted_amount != null">
                                    <span x-text="'₹'+tourPackage.discounted_amount ?? '--'"></span>
                                    <strike x-text="'₹'+tourPackage.amount ?? '--'"></strike>
                                </div>
                            </td>
                            <td>
                                <div x-show="tourPackage.image_url == null">
                                    Img unavailable
                                </div>
                                <div x-show="tourPackage.image_url != null">
                                    <img class="w-50 img-fluid" :src="'/uploads/'+ tourPackage.image_url" alt="img">
                                </div>
                            </td>
                            <td x-text="tourPackage.description ?? '--'"></td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <a href="javascript:void(0)" class="m-1 text-decoration-none" @click="openModal(tourPackage)">
                                        <i class="icon-base ph ph-pencil-simple me-1"></i>
                                    </a>
                                    <a href="javascript:void(0)" class="m-1 text-danger text-decoration-none" @click="deleteTourPackage(tourPackage.id)">
                                        <i class="icon-base ph ph-trash me-1"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    </template>
                    <tr x-show="isLoading === true">
                        <td class="text-center" colspan="5">
                            <div class="me-2 spinner-border spinner-border-sm text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            please wait...
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td class="border-0" colspan="5">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="text-muted small">
                                    <template x-if="pagination.total > 0">
                                        <span>
                                            Showing <span class="fw-semibold" x-text="pagination.from"></span> 
                                            to <span class="fw-semibold" x-text="pagination.to"></span> 
                                            of <span class="fw-semibold" x-text="pagination.total"></span> entries
                                        </span>
                                    </template>
                                    <template x-if="pagination.total === 0 && !isLoading">
                                        <span>No entries found</span>
                                    </template>
                                </div>

                                <nav aria-label="Page navigation">
                                    <ul class="pagination saas-pagination mb-0">
                                        <li class="page-item first" :class="{ 'disabled': pagination.current_page === 1 }">
                                            <a class="page-link" 
                                            x-init="new bootstrap.Tooltip($el)"
                                            data-bs-toggle="tooltip" data-bs-offset="0,4" 
                                            data-bs-placement="top" data-bs-html="true" 
                                            title="Move to first page"
                                            href="javascript:void(0);" @click="getParties(1)">
                                                <i class="icon-base ph ph-caret-double-left icon-sm"></i>
                                            </a>
                                        </li>

                                        <template x-for="(link, index) in pagination.links" :key="index">
                                            <li class="page-item" 
                                                :class="{ 
                                                    'active': link.active, 
                                                    'disabled': !link.url,
                                                    'prev': link.label.includes('Previous'),
                                                    'next': link.label.includes('Next')
                                                }">
                                                <a class="page-link" 
                                                x-init="new bootstrap.Tooltip($el)"
                                                data-bs-toggle="tooltip" data-bs-offset="0,4" 
                                                data-bs-placement="top" data-bs-html="true" 
                                                title="Move to next page"
                                                :title="renderPaginationTooltip(link.label)"
                                                href="javascript:void(0);" 
                                                @click="getParties(link.url ? new URL(link.url).searchParams.get('page') : pagination.current_page)"
                                                x-html="renderPaginationLabel(link.label)">
                                                </a>
                                            </li>
                                        </template>

                                        <li class="page-item last" :class="{ 'disabled': pagination.current_page === pagination.last_page }">
                                            <a class="page-link" 
                                            x-init="new bootstrap.Tooltip($el)"
                                            data-bs-toggle="tooltip" data-bs-offset="0,4" 
                                            data-bs-placement="top" data-bs-html="true" 
                                            title="Move to last page"
                                            href="javascript:void(0);" @click="getParties(pagination.last_page)">
                                                <i class="icon-base ph ph-caret-double-right icon-sm"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <div class="modal fade" id="tourPackageModal" @open-product-modal.window="openModal($event.detail)" data-bs-backdrop="static" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold" x-text="isEdit ? 'Edit Tour Package' : 'Create Tour Package'"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body p-4">
                    <form @submit.prevent="submitForm" id="tourPackageForm">
                        <div class="row g-4">
                            
                            <div class="col-md-5">
                                <div class="package-image-container mb-3">
                                    <div class="ratio ratio-1x1 bg-light rounded-4 overflow-hidden border border-2 border-dashed d-flex align-items-center justify-content-center position-relative"
                                        style="cursor: pointer;" @click="$refs.tourFileInput.click()">
                                        
                                        <template x-if="imageUrl">
                                            <img :src="imageUrl" class="img-fluid w-100 h-100 object-fit-cover">
                                        </template>
                                        
                                        <template x-if="!imageUrl">
                                            <div class="text-center text-muted">
                                                <i class="ph-bold ph-image fs-1"></i>
                                                <p class="small mb-0">Tap to upload</p>
                                            </div>
                                        </template>
                                    </div>
                                    <input type="file" x-ref="tourFileInput" class="d-none" accept="image/*" @change="handleImage">
                                </div>
                            </div>

                            <div class="col-md-7">
                                <div class="mb-3">
                                    <label class="form-label small fw-bold">TOTAL DAYS</label>
                                    <div class="input-group input-group-merge">
                                        <span class="input-group-text bg-white border-end-0"><i class="ph-bold ph-calendar"></i></span>
                                        <input type="text" class="form-control border-start-0" placeholder="eg: 4 Days / 3 Nights"
                                            x-model="formData.total_days" :class="errors.total_days ? 'is-invalid' : ''">
                                    </div>
                                    <template x-if="errors.total_days"><div class="text-danger x-small mt-1" x-text="errors.total_days[0]"></div></template>
                                </div>

                                <div class="row">
                                    <div class="col-6">
                                        <label class="form-label small fw-bold">FROM</label>
                                        <div class="input-group">
                                            <span class="input-group-text bg-white border-end-0"><i class="ph-bold ph-map-pin"></i></span>
                                            <input type="text" class="form-control border-start-0" placeholder="Coimbatore"
                                                x-model="formData.from" :class="errors.from ? 'is-invalid' : ''">
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label small fw-bold">TO</label>
                                        <div class="input-group">
                                            <span class="input-group-text bg-white border-end-0"><i class="ph-bold ph-map-pin"></i></span>
                                            <input type="text" class="form-control border-start-0" placeholder="Dubai"
                                                x-model="formData.to" :class="errors.to ? 'is-invalid' : ''">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6 mt-3">
                                <label class="form-label small fw-bold">ACTUAL AMOUNT</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-white border-end-0"><i class="ph-bold ph-money-wavy"></i></span>
                                    <input type="number" class="form-control border-start-0" placeholder="50000"
                                        x-model="formData.amount" :class="errors.amount ? 'is-invalid' : ''">
                                </div>
                            </div>

                            <div class="col-md-6 mt-3">
                                <label class="form-label small fw-bold">DISCOUNTED AMOUNT</label>
                                <div class="input-group">
                                    <span class="input-group-text bg-white border-end-0"><i class="ph-bold ph-tag"></i></span>
                                    <input type="number" class="form-control border-start-0" placeholder="45000"
                                        x-model="formData.discounted_amount" :class="errors.discounted_amount ? 'is-invalid' : ''">
                                </div>
                            </div>

                            <div class="col-12 mt-3">
                                <label class="form-label small fw-bold">DESCRIPTION</label>
                                <textarea class="form-control" rows="3" placeholder="Describe this package..."
                                        x-model="formData.description" :class="errors.description ? 'is-invalid' : ''"></textarea>
                                <template x-if="errors.description"><div class="text-danger x-small mt-1" x-text="errors.description[0]"></div></template>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" form="tourPackageForm" class="btn btn-dark px-4" :disabled="isPressed">
                        <template x-if="isPressed">
                            <span class="spinner-border spinner-border-sm me-2"></span>
                        </template>
                        <span x-text="isPressed ? 'Processing...' : 'Save Package'"></span>
                    </button>
                </div>

            </div>
        </div>
    </div>
</main>
@endsection
@push('inline-scripts')
    <script>
        function productCrud()
        {
            return {
                errors: {},
                isEdit: false,
                isPressed: false,
                imageUrl: null,
                bsModal: null,
                formData: {
                    id: null,
                    total_days: '',
                    from: '',
                    to: '',
                    amount: '',
                    discounted_amount: '',
                    description: '',
                    imageFile: null
                },
                // products data
                tourPackages: [],
                per_page: 10,
                recordsPerPage: [10, 25, 50, 75, 100],
                pagination: {
                    current_page: 1,
                    last_page: 1,
                    links: [],
                    from: 0,
                    to: 0,
                    total: 0
                },
                filters: {
                    search: '',
                },
                isLoading: false,
                canUpdateParties: true,

                init() {
                    // Initialize Bootstrap Modal instance
                    this.bsModal = new bootstrap.Modal(document.getElementById('tourPackageModal'));
                    this.fetchData(); // fetch data
                },
    
                // --- MODAL LOGIC ---

                openModal(detail) {
                    this.errors = {};
                    this.isPressed = false;
                    
                    if (detail) {
                        this.isEdit = true;
                        this.formData = {
                            id: detail.id,
                            total_days: detail.total_days || '',
                            from: detail.from || '',
                            to: detail.to || '',
                            amount: detail.amount || '',
                            discounted_amount: detail.discounted_amount || '',
                            description: detail.description || '',
                            imageFile: null,
                        };
                        this.imageUrl = detail.imageUrl;
                    } else {
                        this.isEdit = false;
                        this.resetForm();
                    }
                    
                    this.bsModal.show();
                },

                resetForm() {
                    this.formData = { id: null, total_days: '', from: '', to: '', amount: '', discounted_amount: '', description: '', imageFile: null };
                    this.imageUrl = null;
                    this.$refs.tourFileInput.value = '';
                },

                handleImage(e) {
                    const file = e.target.files[0];
                    if (file) {
                        this.formData.imageFile = file;
                        this.imageUrl = URL.createObjectURL(file);
                    }
                },

                // --- DATA MANIPULATION LOGIC ---

                // Helper to clean up Laravel's pagination labels
                renderPaginationLabel(label) {
                    if (label.includes('Previous')) {
                        return '<i class="icon-base ph ph-caret-left icon-sm"></i>';
                    }
                    if (label.includes('Next')) {
                        return '<i class="icon-base ph ph-caret-right icon-sm"></i>';
                    }
                    return label;
                },

                renderPaginationTooltip(label) {
                    let pref = "Move to ";
                    if (label.includes('Previous')) {
                        pref += 'previous page';
                    }
                    else if (label.includes('Next')) {
                        pref += 'next page';
                    }
                    else {
                        pref += 'page '+label;
                    }
                    return pref;
                },

                fetchData(page = 1) {
                    this.isLoading = true;
                    this.pagination.current_page = page;

                    // Optional: Sync search term to URL bar without reloading
                    const url = new URL(window.location.href);
                    if(this.filters.search) {
                        url.searchParams.set('search', this.filters.search);
                    } else {
                        url.searchParams.delete('search');
                    }
                    window.history.replaceState({}, '', url);

                    axios.get('/tourPackages', {
                        params: {
                            search: this.filters.search,
                            page: page,
                            per_page: this.per_page // Send the count to backend
                        },
                    })
                    .then(res => {
                        this.tourPackages = res.data.data;
                    })
                    .finally(() => {
                        this.isLoading = false;
                    });
                },

                // Triggered by search input
                performSearch() {
                    this.fetchData(1); // Reset to page 1 on search
                },
                // Triggered when dropdown changes
                changePerPage() {
                    this.fetchData(1); // Always reset to page 1 when changing count
                },
                resetFilters() {
                    // 1. Reset the search string
                    this.filters.search = '';
                    
                    // 2. Reset the per_page count (optional, keep if you want a full reset)
                    this.per_page = 10;
                    
                    // 3. Clear the URL search params so the browser bar matches the state
                    const url = new URL(window.location.href);
                    url.searchParams.delete('search');
                    window.history.replaceState({}, '', url);

                    // 4. Re-fetch the first page of results
                    this.fetchData(1);
                },
    
                async submitForm() {
                    // clear previous errors before new request
                    this.errors = {};

                    this.isPressed = true;
                    this.errors = {};

                    let data = new FormData();
                    // Mapping to match your Laravel validation keys
                    data.append('total_days', this.formData.total_days);
                    data.append('from', this.formData.from);
                    data.append('to', this.formData.to);
                    data.append('amount', this.formData.amount);
                    data.append('discounted_amount', this.formData.discounted_amount);
                    data.append('description', this.formData.description);
                    
                    if (this.formData.imageFile) data.append('image', this.formData.imageFile);

                    // For Laravel PUT requests with FormData, we often use _method spoofing
                    if (this.isEdit) data.append('_method', 'PUT');

                    let request;
                    if(this.isEdit) {
                        request = axios.patch(`/tourPackages/${this.formData.id}`, data);
                    } else {
                        request = axios.post('/tourPackages', data);
                    }

                    // Execute the request
                    request
                        .then(res => {
                            // Successful request
                            this.bsModal.hide();
                            this.fetchData();
                            this.isPressed = false;
                            // Success notification
                            showToast(this.isEdit ? 'Package updated!' : 'Package created!');
                        })
                        .catch(error => {
                            this.isPressed = false;
                            console.log(error);
                            if(error.response && error.response.status === 422) {
                                console.log(error.response.data);
                                this.errors = error.response.data.errors;
                                // Error Notification
                                showToast('Please fix the validation errors!', 'error');
                            } else {
                                console.error(error);
                                showToast('Something went wrong! Please try again later...', 'error');
                            }
                        });
                },

                deleteTourPackage(id) {
                    Swal.fire({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes, delete it!'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            // User clicked "Yes" - Proceed with Delete
                            axios.delete(`/tourPackages/${id}`)
                                .then(() => {
                                    this.tourPackages = this.tourPackages.filter(b => b.id !== id);
                                    showToast('Package deleted!');
                                })
                                .catch(err => {
                                    console.error(err);
                                    showToast('Failed to delete Package!', 'error');
                                });
                        }
                    });
                },
            };
        }
    </script>
@endpush