@include('header')
<meta name="csrf-token" content="{{ csrf_token() }}">

<div class="content-body">
    <div class="page-titles">
        <h5 class="dashboard_bar">Create Invoice</h5>
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
            <li class="breadcrumb-item active">Create Invoice</li>
        </ul>
    </div>

    <div class="container-fluid">
        <form id="invoiceForm" method="POST" action="{{ route('invoice.store') }}">
            @csrf
            <!-- USER DETAILS CARD -->
            <div class="card mb-4">
                <div class="card-header">
                    <h4 class="card-title">Store & GST Details</h4>
                </div>
                <div class="card-body row">
                  @if(session('user_type') === 'Superadmin')
    {{-- Superadmin: Can choose any store --}}
    <div class="col-md-4 mb-3">
        <label>Store:</label>
        <select name="store_id" class="default-placeholder" id="storeSelect" onchange="storeChanged(this)">
            <option value="">Select Store</option>
            @foreach($store as $ref)
                <option value="{{ $ref->id }}" {{ request('store_id') == $ref->id ? 'selected' : '' }}>
                    {{ $ref->store }}
                </option>
            @endforeach
        </select>
    </div>
@else
    {{-- Other users: Read-only dropdown (one option only) --}}
    <div class="col-md-4 mb-3">
        <label>Store:</label>
        <select name="store_id" id="storeSelect" class="default-placeholder" disabled>
            <option value="{{ session('store_id') }}">
                {{ \App\Models\Store::find(session('store_id'))->store ?? 'Your Store' }}
            </option>
        </select>
        <input type="hidden" name="store_id" value="{{ session('store_id') }}">
    </div>
