@extends('layouts.app')
@section('main-content')
<div class="container-fluid p-0">
    <nav class="page-breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ route('invoices') }}">Invoice List</a></li>
            <li class="breadcrumb-item">Search</li>
        </ol>
    </nav>
    <h1 class="h3 mb-3"><strong>Search</strong> Invoice</h1>
    <div class="row">
        <div class="col-sm-12 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Search Invoice</h5>
                </div>
                <div class="card-body pt-0">
                    @if ($errors->any())
                    <div class="alert alert-danger p-2 pb-0">
                        <ul class="list-unstyled">
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif
                    <div class="row mb-0">
                        <form action="{{ route('invoices.search') }}" method="post">
                            @csrf
                            <div class="form-group d-flex justify-content-start">
                                <!-- <label for="searchbox">Keywords</label> -->
                                <div class="col-sm-3 col-md-3">
                                    <select name="search" id="searchbox" class="form-control">
                                        <option value="" class="py-0" readonly>Search</option>
                                        @foreach ($items as $item)
                                        <option value="{{ $item->customer_id }}">{{ $item->info}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <button type="button" id="search" class="btn btn-sm btn-primary ms-1 px-3 rounded-2 shadow-none" rel="facebox" title="Search"><i data-feather="search"></i></button>
                            </div>
                            <hr class="py-0 mb-1">
                        </form>
                    </div>
                    <div class="row mb-0">
                        <div class="table-responsive">
                            <table class="table table-striped table-search">
                                <thead class="text-nowrap m-0">
                                    <th class="col-sm-1 text-start px-3">#</th>
                                    <th class="col-sm-2 text-nowrap">Invoice</th>
                                    <th class="col-sm-2 text-nowrap text-start">Date</th>
                                    <th class="col-sm-3 text-nowrap">Customer</th>
                                    <th class="col-sm-2 text-nowrap">Vehicle Info</th>
                                    <th class="col-sm-1 text-nowrap text-center">Status</th>
                                </thead>
                                <tbody id="content" style="border-top: none;"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script type="text/javascript">
    $(document).ready(function() {
        $('#searchbox').select2();

        // $('#searchbox').on('change', function() {
        //     query();
        // });
        $(document).on('click', '#search', function() {
            query();
        });
    });

    function query() {
        const id = $('#searchbox').val();
        if (id != null) {
            $.ajax({
                url: '/api/invoices/' + id + '/search',
                data: {
                    '_token': 'crsf_token'
                },
                dataType: 'JSON',
                beforeSend: function() {
                    $(".spinner-border").removeClass('d-none');
                    $("#processing").text('Processing...');
                },
                success: function(data) {
                    $(".result").detach();
                    $i = 1;
                    $.each(data, function(i, value) {
                        var status = value.status;
                        if (status == 'A') {
                            status = '<span class="badge bg-success">Approved</span>'
                        } else {
                            status = 'Pending'
                        }
                        $('#content').append('<tr class="result">' +
                            '<td class="col-sm-1 text-start px-3">' + $i++ + '</td>' +
                            '<td><a href="/invoices/' + value.invoice_no + '">INV' + (value.invoice_no).toString().padStart(5, '0') + '</a></td>' +
                            '<td class="col-sm-2 text-nowrap text-start">' + value.invoice_date + '</td>' +
                            '<td>' + value.name + '</td>' +
                            '<td>' + value.info + '</td>' +
                            '<td class="text-center">' + status + '</td>' +
                            '</tr>');
                    });
                    $(".spinner-border").addClass('d-none');
                    $("#processing").text('');
                },
                error: function() {
                    $(".result").detach();
                    $(".spinner-border").addClass('d-none');
                    $("#processing").text('');
                }
            });
        }
    }
</script>
@endsection