@push('css')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@endpush
<div class="my-2">
    @include('components.breadCrumb.list_no_create',['section' => __('Consultations'), "excel_path"=>route('sessions.download-excel'), "pdf_path"=>route('sessions.download-pdf')])
    {!! Form::open(['method'=>'get']) !!}
    <div class="row p-2">
        <div class="col-md-3">
            <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-2">
            <div class="form-group">
                <select name="status" class="form-select" id="status">
                    <option value="" selected>{{ __('Order status') }}</option>
                    @foreach ($allStatus as $status)
                    <option value="{{ $status }}" {{ request('status') == "$status" ? 'selected' : '' }}>{{ __($status) }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <select name="payment_status" class="form-select" id="status">
                    <option value="" selected>{{ __('Payment status') }}</option>
                    @foreach ($allPaymentStatus as $status)
                    <option value="{{ $status }}" {{ request('payment_status') == "$status" ? 'selected' : '' }}>{{ __($status) }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="col-md-3">
            <div class="input-group input-group-outline {{ request('date_range') ? 'is-valid is-filled' :'' }}" id="date_range_input">
                <label class="form-label">{{ __('Date Range') }}</label>
                <input type="text" id="date_range" name="date_range" class="form-control" value="{{ request('date_range') }}" />
            </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">
                            {{__("Customer")}} </th>
                        <th class="text-uppercase text-secondary text-md font-weight-bolder opacity-7 ps-2">
                            {{__("Consultant")}} </th>
                        <th class="text-uppercase text-secondary text-md font-weight-bolder opacity-7 ps-2">
                            {{__("Session date")}} <i class="fas fa-info-circle"></i>
                        </th>
                        <th class="text-uppercase text-secondary text-md font-weight-bolder opacity-7 ps-2">
                            {{__("Total")}}
                        </th>
                        {{-- <th class="text-center text-uppercase text-secondary text-md font-weight-bolder opacity-7">
                            {{__("Duration")}}
                        </th> --}}
                        </th>
                        <th class="text-center text-uppercase text-secondary text-md font-weight-bolder opacity-7">
                            {{__("Order date")}} <i class="fas fa-info-circle"></i>
                        </th>
                        <th class="text-center text-uppercase text-secondary text-md font-weight-bolder opacity-7">
                            {{__("Status")}}
                        </th>
                        <th class="text-center text-uppercase text-secondary text-md font-weight-bolder opacity-7">
                            {{__("Payment status")}}
                        </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 ($sessions as $session)
                    <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-orders.show',['transportation_order' => $session->id])}}">
                                            {{$session->id}}
                                        </a>
                                    </p>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="d-flex flex-column justify-content-center">
                                <h6 class="mb-0 text-sm {{ $session?->customer?->deleted_at != null? 'text-danger' :'' }}">{{$session?->customer?->name}}</h6>
                            </div>
                        </td>
                        <td>
                            <div class="d-flex flex-column justify-content-center">
                                <h6 class="mb-0 text-sm {{ $session?->consultant?->deleted_at != null? 'text-danger' :'' }}">{{$session?->consultant?->name}}</h6>
                            </div>
                        </td>
                        <td>
                            <span class="btn-tooltip" data-bs-toggle="tooltip" title="{{ $session->datetime?->format('Y-m-d h:i A') }}" data-container="body" data-animation="true" data-bs-toggle="tooltip">{{ $session->datetime?->format('Y-m-d H') }}</span>
                        </td>
                        <td>
                            <div class="d-flex flex-column justify-content-center">
                                <h6 class="mb-0 text-sm">{{$session->total}}</h6>
                            </div>
                        </td>
                       {{--  <td>
                            <span>{{ $session->duration }}</span>
                        </td> --}}
                        <td>
                            <span class="btn-tooltip" data-bs-toggle="tooltip" title="{{ $session->created_at?->format('Y-m-d h:i A') }}" data-container="body" data-animation="true" data-bs-toggle="tooltip">{{ $session->created_at?->format('Y-m-d H') }}</span>
                        </td>
                        <td>
                            <div class="d-flex flex-column justify-content-center badge bg-gradient-{{ $session->status }}">
                                {{ __($session->status) }}
                            </div>
                        </td>
                        <td>
                            <div class="d-flex flex-column justify-content-center badge bg-gradient-{{ $session->payment_status }}">
                                {{ __($session->payment_status) }}
                            </div>
                        </td>
                        <td class="align-middle">
                            <a rel="tooltip" class="btn btn-primary btn-link btn-sm" href="{{route('sessions.show',['session' => $session->id])}}" data-original-title="" title="">
                                <i class="fa fa-eye"></i>
                            </a>
                        </td>
                    </tr>
                    @empty
                    <div class=" ">
                        <div class=" d-flex justify-content-center text-center ">
                            {{__("No entry found")}}
                        </div>
                    </div>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if (!isset($no_pagination))
        <div class="d-flex">
            <div class="mx-auto">
                {{ $sessions->appends(Request::only(['search','status','payment_status','date_range']))->links("pagination::bootstrap-4") }}
            </div>
        </div>
        @endif
    </div>

</div>
@push('js')
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
    $(document).ready(function() {
            $('input[name="date_range"]').daterangepicker({
            autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear'
                }
            });
            $('input[name="date_range"]').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
                $('#date_range_input').addClass('is-valid is-filled');
            });
    });

</script>
@endpush