@endif


                    <div class="col-md-4 mb-3">
                        <label>Gst Type:</label>
                        <select class="default-select wide form-control" id="gst_type" name="gst_type">
                            <option value="Non-Gst">Non-Gst</option>
                            <option value="Gst">Gst</option>

                        </select>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label>GST No:</label>
                        <input type="text" id="gstno" class="form-control" name="gst_no" value="{{$profile->gst_no}}"
                            readonly>
                    </div>

                </div>
            </div>
            <div class="card mb-4">
                <div class="card-header">
                    <h4 class="card-title">Customer Details</h4>
                </div>
                <div class="card-body row">
                    <div class="col-md-4 mb-3">
                        <label>MRD No:</label>
                        <select name="mrd_no" id="mrd_no" class="default-placeholder" onchange="mrdChanged(this)">
                            <option value="">Select </option>
                            @foreach($customer as $mr)
                            <option value="{{ $mr->id }}">{{ $mr->mrd_no }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label>Name:</label>
                        <input type="text" id="cust_name" class="form-control" readonly>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label>Ref:</label>
                        <input type="text" id="cust_ref" class="form-control" readonly>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label>Mobile No:</label>
                        <input type="text" id="cust_mobile" class="form-control" readonly>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label>Email:</label>
                        <input type="email" id="cust_email" class="form-control" readonly>
                    </div>
                    <input type="hidden" id="cust_state" class="form-control" readonly>
                    <input type="hidden" id="state" class="form-control" readonly>
                </div>
            </div>

            <!-- INVOICE DETAILS CARD -->
            <div class="card mb-4">
                <div class="card-header">
                    <h4 class="card-title">Invoice & Lens Details</h4>
                </div>
                <div class="card-body row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label>Bill No:</label>
                            <input type="text" name="bill_no" class="form-control" value="{{ $billNo }}" readonly>
                        </div>
                        <div class="mb-3">
                            <label>Specs Type:</label>
                            <select class="default-placeholder" id="category" name="category_id"
                                onchange="categoryChanged(this)">
                                <option value="" selected disabled>Select Category</option>
                                @foreach($category as $item)
                                <option value="{{ $item->id }}">{{ $item->category }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label>Brand:</label>
                            <select class="default-placeholder" id="brand" name="brand_id">
                                <option value="" selected disabled>Select Brand</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label>Frame Type:</label>
                            <select id="frame_type" class="default-placeholder" name="frame_type">
                                <option value="" selected disabled>Select Frame Type</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label>Frame Cost:</label>
                            <input type="number" id="frameCost" name="frame_cost" class="form-control">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="mb-3" id="lensBrand">
                            <label>Brand:</label>
                            <select class="default-placeholder" id="lensbrand1" name="lensbrand_id">
                                <option value="" selected disabled>Select Brand</option>
                            </select>
                        </div>
                        <div class="mb-3" id="lensSection">
                            <label>Lens Type:</label>
                            <select class="default-placeholder" id="lenstype" name="lenstype">
                                <option value="" selected disabled>Select Lens</option>

                            </select>
                        </div>
                        <div class="mb-3" id="lensCostSection">
                            <label>Lens Cost:</label>
                            <input type="number" id="lensCost" name="lens_cost" class="form-control">
                        </div>
                        <div class="mb-3" id="lensValuesSection">
                            <label>DV / NV Values:</label>
                            <div class="row">
                                <!-- Right Eye -->
                                <div class="col-md-6">
                                    <strong>RE (Right Eye)</strong>
                                    <div class="d-flex gap-2">
                                        <select class="form-select form-select-sm w-auto" name="re_sphere">
                                            <option value="">Sphere</option>
                                            <option>-3.00</option>
                                            <option>-2.50</option>
                                            <option>-2.00</option>
                                            <option>-1.50</option>
                                            <option>-1.00</option>
                                            <option>-0.50</option>
                                            <option>0.00</option>
                                            <option>+0.50</option>
                                            <option>+1.00</option>
                                            <option>+1.50</option>
                                            <option>+2.00</option>
                                        </select>
                                        <select class="form-select form-select-sm w-auto" name="re_cylinder">
                                            <option value="">Cyl</option>
                                            <option>-2.00</option>
                                            <option>-1.50</option>
                                            <option>-1.00</option>
                                            <option>-0.50</option>
                                            <option>0.00</option>
                                            <option>+0.50</option>
                                            <option>+1.00</option>
                                        </select>
                                        <select class="form-select form-select-sm w-auto" name="re_axis">
                                            <option value="">Axis</option>
                                                                                        <option>0</option>
                                                                                        <option>10</option>
                                                                                        <option>20</option>
                                                                                        <option>30</option>
                                                                                        <option>40</option>
                                                                                        <option>50</option>
                                                                                        <option>60</option>
                                                                                        <option>70</option>
                                                                                        <option>80</option>
                                                                                        <option>90</option>
                                                                                        <option>100</option>
                                                                                        <option>110</option>
                                                                                        <option>120</option>
                                                                                        <option>130</option>
                                                                                        <option>140</option>
                                                                                        <option>150</option>
                                                                                        <option>160</option>
                                                                                        <option>170</option>
                                                                                        <option>180</option>
                                                                                    </select>
                                    </div>
                                    <div class="row mt-2">
                                        <div class="col-auto">
                                            <label class="col-form-label">Add:</label>
                                        </div>
                                        <div class="col">
                                            <input type="number" name="re_add" class="form-control">
                                        </div>
                                    </div>

                                </div>

                                <!-- Left Eye -->
                                <div class="col-md-6">
                                    <strong>LE (Left Eye)</strong>
                                    <div class="d-flex gap-2">
                                        <select class="form-select form-select-sm w-auto" name="le_sphere">
                                            <option value="">Sphere</option>
                                            <option>-3.00</option>
                                            <option>-2.50</option>
                                            <option>-2.00</option>
                                            <option>-1.50</option>
                                            <option>-1.00</option>
                                            <option>-0.50</option>
                                            <option>0.00</option>
                                            <option>+0.50</option>
                                            <option>+1.00</option>
                                            <option>+1.50</option>
                                            <option>+2.00</option>
                                        </select>
                                        <select class="form-select form-select-sm w-auto" name="le_cylinder">
                                            <option value="">Cyl</option>
                                            <option>-2.00</option>
                                            <option>-1.50</option>
                                            <option>-1.00</option>
                                            <option>-0.50</option>
                                            <option>0.00</option>
                                            <option>+0.50</option>
                                            <option>+1.00</option>
                                        </select>
                                        <select class="form-select form-select-sm w-auto" name="le_axis">
                                            <option value="">Axis</option>
                                                                                        <option>0</option>
                                                                                        <option>10</option>
                                                                                        <option>20</option>
                                                                                        <option>30</option>
                                                                                        <option>40</option>
                                                                                        <option>50</option>
                                                                                        <option>60</option>
                                                                                        <option>70</option>
                                                                                        <option>80</option>
                                                                                        <option>90</option>
                                                                                        <option>100</option>
                                                                                        <option>110</option>
                                                                                        <option>120</option>
                                                                                        <option>130</option>
                                                                                        <option>140</option>
                                                                                        <option>150</option>
                                                                                        <option>160</option>
                                                                                        <option>170</option>
                                                                                        <option>180</option>
                                                                                    </select>
                                    </div>
                                    <div class="row mt-2">
                                        <div class="col-auto">
                                            <label class="col-form-label">Add:</label>
                                        </div>
                                        <div class="col">
                                            <input type="number" name="le_add" class="form-control">
                                        </div>
                                    </div>

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

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

            <!-- PAYMENT CARD -->
            <div class="card mb-4">
                <div class="card-header">
                    <h4 class="card-title">Payment Details</h4>
                </div>
                <div class="card-body row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label>Sub Total:</label>
                            <input type="number" class="form-control" id="subTotal" name="sub_total"
                                placeholder="Enter sub total" readonly>
                        </div>
                        <div class="mb-3">
                            <label>Discount (flat/percentage):</label>
                            <input type="text" class="form-control" id="discount" name="discount"
                                placeholder="e.g. 100 or 10%">
                        </div>


                        <div class="mb-3">
                            <label>Grand Total:</label>
                            <input type="number" class="form-control" id="totalAmount" placeholder="Auto-calculated"
                                readonly>
                        </div>
                        <div class="row" id="gst_section" style="display:none;">
                            <div class="col-md-4 mb-3">
                                <label>CGST (6%)</label>
                                <input type="number" id="cgst" name="cgst" class="form-control" readonly>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label>SGST (6%)</label>
                                <input type="number" id="sgst" name="sgst" class="form-control" readonly>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label>IGST (12%)</label>
                                <input type="number" id="igst" name="igst" class="form-control" readonly>
                            </div>

                        </div>
                        <div class="mb-3">
                            <label>NET Amount:</label>
                            <input type="number" class="form-control" id="neftamount" name="total_amount"
                                placeholder="Auto-calculated" readonly>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label>Advance Paid:</label>
                            <input type="number" class="form-control" id="advancePaid" name="advance_paid"
                                placeholder="e.g. 1000">
                        </div>
                        <div class="mb-3">
                            <label>Balance:</label>
                            <input type="number" class="form-control" id="balance" name="balance" readonly
                                placeholder="Auto-calculated">
                        </div>
                        <div class="mb-3" id="lensSection">
                            <label>Complimentary:</label>
                            <select class="default-placeholder" id="complimentary" name="complimentary">
                                <option value="" selected disabled>Select Product</option>

                            </select>
                        </div>
                        <div class="mb-3">
                            <label>Orders Taken By:</label>
                            <input type="text" class="form-control" name="orders_taken_by" readonly
                                value="{{ Auth::user()->type ?? session('type') }}">
                        </div>
                    </div>
                    <div class="text-end mt-3">
                        <button type="submit" class="btn btn-primary" id="submitInvoiceBtn">Submit Invoice</button>
                    </div>
                </div>
            </div>


        </form>
    </div>

</div>

@include('footer')

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function() {

    // Set CSRF token for all AJAX requests
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    // === FORM SUBMISSION VIA AJAX ===
    $('#invoiceForm').on('submit', function(e) {
        e.preventDefault();

        const form = $(this);
        const formData = new FormData(this);

        $.ajax({
            url: form.attr('action'),
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Invoice Saved',
                        text: response.message
                    }).then(() => {
                        if (response.redirect_url) {
                            window.location.href = response.redirect_url;
                        }
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: response.message || 'Something went wrong!'
                    });
                }
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors;
                    const errorList = Object.values(errors).map(error =>
                        `<div>${error[0]}</div>`).join('');

                    window.scrollTo({
                        top: 0,
                        behavior: 'smooth'
                    });

                    Swal.fire({
                        icon: 'error',
                        title: 'Validation Error',
                        html: errorList
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Server Error',
                        text: 'Please try again later.'
                    });
                }
            }
        });
    });
});
</script>
<script>
function storeChanged(select) {
    @if(session('user_type') !== 'Superadmin')
        return; // Prevent store change for non-superadmin
    @endif

    const storeId = select.value;
    if (storeId) {
        fetchStoreProducts(storeId);
    } else {
        resetComplimentaryDropdown();
    }
}
function fetchStoreProducts(storeId) {
    $.post("{{ route('get.store.gst') }}", {
        store_id: storeId,
        _token: '{{ csrf_token() }}'
    }, function(response) {
        if (response.success) {
            $('#state').val(response.state);

            const complimentarySelect = $('#complimentary');
            complimentarySelect.empty().append('<option value="" selected disabled>Select Product</option>');

            response.products.forEach(function(product) {
                complimentarySelect.append('<option value="' + product.id + '">' + product.product + '</option>');
            });
        } else {
            resetComplimentaryDropdown();
        }
    }).fail(function() {
        resetComplimentaryDropdown();
    });
}


