@extends('layouts/main')

@push('scripts')
    <script type="text/javascript">
        var path = "{{ route('drivers.search') }}";
        $('#search').typeahead({
            name: 'present_area',
            display: 'present_area',
            source: function(query, process) {
                return $.get(path, {
                    search: query
                }, function(data) {
                    console.log(data);
                    return process(data);
                });
            }
        });
    </script>
@endpush

@section('body')
    @include('layouts.navbar')

    <div class="container mx-auto">
        <h1 class="text-center capitalize dark:text-gray-300 px-5 mt-5">Find Your Drivers</h1>
        <div class="w-full mx-auto my-5 px-5">
            <form class="flex items-start">
                <div class="relative w-full">
                    <div class="absolute top-3 pl-3 pointer-events-none">
                        <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor"
                            viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                                clip-rule="evenodd"></path>
                        </svg>
                    </div>
                    <div class="dark:text-white">
                        <style>
                            ul.typeahead>li {
                                padding: .25rem;
                                border-bottom: 1px solid rgb(129, 129, 129);
                            }

                            ul.typeahead>li.active {
                                background: #158043;
                                border-radius: .5rem
                            }
                        </style>
                        <input
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                            type="text" name="search" id="search" placeholder="Search By Location" autocomplete="off"
                            value="{{ request()->get('search') }}">
                    </div>
                </div>
                <button type="submit"
                    class="p-2.5 ml-2 text-sm font-medium text-white bg-primary-700 rounded-lg border border-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                    <span class="sr-only">Search</span>
                </button>
            </form>

        </div>
        <div class="flex flex-wrap gap-5">
            @foreach ($drivers as $driver)
                @include('drivers.driver-card')
            @endforeach
        </div>
        <div class="m-5">
            {{ $drivers->links() }}
        </div>
        @include('layouts.footer')
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
@endsection