@extends('header.header')
@section('content')
    <div class="header bg-primary pb-6  pt-5">
        <div class="container-fluid">
            <div class="header-body">
                <div class="row align-items-center py-4">
                    <div class="col-lg-6 col-7">
                        <h6 class="h2 text-white d-inline-block mb-0">{{ __('Support Driver') }}</h6>
                        <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                            <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                                <li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i></a></li>
                                <li class="breadcrumb-item"><a href="/">{{ __('Dashboard') }}</a></li>
                                <li class="breadcrumb-item active" aria-current="page">{{ __('Support Driver') }}</li>
                            </ol>
                        </nav>
                    </div><br>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid mt--6">
        <div class="card mb-2">
            <div class="card-header border-0">
                <a href="{{ route('supportDriver.create') }}" class="btn btn-primary">{{ __('Create') }}</a>
            </div>
            <div class="col-lg-12">
                <div class="table-responsive">
                    <table class="table align-items-center table-flush">
                        <thead class="thead-light">
                            <tr>
                                <th scope="col" class="sort" data-sort="budget">{{ __('ID') }}</th>
                                <th scope="col" class="sort" data-sort="budget">{{ __('Name') }}</th>
                                <th scope="col" class="sort" data-sort="budget">{{ __('PhoneNumber') }}</th>
                                <th scope="col" class="sort" data-sort="budget">{{ __('Country') }}</th>
                                <th scope="col" class="sort" data-sort="budget">{{ __('Governorate') }}</th>
                                <th scope="col" class="sort" data-sort="budget">{{ __('Locality') }}</th>
                                <th scope="col" class="sort" data-sort="budget">{{ __('Sub Locality') }}</th>
                                <th scope="col" class="sort" data-sort="budget">{{ __('Neighborhood') }}</th>
                                <th scope="col" class="sort" data-sort="budget">{{ __('Supported') }}</th>
                                <th scope="col" class="sort" data-sort="budget">{{ __('Action') }}</th>
                            </tr>
                        </thead>

                        <tbody class="list" id="myTable">
                            @forelse($driver as $supportDriver)
                                <tr>
                                    <td>{{ $supportDriver->id }}</td>
                                    <td>{{ $supportDriver->user->name }}</td>
                                    <td>{{ $supportDriver->user->phone_number }}</td>
                                    <td>{{ $supportDriver->country }}</td>
                                    <td>{{ $supportDriver->governorate }}</td>
                                    <td>{{ $supportDriver->locality }}</td>
                                    <td>{{ $supportDriver->sub_locality ?? null }}</td>
                                    <td>{{ $supportDriver->neighborhood ?? null }}</td>
                                    <td>{{ ($supportDriver->supported == 1 ? 'Supported' : 'Not Supported') ?? null }}</td>
                                    <td>
                                        <a href="{{ route('supportDriver.edit', $supportDriver->id) }}"
                                            class="control-link edit"><i class="fas fa-edit" style="color: green"></i>
                                            <input type="hidden" name="ID" value="{{ $supportDriver->id ?? null }}">
                                        </a>
                                        <form action="{{ route('supportDriver.destroy', $supportDriver->id) }}"
                                            method="post" id="delete{{ $supportDriver->id }}" style="display: none"
                                            data-swal-title="{{ __('delete-supportDriver') }}"
                                            data-swal-text="{{ __('are-you-sure-to-delete-this-supportDriver?') }}"
                                            data-yes="{{ __('yes') }}" data-no="{{ __('no') }}"
                                            data-success-msg="{{ __('the-supportDriver-has-been-deleted-successfully') }}">
                                            @csrf @method('delete')</form>
                                        <span href="#" class="control-link remove form-confirm"
                                            data-form-id="#delete{{ $supportDriver->id }}"><i class="far fa-trash-alt"
                                                style="color: red"></i></span>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4"></td>
                                    <td colspan="3">{{ __('No Driver Support Data') }}</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- Dark table -->
@endsection
@section('js-scripts')
    <script>
        $("#FilterButton").on("click", function() {
            let url = $(this).data("url"),
                status = $("#Status").val(),
                startDate = $('#start-date').val(),
                endDate = $('#end-date').val()
            console.log(status);
            url = ((status && startDate && endDate) ? `${url}/${status}/${startDate}/${endDate}` : ((startDate &&
                endDate) ? `${url}/all/${startDate}/${endDate}` : ((status && endDate) ?
                `${url}/${status}/none/${endDate}` : (status ? `${url}/${status}` : (startDate ?
                    `${url}/all/${startDate}` : (startDate && status ?
                        `${url}/${status}/${startDate}` : url))))));
            window.location = url
        });
    </script>
@endsection