@extends('layouts.admin')

@section('title', 'Equipment / Vehicles')

@section('content')
    <x-page-header
        title="Equipment & Vehicles"
        :breadcrumbs="[
            ['label' => 'Admin', 'href' => route('admin.dashboard')],
            ['label' => 'Equipment'],
        ]"
        subtitle="Track and manage machinery, tools, and fleet assets."
    >
        <x-slot:actions>
            <x-button :href="route('admin.equipment.create')">
                <svg class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 3a1 1 0 0 1 1 1v5h5a1 1 0 1 1 0 2h-5v5a1 1 0 1 1-2 0v-5H4a1 1 0 1 1 0-2h5V4a1 1 0 0 1 1-1z" clip-rule="evenodd" />
                </svg>
                Add Asset
            </x-button>
        </x-slot:actions>
    </x-page-header>

    <div class="dashboard-stats">
        <div class="dashboard-card dashboard-card--projects">
            <div class="dashboard-card__icon">
                <svg width="80" height="80" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
                </svg>
            </div>
            <p class="dashboard-card__label">Total Assets</p>
            <p class="dashboard-card__value">{{ $equipment->total() }}</p>
        </div>

        <div class="dashboard-card dashboard-card--engineers">
            <div class="dashboard-card__icon">
                <svg width="80" height="80" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M22 4 12 14.01 9 11.01" />
                </svg>
            </div>
            <p class="dashboard-card__label">In Service</p>
            <p class="dashboard-card__value">85%</p>
        </div>

        <div class="dashboard-card dashboard-card--tasks">
            <div class="dashboard-card__icon">
                <svg width="80" height="80" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
                </svg>
            </div>
            <p class="dashboard-card__label">Maintenance</p>
            <p class="dashboard-card__value">4 Due</p>
        </div>
    </div>

    <x-card class="mb-4" padding="p-5">
        <form method="GET" class="flex flex-col sm:flex-row gap-3 sm:items-end sm:justify-between">
            <div class="w-full sm:max-w-lg">
                <label class="text-xs font-medium text-zinc-600">Search</label>
                <input
                    name="q"
                    value="{{ request('q') }}"
                    placeholder="Name, type, model, serial number..."
                    class="mt-1 w-full h-10 rounded-xl border-zinc-300 focus:border-indigo-500 focus:ring-indigo-500"
                >
            </div>
            <div class="flex gap-2">
                <x-button type="submit" variant="secondary">Search</x-button>
                <x-button :href="route('admin.equipment.index')" variant="ghost">Reset</x-button>
            </div>
        </form>
    </x-card>

    <x-table-wrapper>
        <table class="min-w-full text-sm">
            <thead class="text-xs font-semibold uppercase tracking-wider text-zinc-500 bg-zinc-50">
                <tr>
                    <th class="text-left px-4 py-3">Name</th>
                    <th class="text-left px-4 py-3">Type</th>
                    <th class="text-left px-4 py-3">Model</th>
                    <th class="text-left px-4 py-3">Serial</th>
                    <th class="text-left px-4 py-3">Status</th>
                    <th class="text-right px-4 py-3">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-zinc-100">
                @forelse ($equipment as $e)
                    <tr class="hover:bg-zinc-50/60">
                        <td class="px-4 py-3 font-medium text-zinc-900">{{ $e->name }}</td>
                        <td class="px-4 py-3 text-zinc-700">{{ $e->type ? ucfirst($e->type) : '-' }}</td>
                        <td class="px-4 py-3 text-zinc-700">{{ $e->model ?? '-' }}</td>
                        <td class="px-4 py-3 text-zinc-700 font-mono text-xs">{{ $e->serial_number ?? '-' }}</td>
                        <td class="px-4 py-3 whitespace-nowrap">
                            <x-status-badge :value="$e->status" :label="ucfirst($e->status)" />
                        </td>
                        <td class="px-4 py-3 text-right">
                            <div class="flex items-center justify-end gap-2">
                                <x-button :href="route('admin.equipment.edit', $e)" variant="ghost" size="sm">Edit</x-button>
                                <form method="POST" action="{{ route('admin.equipment.destroy', $e) }}" onsubmit="return confirm('Delete this equipment?')">
                                    @csrf
                                    @method('DELETE')
                                    <x-button type="submit" variant="secondary" size="sm">Delete</x-button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-4 py-10 text-center text-zinc-500">No equipment found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </x-table-wrapper>

    <div class="mt-4">
        {{ $equipment->links() }}
    </div>
@endsection