@extends('layouts.admin')

@section('title', 'Pickup Slots')

@section('content')

<div class="d-flex flex-column flex-md-row
    justify-content-between align-items-md-center
    gap-3 mb-4"
>
    <div>
        <h1 class="h3 mb-1">
            Pickup Slots
        </h1>

        <p class="text-muted mb-0">
            Open or close individual pickup times
            available to customers.
        </p>
    </div>
</div>

<div class="card shadow-sm">

    <div class="card-header bg-white">

        <form
            method="GET"
            action="{{ route('admin.pickup-slots.index') }}"
            class="row g-3 align-items-end"
        >

            <div class="col-md-4">

                <label
                    for="date"
                    class="form-label"
                >
                    Pickup Date
                </label>

                <input
                    type="date"
                    id="date"
                    name="date"
                    value="{{ $date }}"
                    class="form-control"
                >

            </div>

            <div class="col-md-auto">

                <button
                    type="submit"
                    class="btn btn-primary"
                >
                    View Slots
                </button>

            </div>

        </form>

    </div>

    <div class="card-body">

        @if ($slots->isEmpty())

            <div class="text-center py-5">

                <h2 class="h5 mb-2">
                    No pickup slots found
                </h2>

                <p class="text-muted mb-0">
                    No pickup slots have been generated
                    for this date yet.
                </p>

            </div>

        @else

            <div class="table-responsive">

                <table class="table table-hover
                    align-middle mb-0"
                >

                    <thead>
                        <tr>
                            <th>
                                Pickup Time
                            </th>

                            <th>
                                Capacity
                            </th>

                            <th>
                                Reserved
                            </th>

                            <th>
                                Remaining
                            </th>

                            <th>
                                Status
                            </th>

                            <th class="text-end">
                                Action
                            </th>
                        </tr>
                    </thead>

                    <tbody>

                        @foreach ($slots as $slot)

                            <tr>

                                <td>
                                    <strong>
                                        {{
                                            \Carbon\Carbon::parse(
                                                $slot->starts_at
                                            )->format('g:i A')
                                        }}
                                    </strong>

                                    <span class="text-muted">
                                        –
                                        {{
                                            \Carbon\Carbon::parse(
                                                $slot->ends_at
                                            )->format('g:i A')
                                        }}
                                    </span>
                                </td>

                                <td>
                                    {{ $slot->capacity_minutes }}
                                    min
                                </td>

                                <td>
                                    {{ $slot->reserved_minutes }}
                                    min
                                </td>

                                <td>
                                    {{ $slot->remainingCapacity() }}
                                    min
                                </td>

                                <td>

                                    @if ($slot->status === 'open')

                                        <span
                                            class="badge text-bg-success"
                                        >
                                            Open
                                        </span>

                                    @else

                                        <span
                                            class="badge text-bg-secondary"
                                        >
                                            Closed
                                        </span>

                                    @endif

                                </td>

                                <td class="text-end">

                                    <form
                                        method="POST"
                                        action="{{
                                            route(
                                                'admin.pickup-slots.status',
                                                $slot
                                            )
                                        }}"
                                        class="d-inline"
                                    >

                                        @csrf

                                        @method('PATCH')

                                        @if ($slot->status === 'open')

                                            <button
                                                type="submit"
                                                class="btn btn-sm
                                                    btn-outline-danger"
                                            >
                                                Close
                                            </button>

                                        @else

                                            <button
                                                type="submit"
                                                class="btn btn-sm
                                                    btn-outline-success"
                                            >
                                                Open
                                            </button>

                                        @endif

                                    </form>

                                </td>

                            </tr>

                        @endforeach

                    </tbody>

                </table>

            </div>

        @endif
    </div>
</div>

@endsection