@extends('layouts.app')

@section('title', 'Dispatch New Order')

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
  <h1>Dispatch Stocks</h1>
</section>
<script src="{{ asset('js/jquery-3.5.1.min.js') }}"></script>
<!-- Main content -->
<section class="content">
@if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif

<!-- Display validation error messages -->
@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
<div class="mt-5 bg-white" style="height: 300px; border-top: 4px blue solid; border-radius:5px; padding:30px">
    <div class="row">
        
        <div class="col-md-3">
            <form id="invoiceForm">
                @csrf
                <div class="form-group">
                    <label for="invoiceNo">Invoice No.</label>
                    <input type="text" class="form-control" name="invoiceNo" placeholder="Enter Invoice No." id="invoiceNo" required>
                </div>
                <button type="submit" class="btn btn-sm btn-info"><i class='fa fas fa-search'></i> <b>Search Invoice</b></button>
            </form>
        </div>
        
        <div class="col-md-9">
            <div class="form-group">
                <h4><u style="color:red">Search Invoice Results</u></h4>
                <div id="searchResults">
                    <!-- Display search results here -->
                </div>
            </div>
        </div>
    </div>

</div>

</section>
<script>
$(document).ready(function() {
    $('#invoiceForm').on('submit', function(event) {
        event.preventDefault();

        // Get the invoice number from the input field
        const invoiceNo = $('#invoiceNo').val();

        $('#searchResults').html('pls. wait, searching invoice...<img src="{{asset('images/loader.gif')}}" width="32" height="32">');
        // Send an AJAX request
        $.ajax({
            url: '{{ route('search.invoice') }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                invoiceNo: invoiceNo
            },
            success: function(data) {
                // Update the HTML content of the results div
                $('#searchResults').html(data);
            },
            error: function(xhr, status, error) {
                // Handle errors here
                console.error(xhr.responseText);
            }
        });
    });
});
</script>
@endsection