@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="partyCrud()">
    <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-users fs-3"></i>
                </div>
                <div>
                    <h4 class="fw-bold text-dark mb-0">Parties</h4>
                    <p class="text-muted mb-0 small">Manage all of your Party data.</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">
                    <label class="form-label">Show</label>
                    <select class="form-control form-select" 
                    x-model="per_page" @change="changePerPage()">
                        <template x-for="page in recordsPerPage">
                            <option x-text="page" :value="page"></option>
                        </template>
                    </select>
                </div>

                {{-- Left Side: Search Bar --}}
                <div class="w-100" style="max-width: 400px">
                    <label class="form-label">Search</label>
                    <div class="input-group input-group-merge shadow-none">
                        <span class="input-group-text pe-0">
                            <i class="ph-bold ph-magnifying-glass"></i>
                        </span>
                        <input type="text" class="form-control" x-model="filters.search"
                        @input.debounce.500ms="performSearch()"
                        placeholder="Search party...">
                    </div>
                    {{-- <div class="input-group input-group-merge">
                        <span class="input-group-text border-end-0 ps-3" id="search-icon">
                            <i class="ph-bold ph-magnifying-glass text-muted"></i>
                        </span>
                        <input type="text" 
                        class="form-control border-start-0 ps-2" 
                        x-model="filters.search"
                        placeholder="Search party...">
                    </div> --}}
                </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 Party
                    </button>
                </div>

            </div>
        </div>
        <div class="table-responsive text-nowrap">
            <table class="table table-custom">
                <thead>
                    <tr>
                        <th>Company Name</th>
                        <th>Name</th>
                        <th>Total Outstanding</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody class="table-border-bottom-0">
                    <template x-for="party in parties" :key="party.id">
                        <tr x-show="!isLoading">
                            <td class="fw-semibold" x-text="party.company_name ?? '--'"></td>
                            <td x-text="party.name ?? '--'"></td>
                            <td x-text="'₹' + party.total_outstanding ?? '0'"></td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <a :href="'/parties/' + party.id" data-bs-toggle="tooltip" class="btn btn-icon" data-bs-placement="top" aria-label="Preview Party" data-bs-original-title="Preview Party">
                                        <i class="icon-base ph ph-eye icon-md"></i>
                                    </a>
                                    <a href="javascript:void(0)" class="m-1 text-decoration-none" @click="openModal(party)">
                                        <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="deleteParty(party.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="partyModal" data-bs-backdrop="static" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title" x-text="isEdit ? 'Edit Party' : 'Create Party'"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <form @submit.prevent="submitForm">
                    <div class="modal-body">
                        <div class="row g-3">

                            <!-- Company Name -->
                            <div class="col-md-6">
                                <label class="form-label required">Company Name</label>
                                <input type="text"
                                    x-model="form.company_name"
                                    class="form-control"
                                    placeholder="enter party's company name"
                                    :class="{ 'is-invalid': errors.company_name }"
                                    required
                                    @input="delete errors.company_name">
                                <div class="invalid-feedback" x-text="errors.company_name?.[0]"></div>
                            </div>

                            <!-- Contact Person Name -->
                            <div class="col-md-6">
                                <label class="form-label required">Contact Person Name</label>
                                <input type="text"
                                    x-model="form.name"
                                    class="form-control"
                                    required
                                    placeholder="enter party's contact person name"
                                    :class="{ 'is-invalid': errors.name }"
                                    @input="delete errors.name">
                                <div class="invalid-feedback" x-text="errors.name?.[0]"></div>
                            </div>

                            <!-- Phone -->
                            <div class="col-md-6">
                                <label class="form-label">Phone</label>
                                <div class="input-group">
                                    <span class="input-group-text">+91</span>
                                    <input type="number"
                                        x-model="form.phone"
                                        class="form-control"
                                        placeholder="enter party's primary phone number"
                                        :class="{ 'is-invalid': errors.phone }"
                                        @input="delete errors.phone"
                                        placeholder="9876543210">
                                </div>
                                <div class="invalid-feedback" x-text="errors.phone?.[0]"></div>
                            </div>

                            <!-- Email -->
                            <div class="col-md-6">
                                <label class="form-label">Email</label>
                                <input type="email"
                                    x-model="form.email"
                                    class="form-control"
                                    placeholder="enter party's email address"
                                    :class="{ 'is-invalid': errors.email }"
                                    @input="delete errors.email"
                                    placeholder="party@example.com">
                                <div class="invalid-feedback" x-text="errors.email?.[0]"></div>
                            </div>

                            <!-- GSTIN -->
                            <div class="col-md-6">
                                <label class="form-label">GSTIN</label>
                                <input type="text"
                                    x-model="form.gstin"
                                    class="form-control"
                                    placeholder="enter party's GSTIN"
                                    :class="{ 'is-invalid': errors.gstin }"
                                    @input="delete errors.gstin"
                                    placeholder="29ABCDE1234F1Z5">
                                <div class="invalid-feedback" x-text="errors.gstin?.[0]"></div>
                            </div>

                            <!-- PAN -->
                            <div class="col-md-6">
                                <label class="form-label">PAN</label>
                                <input type="text"
                                    x-model="form.pan"
                                    class="form-control"
                                    placeholder="enter party's PAN"
                                    :class="{ 'is-invalid': errors.pan }"
                                    @input="delete errors.pan"
                                    placeholder="ABCDE1234F">
                                <div class="invalid-feedback" x-text="errors.pan?.[0]"></div>
                            </div>

                            <!-- Address -->
                            <div class="col-md-6">
                                <label class="form-label">Address</label>
                                <textarea x-model="form.address"
                                        class="form-control"
                                        placeholder="enter party's billing address"
                                        :class="{ 'is-invalid': errors.address }"
                                        @input="delete errors.address"
                                        rows="2"></textarea>
                                <div class="invalid-feedback" x-text="errors.address?.[0]"></div>
                            </div>

                            <!-- Pincode -->
                            <div class="col-md-6">
                                <label class="form-label">Pincode</label>
                                <input type="text"
                                    x-model="form.pincode"
                                    class="form-control"
                                    :class="{ 'is-invalid': errors.pincode }"
                                    @input="delete errors.pincode"
                                    placeholder="Pincode of the address">
                                <div class="invalid-feedback" x-text="errors.pincode?.[0]"></div>
                            </div>

                            <!-- Location -->
                            <div class="col-md-6">
                                <label class="form-label">Location</label>
                                <input type="text"
                                    x-model="form.location_str"
                                    class="form-control"
                                    :class="{ 'is-invalid': errors.location_str }"
                                    @input="delete errors.location_str"
                                    placeholder="Location of this Party">
                                <div class="invalid-feedback" x-text="errors.location_str?.[0]"></div>
                            </div>

                            <!-- Additional Contact -->
                            <div class="col-md-6">
                                <label class="form-label">Additional Contact</label>
                                <input type="text"
                                    x-model="form.additional_contact"
                                    class="form-control"
                                    :class="{ 'is-invalid': errors.additional_contact }"
                                    @input="delete errors.additional_contact"
                                    placeholder="Alternate phone number">
                                <div class="invalid-feedback" x-text="errors.additional_contact?.[0]"></div>
                            </div>

                            <!-- GST Status -->
                            <div class="col-md-3">
                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" 
                                    id="party_is_gstin"
                                    x-model="form.is_gstin"
                                    :class="{ 'is-invalid': errors.is_gstin }"
                                    @input="delete errors.is_gstin">
                                    <div class="invalid-feedback" x-text="errors.is_gstin?.[0]"></div>
                                    <label class="form-check-label" for="flexSwitchCheckDefault">GST Billing</label>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button"
                                class="btn btn-secondary"
                                data-bs-dismiss="modal">
                            Close
                        </button>
                        <button type="submit"
                                class="btn btn-primary"
                                x-text="isEdit ? 'Update Party' : 'Save Party'">
                        </button>
                    </div>
                </form>

            </div>
        </div>
    </div>
