{% load static %}
{% include 'includes/header.html' %}
<style>
    .custom-col-8 {
        width: 72% !important;
    }

    .custom-col-4 {
        width: 28% !important;
    }
</style>
{% include 'pages/sidebar.html' %}
{% include 'includes/customer_sidebar.html' %}
{% include 'includes/navbar.html' %}



<div class="container-xxl flex-grow-1 container-p-y">

    <!-- Breadcrumb -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="mb-0">Sales </h4>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="/store/dashboard">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">Sales </li>
                <li class="breadcrumb-item" aria-current="page">Sales </li>
            </ol>
        </nav>
    </div>

    <div class="row">

        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form id="sales_form" class="row g-6 pt-3">
                        {% csrf_token %}

                        <div class="col-8 custom-col-8">
                            <div class="row">
                                <div class="col-md-3 mb-4 form-control-validation">
                                    <label class="form-label" for="po_date">INV Date <span
                                            style="color: red;">*</span></label>
                                    <input type="date" id="sales_date" class="form-control" name="sales_date"
                                        required />
                                </div>
                                <div class="col-3 mb-5">
                                    <label class="form-label mt-1" for="serial_number">Customer <span
                                            style="color: red;">*</span></label>

                                    <select class="form-control select2" id="customer_id" name="customer_id"
                                        autocomplete="off" required>
                                        {% for item in customer %}
                                        <option value="{{item.id}}">{{item.name}}</option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <div class="col-md-3 mb-4 form-control-validation">
                                    <label class="form-label" for="supplier_id"> <span style="color: red;">*</span> Customer</label>
                                    <input type="text" id="customer_name" class="form-control" name="customer_name" required/>      
                                </div>
                                
                                <div class="col-md-3 mb-4 form-control-validation">
                                    <label class="form-label" for="supplier_id" > <span style="color: red;">*</span> Customer Phone</label>
                                    <input type="number" id="customer_phone" class="form-control" name="customer_phone"     required/>      
                                </div>




                            </div>

                            <div class="row">

                                <div class="col-md-3 mb-4 form-control-validation">
                                    <label class="form-label" for="item_code">Search IMEI Number</label>
                                    <div class="input-group">
                                        <input type="text" id="imei_number_enter" class="form-control typeahead"
                                            name="imei_number_enter" placeholder="Type and enter" autocomplete="off"
                                            style="background-color: #dbf7ff;" />
                                    </div>
                                    <div class="invalid-feedback" id="imei-error"></div>

                                </div>


                            </div>

                            <div class="row">

                                <div class="col-md-3 mb-4 form-control-validation">
                                    <label class="form-label" for="item_code">Subcategory</label>
                                    <select class="select2  form-control" id="subcategory_id" name="subcategory_id">
                                        <option value="">Select</option>
                                        {% for subcategory in subcategory %}
                                        <option value="{{ subcategory.id }}">{{ subcategory.name }}</option>
                                        {% endfor %}
                                    </select>
                                    <div class="invalid-feedback" id="item-error"></div>
                                </div>

                                <div class="col-md-3 mb-4 form-control-validation">
                                    <label class="form-label" for="item_code">Brand</label>
                                    <select class="select2  form-control" id="brand_id" name="brand_id">
                                        <option value="">Select</option>

                                    </select>
                                    <div class="invalid-feedback" id="item-error"></div>
                                </div>

                                <div class="col-md-3 mb-4 form-control-validation">
                                    <label class="form-label" for="item_code">Model</label>
                                    <select class="select2  form-control" id="model_id" name="model_id">
                                        <option value="">Select</option>
                                    </select>
                                    <div class="invalid-feedback" id="item-error"></div>
                                </div>

                                <div class="col-md-3 mb-4 form-control-validation">
                                    <label class="form-label" for="batch_no">Variant</label>
                                    <select class="select2  form-control" id="variant_no" name="variant_no">
                                        <option value="">Select</option>
                                    </select>
                                    <div class="invalid-feedback" id="serial-error"></div>
                                </div>



                                <div class="col-md-3 mb-4 form-control-validation">
                                    <label class="form-label" for="uom_id">Color</label>
                                    <select class="select2  form-control" id="color_id" name="color_id">
                                        <option value="">Select</option>
                                    </select>
                                </div>


                                <div class="col-md-3 form-control-validation mb-4">
                                    <div class="row">
                                        <div class="col-md-12 form-control-validation">
                                            <label class="form-label" for="amount">Rate (₹)</label>

                                            <input type="number" id="rate" class="form-control" name="rate" readonly />
                                        </div>

                                    </div>
                                </div>

                                <div class="col-md-3 form-control-validation ">
                                    <label class="form-label" for="discount">Discount (₹)</label>
                                    <div class="d-flex gap-2">
                                        <input type="number" id="discount_percent" class="form-control" placeholder="%"
                                            min="0" />
                                        <input type="number" id="discount_amount" class="form-control" placeholder="₹"
                                            min="0" />
                                    </div>
                                </div>

                                <div class="col-md-3 form-control-validation mb-4">
                                    <div class="row">
                                        <div class="col-md-6 form-control-validation">
                                            <label class="form-label" for="amount">CGST (Inclusive) (₹)</label>
                                            <input type="number" id="tax_cgst" class="form-control" name="tax_cgst"
                                                readonly />
                                        </div>
                                        <div class="col-md-6 form-control-validation">
                                            <label class="form-label" for="amount">SGST (Inclusive) (₹)</label>
                                            <input type="number" id="tax_sgst" class="form-control" name="tax_sgst"
                                                readonly />
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-3  form-control-validation">
                                    <label class="form-label" for="amount">Net Rate (₹)</label>
                                    <input type="number" id="net_rate" class="form-control" name="net_rate" readonly />
                                    <small class="text-muted mt-2" id="mop_price_text" style="display:none;">MOP: ₹0
                                    </small>
                                    <div class="invalid-feedback" id="rate-error"></div>

                                </div>


                                <div class="col-md-3 text-start mt-5 form-control-validation text">
                                    <button type="button" class="btn btn-success" name="add_item" id="add_item"
                                        onclick="addInwardRow()">+Add</button>
                                </div>
                                <div class="col-12">
                                    <input type="hidden" name="upgrade_id" id="upgrade_id" />
                                    <input type="hidden" name="upgrade_amount" id="upgrade_amount" />
                                    <input type="hidden" name="special_id" id="special_id" />
                                    <input type="hidden" name="special_amount" id="special_amount" />
                                    <input type="hidden" name="mop_price" id="mop_price" />
                                    <input type="hidden" name="bop_price" id="bop_price" />
                                    <input type="hidden" name="wsp_price" id="wsp_price" />
                                    <input type="hidden" name="fsp_price" id="fsp_price" />
                                    <input type="hidden" name="db_price" id="db_price" />
                                    <input type="hidden" name="source" id="source" />
                                    <input type="hidden" name="tax_amount" id="tax_amount" />
                                    <input type="hidden" name="tax_percent" id="tax_percent" />
                                    <input type="hidden" name="ean_number" id="ean_number" />
                                    <input type="hidden" name="purchase_price" id="purchase_price" />
                                    <input type="hidden" name="sales_id" id="sales_id" />
                                </div>

                                <div class="col-md-12 ">
                                    <div class="table-responsive text-nowrap">
                                        <table class="table mt-5" id="itemTable">
                                            <thead>
                                                <tr>
                                                    <th>Actions</th>
                                                    <th>Subcategory</th>
                                                    <th>Brand</th>
                                                    <th>Model</th>
                                                    <th>Variant</th>
                                                    <th>Color</th>
                                                    <th>IMEI</th>
                                                    <th>Rate (₹)</th>
                                                    <th>Discount (₹)</th>
                                                    <th>CGST (₹)</th>
                                                    <th>SGST (₹)</th>
                                                    <th>Amount (₹)</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4 custom-col-4 mt-5 mb-4 form-control-validation"
                            style="padding: 2%; padding-top: 0px;">
                            <div class="row">

                                <!-- Available Stock Card -->
                                <div class="col-12" id="stock_list_wrapper" style="padding: 0px; padding-bottom: 20px;">
                                    <h6 class="text-muted">Available Stock</h6>
                                    <div id="stockListContainer"
                                        style="max-height: 200px; overflow-y: auto; border: 1px solid #f0f0f0; border-radius: 4px; background-color: #f9f9f9; padding: 10px; text-align: center;">
                                        <!-- Content populated by JS -->
                                        <div class="text-center text-muted">Loading...</div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <hr style="border-top: 2px dashed #999; margin-top: 3%;">
                                </div>

                                <!-- Scheme Details Card -->
                                <div class="col-12" style="padding:0;">
                                    <div style="max-height:300px; overflow-y:auto;">

                                        <!-- Heading -->
                                        <h5 class="text-center mb-2">Scheme Details</h5>

                                        <table id="stock_table" class="table table-bordered mb-0"
                                            style="border:1px solid #f2f2f2; background-color:#c3c3f1;  ">

                                            <thead style="background-color:#9cd3f3; position:sticky; top:0; z-index:1;">
                                                <tr>
                                                    <th>Scheme Type</th>
                                                    <th>Amount (₹)</th>
                                                </tr>
                                            </thead>

                                            <tbody style="background-color:#EAF4FD;">
                                                <tr class="no-data">
                                                    <td colspan="2" align="center">No data</td>
                                                </tr>
                                            </tbody>

                                        </table>
                                    </div>
                                </div>


                                <div class="col-12">
                                    <hr style="border-top: 2px dashed #999; margin-top: 3%;">
                                </div>

                                <div class="col-12 mb-4 mt-5">
                                    <div class="summary-box shadow"
                                        style="border: 1px solid #ddd; padding: 24px 28px;  background:#EAF4FD; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08);">
                                        <h5 style="text-align:center;background:#9cd3f3;padding:5px;
                                            border-radius:8px;font-weight:600;color:#333;">
                                            Sales Summary (<small style="color: red;">Total Quantity - <span
                                                    id="total_quantity">0</span></small>)
                                        </h5>



                                        <div class="summary-row">
                                            <span class="label">MRP (₹)</span>
                                            <span class="value" id="sub_total">0.00</span>
                                        </div>

                                        <div class="summary-row">
                                            <span class="label">Discount (₹)</span>
                                            <span class="value" id="total_discount">0.00</span>
                                        </div>

                                        <div class="summary-row">
                                            <span class="label">Taxable Value (₹)</span>
                                            <span class="value" id="total_tax">0.00</span>
                                        </div>

                                        <div class="summary-row">
                                            <span class="label">Tax CGST @9% (₹)</span>
                                            <span class="value" id="total_tax_cgst">0.00</span>
                                        </div>

                                        <div class="summary-row">
                                            <span class="label">Tax SGST @9% (₹)</span>
                                            <span class="value" id="total_tax_sgst">0.00</span>
                                        </div>



                                        <!-- Payment Options -->
                                        <div class="summary-upi" style="margin-top:12px;">
                                            <h5 style="text-align:center;color:#333;">Transaction Modes</h5>

                                            <div
                                                style="display:flex;justify-content:center;gap:16px;margin-bottom:10px;flex-wrap: wrap;">
                                                <label>
                                                    <input type="checkbox" class="payment-option" data-target="cashBox">
                                                    Cash
                                                </label>
                                                <label>
                                                    <input type="checkbox" class="payment-option" data-target="bankBox">
                                                    Bank
                                                </label>

                                                <label>
                                                    <input type="checkbox" class="payment-option"
                                                        data-target="financeBox"> Finance
                                                </label>
                                            </div>
                                            <div class="payment-box" id="cashBox" style="display:none;">
                                                <div class="summary-row2">
                                                    <span class="label">Cash Amount (₹)</span>
                                                    <input type="number" class="value" id="cash_amount" value="0.00"
                                                        step="0.01"
                                                        style="text-align: right; background-color: white !important; border: 1px solid #ced4da; border-radius: 4px;">
                                                </div>
                                                <div class="col-12" id="dividerCash" style="display:none;">
                                                    <hr>
                                                </div>
                                            </div>

                                            <div class="payment-box" id="bankBox" style="display:none;">
                                                <div class="summary-row2">
                                                    <span class="label">Bank Amount (₹)</span>
                                                    <input type="number" class="value" id="bank_amount" value="0.00"
                                                        step="0.01" style="text-align: right;">
                                                </div>
                                            </div>
                                            <div class="col-12" id="dividerBank" style="display:none;">
                                                <hr>
                                            </div>



                                            <div class="col-12" id="dividerCard" style="display:none;">
                                                <hr>
                                            </div>


                                            <div class="payment-box" id="financeBox" style="display:none;">
                                                <div class="summary-row2">
                                                    <span class="label">Finance Details</span>
                                                    <select class="value select2" id="finance_id" name="finance_id">
                                                        <option value="">Select</option>
                                                        {% for b in finance %}
                                                        <option value="{{ b.id }}">{{ b.name }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>

                                                <div class="summary-row2">
                                                    <span class="label">Finance Customer</span>
                                                    <input type="text" class="value" id="finance_customer">
                                                </div>

                                                <div class="summary-row2">
                                                    <span class="label">Disbursed Amount (₹)</span>
                                                    <input type="number" class="value" id="finance_amount" value="0.00"
                                                        step="0.01" style="text-align: right;">
                                                </div>

                                                <div class="summary-row2" id="finance_charges_row">
                                                    <span class="label">Finance Charges (₹)</span>
                                                    <input type="number" class="value" id="finance_charges" value="0.00"
                                                        step="0.01" style="text-align: right;">
                                                </div>

                                            </div>

                                        </div>

                                        <div class="col-12">
                                            <hr style="border-top:2px dashed #999;margin-top:3%;">
                                        </div>

                                        <!-- Total -->
                                        <div class="summary-row total-row">
                                            <span class="label">Total (₹)</span>
                                            <span class="value" id="total_payable">0.00</span>
                                        </div>

                                        <div class="summary-row2">
                                            <span class="label">Balance (₹)</span>
                                            <span class="value" id="balance_amount">0.00</span>
                                        </div>
                                        <div id="overpay_warning" style="
                                                display:none;
                                                background:#ffe5e5;
                                                color:#b30000;
                                                font-size:14px;
                                                margin-top:10px;
                                                text-align:center;
                                                font-weight:700;
                                                padding:8px 12px;
                                                border:1px solid #ff4d4d;
                                                border-radius:8px;
                                                box-shadow:0 0 6px rgba(255,77,77,0.6);
                                            ">
                                            ⚠ Overpayment detected. Please adjust payment amount.
                                        </div>

                                    </div>
                                </div>

                                <!-- Remarks -->
                                <div class="col-12 mb-4">
                                    <label class="form-label">Remarks</label>
                                    <textarea class="form-control" rows="3" id="description"></textarea>
                                </div>

                                <!-- Actions -->
                                <div class="col-12 d-flex justify-content-end gap-3 mb-4">
                                    <button type="button" class="btn btn-primary" onclick="history.back()">Back</button>
                                    <button type="submit" class="btn btn-success px-4">Save</button>
                                </div>

                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!--B2B Customer  -->

        </div>
    </div>
</div>



{% include 'includes/footer.html' %}
{% include 'includes/common_js.html' %}
{% include 'includes/load_dropdown.html' %}
{% include 'external_wholesale/sales/sales_js.html' %}

<script>

    $(document).ready(function () {
        loadTypeahead('#ean_number', { 'ean': 'ean', 'item_id': 'id' }, '/load_ean_number/');
        CurrentDate('sales_date');
        $('#customer_id').on('select2:select', function () {
            $('#imei_number_enter').val('').focus().select();
        });
    });

    $('#sales_form').on('submit', function (e) {
        e.preventDefault();
        if (!this.checkValidity()) {
            this.reportValidity();
            return;
        }

        if ($('#itemTable tbody tr').length === 0) {
            showToast('info', 'Please add at least one item to the table.');
            return;
        }

        const paymentErrors = validatePaymentModes();
        if (paymentErrors.length > 0) {
            showSweetAlert('warning', paymentErrors.map(err => `• ${err}`).join('\n'));
            return;
        }

        let items = [];
        $('#itemTable tbody tr').each(function () {
            let $row = $(this);
            items.push({
                item_id: $row.data('item-id'),
                ean: $row.data('ean'),
                subcategory_id: $row.data('subcategory-id'),
                brand_id: $row.data('brand-id'),
                model_id: $row.data('model-id'),
                variant_id: $row.data('variant-id'),
                color_id: $row.data('color-id'),
                imei: $row.find('.imei').text().trim(),
                rate: parseFloat($row.find('.rate').text()) || 0,
                tax_percent: $row.data('tax-percent') || 0,
                tax_amount: $row.data('tax-amount'),
                tax_cgst: $row.find('.tax_cgst').text() || 0,
                tax_sgst: $row.find('.tax_sgst').text() || 0,
                discount_percent: $row.data('discount-percent'),
                discount_amount: parseFloat($row.find('.discount').text().trim()) || 0,
                net_rate: parseFloat($row.find('.net_rate').text()) || 0,
                upgrade_id: $row.data('upgrade-id'),
                upgrade_amount: $row.data('upgrade-amount'),
                special_id: $row.data('special-id'),
                special_amount: $row.data('special-amount'),
                price_id: $row.data('price-id'),
                mop_price: $row.data('mop-price'),
                bop_price: $row.data('bop-price'),
                fsp_price: $row.data('fsp-price'),
                wsp_price: $row.data('wsp-price'),
                db_price: $row.data('db-price'),
                source: $row.data('source'),
                purchase_price: $row.data('purchase-price'),
                sales_id: $row.data('sales_id'),
            });
        });

        let payments = [];
        let cashVal = parseFloat($('#cash_amount').val()) || 0;
        if (cashVal > 0) payments.push({ type: 'cash', details: '', amount: cashVal, charges: 0 });

        let bankVal = parseFloat($('#bank_amount').val()) || 0;
        if (bankVal > 0) payments.push({ type: 'bank', details: 'Bank', id: 0, amount: bankVal, charges: 0 });

        let financeAmt = parseFloat($('#finance_amount').val()) || 0;
        if (financeAmt > 0) {
            payments.push({
                type: 'finance',
                customer: $('#finance_customer').val() || '',
                details: $('#finance_id option:selected').text() || '',
                id: $('#finance_id').val() || 0,
                amount: financeAmt,
                charges: parseFloat($('#finance_charges').val()) || 0,
                mode: $('input[name="finance_mode"]:checked').val() || '',
                bank_id: 0
            });
        }

        let totalAmount = parseFloat($('#total_payable').text()) || 0;
        let totalPaid = cashVal + bankVal + financeAmt;

        if (totalPaid > totalAmount) {
            showSweetAlert('warning', 'Over-payment detected. Adjust the amounts before submitting.');
            return;
        }

        let formData = new FormData(this);
        formData.append('items', JSON.stringify(items));
        formData.append('payments', JSON.stringify(payments));
        formData.append('total_quantity', $('#total_quantity').text());
        formData.append('sub_total', parseFloat($('#sub_total').text()) || 0);
        formData.append('total_paid', totalPaid);
        formData.append('balance', parseFloat($('#balance_amount').text()) || 0);
        formData.append('total_discount', parseFloat($('#total_discount').text()) || 0);
        formData.append('total_tax_cgst', parseFloat($('#total_tax_cgst').text()) || 0);
        formData.append('total_tax_sgst', parseFloat($('#total_tax_sgst').text()) || 0);
        formData.append('total_payable', totalAmount);

        handleFormSubmit(
            this,
            '/wholesale/sales/create/',
            null,
            'sales_form',
            true,
            'Wholesale Sales Order',
            [function () { window.location.href = '/wholesale/sales/'; }],
            formData,
            false
        );
    });
</script>