@extends('layouts.app')

@section('title', 'Pilih Equipment - Pre-Start Check')

@section('content')
    <div
        style="background-color: #dcdcdc; min-height: 100vh; padding: 4rem 1rem; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
        <div style="max-width: 1100px; margin: 0 auto;">

            <!-- Header Section -->
            <div style="display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; margin-bottom: 2rem;">

                <!-- Title Box -->
                <div
                    style="background-color: white; border-radius: 10px; padding: 14px 24px; box-shadow: 0 1px 2px rgba(0,0,0,0.05);">
                    <h1 style="font-size: 16px; font-weight: 600; color: #1f2937; margin: 0 0 2px 0;">Pilih Equipment untuk
                        Scan</h1>
                    <p style="font-size: 12px; color: #4b5563; margin: 0;">Pilih kendaraan yang ingin melakukan pre-start
                        check</p>
                </div>

                <!-- Search Input -->
                <div style="position: relative; width: 100%; max-width: 260px;">
                    <input id="searchInput" type="text" placeholder="Cari Kode Kendaraan"
                        style="width: 100%; border: none; background-color: white; padding: 12px 40px 12px 16px; font-size: 13px; color: #1f2937; border-radius: 10px; outline: none; box-shadow: 0 1px 2px rgba(0,0,0,0.05);" />
                    <span
                        style="position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #6b7280; display: flex; align-items: center;">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"
                            style="width: 16px; height: 16px;">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                    </span>
                </div>

            </div>

            @if(session('error'))
                <div
                    style="margin-bottom: 1.5rem; background-color: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; padding: 1rem 1.5rem; border-radius: 10px; font-size: 14px;">
                    {{ session('error') }}
                </div>
            @endif

            @if($equipments->count() > 0)
                <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.25rem;"
                    id="equipmentList">
                    @foreach($equipments as $equipment)
                        @php
                            $statusStyles = [
                                'active' => 'background-color: #007bff; color: white;',
                                'standby' => 'background-color: #00e335; color: white;',
                                'damaged' => 'background-color: #ff0000; color: white;',
                                'default' => 'background-color: #6b7280; color: white;',
                            ];

                            $rawStatus = $equipment->status ?? 'default';
                            $statusKey = strtolower(str_replace([' ', '_'], '', $rawStatus));

                            if (!array_key_exists($statusKey, $statusStyles)) {
                                if (str_contains($statusKey, 'aktif') || str_contains($statusKey, 'active'))
                                    $statusKey = 'active';
                                elseif (str_contains($statusKey, 'stand') || str_contains($statusKey, 'ready'))
                                    $statusKey = 'standby';
                                elseif (str_contains($statusKey, 'rusak') || str_contains($statusKey, 'damage'))
                                    $statusKey = 'damaged';
                                else
                                    $statusKey = 'default';
                            }

                            $statusStyle = $statusStyles[$statusKey];

                            $statusText = $rawStatus;
                            if ($statusKey === 'standby')
                                $statusText = 'Stand By';
                            if ($statusKey === 'active')
                                $statusText = 'Active';
                            if ($statusKey === 'damaged')
                                $statusText = 'Damaged';
                        @endphp

                        <a href="{{ route('equipment.scan.show', $equipment) }}" class="equipment-item"
                            style="display: flex; justify-content: space-between; background-color: white; padding: 1.25rem 1.5rem; border-radius: 10px; text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s;"
                            onmouseover="this.style.boxShadow='0 4px 6px rgba(0,0,0,0.1)';"
                            onmouseout="this.style.boxShadow='0 1px 3px rgba(0,0,0,0.05)';"
                            data-code="{{ strtolower($equipment->code) }}" data-name="{{ strtolower($equipment->name) }}">

                            <!-- Left text block stacked together -->
                            <div style="display: flex; flex-direction: column; justify-content: center; gap: 2px;">
                                <div style="color: #374151; font-size: 13px;">{{ $equipment->code }}</div>
                                <div style="color: #111827; font-size: 14px; font-weight: 500;">{{ $equipment->name }}</div>
                                <div style="color: #4b5563; font-size: 13px;">Lokasi:
                                    {{ $equipment->location?->name ?? 'Area tidak tersedia' }}</div>
                            </div>

                            <!-- Right block (status at top, link at bottom) -->
                            <div
                                style="display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;">
                                <span
                                    style="display: inline-block; padding: 3px 14px; border-radius: 50px; font-size: 10px; font-weight: 600; text-align: center; {{ $statusStyle }}">
                                    {{ $statusText }}
                                </span>

                                <div
                                    style="color: #1f2937; font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 4px; margin-top: 1rem;">
                                    Mulai Check <span style="font-weight: bold; font-size: 14px;">></span>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>

                <!-- No Results -->
                <div id="noResults" style="display: none; text-align: center; padding: 3rem 0;">
                    <p style="color: #6b7280; font-size: 1.125rem;">Equipment tidak ditemukan</p>
                </div>
            @else
                <div
                    style="background-color: white; padding: 3rem; text-align: center; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
                    <p style="color: #4b5563; margin-bottom: 1rem;">Tidak ada equipment yang tersedia untuk di-scan</p>
                    <a href="{{ route('dashboard') }}"
                        style="display: inline-block; background-color: #2563eb; color: white; padding: 0.5rem 1.5rem; border-radius: 10px; font-weight: 500; text-decoration: none;">
                        Kembali ke Dashboard
                    </a>
                </div>
            @endif
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const searchInput = document.getElementById('searchInput');
            if (searchInput) {
                searchInput.addEventListener('input', function () {
                    const searchTerm = this.value.toLowerCase();
                    const items = document.querySelectorAll('.equipment-item');
                    let visibleCount = 0;

                    items.forEach(item => {
                        const code = item.getAttribute('data-code');
                        const name = item.getAttribute('data-name');

                        if (code.includes(searchTerm) || name.includes(searchTerm)) {
                            item.style.display = 'flex';
                            visibleCount++;
                        } else {
                            item.style.display = 'none';
                        }
                    });

                    document.getElementById('noResults').style.display = visibleCount > 0 ? 'none' : 'block';
                });
            }
        });
    </script>
@endsection