@extends('Layout.app')

@section('content')
<div class="container">
    <div class="page-inner">
        <div class="page-header">
            <h3 class="fw-bold mb-3">Forms</h3>
            <ul class="breadcrumbs mb-3">
                <li class="nav-home">
                    <a href="../index.php"><i class="icon-home"></i></a>
                </li>
                <li class="separator"><i class="icon-arrow-right"></i></li>
                <li class="nav-item">
                    <a href="../tables/datatables.php">Datatables</a>
                </li>
                <li class="separator"><i class="icon-arrow-right"></i></li>
                <li class="nav-item">
                    <a href="../tables/tables.php">Tables</a>
                </li>
            </ul>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">Form</div>
                    </div>

                    <form action="{{ url('/Sale/Add') }}" method="POST">
                        @csrf
                        <div class="card-body">
                            <div class="row">
                                <!-- Left Side -->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label><strong>Customer No <span class="text-danger">*</span></strong></label>
                                        <input type="text" class="form-control" name="Customer_No" value="{{ $newNumber }}" readonly>
                                    </div>

                                 <div class="form-group">
    <label class="font-weight-bold text-primary">Serial Number <span class="text-danger">*</span></label>
    <select name="stock_id" class="form-control selectpicker border-primary" required>
        <option value="{{ $stocks->id }}" selected>{{ $stocks->product_code }}</option>
    </select>
</div>


                                    <!-- Customer Info Toggle Card -->
                                    <div class="card mb-4">
                                        <div class="card-header">
                                            <h5 class="mb-0">
                                                <a href="javascript:void(0);" class="text-decoration-none" id="toggleCustomerInfo">
                                                    Customer Information
                                                </a>
                                            </h5>
                                        </div>

                                        <div class="card-body" id="customerInfoSection" style="display: none;">
                                            <div class="form-group mb-3">
                                                <label><strong>Customer Name <span class="text-danger">*</span></strong></label>
                                                <input type="text" class="form-control" name="Customer_name" required>
                                            </div>

                                            <div class="form-group mb-3">
                                                <label><strong>Customer Phone <span class="text-danger">*</span></strong></label>
                                                <input type="text" class="form-control" name="Customer_phone" required>
                                            </div>

                                            <div class="form-group mb-3">
                                                <label><strong>Customer Email <span class="text-danger">*</span></strong></label>
                                                <input type="email" class="form-control" name="Customer_email" required>
                                            </div>

                                            <div class="form-group mb-0">
                                                <label><strong>Customer Address <span class="text-danger">*</span></strong></label>
                                                <input type="text" class="form-control" name="Customer_address" required>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- JS for Toggle -->
                                    <script>
                                        const toggleBtn = document.getElementById('toggleCustomerInfo');
                                        const customerSection = document.getElementById('customerInfoSection');

                                        toggleBtn.addEventListener('click', function() {
                                            if (customerSection.style.display === 'none') {
                                                customerSection.style.display = 'block';
                                            } else {
                                                customerSection.style.display = 'none';
                                            }
                                        });
                                    </script>


                                    <div class="form-group">
                                        <label><strong>Payment Status <span class="text-danger">*</span></strong></label>
                                        <select name="payment_status" class="form-control" required>
                                            <option value="paid">Paid</option>
                                            <option value="unpaid">Unpaid</option>
                                            <option value="pending">Pending</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label><strong>Note <span class="text-danger">*</span></strong></label>
                                        <textarea class="form-control" name="note" rows="4" required></textarea>
                                    </div>
                                  

                                </div>

                                <!-- Right Side -->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label><strong>Warranty <span class="text-danger">*</span></strong></label>
                                        <input type="number" class="form-control" name="warranty" id="warranty" required>
                                    </div>
                                    <div class="form-group">
                                        <label><strong>Price <span class="text-danger">*</span></strong></label>
                                        <input type="number" value="{{ $stocks->unit_price }}" class="form-control" name="price" id="price" required>
                                    </div>

                                    <div class="form-group">
                                        <label><strong>Quantity <span class="text-danger">*</span></strong></label>
                                        <input type="number" class="form-control" name="quantity" id="quantity" required>
                                    </div>

                                    <div class="form-group">
                                        <label><strong>Sub Total <span class="text-danger">*</span></strong></label>
                                        <input type="number" class="form-control" name="sub_total" id="sub_total" readonly required>
                                    </div>


                                    <div class="card mb-4">



                                        {{-- <div class="form-group mb-3">
                                                <label><strong>Discount <span class="text-danger">*</span></strong></label>
                                                <input type="number" class="form-control" name="discount">
                                            </div> --}}

                                        <div class="form-group mb-3">
                                            <label><strong>Tax <span class="text-danger">*</span></strong></label>
                                            <input type="number" class="form-control" name="tax" id="tax" readonly required>
                                        </div>

                                        <div class="form-group mb-0">
                                            <label><strong>Grant Total <span class="text-danger">*</span></strong></label>
                                            <input type="number" class="form-control" name="grant_total" id="grant_total" readonly required>
                                        </div>
                                    </div>
                                    <script>
                                        const price = document.getElementById("price");
                                        const quantity = document.getElementById("quantity");
                                        const subTotal = document.getElementById("sub_total");
                                        const discountSection = document.getElementById("discountSection");
                                        const taxInput = document.getElementById("tax");
                                        const grantTotal = document.getElementById("grant_total");

                                        function updateTotals() {
                                            const p = parseFloat(price.value) || 0;
                                            const q = parseFloat(quantity.value) || 0;
                                            const subtotalValue = p * q;
                                            const taxValue = (subtotalValue * 10) / 100;
                                            const grantTotalValue = subtotalValue + taxValue;

                                            subTotal.value = subtotalValue.toFixed(2);
                                            taxInput.value = taxValue.toFixed(2);
                                            grantTotal.value = grantTotalValue.toFixed(2);

                                            if (p > 0 && q > 0) {
                                                discountSection.style.display = "block";
                                            } else {
                                                discountSection.style.display = "none";
                                            }
                                        }

                                        price.addEventListener("input", updateTotals);
                                        quantity.addEventListener("input", updateTotals);
                                    </script>




                                    <div class="card-action mt-3">
                                        <button type="submit" class="btn btn-success">Save</button>
                                        <a href="{{ route('sale.list') }}" class="btn btn-secondary">Back</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>
@endsection