// === GST SECTION TOGGLE ===
$('#gst_type').on('change', function() {
    const gstSection = $('#gst_section');
    if ($(this).val() === 'Gst') {
        gstSection.css('display', 'flex');
    } else {
        gstSection.hide();
    }
});

// === CATEGORY CHANGE EVENTS ===
function categoryChanged(select) {
    const categoryId = select.value;
    const lensSection = $('#lensSection');
    const lensCost = $('#lensCostSection');
    const lensValues = $('#lensValuesSection');
    const lensBrand = $('#lensBrand');

    if (categoryId === '2') {
        lensSection.hide();
        lensCost.hide();
        lensValues.hide();
        lensBrand.hide();
    } else {
        lensSection.show();
        lensCost.show();
        lensValues.show();
        lensBrand.show();
    }

    if (categoryId) {
        // Load frame brands
        $.get("{{ route('get.brandname') }}", {
            category_id: categoryId
        }, function(data) {
            const brandDropdown = $('#brand');
            brandDropdown.empty().append('<option value="" disabled selected>Select Brand</option>');
            data.forEach(function(brand) {
                brandDropdown.append('<option value="' + brand.id + '">' + brand.brand + '</option>');
            });
        });

        // Load lens brands
        $.get("{{ route('get.lensbrand') }}", {
            category_id: categoryId
        }, function(data) {
            const lensDropdown = $('#lensbrand1');
            lensDropdown.empty().append('<option value="" disabled selected>Select Brand</option>');
            data.forEach(function(brand) {
                lensDropdown.append('<option value="' + brand.id + '">' + brand.brand + '</option>');
            });
        });
    }
};