</main>
@endsection
@push('inline-scripts')
    <script>
        function partyCrud()
        {
            return {
                bsModal: null,
                isEdit: false,
                errors: {},
                form: {
                    id: null,
                    business_id: "{{ Auth::user()->business->id }}",
                    name: '',
                    company_name: '',
                    phone: '',
                    email: '',
                    gstin: '',
                    pan: '',
                    additional_contact: '',
                    address: '',
                    location_str: '',
                    pincode: '',
                    is_gstin: 'false',
                },
                // parties data
                parties: [],
                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() {
                    this.bsModal = new bootstrap.Modal(document.getElementById('partyModal'));
                    // Set initial search from URL if present
                    this.filters.search = new URLSearchParams(window.location.search).get('search') || '';
                    this.getParties(); // fetch parties data
                },
    
                // --- MODAL LOGIC ---
    
                async openModal(party) {
                    // clear errors while opening modal
                    this.errors = {};
    
                    if(party) {
                        this.isEdit = true;
                        this.form = { ...party };
                    } else {
                        this.isEdit = false;
                        this.form = {
                            id: null,
                            business_id: "{{ Auth::user()->business->id }}",
                            name: '',
                            company_name: '',
                            phone: '',
                            email: '',
                            gstin: '',
                            pan: '',
                            additional_contact: '',
                            address: '',
                            location_str: '',
                            pincode: '',
                            is_gstin: 'false',
                        };
                    }
                    this.bsModal.show();
                },

                // --- 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;
                },

                getParties(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('/data/parties', {
                        params: {
                            search: this.filters.search,
                            page: page,
                            per_page: this.per_page // Send the count to backend
                        },
                    })
                    .then(res => {
                        this.parties = res.data.data;
                        // Capture the full pagination object
                        this.pagination.current_page = res.data.meta.current_page;
                        this.pagination.last_page = res.data.meta.last_page;
                        this.pagination.links = res.data.meta.links;
                        this.pagination.from = res.data.meta.from || 0;
                        this.pagination.to = res.data.meta.to || 0;
                        this.pagination.total = res.data.meta.total || 0;
                    })
                    .finally(() => {
                        this.isLoading = false;
                    });
                },

                // Triggered by search input
                performSearch() {
                    this.getParties(1); // Reset to page 1 on search
                },
                // Triggered when dropdown changes
                changePerPage() {
                    this.getParties(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.getParties(1);
                },
    
                submitForm() {
                    // clear previous errors before new request
                    this.errors = {};
    
                    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.getParties();
                            // 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');
                            }
                        });
                },

                setAsSupplier(id) {
                    Swal.fire({
                        title: 'Are you sure?',
                        text: "This party will also be set as a Supplier",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes, continue!'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            // User clicked "Yes" - Proceed with Delete
                            axios.patch(`/parties/${id}/setAsSupplier`)
                                .then(() => {
                                    showToast('Party set as Supplier!');
                                    this.getParties();
                                })
                                .catch(err => {
                                    console.error(err);
                                    showToast('Failed to set Party as Supplier!', 'error');
                                });
                        }
                    });
                },

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