@extends('Layout.app')

@section('content')
<div class="container">
    <div class="page-inner">
        <div class="page-header">
            <h3 class="fw-bold mb-3">Edit Sale</h3>
            <ul class="breadcrumbs mb-3">
                <li class="nav-home">
                    <a href="{{ url('/') }}"><i class="icon-home"></i></a>
                </li>
                <li class="separator"><i class="icon-arrow-right"></i></li>
                <li class="nav-item">
                    <a href="{{ route('sale.list') }}">Sales</a>
                </li>
            </ul>
        </div>

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

                    <form action="{{ url('SaleUpdate', $sale->id) }}" 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="{{ $sale->Customer_No }}" readonly>
                                    </div>

                                    {{-- <div class="form-group">
                                        <label><strong>Serial Number <span class="text-danger">*</span></strong></label>
                                        <select name="stock_id" class="form-control" required>
                                            <option value="">Select number</option>
                                            @foreach($stocks as $s)
                                            <option value="{{ $s->id }}" {{ $sale->stock_id == $s->id ? 'selected' : '' }}>
                                                {{ $s->serial_number }}
                                            </option>
                                            @endforeach
                                        </select>
                                    </div> --}}

                                    <!-- Customer Info Toggle -->
                                    <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" value="{{ $sale->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" value="{{ $sale->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" value="{{ $sale->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" value="{{ $sale->Customer_address }}" required>
                                            </div>
                                        </div>
                                    </div>

                                    <script>
                                        const toggleBtn = document.getElementById('toggleCustomerInfo');
                                        const customerSection = document.getElementById('customerInfoSection');

                                        toggleBtn.addEventListener('click', function () {
                                            customerSection.style.display = (customerSection.style.display === 'none') ? 'block' : '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" {{ $sale->payment_status == 'paid' ? 'selected' : '' }}>Paid</option>
                                            <option value="unpaid" {{ $sale->payment_status == 'unpaid' ? 'selected' : '' }}>Unpaid</option>
                                            <option value="pending" {{ $sale->payment_status == 'pending' ? 'selected' : '' }}>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>{{ $sale->note }}</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" value="{{ $sale->warranty }}" required>
                                    </div>

                                    <div class="form-group">
                                        <label><strong>Price <span class="text-danger">*</span></strong></label>
                                        <input type="number" class="form-control" name="price" id="price" value="{{ $sale->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" value="{{ $sale->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" value="{{ $sale->sub_total }}" readonly required>
                                    </div>

                                    <div class="card mb-4">
                                        <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" value="{{ $sale->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" value="{{ $sale->grant_total }}" readonly required>
                                        </div>
                                    </div>

                                    <script>
                                        const price = document.getElementById("price");
                                        const quantity = document.getElementById("quantity");
                                        const subTotal = document.getElementById("sub_total");
                                        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);
                                        }

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

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

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