@extends('layouts.admin')

@section('title', 'Making / Packing Labels')

@section('content')
@php
    $statusList = [
        'placed' => 'Order Placed',
        'confirmed' => 'Order Confirmed',
        'packed' => 'Order Packed',
        'awaiting_pickup' => 'Shipment Created',
    ];
    $currentStatus = request('status') ?? 'placed';
    $locationQuery = request('location_id', ($locationId ?? null) === null ? 'all' : $locationId);
@endphp

<div class="tw-migrated making-labels-page space-y-4">
    <x-ui.page-header
        title="Making / Packing Labels"
        subtitle="Print product labels for the workshop and packing desk"
    />

    <x-ui.card>
        <form action="{{ route('admin.making.orders.view') }}" id="sort_orders" method="GET" class="row g-2 align-items-end justify-content-end">
            <input type="hidden" name="status" value="{{ $status }}">

            <div class="col-md-6 col-lg-2">
                <label for="date_from" class="admin-form-label">From date</label>
                <input type="date" name="date_from" id="date_from" class="form-control admin-form-control" value="{{ $date_from }}" max="{{ date('Y-m-d') }}">
            </div>
            <div class="col-md-6 col-lg-2">
                <label for="date_to" class="admin-form-label">To date</label>
                <input type="date" name="date_to" id="date_to" class="form-control admin-form-control" value="{{ $date_to }}" max="{{ date('Y-m-d') }}">
            </div>

            @if(isset($locations) && $locations->count())
            <div class="col-md-6 col-lg-2">
                <label for="location_id" class="admin-form-label">Shop</label>
                <select name="location_id" id="location_id" class="form-select admin-form-control" onchange="this.form.submit()">
                    @if(!empty($canViewAllShops))
                        <option value="all" @selected(($locationId ?? null) === null)>All shops</option>
                    @endif
                    @foreach($locations as $loc)
                        <option value="{{ $loc->id }}" @selected(($locationId ?? null) == $loc->id)>
                            {{ $loc->name }}{{ $loc->type === 'warehouse' ? ' (WH)' : '' }}
                        </option>
                    @endforeach
                </select>
            </div>
            @endif

            <div class="col-md-6 col-lg-2">
                <label for="search" class="admin-form-label">Order code</label>
                <input type="text" class="form-control admin-form-control" id="search" name="search"
                    value="{{ $sort_search ?? '' }}"
                    placeholder="Type order code &amp; hit Enter">
            </div>

            <div class="col-auto">
                <label class="admin-form-label">&nbsp;</label>
                <div class="d-flex gap-2">
                    <button type="submit" class="tw-btn-primary">
                        <i class="bi bi-funnel"></i> Filter
                    </button>
                    <a href="{{ route('admin.making.orders.pdf', array_filter([
                            'status' => $status,
                            'date_from' => $date_from,
                            'date_to' => $date_to,
                            'search' => $sort_search,
                            'location_id' => $locationQuery,
                        ])) }}"
                        class="tw-btn-secondary making-download-btn"
                        id="making_orders_pdf">
                        <i class="bi bi-download"></i> Download
                    </a>
                </div>
            </div>
        </form>

        <div class="status-filter-pills-container mt-4">
            @foreach($statusList as $key => $label)
                @php
                    $color = match($key) {
                        'placed' => 'purple',
                        'confirmed' => 'blue',
                        'packed' => 'green',
                        'awaiting_pickup' => 'teal',
                        default => 'teal',
                    };
                    $icon = match($key) {
                        'placed' => 'bi-box',
                        'confirmed' => 'bi-boxes',
                        'packed' => 'bi-archive',
                        'awaiting_pickup' => 'bi-truck',
                        default => 'bi-circle',
                    };
                    $isActive = $currentStatus === $key;
                    $count = $orderStatusCounts[$key] ?? 0;
                @endphp
                <a href="{{ route('admin.making.orders.view', array_filter([
                        'status' => $key,
                        'date_from' => $date_from,
                        'date_to' => $date_to,
                        'search' => $sort_search,
                        'location_id' => $locationQuery,
                    ])) }}"
                    class="status-filter-pill pill-{{ $color }} {{ $isActive ? 'active' : '' }}">
                    <i class="bi {{ $icon }}"></i>
                    <span>{{ $label }}</span>
                    <span class="pill-count">{{ $count }}</span>
                </a>
            @endforeach
        </div>

        @if($status === 'placed')
            <x-ui.alert type="warning" class="mt-4 mb-0">
                <div class="fw-semibold mb-1">Making labels workflow</div>
                <p class="mb-2 small">
                    Generate <strong>Making Labels</strong> only for <strong>Order Placed</strong>.
                    After download, status moves to <strong>Order Confirmed</strong>.
                </p>
                <ul class="mb-0 small ps-3">
                    <li>Generate making labels for items in Order Placed.</li>
                    <li>Send labels to the Making / Packing team.</li>
                    <li>After packing, generate the delivery label and attach it.</li>
                </ul>
            </x-ui.alert>
        @endif
    </x-ui.card>

    <x-ui.card title="Label preview">
        @if($orders->isEmpty())
            <p class="text-muted mb-0">No orders found for this filter.</p>
        @else
            <div class="making-labels-grid">
                @foreach ($orders as $order)
                    <article class="making-label-card">
                        <div class="making-label-card__row"><strong>Order ID:</strong> #{{ $order->id }}</div>
                        <div class="making-label-card__row">
                            <strong>Order Date:</strong>
                            {{ date('d-m-Y h:i A', $order->date) }}
                        </div>
                        @if($order->fulfillmentLocation ?? $order->fulfillment_location ?? null)
                            <div class="making-label-card__row">
                                <strong>Shop:</strong>
                                {{ ($order->fulfillmentLocation ?? $order->fulfillment_location)->name }}
                            </div>
                        @elseif(!empty($order->fulfillment_location_id) && isset($locations))
                            <div class="making-label-card__row">
                                <strong>Shop:</strong>
                                {{ $locations->firstWhere('id', $order->fulfillment_location_id)?->name ?? ('#'.$order->fulfillment_location_id) }}
                            </div>
                        @endif
                        <div class="making-label-card__row"><strong>Products:</strong></div>
                        <ul class="making-label-card__products">
                            @foreach ($order->items as $item)
                                <li>
                                    {{ $item->product?->name ?? 'Item' }}
                                    @if(!empty($item->product?->tags))
                                        — <strong>{{ $item->product->tags }}</strong>
                                    @endif
                                    — ({{ $item->qty }})
                                </li>
                            @endforeach
                        </ul>
                    </article>
                @endforeach
            </div>
        @endif
    </x-ui.card>
