@extends('layouts.app')

@section('content')
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18"> Sales</h4>

                <div class="page-title-right">
                    <a href="{{ route('sales.index') }}" class="btn btn-success">Sales List</a>
                </div>

            </div>
        </div>
    </div>
    <!-- end page title -->
    @include('validate')
    <div class="row">

        <div class="col-md-12">

            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-4">Sales @lang('general.details')</h4>


                    <form method="POST" action="{{ route('sales.update', [$sales->id]) }}">
                        <div class="row mb-4">

                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="invoice_nos" class="form-label req">Invoice No.</label>
                                    <div class="input-group">
                                        <div class="input-group-text">{{ $sales->invoice_prefix }}</div>
                                        <input type="text" required name="invoice_nos" id="invoice_nos"
                                            value="{{ $sales->invoice_nos }}" class="form-control" required>
                                    </div>
                                </div>
                            </div>



                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="customer_mobile" class="form-label req">Mobile No.</label>
                                    <input type="text" required name="customer_mobile" id="customer_mobile"
                                        value="{{ $sales->customer_mobile }}" class="form-control">
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="customer_name" class="form-label req">Customer Name</label>
                                    <input type="text" required name="customer_name" id="customer_name"
                                        value="{{ $sales->customer_name }}" class="form-control">
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="invoice_date" class="form-label req">Invoice Date</label>
                                    <div class="input-group" id="invoice_date">
                                        <input type="text" id="inv_date" name="invoice_date" class="form-control"
                                            data-date-format="{{ js_app_date_format() }}"
                                            data-date-container='#invoice_date' data-provide="datepicker"
                                            value="{{ date(app_date_format()) }}" required>
                                        <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
                                    </div><!-- input-group -->
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="sales_person_id" class="form-label req">Sales Person</label>
                                    <select required name="sales_person_id" id="sales_person_id" class="form-control"
                                        required>
                                        <option value="">Select Sales Person</option>
                                        @foreach ($salesPersons as $salesPerson)
                                            <option value="{{ $salesPerson->id }}"
                                                @if ($salesPerson->id == $sales->sales_person_id) selected @endif>{{ $salesPerson->name }}
                                            </option>
                                        @endforeach
                                    </select>

                                </div>
                            </div>

                        </div>




                        <div class="row mt-5">

                            <div class="col-md-12">

                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>Product</th>
                                            <th>Qty</th>
                                            <th>Unit</th>
                                            <th>Price</th>
                                            <th>Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <select name="product_id" id="product_id" class="form-control select2"
                                                    data-width="100%">
                                                    <option value="">Scanned or searched Barcode/HSN/Product Name
                                                    </option>
                                                    @foreach ($productList as $product)
                                                        <option value="{{ $product->id }}">
                                                            {{ $product->barcode . ' | ' . $product->hsn_code . ' | ' . $product->product_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td width="20%"><input type="number" name="qty" id="qty"
                                                    class="form-control" style="max-width: 120px;" step="any">
                                            </td>
                                            <td width="10%">
                                                <span id="unit_name"></span>
                                                <input type="hidden" name="unit_id" id="unit_id" class="form-control"
                                                    style="max-width: 120px;" readonly>
                                            </td>
                                            <td width="20%"><input type="text" name="price" id="price"
                                                    class="form-control" style="max-width: 120px;">
                                            </td>
                                            <td width="10%"><span id="totalrowAmount"></span>
                                            </td>

                                        </tr>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td colspan="5" align="right">
                                                @csrf
                                                @method('PUT')
                                                <button type="submit" class="btn btn-primary float-right">SAVE</button>
                                            </td>
                                        </tr>

                                    </tfoot>
                                </table>

                            </div>



                        </div>

                    </form>



                    <form method="POST" action="{{ route('sales.updatestatus', [$sales->id]) }}">

                        <div class="row mt-4">
                            <div class="col-md-12">

                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>Product Name</th>
                                            <th>Product Code</th>
                                            <th>Quantity</th>
                                            <th>MRP</th>
                                            <th>Price</th>
                                            <th>Total</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody id="invoice_items">
                                        @foreach ($sales->items as $items)
                                            <tr>
                                                <td>{{ $items->product->product_name }}</td>
                                                <td>{{ $items->product->product_code }}</td>
                                                <td>{{ round($items->qty, 2) }} {{ $items->unit->unit_code ?? '' }}</td>
                                                <td>{{ number_format($items->mrp_rate, 2) }}</td>
                                                <td align="right">{{ number_format($items->price, 2) }}</td>
                                                <td align="right">{{ number_format($items->row_total, 2) }}</td>
                                                <td>
                                                    <a href="#selectionDelete" data-bs-toggle="modal"
                                                        data-id="{{ $items->id }}"
                                                        class="btn btn-sm btn-soft-danger delete-record"><i
                                                            class="mdi mdi-delete-outline"></i></a>
                                                </td>
                                            </tr>
                                        @endforeach

                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td colspan="5" class="txtright"><b>Sub Total</b></td>
                                            <td align="right">
                                                <input type="text" name="sub_total" id="sub_total"
                                                    class="form-control" style="text-align: right"
                                                    value="{{ round($sales->sub_total, 2) }}" readonly>
                                            </td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td colspan="5" class="txtright"><b>Discount</b></td>
                                            <td align="right">
                                                <input type="text" name="discount_aft_subtotal"
                                                    id="discount_aft_subtotal"
                                                    value="{{ round($sales->discount_aft_subtotal, 2) }}"
                                                    class="form-control" style="text-align: right">

                                            </td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td colspan="5" class="txtright"><b>Round Off</b></td>
                                            <td align="right">
                                                <input type="text" name="round_off" id="round_off"
                                                    class="form-control" style="text-align: right"
                                                    value="{{ round($sales->round_off, 2) }}" readonly>
                                            </td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td colspan="5" class="txtright"><b>Grand Total</b></td>
                                            <td align="right">
                                                <input type="text" name="grand_total" id="grand_total"
                                                    class="form-control" style="text-align: right"
                                                    value="{{ round($sales->grand_total, 2) }}" readonly>

                                            </td>
                                            <td></td>
                                        </tr>

                                        <tr>
                                            <td colspan="5" class="txtright"><b>Paid Amount</b></td>
                                            <td align="right">
                                                <input type="text" name="paid_amount" id="paid_amount"
                                                    value="{{ round($sales->paid_amount, 2) }}" class="form-control"
                                                    style="text-align: right" required>

                                            </td>
                                            <td></td>
                                        </tr>

                                        <tr>
                                            <td colspan="5" class="txtright"><b>Balance Amount</b></td>
                                            <td align="right">
                                                <input type="text" name="balance_amount" id="balance_amount"
                                                    class="form-control"
                                                    value="{{ round($sales->grand_total - $sales->paid_amount, 2) }}"
                                                    style="text-align: right" readonly required>
                                            </td>
                                            <td></td>
                                        </tr>

                                        <tr>
                                            <td colspan="5" class="txtright"><b>Payment Mode</b></td>
                                            <td align="right">
                                                <select class="form-control" name="payment_mode" id="payment_mode"
                                                    required>
                                                    <option value="cash">Cash</option>
                                                    <option value="upi">UPI</option>
                                                </select>
                                            </td>
                                            <td></td>
                                        </tr>

                                        <tr>
                                            <td colspan="7" align="right">
                                                @csrf
                                                <button type="submit" class="btn btn-primary float-right">UPDATE</button>
                                            </td>
                                        </tr>

                                    </tfoot>
                                </table>


                            </div>
                        </div>



                    </form>












                    </form>

                </div>
                <!-- end card body -->
            </div>

        </div>

    </div>
@endsection


@push('scripts')
    <script>
        $(document).ready(function() {
            $('.select2').select2();

            $('#product_id').on('change', function() {
                var productId = $(this).val();

                if (productId) {

                    let url = "{{ route('product.price', ':id') }}";
                    url = url.replace(':id', productId);



                    $.ajax({
                        url: url,
                        type: 'GET',
                        dataType: 'json',
beforeSend: function() {
         
        $.LoadingOverlay("show");
        
         
    },
                        success: function(data) {
                            $('#qty').val(data.qty).attr('max', data.currentstock);
                            $('#price').val(data.price);
                            $('#unit_name').html(data.unit_name);
                            $('#unit_id').val(data.unit_id);
                            $('#totalrowAmount').html(data.totalamt);
                        },
                        error: function() {
                            alert('Failed to load product data');
                        },
complete: function() {
         
        $.LoadingOverlay("hide");
        
         
    }
                    });
                } else {
                    $('#price, #tax, #unit_id').val('');
                    $('#unit_name').html('');
                    $('#totalrowAmount').html('');
                }
            });
        });

        document.addEventListener('DOMContentLoaded', function() {
            const qtyInput = document.getElementById('qty');
            const priceInput = document.getElementById('price');
            const totalSpan = document.getElementById('totalrowAmount');

            function calculateTotal() {
                const qty = parseFloat(qtyInput.value) || 0;
                const price = parseFloat(priceInput.value) || 0;
                const total = qty * price;
                totalSpan.textContent = total.toFixed(2);
            }

            qtyInput.addEventListener('input', calculateTotal);
            priceInput.addEventListener('input', calculateTotal);
        });

        document.addEventListener('DOMContentLoaded', function() {
            const paidInput = document.getElementById('paid_amount');
            const balanceInput = document.getElementById('balance_amount');
            const discountInput = document.getElementById('discount_aft_subtotal');
            const subTotalInput = document.getElementById('sub_total');
            const roundOffInput = document.getElementById('round_off');
            const grandTotalInput = document.getElementById('grand_total');

            function updateTotals() {
                const subTotal = parseFloat(subTotalInput.value) || 0;
                const discount = parseFloat(discountInput.value) || 0;
                const paidAmount = parseFloat(paidInput.value) || 0;

                const netTotal = subTotal - discount;
                const grandTotal = Math.round(netTotal);
                const roundOff = grandTotal - netTotal;
                const balanceAmount = grandTotal - paidAmount;

                // Update values
                roundOffInput.value = roundOff.toFixed(2);
                grandTotalInput.value = grandTotal.toFixed(2);
                balanceInput.value = balanceAmount.toFixed(2);
            }

            // Event listeners
            paidInput.addEventListener('input', updateTotals);
            discountInput.addEventListener('input', updateTotals);

            // Initial calculation
            updateTotals();
        });

        document.addEventListener('DOMContentLoaded', function() {
            const deleteButtons = document.querySelectorAll('.delete-record');

            deleteButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const recordId = this.getAttribute('data-id');
                    var deleteUrl = "{{ route('sales.items.delete', ':id') }}";
                    deleteUrl = deleteUrl.replace(':id',
                        recordId); // Replace 'records.destroy' with your actual route name.

                    Swal.fire({
                        title: 'Are you sure?',
                        text: 'You won\'t be able to revert this!',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes, delete it!'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            axios.delete(deleteUrl)
                                .then(response => {
                                    Swal.fire('Deleted!', response.data.message,
                                        'success');
                                    // You can also remove the deleted record from the DOM here.
                                    window.location.reload();
                                })
                                .catch(error => {
                                    Swal.fire('Error!',
                                        'An error occurred while deleting the record.',
                                        'error');
                                });
                        }
                    });
                });
            });
        });
    </script>
@endpush