@extends('layouts.staff')

@section('title', 'Kitchen Dashboard')

@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">
            Kitchen Order Dashboard
        </h1>

        <p class="text-muted mb-0">
            Welcome, {{ auth()->user()->full_name }}.
            Manage paid orders awaiting preparation.
        </p>
    </div>

    <div>
        <span class="badge text-bg-success fs-6">
            <i class="bi bi-shield-check me-1"></i>
            Paid orders only
        </span>
    </div>
</div>

<div class="row g-3 mb-4">
    <div class="col-12 col-sm-4">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <div class="text-muted">
                            Awaiting Preparation
                        </div>

                        <div class="display-6 fw-bold">
                            {{ $statistics['awaiting_preparation'] }}
                        </div>
                    </div>

                    <i
                        class="bi bi-hourglass-split
                               fs-1 text-primary"
                    ></i>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-4">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <div class="text-muted">
                            Preparing
                        </div>

                        <div class="display-6 fw-bold">
                            {{ $statistics['preparing'] }}
                        </div>
                    </div>

                    <i class="bi bi-fire fs-1 text-danger"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-sm-4">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <div class="text-muted">
                            Ready
                        </div>

                        <div class="display-6 fw-bold">
                            {{ $statistics['ready'] }}
                        </div>
                    </div>

                    <i class="bi bi-bag-check fs-1 text-success"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="d-flex justify-content-between align-items-center mb-3">
    <div>
        <h2 class="h4 mb-1">
            Kitchen Queue
        </h2>

        <p class="small text-muted mb-0">
            Oldest active orders are prioritised.
        </p>
    </div>

    <a
        href="{{ route('kitchen.dashboard') }}"
        class="btn btn-outline-secondary btn-sm"
    >
        <i class="bi bi-arrow-clockwise me-1"></i>
        Refresh
    </a>
</div>