// === FRAME TYPE BASED ON BRAND ===
$('#brand').on('change', function() {
    const brandId = $(this).val();
    if (brandId) {
        $.get("{{ route('get.frames') }}", {
            brand_id: brandId
        }, function(data) {
            const frameDropdown = $('#frame_type');
            frameDropdown.empty().append(
                '<option value="" disabled selected>Select Frame Type</option>');
            data.forEach(function(frame) {
                frameDropdown.append('<option value="' + frame.id + '">' + frame.frame +
                    '</option>');
            });
        });
    }
});

// === LENS TYPE BASED ON BRAND ===
$('#lensbrand1').on('change', function() {
    const brandId = $(this).val();
    if (brandId) {
        $.get("{{ route('get.lensbrandname') }}", {
            brand_id: brandId
        }, function(data) {
            const lenstype = $('#lenstype');
            lenstype.empty().append('<option value="" disabled selected>Select Lens Type</option>');
            data.forEach(function(lens) {
                lenstype.append('<option value="' + lens.id + '">' + lens.lens + '</option>');
            });
        });
    }
});

// === CUSTOMER DATA FROM MRD_NO ===
function mrdChanged(select) {
    const customerId = select.value;

    if (customerId) {
        $.get("{{ url('/customer-details') }}/" + customerId, function(data) {
            if (data) {
                $('#cust_name').val(data.name || '');
                $('#cust_ref').val(data.ref || '');
                $('#cust_mobile').val(data.mobile || '');
                $('#cust_email').val(data.email || '');
                $('#cust_state').val(data.state || '');
            } else {
                clearCustomerFields();
            }
        }).fail(function() {
            Swal.fire({
                icon: 'error',
                title: 'Error!',
                text: 'Could not fetch customer details.'
            });
            clearCustomerFields();
        });
    } else {
        clearCustomerFields();
    }
};
</script>
<script>
function clearCustomerFields() {
    $('#cust_name, #cust_ref, #cust_mobile, #cust_email').val('');
}

