@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-stack fs-3"></i>
                </div>
                <div>
                    <h4 class="fw-bold text-dark mb-0">Products / Services</h4>
                    <p class="text-muted mb-0 small">Manage all of your Products / Services.</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 Product / Service
                    </button>
                </div>

            </div>
        </div>
        <div class="table-responsive text-nowrap">
            <table class="table table-custom">
                <thead>
                    <tr>
                        <th>Heading</th>
                        <th>Image</th>
                        <th>Description</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody class="table-border-bottom-0">
                    <template x-for="businessProduct in businessProducts" :key="businessProduct.id">
                        <tr x-show="!isLoading">
                            <td class="fw-semibold" x-text="businessProduct.heading ?? '--'"></td>
                            <td>
                                <div x-show="businessProduct.image_url == null">
                                    Img unavailable
                                </div>
                                <div x-show="businessProduct.image_url != null">
                                    <img class="w-50 img-fluid" :src="'/uploads/'+ businessProduct.image_url" alt="img">
                                </div>
                            </td>
                            <td x-text="businessProduct.description ?? '--'"></td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <a href="javascript:void(0)" class="m-1 text-decoration-none" @click="openModal(businessProduct)">
                                        <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="deleteBusinessProduct(businessProduct.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="businessProductModal" @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 elite-bg border-0">
                    <h5 class="modal-title fw-600" x-text="isEdit ? 'Edit Product / Service' : 'Create Product / Service'"></h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body p-4">
                    <form @submit.prevent="submitForm" id="businessProductForm">
                        
                        <div class="text-center mb-4">
                            <div class="image-preview-wrapper mx-auto d-flex align-items-center justify-content-center border rounded-3" 
                                @click="$refs.fileInput.click()"
                                style="width: 120px; height: 120px; cursor: pointer; overflow: hidden; background: #fdfdfd;">
                                <template x-if="imageUrl">
                                    <img :src="imageUrl" class="img-fluid w-100 h-100" style="object-fit: cover;">
                                </template>
                                <template x-if="!imageUrl">
                                    <div class="text-muted small">
                                        <i class="ph-bold ph-camera fs-2"></i><br>Upload
                                    </div>
                                </template>
                            </div>
                            <input type="file" x-ref="fileInput" class="d-none" accept="image/*" @change="handleImage">
                        </div>

                        <div class="mb-3">
                            <label class="form-label small fw-bold text-muted">HEADING</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-end-0"><i class="ph-bold ph-package"></i></span>
                                <input type="text" class="form-control border-start-0" 
                                    :class="errors.heading ? 'is-invalid' : ''"
                                    x-model="formData.heading" 
                                    placeholder="Product name..."
                                    @input="delete errors.heading">
                            </div>
                            <template x-if="errors.heading">
                                <div class="text-danger x-small mt-1" x-text="errors.heading[0]"></div>
                            </template>
                        </div>

                        <div class="mb-3">
                            <label class="form-label small fw-bold text-muted">DESCRIPTION</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-end-0 align-items-start pt-2"><i class="ph-bold ph-info"></i></span>
                                <textarea class="form-control border-start-0" rows="3"
                                        :class="errors.description ? 'is-invalid' : ''"
                                        x-model="formData.description" 
                                        placeholder="Brief description..."
                                        @input="delete errors.description"></textarea>
                            </div>
                            <template x-if="errors.description">
                                <div class="text-danger x-small mt-1" x-text="errors.description[0]"></div>
                            </template>
                        </div>
                    </form>
                </div>

                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" :disabled="isPressed">Cancel</button>
                    <button type="submit" form="businessProductForm" 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 ? 'Saving...' : 'Save Changes'"></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,
                    heading: '',
                    description: '',
                    imageFile: null
                },
                // products data
                businessProducts: [],
                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('businessProductModal'));
                    // this.bsModal = new bootstrap.Modal(this.$refs.modalElement);
                    this.fetchData(); // fetch data
                },
    
                // --- MODAL LOGIC ---

                openModal(detail) {
                    this.errors = {};
                    this.isPressed = false;
                    
                    if (detail) {
                        this.isEdit = true;
                        this.formData.id = detail.id;
                        this.formData.heading = detail.heading;
                        this.formData.description = detail.description;
                        this.imageUrl = detail.imageUrl;
                    } else {
                        this.isEdit = false;
                        this.resetForm();
                    }
                    
                    this.bsModal.show();
                },

                resetForm() {
                    this.formData = { id: null, heading: '', description: '', imageFile: null };
                    this.imageUrl = null;
                    this.$refs.fileInput.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('/businessProducts', {
                        params: {
                            search: this.filters.search,
                            page: page,
                            per_page: this.per_page // Send the count to backend
                        },
                    })
                    .then(res => {
                        this.businessProducts = 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();
                    data.append('heading', this.formData.heading);
                    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');

                    // const url = this.isEdit 
                    //     ? `/businessProducts/${this.formData.id}` 
                    //     : `/businessProducts`;

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

                    // Execute the request
                    request
                        .then(res => {
                            // Successful request
                            this.bsModal.hide();
                            this.fetchData();
                            this.isPressed = false;
                            // Success notification
                            showToast(this.isEdit ? 'Product / Service updated!' : 'Product / Service 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');
                            }
                        });

                    // try {
                    //     const response = await fetch(url, {
                    //         method: 'POST', // Always POST when using FormData
                    //         body: data,
                    //         headers: { 'Accept': 'application/json' }
                    //     });

                    //     const result = await response.json();

                    //     if (response.ok) {
                    //         this.bsModal.hide();
                    //         // Custom event to refresh your product list
                    //         showToast(this.isEdit ? 'Product / Service updated!' : 'Product / Service created!');
                    //     } else if (response.status === 422) {
                    //         this.errors = result.errors;
                    //     }
                    // } catch (err) {
                    //     console.error(err);
                    // } finally {
                    //     this.isPressed = false;
                    // }
    
                    // let formData = new FormData();
                    // formData.append('name', this.form.name);
                    // formData.append('company_name', this.form.company_name);
                    // formData.append('phone', this.form.phone);
                    // formData.append('email', this.form.email);
                    // formData.append('gstin', this.form.gstin);
                    // formData.append('pan', this.form.pan);
                    // formData.append('additional_contact', this.form.additional_contact);
                    // formData.append('address', this.form.address);
                    // formData.append('location_str', this.form.location_str);
                    // formData.append('pincode', this.form.pincode);
                    // formData.append('is_gstin', this.form.is_gstin);
    
                    // let request;
                    // if(this.isEdit) {
                    //     request = axios.patch(`/parties/${this.form.id}`, formData);
                    // } else {
                    //     request = axios.post('/parties', formData);
                    // }
    
                    // // Execute the request
                    // request
                    //     .then(res => {
                    //         // Successful request
                    //         this.bsModal.hide();
                    //         this.fetchData();
                    //         // Success notification
                    //         showToast(this.isEdit ? 'Party updated!' : 'Party created!');
                    //     })
                    //     .catch(error => {
                    //         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');
                    //         }
                    //     });
                },

                deleteBusinessProduct(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(`/businessProducts/${id}`)
                                .then(() => {
                                    this.businessProducts = this.businessProducts.filter(b => b.id !== id);
                                    showToast('Product / Service deleted!');
                                })
                                .catch(err => {
                                    console.error(err);
                                    showToast('Failed to delete Product / Service!', 'error');
                                });
                        }
                    });
                },
            };
        }
    </script>
@endpush