@section('title', __('Transportation countries'))
<x-layout bodyClass="g-sidenav-show  bg-gray-200 ">

    <x-navbars.sidebar activePage="transportation_countries.index"></x-navbars.sidebar>
    <main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg {{$locale == 'ar'?'overflow-x-hidden':''}}">
        <!-- Navbar -->
        <x-navbars.navs.auth titlePage="{{ __('Transportation countries') }}"></x-navbars.navs.auth>
        <!-- End Navbar -->
        @include('pages.layout.flash_messages')
        <div class="container-fluid py-4">
            <div class="row">
                <div class="col-12">
                    <div class="card my-4">
                        @include('components.breadCrumb.list',['path' => route('transportation-countries.create'), 'excel_path'=>route('transportation-countries.download-excel'), 'pdf_path'=>route('transportation-countries.download-pdf'),'section' => __('Transportation countries'),'permssion' => 'transportation_countries.manage'])
                        {!! Form::open(['route'=>['transportation-countries.index'], 'method'=>'get']) !!}

                        <div class="row p-2">
                            <div class="col-md-4">
                                <div class="input-group input-group-outline {{ request('search') ? 'is-valid is-filled' :'' }}">
                                    <label class="form-label">{{ __('Search ..') }}</label>
                                    <input type="search" name="search" class="form-control" value="{{ request('search') }}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <select name="status" class="form-select" id="status">
                                        <option value="" selected>{{ __('Select') }}</option>
                                        <option value="1" {{ request('status') == "1" ? 'selected' : '' }}>{{ __('Active') }}</option>
                                        <option value="0" {{ request('status') == "0" ? 'selected' : '' }}>{{ __('In-active') }}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="input-group  input-group-outline">
                                    {!! Form::submit(__('Search ..'), ['class' => 'btn btn-primary']) !!}
                                </div>
                            </div>
                        </div>

                        {!! Form::close() !!}
                        <div class="card-body px-0 pb-2">
                            <div class="table-responsive p-0">
                                <table class="table align-items-center mb-0">
                                    <thead>
                                        <tr>
                                            <th class="text-uppercase text-secondary text-md font-weight-bolder opacity-7">
                                                {{__("ID")}}
                                            </th>

                                            <th class="text-uppercase text-secondary text-md font-weight-bolder opacity-7 ps-2">
                                                {{__("Image")}} </th>
                                            <th class="text-uppercase text-secondary text-md font-weight-bolder opacity-7 ps-2">
                                                {{__("NAME")}} </th>
                                            <th class="text-uppercase text-secondary text-md font-weight-bolder opacity-7 ps-2">
                                                {{__("Status")}} </th>

                                            <th class="text-center text-uppercase text-secondary text-md font-weight-bolder opacity-7">
                                                {{__("CREATION DATE")}}
                                            </th>
                                            <th class="text-center text-uppercase text-secondary text-md font-weight-bolder opacity-7">
                                                {{__("Action")}}
                                            </th>
                                            <th class="text-secondary opacity-7"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($countries as $country)
                                        <tr>
                                            <td>
                                                <div class="d-flex px-2 py-1">
                                                    <div class="d-flex flex-column justify-content-center">
                                                        <p class="mb-0 text-sm">
                                                            <a href="{{route('transportation-countries.edit',['transportation_country' => $country->id])}}">
                                                                {{$country->id}}
                                                            </a>
                                                        </p>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex px-2 py-1">
                                                    <div>
                                                        @if($country->flag)
                                                        <img src="{{ asset($country->flag_image) }}"
                                                            class="avatar avatar-sm me-3 border-radius-lg" alt="user1">
                                                        @else
                                                        <img src="{{ asset('/assets/img/earth-icon.png') }}"
                                                        class="avatar avatar-sm me-3 border-radius-lg" alt="user1">
                                                        @endif
                                                    </div>

                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex flex-column justify-content-center">
                                                    <h6 class="mb-0 text-sm">{{$country->name}}</h6>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex flex-column justify-content-center">
                                                    @if($country->active)
                                                    <span class="badge bg-gradient-success">{{ __('Active') }}</span>
                                                    @else
                                                    <span class="badge bg-gradient-danger">{{ __('In-active') }}</span>
                                                    @endif
                                                </div>
                                            </td>

                                            <td class="align-middle text-center">
                                                <span class="text-secondary text-xs font-weight-bold">{{$country->created_at->format('Y-m-d')}}</span>
                                            </td>
                                            <td class="align-middle">
                                                <a rel="tooltip" class="btn btn-success btn-link btn-sm" href="{{route('transportation-countries.edit',['transportation_country' => $country->id])}}" data-original-title="" title="">
                                                    {{ __('Edit') }}
                                                    <i class="fa fa-edit"></i>
                                                </a>
                                                <form class="delete-form d-inline " action="{{ route('transportation-countries.destroy', ['transportation_country' => $country->id]) }}" method="POST">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="button" class="delete-button btn btn-danger btn-link btn-sm" data-original-title="" title="">
                                                        {{ __('Delete') }}
                                                        <i class="fa fa-close"></i>
                                                    </button>
                                                </form>
                                            </td>
                                        </tr>
                                        @empty
                                        <div class=" ">
                                            <div class=" d-flex justify-content-center text-center ">
                                                {{__("No entry found")}}
                                            </div>
                                        </div>
                                        @endforelse



                                    </tbody>

                                </table>
                            </div>
                            <div class="d-flex">
                                <div class="mx-auto">
                                    {{ $countries->appends(Request::only(['search','status']))->links("pagination::bootstrap-4") }}
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
            <x-footers.auth></x-footers.auth>
        </div>
    </main>
    <x-plugins></x-plugins>

</x-layout>