// === TOTAL CALCULATION ===
function calculateTotals() {
    let frame = parseFloat($('#frameCost').val()) || 0;
    let lens = parseFloat($('#lensCost').val()) || 0;
    let discountInput = $('#discount').val().trim();
    let advance = parseFloat($('#advancePaid').val()) || 0;

    let subTotal = frame + lens;
    $('#subTotal').val(subTotal.toFixed(2));

    let total = subTotal;
    if (discountInput.endsWith("%")) {
        let percent = parseFloat(discountInput.replace("%", "")) || 0;
        total = subTotal - (subTotal * percent / 100);
    } else if (discountInput !== "") {
        let flat = parseFloat(discountInput) || 0;
        total = subTotal - flat;
    }

    total = total < 0 ? 0 : total;
    $('#totalAmount').val(total.toFixed(2));

    let gstSection = $('#gst_section');
    let finalAmount = total;

    if (gstSection.is(':visible')) {
        let businessState = $('#state').val().trim();
        let customerState = $('#cust_state').val().trim();

        let cgst = 0,
            sgst = 0,
            igst = 0;
        if (businessState && customerState) {
            if (businessState === customerState) {
                cgst = total * 0.06;
                sgst = total * 0.06;
            } else {
                igst = total * 0.12;
            }
        }

        $('#cgst').val(cgst.toFixed(2));
        $('#sgst').val(sgst.toFixed(2));
        $('#igst').val(igst.toFixed(2));

        finalAmount = total + cgst + sgst + igst;
    }

    $('#neftamount').val(finalAmount.toFixed(2));

    let balance = finalAmount - advance;
    $('#balance').val(balance < 0 ? '0.00' : balance.toFixed(2));
}

// Attach input change events
['#frameCost', '#lensCost', '#discount', '#advancePaid', '#state', '#cust_state'].forEach(id => {
    $(id).on('input', calculateTotals);
});

$('#gst_section input').on('input', calculateTotals);

$(document).ready(function () {
    const userType = '{{ session('user_type') }}';
    const storeId = '{{ session('store_id') }}';

    if (userType !== 'Superadmin' && storeId) {
        // Auto-fetch products for non-superadmin
        fetchStoreProducts(storeId);
    }
});

</script>

<style>
.select2-container--open {
    z-index: 999999 !important;
}

.select2-dropdown {
    z-index: 999999 !important;
}
</style>