@extends('admin.layouts.home.main')
@section('styles')
    <style>
        .badge-status {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-weight: 600;
            font-size: 0.85rem;
            padding: 4px 16px;
            border-radius: 6px;
            border: 1.5px solid;
        }

        .badge-status.active {
            color: #219653;
            background: #E8F9F1;
            border-color: #219653;
        }

        .badge-status.canceled {
            color: #EB5757;
            background: #FFEAEA;
            border-color: #EB5757;
        }

        .badge-status.loading,
        .badge-status.unloading {
            color: #F2994A;
            background: #FFF8E5;
            border-color: #F2994A;
        }

        .badge-status.ready {
            color: #2F80ED;
            background: #EAF2FF;
            border-color: #2F80ED;
        }

        .table thead {
            background: #f9f9f9;
            font-weight: 700;
        }

        .table thead th {
            color: black;
        }

        .table td,
        .table th {
            vertical-align: middle !important;
        }

        .action-btns .btn {
            padding: 4px 7px;
            margin-left: 3px;
        }

        .form-select,
        .form-control {
            border-radius: 8px !important;
        }

        th.sortable {
            cursor: pointer;
            user-select: none;
        }

        th .sort-arrow {
            font-size: 1em;
            margin-left: 3px;
            color: #888;
        }

        th.sorted-asc .sort-arrow,
        th.sorted-desc .sort-arrow {
            color: #111;
        }

        th.sorted-asc .sort-arrow {
            transform: rotate(180deg);
        }

        th.sorted-desc .sort-arrow {
            transform: rotate(0deg);
        }

        thead {
            border-top: 1px solid #E7E7E7;
            border-bottom: 1px solid #E7E7E7;
            height: 52px;
        }

        tbody tr {
            border-color: #EAF2FF;
        }

        .table> :not(caption)>*>* {
            color: #888888;
        }

        .title {
            & .text {
                font-weight: 600;
                font-size: 16px;
                line-height: 100%;
                color: #FFBE36;

                & span {
                    font-weight: 400;
                    color: #B0B0B0;
                }
            }

            @media (max-width : 768px) {
                & img {
                    display: none;
                }

                & .text {
                    font-size: 26px;

                    & span {
                        display: none;
                    }
                }
            }
        }
    </style>
@endsection


