@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"> @lang('general.create') Invoice</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboards</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('invoices.index') }}"> Invoices</a></li>
                        <li class="breadcrumb-item active">@lang('general.create')</li>
                    </ol>
                </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">Invoice @lang('general.details')</h4>

                    <form method="POST" action="{{ route('purchase.store') }}" id="invoice-data-form"
                        data-form-type="purchase-creation">

                        <div class="row mb-4">

                            <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="branch_id" class="form-label req">Branch</label>
                                    <select class="form-control select2" name="branch_id" id="branch_id" required>
                                        <option value="">Select</option>
                                        @foreach ($branchData as $branch)
                                            <option value="{{ $branch->id }}">{{ $branch->branch_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="customer_id" class="form-label req">Customer</label>
                                    <select class="form-control select2" name="customer_id" id="customer_id" required>
                                        <option value="">Select</option>
                                        @foreach ($customerData as $customer)
                                            <option value="{{ $customer->id }}">{{ $customer->customer_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="po_no" class="form-label">PO No.</label>
                                    <input type="text" class="form-control" name="po_no" id="po_no">
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="po_date" class="form-label">PO Date</label>
                                    <div class="input-group" id="po_date">
                                        <input type="text" name="po_date" class="form-control"
                                            data-date-format="{{ js_app_date_format() }}" data-date-container='#po_date'
                                            data-provide="datepicker">
                                        <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="despatch_through" class="form-label">Despatch Through</label>
                                    <input type="text" class="form-control" name="despatch_through"
                                        id="despatch_through">
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="vehicle_no" class="form-label">Vehicle No.</label>
                                    <input type="text" class="form-control" name="vehicle_no" id="vehicle_no">
                                </div>
                            </div>





                        </div>


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

                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>Product Name</th>
                                            <th>Quantity</th>
                                            <th>Price</th>
                                            <th>Discount (%)</th>
                                            <th>Tax (%)</th>
                                            <th>Total</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody id="invoice_items">
                                        <tr id="no_rows">
                                            <td colspan="7">No Products Added</td>
                                        </tr>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td colspan="5" class="txtright"><b>Sub Total</b></td>
                                            <td>
                                                <input type="text" class="form-control txtright" name="sub_total"
                                                    id="sub_total" data-calculation="subtotal" readonly>
                                            </td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td colspan="5" class="txtright"><b>Round Off</b></td>
                                            <td>
                                                <input type="text" class="form-control txtright" name="round_off"
                                                    id="round_off" data-calculation="roundoff" readonly>
                                            </td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td colspan="5" class="txtright"><b>Grand Total</b></td>
                                            <td>
                                                <input type="text" class="form-control txtright" name="grand_total"
                                                    id="grand_total" data-calculation="grandtotal" readonly>
                                            </td>
                                            <td></td>
                                        </tr>

                                    </tfoot>
                                </table>


                            </div>
                        </div>





                        <div class="row mt-4">
                            <div class="col-md-6">
                                <select class="form-control" name="product_selection" id="product_selection">
                                    <option value="">Select Product</option>
                                    @foreach ($productData as $product)
                                        <option value="{{ $product->id }}">{{ $product->product_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>




                        <div class="row mt-4">
                            <div class="col-md-12 ">
                                @csrf
                                <button type="submit" class="btn btn-primary w-md float-end">SAVE</button>
                            </div>
                        </div>

                    </form>

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

        </div>

    </div>
@endsection


@push('scripts')
    <script>
        $('.select2').select2();

        $('#product_selection').select2();

        $(document).ready(function() {



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



                if (CustomerId > 0 && productId > 0) {

                    // Make an Ajax request to get product details
                    $.ajax({
                        type: 'GET',
                        url: '{{ route('invoices.itemsrow') }}',
                        data: {
                            id: productId,
                            cus: CustomerId
                        },
                        success: function(data) {

                            var noRowsCount = $('#no_rows').length;

                            if (noRowsCount > 0) {
                                $('#no_rows').remove();
                            }

                            $('#invoice_items').append(data.view);

                            $('#product_selection').val(null).trigger('change');


                        },
                        error: function(xhr, status, error) {
                            console.error(error);
                        }
                    });

                }



            });

        });

        $('#invoice-data-form').on('click', '.remove-item', function() {
            var itemRow = $(this).closest('.item-row').remove();

            // Check the count of remaining items
            var remainingItems = $('.item-row').length;

            // If no items are remaining, display the message
            if (remainingItems === 0) {
                var noProductsMessage = '<tr id="no_rows"><td colspan="7">No Products Added</td></tr>';
                $('#invoice_items').append(noProductsMessage);
            }
        });
    </script>

    <script src="{{ asset('assets/js/pages/purchase.js') }}"></script>
@endpush