<div class="row g-4">
    @forelse ($orders as $order)
        <div class="col-12">
            <div
                class="card border-0 shadow-sm
                    @if ($order->status === 'preparing')
                        border-start border-danger border-4
                    @elseif ($order->status === 'confirmed')
                        border-start border-primary border-4
                    @else
                        border-start border-success border-4
                    @endif
                "
            >
                <div class="card-header bg-white">
                    <div
                        class="d-flex flex-column flex-lg-row
                               justify-content-between gap-3"
                    >
                        <div>
                            <div class="d-flex flex-wrap gap-2 mb-2">
                                @if ($order->status === 'confirmed')
                                    <span class="badge text-bg-primary">
                                        Awaiting Preparation
                                    </span>
                                @elseif ($order->status === 'preparing')
                                    <span class="badge text-bg-danger">
                                        Preparing
                                    </span>
                                @else
                                    <span class="badge text-bg-success">
                                        Ready
                                    </span>
                                @endif

                                @if (
                                    $order->fulfilment_type
                                    === 'delivery'
                                )
                                    <span class="badge text-bg-dark">
                                        <i class="bi bi-truck me-1"></i>
                                        Delivery
                                    </span>
                                @else
                                    <span class="badge text-bg-info">
                                        <i class="bi bi-shop me-1"></i>
                                        Collection
                                    </span>
                                @endif
                            </div>

                            <h3 class="h5 mb-1">
                                {{ $order->order_number }}
                            </h3>

                            <div class="small text-muted">
                                Placed
                                {{
                                    $order->created_at->format(
                                        'j F Y \a\t g:i A'
                                    )
                                }}
                            </div>
                        </div>

                        <div class="text-lg-end">
                            <div class="small text-muted">
                                Estimated fulfilment date
                            </div>

                            <strong>
                                @if (
                                    $order
                                        ->estimated_fulfilment_date
                                )
                                    {{
                                        $order
                                            ->estimated_fulfilment_date
                                            ->format('l, j F Y')
                                    }}
                                @else
                                    To be confirmed
                                @endif
                            </strong>

                            <div class="small text-muted mt-1">
                                {{ number_format(
                                    (float) $order->total_weight_kg,
                                    3
                                ) }}
                                kg total
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <div class="row g-4">
                        <div class="col-lg-9">
                            @foreach ($order->items as $item)
                                <div
                                    class="{{
                                        ! $loop->last
                                            ? 'border-bottom pb-4 mb-4'
                                            : ''
                                    }}"
                                >
                                    <div
                                        class="d-flex justify-content-between
                                               gap-3"
                                    >
                                        <div>
                                            <h4 class="h5 fw-bold mb-1">
                                                {{ $item->quantity }}
                                                ×
                                                {{ $item->meal_name }}
                                            </h4>

                                            @if ($item->category_name)
                                                <div class="small text-muted">
                                                    {{
                                                        $item->category_name
                                                    }}
                                                </div>
                                            @endif
                                        </div>

                                        <span class="badge text-bg-light border">
                                            {{
                                                $item
                                                    ->delivery_lead_days
                                            }}
                                            {{
                                                Str::plural(
                                                    'working day',
                                                    $item
                                                        ->delivery_lead_days
                                                )
                                            }}
                                        </span>
                                    </div>

                                    @if ($item->standard_contents)
                                        <div class="mt-3">
                                            <strong class="small">
                                                Standard meal contents
                                            </strong>

                                            <p class="mb-0">
                                                {{
                                                    $item
                                                        ->standard_contents
                                                }}
                                            </p>
                                        </div>
                                    @endif

                                    @if ($item->addons->isNotEmpty())
                                        <div class="mt-3">
                                            <strong class="small">
                                                Optional extras
                                            </strong>

                                            <ul class="mb-0 mt-1">
                                                @foreach ($item->addons as $addon)
                                                    <li>
                                                        <strong>
                                                            {{ $addon->addon_name }}

                                                            @if (
                                                                $addon->quantity_scope
                                                                === 'line_total'
                                                            )
                                                                × {{ $addon->total_quantity }}
                                                                total
                                                            @else
                                                                × {{ $addon->quantity_per_meal }}
                                                                per meal
                                                            @endif
                                                        </strong>

                                                        @if (
                                                            $addon->quantity_scope
                                                            !== 'line_total'
                                                        )
                                                            <span class="text-muted">
                                                                (
                                                                {{ $addon->total_quantity }}
                                                                portions altogether
                                                                )
                                                            </span>
                                                        @endif

                                                        <div class="small text-muted">
                                                            Total add-on weight:
                                                            {{ number_format(
                                                                (float) $addon->total_weight_kg,
                                                                3
                                                            ) }}
                                                            kg
                                                        </div>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif

                                    @if ($item->special_instruction)
                                        <div
                                            class="alert alert-warning mt-3 mb-0"
                                        >
                                            <strong>
                                                <i
                                                    class="bi bi-chat-left-text
                                                           me-1"
                                                ></i>
                                                Special instruction
                                            </strong>

                                            <div class="mt-1">
                                                {{
                                                    $item
                                                        ->special_instruction
                                                }}
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>

                        <div class="col-lg-3">
                            <div class="bg-light rounded p-3 h-100">
                                <h4 class="h6">
                                    Kitchen Action
                                </h4>

                                @can('update kitchen orders')
                                    @if ($order->status === 'confirmed')
                                        <form
                                            method="POST"
                                            action="{{
                                                route(
                                                    'kitchen.orders.status',
                                                    $order
                                                )
                                            }}"
                                            class="kitchen-status-form"
                                            data-action-label="start preparation"
                                        >
                                            @csrf
                                            @method('PATCH')

                                            <input
                                                type="hidden"
                                                name="new_status"
                                                value="preparing"
                                            >

                                            <div class="mb-3">
                                                <label
                                                    for="note-{{ $order->id }}"
                                                    class="form-label small"
                                                >
                                                    Staff note
                                                    <span class="text-muted">
                                                        (optional)
                                                    </span>
                                                </label>

                                                <textarea
                                                    id="note-{{ $order->id }}"
                                                    name="note"
                                                    rows="2"
                                                    maxlength="500"
                                                    class="form-control form-control-sm"
                                                ></textarea>
                                            </div>

                                            <button
                                                type="submit"
                                                class="btn btn-danger w-100"
                                            >
                                                <i class="bi bi-fire me-1"></i>
                                                Start Preparation
                                            </button>
                                        </form>
                                    @elseif (
                                        $order->status === 'preparing'
                                    )
                                        <form
                                            method="POST"
                                            action="{{
                                                route(
                                                    'kitchen.orders.status',
                                                    $order
                                                )
                                            }}"
                                            class="kitchen-status-form"
                                            data-action-label="mark this order as ready"
                                        >
                                            @csrf
                                            @method('PATCH')

                                            <input
                                                type="hidden"
                                                name="new_status"
                                                value="ready"
                                            >

                                            <div class="mb-3">
                                                <label
                                                    for="note-{{ $order->id }}"
                                                    class="form-label small"
                                                >
                                                    Staff note
                                                    <span class="text-muted">
                                                        (optional)
                                                    </span>
                                                </label>

                                                <textarea
                                                    id="note-{{ $order->id }}"
                                                    name="note"
                                                    rows="2"
                                                    maxlength="500"
                                                    class="form-control form-control-sm"
                                                ></textarea>
                                            </div>

                                            <button
                                                type="submit"
                                                class="btn btn-success w-100"
                                            >
                                                <i
                                                    class="bi bi-check-circle
                                                           me-1"
                                                ></i>
                                                Mark Ready
                                            </button>
                                        </form>
                                    @else
                                        <div
                                            class="alert alert-success small mb-0"
                                        >
                                            <i
                                                class="bi bi-check-circle me-1"
                                            ></i>

                                            Kitchen preparation is complete.
                                            This order is waiting for
                                            fulfilment.
                                        </div>
                                    @endif
                                @else
                                    <div
                                        class="alert alert-secondary small mb-0"
                                    >
                                        You have permission to view this
                                        order but not update it.
                                    </div>
                                @endcan
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-footer bg-white small text-muted">
                    @if ($order->preparation_started_at)
                        Preparation started:
                        {{
                            $order
                                ->preparation_started_at
                                ->format('j F Y, g:i A')
                        }}
                    @endif

                    @if (
                        $order->preparation_started_at
                        && $order->ready_at
                    )
                        <span class="mx-2">·</span>
                    @endif

                    @if ($order->ready_at)
                        Ready:
                        {{
                            $order->ready_at->format(
                                'j F Y, g:i A'
                            )
                        }}
                    @endif
                </div>
            </div>
        </div>
    @empty
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center py-5">
                    <i
                        class="bi bi-check-circle
                               display-3 text-success"
                    ></i>

                    <h2 class="h4 mt-3">
                        Kitchen queue is clear
                    </h2>

                    <p class="text-muted mb-0">
                        There are no paid orders waiting for kitchen
                        action.
                    </p>
                </div>
            </div>
        </div>
    @endforelse
</div>

@if ($orders->hasPages())
    <div class="mt-4">
        {{ $orders->links() }}
    </div>
@endif
@endsection

@push('scripts')
<script>
$(function () {
    $('.kitchen-status-form').on(
        'submit',
        function (event) {
            event.preventDefault();

            const form = this;
            const actionLabel = $(form).data(
                'action-label'
            );

            Swal.fire({
                title: 'Confirm kitchen update',
                text: (
                    'Are you sure you want to '
                    + actionLabel
                    + '?'
                ),
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Yes, continue',
                cancelButtonText: 'Cancel',
                confirmButtonColor: '#ff0066'
            }).then(function (result) {
                if (result.isConfirmed) {
                    form.submit();
                }
            });
        }
    );
});
</script>
@endpush