@extends('layouts.mainlayout')
@section('content')
    @if (Auth::user()->hasRoleOrSuperAdmin('farm'))
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="/vendor/js/gijgo.min.js" type="text/javascript"></script>
        <link href="/css/gijgo.min.css" rel="stylesheet" type="text/css"/>
        <div class="album text-muted">
            <form>
                <div class="container">
                    <div class="row">
                        <div class="col">
                            <p>
                            <div class="col-xl-3 col-sm-6 mb-3">
                                <p>Transit date</p>
                                <input class="form-control input-lg" type='text' id="s_date"
                                       name='s_date'
                                       value="" required/>
                                <script>
                                    $('#s_date').datepicker({
                                        uiLibrary: 'bootstrap4',
                                        format: 'yyyy-mm-dd'
                                    });
                                </script>
                                <!---->
                            </div>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col-4">
                            <p class="text-center">Search</p>
                            <div class="container box">

                                <div class="panel panel-default">
                                    <div class="panel-body">
                                        <div class="form-group">
                                            <input type="text" name="search" id="search" class="form-control"
                                                   placeholder="Search"/>
                                            <script>

                                            </script>
                                        </div>
                                        <div class="table-responsive">
                                            <table class="table table-striped table-bordered">
                                                <thead>
                                                <tr>
                                                    <th>Name</th>
                                                    <th>Request</th>
                                                </tr>

                                                </thead>

                                                <tbody id="kereso">

                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-4">
                            <p class="text-center">Selected</p>
                            <div class="container box">
                                <div class="panel panel-default">
                                    <div class="panel-body">
                                        <div class="table-responsive">
                                            <table class="table table-striped table-bordered">
                                                <thead>
                                                <tr>
                                                    <th>Name</th>
                                                </tr>
                                                </thead>

                                                <tbody id="keres">

                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-4">
                            <p class="text-center">Accepted/Confirmed</p>
                            <div class="container box">
                                <div class="panel panel-default">
                                    <div class="panel-body">
                                        <div class="table-responsive">
                                            <table class="table table-striped table-bordered">
                                                <thead>
                                                <tr>
                                                    <th>Name</th>
                                                </tr>
                                                </thead>

                                                <tbody id="accepted">
                                                                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </form>
        </div>
    @else
        <h1>Permission denied</h1>
    @endif
    <script src="/vendor/jquery/jquery.min.js"></script>

    <script>
        $(document).ready(function () {
            fetch_customer_data();
            function fetch_customer_data(query = '') {
                $.ajax({
                    url: "{{ route('kereso') }}",
                    method: 'GET',
                    data: {query: query},
                    dataType: 'json',
                    success: function (data) {
                        $('#kereso').html(data.table_data);
                    }
                })
            }

            $(document).on('keyup', '#search', function () {
                var query = $(this).val();
                fetch_customer_data(query);
            });

        });
    </script>

@endsection