@extends('admin.layout.master')
@section('title', 'VEHICLE MANAGEMENT')
@section('content')
    <div class="card sina-card">
        <div class="d-flex justify-content-between card-header card-header-s">
            <div class="d-flex align-items-start">
                <h4>Customer Vehicle</h4>
            </div>
            <div class="d-flex justify-content-end p-0">
                <a href="{{ route('inventory.vehicle.create') }}" class="btn btn-primary btn-sm">Create</a>
                @include('inventory.global.report_print_excel_button')
            </div>
        </div>

        <div class="card-body">
            <div class="row">
                <div class="col-lg-2">
                    <div class="form-group">
                        <label>Customer</label>
                        <select name="customer_id" id="customer" class="form-control select_2">
                            <option value="">Choose One</option>
                            @foreach ($customers as $customer)
                                <option value="{{ $customer->id }}" data-phone="{{ $customer->mobile }}">
                                    {{ $customer->name_eng }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-lg-2">
                    <div class="form-group">
                        <label>Vehicle Number</label>
                        <input type="text" name="vehicle_number" id="vehicle_number" class="form-control" />
                    </div>
                </div>
                <div class="col-lg-2">
                    <div class="form-group">
                        <label>Engine Number</label>
                        <input type="text" name="engine_number" id="engine_number" class="form-control" />
                    </div>
                </div>
                <div class="col-lg-2">
                    <div class="form-group">
                        <label>Chassis Number</label>
                        <input type="text" name="chassis_number" id="chassis_number" class="form-control" />
                    </div>
                </div>
                <div class="col-lg-1">
                    <div class="form-group">
                        <label class="w-100">&nbsp;</label>
                        <button type="button" id="btn_search" class="btn btn-primary w-100"
                            onclick="search()">Search</button>
                    </div>
                </div>

                <div class="col-lg-12 mt-4">
                    <table class="table table-striped table-bordered table-sm">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Customer</th>
                                <th>Vehicle Number</th>
                                <th>Engine Number</th>
                                <th>Chassis Number</th>
                                <th>Action</th>
                            </tr>
                        </thead>

                        <tbody id="result_body">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function () {
            $('.select_2').select2();

            $('#customer').select2({
                matcher: function (params, data) {
                    if ($.trim(params.term) === '') {
                        return data;
                    }

                    let term = params.term.toLowerCase();
                    let text = data.text.toLowerCase();
                    let phone = $(data.element).data('phone');

                    if (text.indexOf(term) > -1 ||
                        (phone && phone.toString().indexOf(term) > -1)) {
                        return data;
                    }

                    return null;
                }
            });
        });

        function loader(buttonId, title, status = true) {
            $("#" + buttonId).prop("disabled", status).text(title);
        }

        function search() {
            let customer = $('#customer').val();
            let vehicle_number = $('#vehicle_number').val();
            let engine_number = $('#engine_number').val();
            let chassis_number = $('#chassis_number').val();

            let linkUrl = "{{ route('inventory.vehicle.index') }}";
            let int_data_param = {
                customer_id: customer,
                vehicle_number: vehicle_number,
                engine_number: engine_number,
                chassis_number: chassis_number
            };
            loader('btn_search', 'Searching');

            ajaxCallV2(linkUrl, 'GET', int_data_param, function (data) {
                $('#loader').hide();
                $('#result_body').html(data);
                loader('btn_search', 'Search', false);
            }, function (error) {
                $('#loader').hide();
                loader('btn_search', 'Search', false);
            });
        }
    </script>
@endsection