</div>

<style>
    .making-labels-page .status-filter-pills-container {
        display: flex;
        flex-wrap: wrap;
        gap: 0.65rem;
        align-items: center;
    }
    .making-labels-page .status-filter-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.45rem 0.85rem;
        border-radius: 999px;
        font-size: 0.8125rem;
        font-weight: 560;
        text-decoration: none;
        border: 1px solid var(--color-border, #e4e0d8);
        background: var(--color-card, #fff);
        color: var(--color-text, #161b26);
        transition: 0.18s ease;
        white-space: nowrap;
    }
    .making-labels-page .status-filter-pill:hover {
        background: var(--color-bg, #f3f1ec);
        color: var(--color-text, #161b26);
    }
    .making-labels-page .status-filter-pill .pill-count {
        display: inline-flex;
        min-width: 1.35rem;
        justify-content: center;
        padding: 0.05rem 0.35rem;
        border-radius: 999px;
        background: color-mix(in srgb, currentColor 12%, transparent);
        font-size: 0.75rem;
    }
    .making-labels-page .status-filter-pill.pill-purple.active {
        background: #ede9fe;
        border-color: #a78bfa;
        color: #5b21b6;
    }
    .making-labels-page .status-filter-pill.pill-blue.active {
        background: #dbeafe;
        border-color: #60a5fa;
        color: #1e3a8a;
    }
    .making-labels-page .status-filter-pill.pill-green.active {
        background: #d1fae5;
        border-color: #34d399;
        color: #065f46;
    }
    .making-labels-page .status-filter-pill.pill-teal.active {
        background: color-mix(in srgb, var(--admin-primary, #0f766e) 14%, #fff);
        border-color: var(--admin-primary, #0f766e);
        color: var(--admin-primary-dark, #0d5f59);
    }

    .making-labels-page .making-labels-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem;
    }
    @media (max-width: 768px) {
        .making-labels-page .making-labels-grid {
            grid-template-columns: 1fr;
        }
    }
    .making-labels-page .making-label-card {
        border: 1px solid #1f2937;
        border-radius: 10px;
        padding: 0.85rem 1rem;
        background: #fff;
        color: #111827;
        line-height: 1.55;
        font-size: 0.95rem;
    }
    .making-labels-page .making-label-card__row + .making-label-card__row {
        margin-top: 0.15rem;
    }
    .making-labels-page .making-label-card__products {
        margin: 0.35rem 0 0;
        padding-left: 1.1rem;
    }
    .making-labels-page .making-label-card__products li + li {
        margin-top: 0.2rem;
    }

    .making-labels-page .making-download-btn.btn-loading {
        position: relative;
        pointer-events: none;
        opacity: 0.8;
    }
    .making-labels-page .making-download-btn.btn-loading::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1.1rem;
        height: 1.1rem;
        border: 2px solid #fff;
        border-top-color: transparent;
        border-radius: 50%;
        animation: making-spin 0.8s linear infinite;
        transform: translate(-50%, -50%);
    }
    @keyframes making-spin {
        to { transform: translate(-50%, -50%) rotate(360deg); }
    }
</style>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const btn = document.getElementById('making_orders_pdf');
    if (!btn) return;
    btn.addEventListener('click', function () {
        this.classList.add('btn-loading');
        setTimeout(() => {
            this.classList.remove('btn-loading');
            location.reload();
        }, 5000);
    });
});
</script>
@endpush