@section('main')
    <div class="container-fluid mt-3">
        <div class="latest-shipping rounded-4 bg-white">
            <header class="d-flex justify-content-between align-items-center p-3">
                <h4 class="m-0 fw-bold">All Admin Shipments</h4>
                <div class="buttons d-flex gap-2">
                    <!-- Filter button -->
                    <button type="button" class="btn btn-outline-secondary d-flex align-items-center" data-bs-toggle="modal"
                        data-bs-target="#filterModal">
                        <img src="{{ asset('images/fi_filter.svg') }}" alt="Filter" class="me-1" /> Filter
                    </button>
                    <a href="" class="btn btn-outline-secondary d-flex align-items-center">
                        Download
                        <img src="{{ asset('images/download-2.svg') }}" alt="Download" class="ms-1" />
                    </a>
                    <a href="{{ route('admin.shipment.create', ['shipment_ids' => implode(',', $selectedIds ?? [])]) }}"
                        class="btn btn-warning" style="font-size: 1rem; background-color: #ffbe35; color: #fff;">
                        Add Shipment
                        <img src="{{ asset('images/add.svg') }}" alt="Add" class="ms-1" />
                    </a>
                </div>
            </header>
            <div class="table-responsive d-none d-md-block">
                <table class="table align-middle mb-0">
                    <thead>
                        <tr class="text-center">
                            @php
                                // عمود => قيمة order_by الخاصة به
                                $columns = [
                                    'admin_shipment_id' => 'ID',
                                    'admin_name' => 'Admin Name',
                                    'vehicle' => 'Vehicle',
                                    'status' => 'Status',
                                    'destination' => 'Destination',
                                    'basic_info' => 'Info',
                                    'start_date' => 'Start Date',
                                    'created_at' => 'Created',
                                    'actions' => 'Action',
                                ];
                                $currentOrderBy = request('order_by', 'admin_shipment_id');
                                $currentDirection = request('direction', 'asc');
                            @endphp
                            @foreach ($columns as $key => $label)
                                @if ($key === 'actions')
                                    <th>{{ $label }}</th>
                                @elseif($key === 'vehicle')
                                    <th class="sortable"
                                        onclick="window.location='{{ request()->fullUrlWithQuery(['order_by' => 'vehicle', 'direction' => $currentOrderBy === 'vehicle' && $currentDirection === 'asc' ? 'desc' : 'asc']) }}'"
                                        @if ($currentOrderBy == 'vehicle') class="sorted-{{ $currentDirection }}" @endif>
                                        {{ $label }}
                                        @if ($currentOrderBy == 'vehicle')
                                            <span class="sort-arrow"><img src="{{ asset('images/sort.svg') }}"></span>
                                        @else
                                            <span class="sort-arrow" style="color: #bbb;"><img
                                                    src="{{ asset('images/sort.svg') }}"></span>
                                        @endif
                                    </th>
                                @else
                                    <th class="sortable"
                                        onclick="window.location='{{ request()->fullUrlWithQuery(['order_by' => $key, 'direction' => $currentOrderBy === $key && $currentDirection === 'asc' ? 'desc' : 'asc']) }}'"
                                        @if ($currentOrderBy == $key) class="sorted-{{ $currentDirection }}" @endif>
                                        {{ $label }}
                                        @if ($currentOrderBy == $key)
                                            <span class="sort-arrow"><img src="{{ asset('images/sort.svg') }}"></span>
                                        @else
                                            <span class="sort-arrow" style="color: #bbb;"><img
                                                    src="{{ asset('images/sort.svg') }}"></span>
                                        @endif
                                    </th>
                                @endif
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($shipments as $sh)
                            <tr class="text-center">
                                <td><span class="small text-secondary">ID {{ $sh->admin_shipment_id }}</span></td>
                                <td>
                                    <strong>{{ optional($sh->admin)->name ?? '—' }}</strong>
                                    <div class="small text-muted">{{ optional($sh->admin)->email ?? '' }}</div>
                                </td>
                                <td>{{ optional($sh->vehicle)->license_plate ?? '—' }}</td>
                                <td>
                                    @php
                                        $badgeClass = match ($sh->status) {
                                            'active' => 'active',
                                            'canceled' => 'canceled',
                                            'loading delayed', 'unloading delayed' => 'loading',
                                            'ready to load', 'ready to unload' => 'ready',
                                            default => '',
                                        };
                                    @endphp
                                    <span class="badge-status {{ $badgeClass }}">
                                        {{ ucwords($sh->status) }}
                                    </span>
                                </td>
                                <td>{{ $sh->destination }}</td>
                                <td>{{ Str::limit($sh->basic_info, 25) }}</td>
                                <td>{{ \Carbon\Carbon::parse($sh->start_date)->format('Y-m-d') }}</td>
                                <td>{{ $sh->created_at ? $sh->created_at->format('Y-m-d') : '—' }}</td>
                                <td class="text-end action-btns">
                                    <div class="d-flex">
                                        <a href="{{ route('admin.shipment.show', ['id' => $sh->admin_shipment_id]) }}"
                                            class="btn btn-light btn-sm" title="View">
                                            <img src="{{ asset('images/eye-open.svg') }}" alt="View">
                                        </a>
                                        <a href="{{ route('admin.shipment.edit', ['id' => $sh->admin_shipment_id]) }}"
                                            class="btn btn-light btn-sm" title="Edit">
                                            <img src="{{ asset('images/edit-03.svg') }}" alt="Edit">
                                        </a>
                                        <form
                                            action="{{ route('admin.shipment.destroy', ['id' => $sh->admin_shipment_id]) }}"
                                            method="POST" class="d-inline-block"
                                            onsubmit="return confirm('Delete this shipment?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-light btn-sm" title="Delete">
                                                <img src="{{ asset('images/delete-1.svg') }}" alt="Delete">
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="10" class="text-center py-4">No admin shipments found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <!-- Card layout for small screens -->
            <div class="d-block d-md-none">
                @foreach ($shipments as $sh)
                    @php
                        $uniqueId = 'card-' . $sh->admin_shipment_id;
                        $badgeClass = match ($sh->status) {
                            'active' => 'active',
                            'canceled' => 'canceled',
                            'loading delayed', 'unloading delayed' => 'loading',
                            'ready to load', 'ready to unload' => 'ready',
                            default => '',
                        };
                    @endphp

                    <div class="p-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <p class="m-0"><strong>ID:</strong> {{ $sh->admin_shipment_id }}</p>
                                <p class="m-0"><strong>Admin:</strong> {{ optional($sh->admin)->name ?? '—' }}</p>
                            </div>
                            <button class="btn btn-sm btn-light toggle-btn" data-target="#{{ $uniqueId }}">
                                <img class="icon" src="{{ asset('images/arrow-up-simple.svg') }}" alt="Toggle"
                                    style="transition: transform 0.3s;">
                            </button>
                        </div>

                        <div id="{{ $uniqueId }}" class="mt-3 d-none expandable-section">
                            <p><strong>Vehicle:</strong> {{ optional($sh->vehicle)->license_plate ?? '—' }}</p>
                            <p><strong>Status:</strong> <span
                                    class="badge-status {{ $badgeClass }}">{{ ucwords($sh->status) }}</span></p>
                            <p><strong>Destination:</strong> {{ $sh->destination }}</p>
                            <p><strong>Info:</strong> {{ Str::limit($sh->basic_info, 25) }}</p>
                            <p><strong>Start Date:</strong> {{ \Carbon\Carbon::parse($sh->start_date)->format('Y-m-d') }}
                            </p>
                            <p><strong>Created:</strong> {{ $sh->created_at ? $sh->created_at->format('Y-m-d') : '—' }}</p>
                            <div class="text-end">
                                <a href="{{ route('admin.shipment.show', ['id' => $sh->admin_shipment_id]) }}"
                                    class="btn btn-light btn-sm">View</a>
                                <a href="{{ route('admin.shipment.edit', ['id' => $sh->admin_shipment_id]) }}"
                                    class="btn btn-light btn-sm">Edit</a>
                                <form action="{{ route('admin.shipment.destroy', ['id' => $sh->admin_shipment_id]) }}"
                                    method="POST" class="d-inline-block"
                                    onsubmit="return confirm('Delete this shipment?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-light btn-sm">Delete</button>
                                </form>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>


            {{-- Pagination & Show entries --}}
            <footer class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between p-3">
                <div class="d-flex align-items-center mb-2 mb-sm-0">
                    <span class="me-2">Show</span>
                    <form method="GET" class="d-inline">
                        @foreach (request()->except('per_page', 'page') as $key => $value)
                            <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                        @endforeach
                        <select name="per_page" class="form-select form-select-sm d-inline-block w-auto"
                            onchange="this.form.submit()">
                            @foreach ([10, 25, 50, 100] as $size)
                                <option value="{{ $size }}"
                                    {{ request('per_page', 10) == $size ? 'selected' : '' }}>
                                    {{ $size }}
                                </option>
                            @endforeach
                        </select>
                    </form>
                    <span class="ms-2">entries</span>
                </div>
                <div>
                    {{ $shipments->onEachSide(1)->links('pagination::bootstrap-4') }}
                </div>
            </footer>
        </div>
    </div>


    {{-- Filter Modal --}}
    <div class="modal fade" id="filterModal" tabindex="-1" aria-labelledby="filterModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form action="{{ route('admin.shipment.index') }}" method="GET" class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="filterModalLabel">Filter Shipments</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <label class="form-label mb-1">Status</label>
                    @php
                        $allStatuses = [
                            'active',
                            'canceled',
                            'loading delayed',
                            'unloading delayed',
                            'ready to load',
                            'ready to unload',
                        ];
                    @endphp
                    @foreach ($allStatuses as $status)
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="status"
                                id="status_{{ str_replace(' ', '_', $status) }}" value="{{ $status }}"
                                {{ request('status') === $status ? 'checked' : '' }}>
                            <label class="form-check-label" for="status_{{ str_replace(' ', '_', $status) }}">
                                {{ ucwords($status) }}
                            </label>
                        </div>
                    @endforeach
                    <div class="mt-3">
                        <label for="search" class="form-label">Search (ID, Destination, Admin...)</label>
                        <input type="text" name="search" id="search" class="form-control"
                            value="{{ request('search') }}" placeholder="Type to search…">
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <a href="{{ route('admin.shipment.index') }}" class="btn btn-light">Reset</a>
                    <button type="submit" class="btn btn-warning">Apply Filters</button>
                </div>
            </form>
        </div>
    </div>
@endsection