@extends('layouts.app')

@section('title', 'Pilih Alat - Servis Check Mekanik')

@section('content')
    <div style="background-color: #dcdcdc; min-height: 100vh; padding: 4rem 1rem;">
        <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;">
                <div style="background-color: white; border-radius: 10px; padding: 14px 24px; box-shadow: 0 1px 2px rgba(0,0,0,0.05);">
                    <div style="display:flex; align-items:center; gap:8px; margin-bottom:2px;">
                        <span style="font-size:18px;">🔧</span>
                        <h1 style="font-size: 16px; font-weight: 600; color: #1f2937; margin: 0;">Scan QR — Servis Check Mekanik</h1>
                    </div>
                    <p style="font-size: 12px; color: #4b5563; margin: 0;">Pilih alat yang akan Anda servis atau periksa</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($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
                            $activeRepair = $equipment->repairs()->whereIn('status', ['open', 'in_progress'])->latest()->first();
                            $isUnderRepair = $activeRepair && $activeRepair->status === 'in_progress';
                            
                            if ($isUnderRepair) {
                                $statusText = 'Sedang Dikerjakan';
                                $statusStyle = 'background-color: #4f46e5; color: white;';
                            } else {
                                $statusStyle = $equipment->status === 'damaged'
                                    ? 'background-color: #ef4444; color: white;'
                                    : ($equipment->status === 'active'
                                        ? 'background-color: #22c55e; color: white;'
                                        : 'background-color: #f59e0b; color: white;');
                                $statusText = $equipment->status === 'damaged' ? 'Rusak' : ($equipment->status === 'active' ? 'Active' : 'Stand By');
                            }
                            $hasActiveRepair = (bool)$activeRepair;
                        @endphp
                        <a href="{{ route('mechanic.scan.gateway', $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; {{ $hasActiveRepair ? 'border-left: 4px solid #ef4444;' : '' }}"
                            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) }}">

                            <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;">{{ $equipment->location?->name ?? 'Lokasi tidak tersedia' }}</div>
                                @if($hasActiveRepair)
                                    <div style="color: #ef4444; font-size: 12px; font-weight: 600; margin-top: 4px;">⚠️ Ada perbaikan aktif</div>
                                @endif
                            </div>

                            <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;">
                                    Servis <span style="font-weight: bold; font-size: 14px;">></span>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>

                <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</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