@extends('layouts.master')

@section('title', 'Express54')

@section('content')

    {{-- <div class="container-fluid p-5 profilebgimage {{ Auth::check() && Auth::user()->country == 17 ? 'africa' : 'myprofile' }}" style="min-height: calc(100vh - 110px);"> --}}
    <div class="container-fluid p-5 profilebgimage custom_myprofile" style="min-height: calc(100vh - 110px)">
        <section class="gradient-custom">
            <div class="container-fluid h-100">
                <div class="row d-flex justify-content-center align-items-center h-100">
                    <div class="col-12 col-md-9 col-lg-8 col-xl-8">
                        <div class="card bg-white text-black" style="border-radius: 1rem;">
                            <div class="card-body p-4">
                                <h3 class="mb-5 custom-heading">@lang('messages.pickups')</h3>
                                @if (Session('error'))
                                    <div class="alert alert-warning" role="alert">
                                        {{ Session('error') }}
                                    </div>
                                @endif

                                <form method="GET" action="{{ route('pickups') }}" class="mb-4">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label for="pickupDate" class="form-label">@lang('messages.pickupDate')</label>
                                            <input type="date" name="pickupDate" id="pickupDate" class="form-control" value="{{ request('pickupDate') }}">
                                        </div>
                                        <div class="col-md-4 d-flex align-items-end">
                                            <button type="submit" class="btn btn-primary">@lang('messages.search')</button>
                                            <a href="{{ route('pickups') }}" class="btn btn-secondary ms-2">@lang('messages.cancel')</a>
                                        </div>
                                    </div>
                                </form>



                                <table class="table">
                                    <thead class="table-light">
                                        <tr>
                                            <th>@lang('#')</th>
                                            <th>@lang('messages.name')</th>
                                            <th>@lang('messages.contact')</th>
                                            <th>@lang('messages.service')</th>
                                            <th>@lang('messages.subservice')</th>
                                            <th>@lang('messages.UIDN')</th>
                                            <th>@lang('messages.pickupDate')</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        
                                        @foreach ($pickups as $key => $pickup)
                                        <tr>
                                            <td>{{ $key + 1 }}</td>
                                            <td> {{ $pickup->surname }} {{ $pickup->name }}</td>
                                            <td> {{ $pickup->contact }}</td>
                                            <td>{{ $services->where('id', $pickup->service_selected)->first()->name }} </td>
                                            <td> {{ $services->where('id', $pickup->sub_service)->first()->name }} </td>
                                            <td> {{ $pickup->UIDN }} </td>
                                            <td> {{ \Carbon\Carbon::parse($pickup->pickupDate)->format('d/m/Y') }} </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection