@extends('backend.template.layouts.template-base')
@section('title', 'Product Management - Products List')


@section('content')
    <section>
        <div class="page-head-title mb-3">
            <div class=" product-list d-flex align-items-center justify-content-between">
                <h2 class="text-title fw-semibold mb-0">Product List</h2>
                <div class="d-flex align-items-center gap-3">
                    <a id="createBtn" class="button-green product-create-btn" href="javascript:void(0)">
                        <img src="{{ asset('backend/template/svg-icon/plus.svg') }}" alt="plus">
                        <span id="btnText">Create New Group</span>
                    </a>
                </div>
            </div>
        </div>

        <ul class="nav nav-tabs nav-tabs-custom" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link active" data-bs-toggle="tab" href="#Groups" role="tab">Groups</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" data-bs-toggle="tab" href="#Products" role="tab">Products</a>
            </li>
        </ul>

        <div class="tab-content card-tab-border text-muted">

            {{-- ── Products Tab ────────────────────────────────────────────────── --}}
            <div class="tab-pane" id="Products" role="tabpanel">
                <div class="p-3">
                    <div class="d-flex align-items-center justify-content-between mb-3 gap-3 flex-wrap">
                        <div class="d-flex align-items-center gap-2 flex-wrap">
                            <div class="table-search-box">
                                <img class="table-search-icon" src="{{ asset('backend/template/svg-icon/search.svg') }}"
                                    alt="search">
                                <input type="text" id="productSearch" placeholder="Search product name or group"
                                    class="table-search-input">
                            </div>
                            <select id="productGroupFilter" class="table-filter-select" style="width:160px;">
                                <option value="">All Groups</option>
                                @foreach ($groups as $group)
                                    <option value="{{ $group->id }}">{{ $group->name }}</option>
                                @endforeach
                            </select>
                            <select id="productStatusFilter" class="table-filter-select" style="width:130px;">
                                <option value="">All Status</option>
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                        <div class="d-flex align-items-center gap-2 secondary-text fs-13">
                            Show
                            <select id="productPerPage" class="table-filter-select" style="width:70px;">
                                <option value="10" selected>10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                            </select>
                            entries
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table id="productsTable" class="table align-middle w-100">
                            <thead class="all-table-head">
                                <tr class="text-capitalize">
                                    <th class="p-3 table-head-content" style="width:40px;"><input type="checkbox"
                                            class="form-check-input" id="selectAllProducts"></th>
                                    <th class="p-3 table-head-content">Product ID</th>
                                    <th class="p-3 table-head-content">Product Img</th>
                                    <th class="p-3 table-head-content">Product Name</th>
                                    <th class="p-3 table-head-content">Group Under</th>
                                    <th class="p-3 table-head-content">Basic Unit</th>
                                    <th class="p-3 table-head-content">MRP ₹</th>
                                    <th class="p-3 table-head-content">Selling Price ₹</th>
                                    <th class="p-3 table-head-content">Last Updated On</th>
                                    <th class="p-3 table-head-content">Status</th>
                                    <th class="p-3 table-head-content">Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- ── Groups Tab ───────────────────────────────────────────────────── --}}
            <div class="tab-pane show active" id="Groups" role="tabpanel">
                <div class="p-3">
                    <div class="table-responsive mt-3">
                        <table id="groupsTable" class="table align-middle w-100">
                            <thead class="all-table-head">
                                <tr class="text-capitalize">
                                    <th class="p-3 table-head-content" style="width:40px;"><input type="checkbox"
                                            class="form-check-input" id="selectAllGroups"></th>
                                    <th class="p-3 table-head-content">Group ID</th>
                                    <th class="p-3 table-head-content">Group Name</th>
                                    <th class="p-3 table-head-content">Description</th>
                                    <th class="p-3 table-head-content">Products Under</th>
                                    <th class="p-3 table-head-content">Last Updated On</th>
                                    <th class="p-3 table-head-content">Status</th>
                                    <th class="p-3 table-head-content">Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        {{-- ── Create Group Modal ───────────────────────────────────────────────── --}}
        <div id="createGroupModal" class="modal fade" tabindex="-1">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content custom-modal">
                    <div class="modal-header custom-header">
                        <h5>Create New Group</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form id="createGroupForm">
                            <div class="row g-3">
                                <div class="col-md-8 ">
                                    <label class="form-label">Group Name <span class="text-danger">*</span></label>
                                    <input type="text" name="name" id="createGroupName" class="form-control"
                                        placeholder="Enter category name">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Status <span class="text-danger">*</span></label>
                                    <div class="d-flex align-items-center gap-3 mt-2">
                                        <div class="form-check d-flex align-items-center gap-2 mb-0">
                                            <input class="form-check-input" type="radio" name="status" value="active"
                                                checked>
                                            <label class="mb-0">Active</label>
                                        </div>
                                        <div class="form-check d-flex align-items-center gap-2 mb-0">
                                            <input class="form-check-input" type="radio" name="status"
                                                value="inactive">
                                            <label class="mb-0">Inactive</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Group Name (Tamil)</label>
                                    <input type="text" name="name_tamil" class="form-control"
                                        placeholder="Tamil name">
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Group Description (optional)</label>
                                    <textarea name="description" class="form-control" rows="3" placeholder="Type here..."></textarea>
                                </div>
                                {{-- Delivery Fee Panel --}}
                                <div class="col-12">
                                    <div class="group-fee-panel">
                                        <div class="d-flex align-items-start justify-content-between gap-3">
                                            <div>
                                                <h6 class="fw-semibold text-title mb-1">Delivery Fee</h6>
                                                <p class="secondary-text fs-12 mb-0">Enable this to apply standard delivery
                                                    fee to this group's products, ignoring free delivery options.</p>
                                            </div>
                                            <div class="form-check form-switch flex-shrink-0 mb-0">
                                                <input class="form-check-input" type="checkbox" id="createFeeToggle"
                                                    role="switch" style="width:38px;height:20px;cursor:pointer;">
                                            </div>
                                        </div>
                                        <div id="createFeeBody" style="display:none;" class="mt-3">
                                            <div class="row g-3 align-items-end">
                                                <div class="col-md-5">
                                                    <label class="form-label">Delivery Fee ₹ <span
                                                            class="text-danger">*</span></label>
                                                    <input type="number" name="delivery_fee" id="createFeeAmount"
                                                        class="form-control" placeholder="0" min="0.01"
                                                        step="0.01">
                                                </div>
                                                <div class="col-md-7">
                                                    <label class="form-label">Orders applicable for</label>
                                                    <div class="d-flex align-items-center gap-4 mt-1">
                                                        <div class="form-check d-flex align-items-center gap-2 mb-0">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="createFeeStandalone" name="fee_standalone"
                                                                value="1">
                                                            <label class="form-label mb-0"
                                                                for="createFeeStandalone">Standalone</label>
                                                        </div>
                                                        <div class="form-check d-flex align-items-center gap-2 mb-0">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="createFeeMixed" name="fee_mixed" value="1">
                                                            <label class="form-label mb-0" for="createFeeMixed">Mixed
                                                                Orders</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                        <button class="btn-create" id="saveGroupBtn">Create Group</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- ── Edit Group Modal ─────────────────────────────────────────────────── --}}
        <div id="editGroupModal" class="modal fade" tabindex="-1">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content custom-modal">
                    <div class="modal-header custom-header">
                        <h5>Edit Group</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form id="editGroupForm">
                            <input type="hidden" id="editGroupId">
                            <div class="row g-3">
                                <div class="col-md-8">
                                    <label class="form-label">Group Name <span class="text-danger">*</span></label>
                                    <input type="text" id="editGroupName" name="name" class="form-control"
                                        placeholder="Enter group name">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Status <span class="text-danger">*</span></label>
                                    <div class="d-flex align-items-center gap-3 mt-2">
                                        <div class="form-check d-flex align-items-center gap-2 mb-0">
                                            <input type="radio" class="form-check-input" name="editStatus"
                                                id="editActive" value="active">
                                            <label class="mb-0" for="editActive">Active</label>
                                        </div>
                                        <div class="form-check d-flex align-items-center gap-2 mb-0">
                                            <input type="radio" class="form-check-input" name="editStatus"
                                                id="editInactive" value="inactive">
                                            <label class="mb-0" for="editInactive">Inactive</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Group Name (Tamil)</label>
                                    <input type="text" id="editGroupNameTamil" name="name_tamil"
                                        class="form-control">
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Group Description (optional)</label>
                                    <textarea id="editGroupDesc" name="description" class="form-control" rows="3"></textarea>
                                </div>
                                {{-- Delivery Fee Panel --}}
                                <div class="col-12">
                                    <div class="group-fee-panel">
                                        <div class="d-flex align-items-start justify-content-between gap-3">
                                            <div>
                                                <h6 class="fw-semibold text-title mb-1">Delivery Fee</h6>
                                                <p class="secondary-text fs-12 mb-0">Enable this to apply standard delivery
                                                    fee to this group's products, ignoring free delivery options.</p>
                                            </div>
                                            <div class="form-check form-switch flex-shrink-0 mb-0">
                                                <input class="form-check-input" type="checkbox" id="editFeeToggle"
                                                    role="switch" style="width:38px;height:20px;cursor:pointer;">
                                            </div>
                                        </div>
                                        <div id="editFeeBody" style="display:none;" class="mt-3">
                                            <div class="row g-3 align-items-end">
                                                <div class="col-md-5">
                                                    <label class="form-label">Delivery Fee ₹ <span
                                                            class="text-danger">*</span></label>
                                                    <input type="number" id="editFeeAmount" class="form-control"
                                                        placeholder="0" min="0.01" step="0.01">
                                                </div>
                                                <div class="col-md-7">
                                                    <label class="form-label">Orders applicable for</label>
                                                    <div class="d-flex align-items-center gap-4 mt-1">
                                                        <div class="form-check d-flex align-items-center gap-2 mb-0">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="editFeeStandalone">
                                                            <label class="form-label mb-0"
                                                                for="editFeeStandalone">Standalone</label>
                                                        </div>
                                                        <div class="form-check d-flex align-items-center gap-2 mb-0">
                                                            <input class="form-check-input" type="checkbox"
                                                                id="editFeeMixed">
                                                            <label class="form-label mb-0" for="editFeeMixed">Mixed
                                                                Orders</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                        <button class="btn-create" id="updateGroupBtn">Save Changes</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- ── View Group Modal ─────────────────────────────────────────────────── --}}
        <div id="viewGroupModal" class="modal fade" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content custom-modal">
                    <div class="modal-header custom-header">
                        <h5>Group Details</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <table class="table table-bordered">
                            <tr>
                                <th>Group Name</th>
                                <td id="viewGroupName"></td>
                            </tr>
                            <tr>
                                <th>Tamil Name</th>
                                <td id="viewGroupNameTamil"></td>
                            </tr>
                            <tr>
                                <th>Description</th>
                                <td id="viewGroupDesc"></td>
                            </tr>
                            <tr>
                                <th>Products Under</th>
                                <td id="viewGroupCount"></td>
                            </tr>
                            <tr>
                                <th>Status</th>
                                <td id="viewGroupStatus"></td>
                            </tr>
                            <tr>
                                <th>Delivery Fee</th>
                                <td id="viewGroupDeliveryFee"></td>
                            </tr>
                            <tr>
                                <th>Applicable For</th>
                                <td id="viewGroupApplicable"></td>
                            </tr>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button class="btn-cancel" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- ── Delete Group Modal ───────────────────────────────────────────────── --}}
        <div id="deleteGroupModal" class="modal fade" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content custom-modal">
                    <div class="modal-header delete-header">
                        <h5>Delete Group?</h5>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="deleteGroupId">
                        <p><strong>Are you sure you want to delete <span id="deleteGroupName"></span>?</strong></p>
                        <p class="text-muted">All products in this group will become ungrouped.</p>
                        <div class="delete-info-box">
                            <div class="d-flex justify-content-between">
                                <span>Group Name</span><span id="infoGroupName">-</span>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span>Total Products</span><span id="infoGroupCount">0</span>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                        <button class="btn-delete" id="confirmDeleteGroupBtn">Delete Group</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- ── Delete Product Modal ─────────────────────────────────────────────── --}}
        <div id="deleteProductModal" class="modal fade" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content custom-modal">
                    <div class="modal-header delete-header">
                        <h5>Delete Product?</h5>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="deleteProductId">
                        <p><strong>Are you sure you want to delete <span id="deleteProductName"></span>?</strong></p>
                        <p class="text-muted">This product will be permanently removed. This action cannot be undone.</p>
                    </div>
                    <div class="modal-footer">
                        <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                        <button class="btn-delete" id="confirmDeleteProductBtn">Delete Product</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- ── Product Detail Modal ─────────────────────────────────────────────── --}}
        <div id="productDetailModal" class="modal fade" tabindex="-1">
            <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content custom-modal">
                    <div class="modal-header custom-header">
                        <div class="d-flex align-items-center gap-3 flex-grow-1 min-w-0">
                            <div
                                style="width:48px;height:48px;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.2);flex-shrink:0;">
                                <img id="pdmProductImg" src="" alt=""
                                    style="width:100%;height:100%;object-fit:cover;">
                            </div>
                            <div class="min-w-0">
                                <h5 class="mb-0 text-truncate" id="pdmProductName">Product Details</h5>
                                <small id="pdmProductMeta" class="opacity-75 fs-12"></small>
                            </div>
                        </div>
                        <button type="button" class="btn-close btn-close-white ms-3" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body p-4">
                        <div id="pdmLoadingSpinner" class="text-center py-5">
                            <div class="spinner-border text-success" role="status"><span
                                    class="visually-hidden">Loading...</span></div>
                        </div>
                        <div id="pdmContent" style="display:none;">
                            <h6 class="fw-semibold text-title mb-3">Product Info</h6>
                            <div class="border rounded p-3 mb-4">
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <p class="secondary-text fs-12 mb-1">Product Name</p>
                                        <p class="fw-semibold mb-0" id="pdmName">-</p>
                                    </div>
                                    <div class="col-md-4">
                                        <p class="secondary-text fs-12 mb-1">Product Name (Tamil/Tanglish)</p>
                                        <p class="fw-semibold mb-0" id="pdmNameTamil">-</p>
                                    </div>
                                    <div class="col-md-4">
                                        <p class="secondary-text fs-12 mb-1">Product Group</p>
                                        <p class="fw-semibold mb-0" id="pdmGroup">-</p>
                                    </div>
                                    <div class="col-12" id="pdmDescRow" style="display:none;">
                                        <p class="secondary-text fs-12 mb-1">Short Description</p>
                                        <p class="mb-0" id="pdmDesc"></p>
                                    </div>
                                    <div class="col-12" id="pdmKeywordsRow" style="display:none;">
                                        <p class="secondary-text fs-12 mb-1">Product Keywords</p>
                                        <p class="mb-0" id="pdmKeywords"></p>
                                    </div>
                                </div>
                            </div>

                            <h6 class="fw-semibold text-title mb-3">Volume based Product Pricing</h6>
                            <div class="table-responsive mb-3">
                                <table class="table align-middle mb-0">
                                    <thead class="all-table-head">
                                        <tr>
                                            <th class="p-3 table-head-content">Variant</th>
                                            <th class="p-3 table-head-content">Unit</th>
                                            <th class="p-3 table-head-content">MRP ₹</th>
                                            <th class="p-3 table-head-content">Selling Price ₹</th>
                                            <th class="p-3 table-head-content">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="pdmPricingBody">
                                        <tr id="pdmNoPricingRow">
                                            <td colspan="5" class="text-center secondary-text py-3">No pricing added
                                                yet.</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <button type="button" id="openAddPriceModalBtn"
                                class="d-flex align-items-center gap-2 border-0 bg-transparent fw-semibold"
                                style="color:#e67e22;padding:6px 0;">
                                <span
                                    style="width:26px;height:26px;border-radius:50%;background:#e67e22;color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;flex-shrink:0;">+</span>
                                Add new Pricing
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ── Add New Price Modal ───────────────────────────────────────────────── --}}
        <div id="addPriceModal" class="modal fade" tabindex="-1">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content custom-modal">
                    <div class="modal-header custom-header">
                        <h5>Add New Price</h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body p-4">
                        <div class="rounded p-3 mb-4 fs-13"
                            style="background:#fff8f0;border:1px solid #f0ad4e;color:#856404;">
                            <i class="ri-information-line me-1"></i>
                            This price is only a temporary override. It's not a permanent price of the product. To make it
                            one of the permanent prices, edit the product from the product list.
                        </div>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Variant <span class="text-danger">*</span></label>
                                <select id="addPriceVariant" class="form-select">
                                    <option value="">Select</option>
                                    @foreach ($variants as $v)
                                        <option value="{{ $v->id }}">{{ $v->value }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">Please select a variant.</div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Unit <span class="text-danger">*</span></label>
                                <select id="addPriceUnit" class="form-select">
                                    <option value="">Select</option>
                                    @foreach ($units as $u)
                                        <option value="{{ $u->id }}">{{ $u->nickname ?: $u->name }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">Please select a unit.</div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Label <span
                                        class="secondary-text fs-12">(optional)</span></label>
                                <input type="text" id="addPriceLabel" class="form-control"
                                    placeholder="Enter label name">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">MRP ₹ <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">₹</span>
                                    <input type="number" id="addPriceMrp" class="form-control" placeholder="0"
                                        min="0" step="0.01">
                                </div>
                                <div class="invalid-feedback d-block" id="addPriceMrpError"
                                    style="display:none!important;"></div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Discount</label>
                                <select id="addPriceDiscountType" class="form-select">
                                    <option value="none">None</option>
                                    <option value="fixed" selected>Fixed Price</option>
                                    <option value="percentage">Percentage</option>
                                </select>
                            </div>
                            <div class="col-md-6" id="addPriceDiscountCol">
                                <label class="form-label" id="addPriceDiscountLabel">Discount Value ₹ <span
                                        class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text" id="addPriceDiscountSymbol">₹</span>
                                    <input type="number" id="addPriceDiscountValue" class="form-control"
                                        placeholder="0" min="0" step="0.01">
                                </div>
                                <div class="invalid-feedback">Please enter a discount value.</div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Selling Price ₹</label>
                                <div class="input-group">
                                    <span class="input-group-text">₹</span>
                                    <input type="number" id="addPriceSellingPrice" class="form-control" placeholder="0"
                                        readonly style="background:#f8f9fa;">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn-cancel" id="addPriceCancelBtn">Cancel</button>
                        <button class="btn-create" id="confirmAddPriceBtn">Add Price</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script>
        $(function() {

            function showToast(type, msg) {
                if (type === 'success') toastr.success(msg);
                else toastr.error(msg);
            }

            // ── Tab / Create Button Logic ──────────────────────────────────────────
            var currentTab = '#Groups';
            $('[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
                currentTab = $(e.target).attr('href');
                $('#btnText').text(currentTab === '#Products' ? 'Create New Product' : 'Create New Group');
            });

            $('#createBtn').on('click', function() {
                if (currentTab === '#Products') {
                    window.location.href =
                        '{{ route('backend.template.product-list.create-new-product') }}';
                } else {
                    $('#createGroupModal').modal('show');
                }
            });

            // ════════════════════════════════════════════════════════════════════════
            // Products DataTable
            // ════════════════════════════════════════════════════════════════════════
            var productsTable = $('#productsTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('backend.template.product-list.product-data') }}',
                    data: function(d) {
                        d.group_filter = $('#productGroupFilter').val();
                        d.status_filter = $('#productStatusFilter').val();
                    }
                },
                columns: [{
                        data: null,
                        defaultContent: '<input type="checkbox" class="form-check-input row-check">',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'product_code',
                        name: 'product_code'
                    },
                    {
                        data: 'image_html',
                        name: 'image',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'name_html',
                        name: 'name'
                    },
                    {
                        data: 'group_name',
                        name: 'group_name',
                        searchable: false
                    },
                    {
                        data: 'basic_unit',
                        name: 'basic_unit',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'mrp',
                        name: 'mrp',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'selling_price',
                        name: 'selling_price',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'updated_at_fmt',
                        name: 'updated_at',
                        searchable: false
                    },
                    {
                        data: 'status_badge',
                        name: 'status',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ],
                dom: 'rt<"d-flex align-items-center justify-content-end mt-3"ip>',
                language: {
                    info: '_START_-_END_ of _TOTAL_ results'
                },
            });

            // Product search (debounced)
            var productSearchTimer;
            $('#productSearch').on('input', function() {
                clearTimeout(productSearchTimer);
                var val = $(this).val();
                productSearchTimer = setTimeout(function() {
                    productsTable.search(val).draw();
                }, 350);
            });

            // Group / Status filter
            $('#productGroupFilter, #productStatusFilter').on('change', function() {
                productsTable.ajax.reload();
            });

            // Per-page
            $('#productPerPage').on('change', function() {
                productsTable.page.len(parseInt($(this).val())).draw();
            });

            // Select-all products
            $('#selectAllProducts').on('change', function() {
                $('#productsTable tbody .row-check').prop('checked', $(this).is(':checked'));
                $(this).prop('indeterminate', false);
            });
            $(document).on('change', '#productsTable .row-check', function() {
                var total = $('#productsTable tbody .row-check').length;
                var checked = $('#productsTable tbody .row-check:checked').length;
                $('#selectAllProducts').prop({
                    indeterminate: checked > 0 && checked < total,
                    checked: checked === total
                });
            });
            productsTable.on('draw', function() {
                $('#selectAllProducts').prop({
                    indeterminate: false,
                    checked: false
                });
            });

            // ── Delete Product ─────────────────────────────────────────────────────
            $(document).on('click', '.delete-product-btn', function() {
                var btn = $(this);
                $('#deleteProductId').val(btn.data('id'));
                $('#deleteProductName').text(btn.data('name'));
                $('#deleteProductModal').modal('show');
            });

            $('#confirmDeleteProductBtn').on('click', function() {
                var id = $('#deleteProductId').val();
                $.ajax({
                        url: '{{ url('admin/product-list/products') }}/' + id,
                        type: 'DELETE'
                    })
                    .done(function(res) {
                        showToast('success', res.message);
                        $('#deleteProductModal').modal('hide');
                        productsTable.ajax.reload();
                    }).fail(function() {
                        showToast('error', 'Delete failed.');
                    });
            });

            // ════════════════════════════════════════════════════════════════════════
            // Groups DataTable
            // ════════════════════════════════════════════════════════════════════════
            var groupsTable = $('#groupsTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('backend.template.product-list.group-data') }}',
                columns: [{
                        data: null,
                        defaultContent: '<input type="checkbox" class="form-check-input row-check">',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'name_html',
                        name: 'name'
                    },
                    {
                        data: 'description',
                        name: 'description',
                        orderable: false
                    },
                    {
                        data: 'products_count_html',
                        name: 'products_count',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'updated_at_fmt',
                        name: 'updated_at',
                        searchable: false
                    },
                    {
                        data: 'status_badge',
                        name: 'status',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ],
                dom: '<"d-flex align-items-center justify-content-between mb-3"<"d-flex gap-3"f><"d-flex gap-2 align-items-center"l>>rt<"d-flex align-items-center justify-content-end mt-3"ip>',
                language: {
                    search: '',
                    searchPlaceholder: 'Search group name',
                    lengthMenu: 'Show _MENU_ entries',
                    info: '_START_-_END_ of _TOTAL_ results',
                },
            });

            // Select-all groups
            $('#selectAllGroups').on('change', function() {
                $('#groupsTable tbody .row-check').prop('checked', $(this).is(':checked'));
                $(this).prop('indeterminate', false);
            });
            $(document).on('change', '#groupsTable .row-check', function() {
                var total = $('#groupsTable tbody .row-check').length;
                var checked = $('#groupsTable tbody .row-check:checked').length;
                $('#selectAllGroups').prop({
                    indeterminate: checked > 0 && checked < total,
                    checked: checked === total
                });
            });
            groupsTable.on('draw', function() {
                $('#selectAllGroups').prop({
                    indeterminate: false,
                    checked: false
                });
            });

            // ── Delivery fee toggle handlers ───────────────────────────────────────
            $('#createFeeToggle').on('change', function() {
                $(this).is(':checked') ? $('#createFeeBody').slideDown(200) : $('#createFeeBody').slideUp(
                    200);
                if (!$(this).is(':checked')) {
                    $('#createFeeAmount').removeClass('is-invalid').val('');
                }
            });
            $('#editFeeToggle').on('change', function() {
                $(this).is(':checked') ? $('#editFeeBody').slideDown(200) : $('#editFeeBody').slideUp(200);
                if (!$(this).is(':checked')) {
                    $('#editFeeAmount').removeClass('is-invalid');
                }
            });

            // ── Create Group ───────────────────────────────────────────────────────
            $('#createGroupModal').on('hidden.bs.modal', function() {
                $(this).find('.is-invalid').removeClass('is-invalid');
                $('#createGroupForm')[0].reset();
                $('#createFeeToggle').prop('checked', false);
                $('#createFeeBody').hide();
                $('#createFeeStandalone, #createFeeMixed').prop('checked', false);
            });

            $('#saveGroupBtn').on('click', function() {
                var $btn = $(this).prop('disabled', true);
                var $name = $('#createGroupName');
                $name.toggleClass('is-invalid', !$name.val().trim());

                var feeOn = $('#createFeeToggle').is(':checked');
                var feeVal = parseFloat($('#createFeeAmount').val()) || 0;
                var ok = !!$name.val().trim();

                if (feeOn && feeVal <= 0) {
                    $('#createFeeAmount').addClass('is-invalid');
                    ok = false;
                } else {
                    $('#createFeeAmount').removeClass('is-invalid');
                }

                if (!ok) {
                    $btn.prop('disabled', false);
                    toastr.error('Please fill in all required fields.');
                    return;
                }

                var data = {
                    name: $name.val().trim(),
                    name_tamil: $('input[name="name_tamil"]', '#createGroupForm').val(),
                    description: $('textarea[name="description"]', '#createGroupForm').val(),
                    status: $('input[name="status"]:checked', '#createGroupForm').val(),
                    delivery_fee_enabled: feeOn ? 1 : 0,
                    delivery_fee: feeOn ? feeVal : 0,
                    fee_standalone: (feeOn && $('#createFeeStandalone').is(':checked')) ? 1 : 0,
                    fee_mixed: (feeOn && $('#createFeeMixed').is(':checked')) ? 1 : 0,
                };

                $.post('{{ route('backend.template.product-list.groups.store') }}', data)
                    .done(function(res) {
                        showToast('success', res.message);
                        $('#createGroupModal').modal('hide');
                        groupsTable.ajax.reload();
                    })
                    .fail(function(xhr) {
                        var msg = xhr.responseJSON?.errors ?
                            Object.values(xhr.responseJSON.errors).flat()[0] :
                            (xhr.responseJSON?.message || 'Failed to create group.');
                        showToast('error', msg);
                    })
                    .always(function() {
                        $btn.prop('disabled', false);
                    });
            });

            // ── Open View Group ────────────────────────────────────────────────────
            $(document).on('click', '.view-group-btn', function() {
                var btn = $(this);
                $('#viewGroupName').text(btn.data('name'));
                $('#viewGroupNameTamil').text(btn.data('name_tamil') || '-');
                $('#viewGroupDesc').text(btn.data('desc') || '-');
                $('#viewGroupCount').text(btn.data('count'));
                $('#viewGroupStatus').text(btn.data('status'));
                var feeEnabled = btn.data('fee_enabled') == 1;
                $('#viewGroupDeliveryFee').text(feeEnabled ? '₹' + parseFloat(btn.data('fee')).toFixed(2) :
                    'Disabled');
                var applicable = [];
                if (feeEnabled && btn.data('fee_standalone') == 1) applicable.push('Standalone');
                if (feeEnabled && btn.data('fee_mixed') == 1) applicable.push('Mixed Orders');
                $('#viewGroupApplicable').text(applicable.length ? applicable.join(', ') : '-');
                $('#viewGroupModal').modal('show');
            });

            // ── Open Edit Group ────────────────────────────────────────────────────
            $('#editGroupModal').on('hidden.bs.modal', function() {
                $(this).find('.is-invalid').removeClass('is-invalid');
                $('#editFeeToggle').prop('checked', false);
                $('#editFeeBody').hide();
                $('#editFeeStandalone, #editFeeMixed').prop('checked', false);
            });

            $(document).on('click', '.edit-group-btn', function() {
                var btn = $(this);
                $('#editGroupId').val(btn.data('id'));
                $('#editGroupName').val(btn.data('name'));
                $('#editGroupNameTamil').val(btn.data('name_tamil') || '');
                $('#editGroupDesc').val(btn.data('desc') || '');
                $('[name=editStatus][value=' + btn.data('status') + ']').prop('checked', true);

                var feeEnabled = btn.data('fee_enabled') == 1;
                $('#editFeeToggle').prop('checked', feeEnabled);
                $('#editFeeAmount').val(btn.data('fee') || '');
                $('#editFeeStandalone').prop('checked', btn.data('fee_standalone') == 1);
                $('#editFeeMixed').prop('checked', btn.data('fee_mixed') == 1);
                feeEnabled ? $('#editFeeBody').show() : $('#editFeeBody').hide();

                $('#editGroupModal').modal('show');
            });

            // ── Update Group ───────────────────────────────────────────────────────
            $('#updateGroupBtn').on('click', function() {
                var $btn = $(this).prop('disabled', true);
                var $name = $('#editGroupName');
                $name.toggleClass('is-invalid', !$name.val().trim());

                var feeOn = $('#editFeeToggle').is(':checked');
                var feeVal = parseFloat($('#editFeeAmount').val()) || 0;
                var ok = !!$name.val().trim();

                if (feeOn && feeVal <= 0) {
                    $('#editFeeAmount').addClass('is-invalid');
                    ok = false;
                } else {
                    $('#editFeeAmount').removeClass('is-invalid');
                }

                if (!ok) {
                    $btn.prop('disabled', false);
                    toastr.error('Please fill in all required fields.');
                    return;
                }

                var id = $('#editGroupId').val();
                var data = {
                    _method: 'PUT',
                    name: $name.val().trim(),
                    name_tamil: $('#editGroupNameTamil').val(),
                    description: $('#editGroupDesc').val(),
                    status: $('[name=editStatus]:checked').val(),
                    delivery_fee_enabled: feeOn ? 1 : 0,
                    delivery_fee: feeOn ? feeVal : 0,
                    fee_standalone: (feeOn && $('#editFeeStandalone').is(':checked')) ? 1 : 0,
                    fee_mixed: (feeOn && $('#editFeeMixed').is(':checked')) ? 1 : 0,
                };

                $.post('{{ url('admin/product-list/groups') }}/' + id, data)
                    .done(function(res) {
                        showToast('success', res.message);
                        $('#editGroupModal').modal('hide');
                        groupsTable.ajax.reload();
                    })
                    .fail(function(xhr) {
                        var msg = xhr.responseJSON?.errors ?
                            Object.values(xhr.responseJSON.errors).flat()[0] :
                            (xhr.responseJSON?.message || 'Update failed.');
                        showToast('error', msg);
                    })
                    .always(function() {
                        $btn.prop('disabled', false);
                    });
            });

            // ── Open Delete Group ──────────────────────────────────────────────────
            $(document).on('click', '.delete-group-btn', function() {
                var btn = $(this);
                $('#deleteGroupId').val(btn.data('id'));
                $('#deleteGroupName').text(btn.data('name'));
                $('#infoGroupName').text(btn.data('name'));
                $('#infoGroupCount').text(btn.data('count'));
                $('#deleteGroupModal').modal('show');
            });

            $('#confirmDeleteGroupBtn').on('click', function() {
                var id = $('#deleteGroupId').val();
                $.ajax({
                        url: '{{ url('admin/product-list/groups') }}/' + id,
                        type: 'DELETE'
                    })
                    .done(function(res) {
                        showToast('success', res.message);
                        $('#deleteGroupModal').modal('hide');
                        groupsTable.ajax.reload();
                    }).fail(function() {
                        showToast('error', 'Delete failed.');
                    });
            });

            // ════════════════════════════════════════════════════════════════════════
            // Product Detail Modal
            // ════════════════════════════════════════════════════════════════════════
            var _currentProductId = null;
            var MODAL_DATA_BASE = '{{ url('admin/product-list/products') }}';
            var SEC_PRICING_BASE = '{{ url('admin/product-list/section-pricing') }}';

            $(document).on('click', '.view-product-btn', function() {
                _currentProductId = $(this).data('id');
                $('#pdmLoadingSpinner').show();
                $('#pdmContent').hide();
                $('#productDetailModal').modal('show');

                $.get(MODAL_DATA_BASE + '/' + _currentProductId + '/modal-data')
                    .done(function(res) {
                        populateProductModal(res);
                    })
                    .fail(function() {
                        showToast('error', 'Failed to load product details.');
                        $('#productDetailModal').modal('hide');
                    });
            });

            function populateProductModal(data) {
                var p = data.product;
                $('#pdmProductImg').attr('src', p.image);
                $('#pdmProductName').text(p.name + ' Details');
                $('#pdmProductMeta').text('Group under : ' + (p.group || '-') + '  |  Last updated on : ' + p
                    .updated_at);
                $('#pdmName').text(p.name);
                $('#pdmNameTamil').text(p.name_tamil || '-');
                $('#pdmGroup').text(p.group || '-');

                if (p.short_description) {
                    $('#pdmDescRow').show().find('#pdmDesc').text(p.short_description);
                } else {
                    $('#pdmDescRow').hide();
                }
                if (p.keywords) {
                    $('#pdmKeywordsRow').show().find('#pdmKeywords').text(p.keywords);
                } else {
                    $('#pdmKeywordsRow').hide();
                }

                renderPricingTable(data.pricing, data.overrides);
                $('#pdmLoadingSpinner').hide();
                $('#pdmContent').show();
            }

            function renderPricingTable(permanent, overrides) {
                var $tbody = $('#pdmPricingBody').empty();
                var hasRows = false;

                // Permanent rows (base prices — no Remove)
                $.each(permanent, function(i, row) {
                    hasRows = true;
                    var variantCell = row.variant || '-';
                    if (row.label) variantCell += '<br><small class="secondary-text fs-11">(' + row.label +
                        ')</small>';
                    $tbody.append(
                        '<tr>' +
                        '<td>' + variantCell + '</td>' +
                        '<td>' + (row.unit || '-') + '</td>' +
                        '<td>₹' + row.mrp + '</td>' +
                        '<td>₹' + row.selling_price + '</td>' +
                        '<td><span class="badge bg-success-subtle text-success px-2 py-1 rounded-pill fs-11">Base</span></td>' +
                        '</tr>'
                    );
                });

                // Temporary override rows (with Remove)
                $.each(overrides, function(i, row) {
                    hasRows = true;
                    var variantCell = row.variant || '-';
                    if (row.label) variantCell += '<br><small class="secondary-text fs-11">(' + row.label +
                        ')</small>';
                    $tbody.append(
                        '<tr>' +
                        '<td>' + variantCell + '</td>' +
                        '<td>' + (row.unit || '-') + '</td>' +
                        '<td>₹' + row.mrp + '</td>' +
                        '<td>₹' + row.selling_price + '</td>' +
                        '<td><button type="button" class="btn btn-sm remove-temp-price-btn" data-id="' +
                        row.id +
                        '" style="background:#fff0f0;color:#e53935;border:1px solid #ffcdd2;padding:2px 12px;border-radius:4px;font-size:12px;">Remove</button></td>' +
                        '</tr>'
                    );
                });

                if (!hasRows) {
                    $tbody.append(
                        '<tr id="pdmNoPricingRow"><td colspan="5" class="text-center secondary-text py-3">No pricing added yet.</td></tr>'
                    );
                }
            }

            // Remove a temporary pricing row
            $(document).on('click', '.remove-temp-price-btn', function() {
                var id = $(this).data('id');
                var $row = $(this).closest('tr');
                $.ajax({
                        url: SEC_PRICING_BASE + '/' + id,
                        type: 'DELETE'
                    })
                    .done(function(res) {
                        $row.remove();
                        showToast('success', res.message);
                        if (!$('#pdmPricingBody tr').length) {
                            $('#pdmPricingBody').append(
                                '<tr id="pdmNoPricingRow"><td colspan="5" class="text-center secondary-text py-3">No pricing added yet.</td></tr>'
                            );
                        }
                    })
                    .fail(function() {
                        showToast('error', 'Failed to remove pricing.');
                    });
            });

            // ════════════════════════════════════════════════════════════════════════
            // Add New Price Modal
            // ════════════════════════════════════════════════════════════════════════
            $('#openAddPriceModalBtn').on('click', function() {
                resetAddPriceForm();
                $('#productDetailModal').modal('hide');
                $('#productDetailModal').one('hidden.bs.modal', function() {
                    $('#addPriceModal').modal('show');
                });
            });

            $('#addPriceCancelBtn').on('click', function() {
                $('#addPriceModal').modal('hide');
                $('#addPriceModal').one('hidden.bs.modal', function() {
                    $('#productDetailModal').modal('show');
                });
            });

            function resetAddPriceForm() {
                $('#addPriceVariant, #addPriceUnit').val('').removeClass('is-invalid');
                $('#addPriceLabel').val('');
                $('#addPriceMrp, #addPriceDiscountValue, #addPriceSellingPrice').val('').removeClass('is-invalid');
                $('#addPriceDiscountType').val('fixed');
                updateDiscountLabel();
            }

            function updateDiscountLabel() {
                var type = $('#addPriceDiscountType').val();
                var isPct = type === 'percentage';
                var isNone = type === 'none';
                $('#addPriceDiscountCol').toggle(!isNone);
                $('#addPriceDiscountLabel').html(
                    isPct ?
                    'Discount Value % <span class="text-danger">*</span>' :
                    'Discount Value ₹ <span class="text-danger">*</span>'
                );
                $('#addPriceDiscountSymbol').text(isPct ? '%' : '₹');
                calculateSellingPrice();
            }

            function calculateSellingPrice() {
                var mrp = parseFloat($('#addPriceMrp').val()) || 0;
                var type = $('#addPriceDiscountType').val();
                var discVal = parseFloat($('#addPriceDiscountValue').val()) || 0;
                var selling = mrp;
                if (type === 'percentage') selling = Math.max(0, mrp - mrp * discVal / 100);
                else if (type === 'fixed') selling = Math.max(0, mrp - discVal);
                $('#addPriceSellingPrice').val(selling.toFixed(2));
            }

            $('#addPriceDiscountType').on('change', updateDiscountLabel);
            $('#addPriceMrp, #addPriceDiscountValue').on('input', calculateSellingPrice);

            $('#confirmAddPriceBtn').on('click', function() {
                var $btn = $(this).prop('disabled', true);
                var ok = true;

                if (!$('#addPriceVariant').val()) {
                    $('#addPriceVariant').addClass('is-invalid');
                    ok = false;
                } else {
                    $('#addPriceVariant').removeClass('is-invalid');
                }

                if (!$('#addPriceUnit').val()) {
                    $('#addPriceUnit').addClass('is-invalid');
                    ok = false;
                } else {
                    $('#addPriceUnit').removeClass('is-invalid');
                }

                var mrp = parseFloat($('#addPriceMrp').val());
                if (!mrp || mrp <= 0) {
                    $('#addPriceMrp').addClass('is-invalid');
                    ok = false;
                } else {
                    $('#addPriceMrp').removeClass('is-invalid');
                }

                var discType = $('#addPriceDiscountType').val();
                var discVal = $('#addPriceDiscountValue').val();
                if (discType !== 'none' && (discVal === '' || parseFloat(discVal) < 0)) {
                    $('#addPriceDiscountValue').addClass('is-invalid');
                    ok = false;
                } else {
                    $('#addPriceDiscountValue').removeClass('is-invalid');
                }

                if (!ok) {
                    $btn.prop('disabled', false);
                    return;
                }

                $.post(MODAL_DATA_BASE + '/' + _currentProductId + '/section-pricing', {
                        _token: '{{ csrf_token() }}',
                        variant_id: $('#addPriceVariant').val(),
                        unit_id: $('#addPriceUnit').val(),
                        label: $('#addPriceLabel').val(),
                        mrp: mrp,
                        discount_type: discType,
                        discount_value: discVal || 0,
                    })
                    .done(function(res) {
                        showToast('success', res.message);
                        $('#addPriceModal').modal('hide');
                        $('#addPriceModal').one('hidden.bs.modal', function() {
                            $('#productDetailModal').modal('show');
                        });

                        // Append new row to the pricing table
                        var row = res.pricing;
                        var variantCell = row.variant || '-';
                        if (row.label) variantCell += '<br><small class="secondary-text fs-11">(' + row
                            .label + ')</small>';
                        $('#pdmNoPricingRow').remove();
                        $('#pdmPricingBody').append(
                            '<tr>' +
                            '<td>' + variantCell + '</td>' +
                            '<td>' + (row.unit || '-') + '</td>' +
                            '<td>₹' + row.mrp + '</td>' +
                            '<td>₹' + row.selling_price + '</td>' +
                            '<td><button type="button" class="btn btn-sm remove-temp-price-btn" data-id="' +
                            row.id +
                            '" style="background:#fff0f0;color:#e53935;border:1px solid #ffcdd2;padding:2px 12px;border-radius:4px;font-size:12px;">Remove</button></td>' +
                            '</tr>'
                        );
                    })
                    .fail(function(xhr) {
                        var msg = xhr.responseJSON?.errors ?
                            Object.values(xhr.responseJSON.errors).flat()[0] :
                            (xhr.responseJSON?.message || 'Failed to add pricing.');
                        showToast('error', msg);
                    })
                    .always(function() {
                        $btn.prop('disabled', false);
                    });
            });

        });
    </script>
@endsection