@include('backend.header')

<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 class="needs-validation" novalidate>

            <!-- 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">
                    <div class="col-md-4 mb-3">
                        <label>Store:</label>
                        <select class="default-select wide form-control" required>
                            <option>Store 1</option>
                            <option>Store 2</option>
                        </select>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label>Gst Type:</label>
                        <select class="default-select wide form-control" required>
                            <option>Gst</option>
                            <option>Non-Gst</option>
                        </select>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label>GST No:</label>
                        <input type="text" class="form-control">
                    </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 class="default-select wide form-control" required>
                            <option value="">Select MRD</option>
                            <option value="1">John Doe</option>
                            <option value="2">Jane Smith</option>
                        </select>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label>Name:</label>
                        <input type="text" class="form-control" readonly>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label>Ref:</label>
                        <input type="text" class="form-control" readonly>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label>Mobile No:</label>
                        <input type="text" class="form-control" readonly>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label>Email:</label>
                        <input type="email" class="form-control" readonly>
                    </div>
                </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" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label>Specs Type:</label>
                            <select class="default-select wide form-control" id="specsType">
                                <option value="">Select</option>
                                <option value="Coolers">Coolers</option>
                                <option value="Specs">Specs</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label>Brand:</label>
                            <input type="text" class="form-control">
                        </div>
                        <div class="mb-3">
                            <label>Frame Type:</label>
                            <select class="default-select wide form-control">
                                <option>Half Frame</option>
                                <option>Full Frame</option>
                                <option>Frameless</option>
                                <option>Round</option>
                                <option>Oval</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label>Frame Cost:</label>
                            <input type="number" class="form-control">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="mb-3" id="lensSection">
                            <label>Lens Type:</label>
                            <select class="default-select wide form-control">
                                <option>Blue cut</option>
                                <option>Transparent</option>
                                <option>Sunlight</option>
                                <option>SVA</option>
                            </select>
                        </div>
                        <div class="mb-3" id="lensCostSection">
                            <label>Lens Cost:</label>
                            <input type="number" class="form-control">
                        </div>
                        <div class="mb-3" id="lensValuesSection">
                            <label>DV / NV Values:</label>
                            <div class="row">
                                <div class="col-md-6">
                                    <strong>RE (Right Eye)</strong>
                                    <select class=" mb-2 default-select wide form-control" name="re_sphere">
                                        <option value="">Select 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=" mb-2 default-select wide form-control" name="re_cylinder">
                                        <option value="">Select Cylinder</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=" mb-3 default-select wide form-control" name="re_axis">
                                        <option value="">Select 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="col-md-6">
                                    <strong>LE (Left Eye)</strong>
                                    <select class=" mb-2 default-select wide form-control" name="le_sphere">
                                        <option value="">Select 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=" mb-2 default-select wide form-control" name="le_cylinder">
                                        <option value="">Select Cylinder</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=" mb-3 default-select wide form-control" name="le_axis">
                                        <option value="">Select 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>
                        </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" placeholder="Enter sub total">
                        </div>
                         <div class="mb-3">
                            <label>Discount (flat/percentage):</label>
                            <input type="text" class="form-control" placeholder="e.g. 100 or 10%">
                        </div>
                       
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label>CGST (%)</label>
                                <input type="number" class="form-control" placeholder="e.g. 9">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label>SGST (%)</label>
                                <input type="number" class="form-control" placeholder="e.g. 9">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label>IGST (%)</label>
                                <input type="number" class="form-control" placeholder="e.g. 18">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label>Total Amount:</label>
                            <input type="number" class="form-control" placeholder="Auto-calculated">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label>Advance Paid:</label>
                            <input type="number" class="form-control" placeholder="e.g. 1000">
                        </div>
                        <div class="mb-3">
                            <label>Balance:</label>
                            <input type="number" class="form-control" placeholder="Auto-calculated">
                        </div>
                        <div class="mb-3">
                            <label>Orders Taken By:</label>
                            <input type="text" class="form-control" readonly value="Admin">
                        </div>
                    </div>
                    <div class="text-end mt-3">
                        <button type="submit" class="btn btn-primary">Submit Invoice</button>
                    </div>
                </div>
            </div>


        </form>
    </div>

</div>

@include('backend.footer')

<script>
$('#specsType').on('change', function() {
    var value = $(this).val()
    //alert('sdfs');
    const lensSection = document.getElementById('lensSection');
    const lensCost = document.getElementById('lensCostSection');
    const lensValues = document.getElementById('lensValuesSection');

    if (value === 'Coolers') {
        lensSection.style.display = 'none';
        lensCost.style.display = 'none';
        lensValues.style.display = 'none';
    } else {
        lensSection.style.display = 'block';
        lensCost.style.display = 'block';
        lensValues.style.display = 'block';
    }
});
</script>
<style>
.select2-container--open {
    z-index: 999999 !important;
}

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