@extends('layouts.main')
@section('page-title')
    {{ __('Driver Check - DL status inquiry') }}
@endsection
@push('style')
    <style>
        /* Style the tab */
        .tab {
            overflow: hidden;
            /* border: 1px solid #ccc; */
            /* background-color: #f1f1f1; */
        }

        /* Style the buttons inside the tab */
        .tab button {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            /* transition: 0.3s; */
            font-size: 17px;
        }

        /* Change background color of buttons on hover */
        .tab button:hover {
            background-color: #ddd;
        }

        /* Create an active/current tablink class */
        .tab button.active {
            background-color: #ccc;
        }

        /* Style the tab content */
        .tabcontent {
            display: none;
            padding: 6px 12px;
            /* border: 1px solid #ccc; */
            border-top: none;
        }
    </style>
@endpush
@section('content')
    <div class="d-flex">
        @include('layouts.sidebar')
        <div>
            @php
                // print_r($license['dl_number']);
            @endphp
            <form method="GET" action="{{ route('dl-status-inquiry') }}">
                <div class="inputBox">
                    <div class="LabelTextShaded">DL number</div>
                    <input name="dl_number" type="text" value="{{ $request->dl_number }}">
                    <br><br>
                    <div class="LabelTextShaded">DL version number</div>
                    <input name="version_number" type="text" value="{{ $request->version_number }}">
                    <br><br>
                    <div class="LabelTextShaded">Surname</div>
                    <input name="surname" type="text" value="{{ $request->surname }}">

                    <div class="padding"></div>

                    <div class="searchButton">
                        <input id="Submit" name="submitButton" src="{{ asset('assets/images/submit.gif') }}"
                            type="image" alt="delete button" value="submit">
                    </div>
                    <!--end login-->
                </div>
            </form>
            <br><br>
            <div>

                <div class="tab">
                    @php $i = 0; @endphp
                    @foreach ($licenses as $license)
                        <button class="tablinks {{ $i == 0 ? 'active' : '' }}"
                            onclick="openCity(event, '{!! preg_replace('/[^A-Za-z0-9\-]/', '_', $license['license_type']) !!}')">
                            {{ $license['license_type'] }} License</button>
                        @php $i++; @endphp
                    @endforeach
                    {{-- <button class="tablinks" onclick="openCity(event, 'Restricted')">Restricted License</button> --}}
                    {{-- <button class="tablinks" onclick="openCity(event, 'Full')">Full License</button> --}}
                </div>

                @php $i = 0; @endphp
                @foreach ($licenses as $license)
                    <div id="{!! preg_replace('/[^A-Za-z0-9\-]/', '_', $license['license_type']) !!}" class="tabcontent" style="{{ $i == 0 ? 'display: block' : '' }}">
                        <h3>Mr. {{ $license['first_name'] }} {{ $license['surname'] }}</h3>
                        <table>
                            <tr>
                                <td style="min-width: 200px">Date of birth</td>
                                <td>{{ $license['date_of_birth'] }}</td>
                            </tr>
                            <tr>
                                <td>Gender</td>
                                <td>Male</td>
                            </tr>
                            <tr>
                                <td>Address</td>
                                <td>{{ $license['address'] }}</td>
                            </tr>
                        </table>
                        <h5>License Details</h5>
                        <table>
                            <tr>
                                <td style="min-width: 200px">Driving Status</td>
                                <td>You have a <strong>{{ $license['license_type'] }}</strong> Driving License</td>
                            </tr>
                            <tr>
                                <td>License valid from</td>
                                <td>{{ $license['license_valid_from'] }}</td>
                            </tr>
                            <tr>
                                <td>License valid to</td>
                                <td>{{ $license['license_valid_to'] }}</td>
                            </tr>
                            <tr>
                                <td>Driving license number</td>
                                <td>{{ $license['dl_number'] }}</td>
                            </tr>
                            <tr>
                                <td>Version number</td>
                                <td>{{ $license['version_number'] }}</td>
                            </tr>
                            <tr>
                                <td>Class (es)</td>
                                <td>{{ $license['class'] }}</td>
                            </tr>
                        </table>
                    </div>
                    @php $i++; @endphp
                @endforeach

                @if(!$i && $request->dl_number)
                <p>No result</p>
                @endif




                {{-- <div id="Restricted" class="tabcontent">
                    <h3>Paris</h3>
                    <p>Paris is the capital of France.</p>
                </div>

                <div id="Full" class="tabcontent">
                    <h3>Tokyo</h3>
                    <p>Tokyo is the capital of Japan.</p>
                </div> --}}

            </div>

        </div>
    </div>
@endsection

<script>
    function openCity(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    }
</script>