@extends('layouts.app')

@section('title', 'Detail : ' . $equipment->name)

@section('content')
<div style="color: #111827;">
    <!-- Breadcrumb & Actions -->
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
        <a href="{{ route('equipment.index') }}" style="display: flex; align-items: center; gap: 8px; color: #4b5563; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s;" onmouseover="this.style.color='#1d4ed8'" onmouseout="this.style.color='#4b5563'">
            <span style="font-size: 18px;">←</span> Kembali ke Daftar Equipment
        </a>
        <div style="display: flex; gap: 10px;">
            <a href="{{ route('equipment.edit', $equipment) }}" style="background: white; color: #374151; padding: 10px 18px; border-radius: 10px; font-weight: 600; font-size: 14px; text-decoration: none; border: 1px solid #e5e7eb; box-shadow: 0 1px 2px rgba(0,0,0,0.05); display: flex; align-items: center; gap: 8px; transition: all 0.2s;" onmouseover="this.style.background='#f9fafb'; this.style.borderColor='#d1d5db';" onmouseout="this.style.background='white'; this.style.borderColor='#e5e7eb';">
                <span>✏️</span> Edit
            </a>
            <form action="{{ route('equipment.destroy', $equipment) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus equipment ini?')" style="margin: 0;">
                @csrf
                @method('DELETE')
                <button type="submit" style="background: #fee2e2; color: #b91c1c; padding: 10px 18px; border-radius: 10px; font-weight: 600; font-size: 14px; border: 1px solid #fecaca; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s;" onmouseover="this.style.background='#fecaca'" onmouseout="this.style.background='#fee2e2'">
                    <span>🗑️</span> Hapus
                </button>
            </form>
        </div>
    </div>

    <!-- Page Header Card -->
    <div style="background: white; border-radius: 16px; padding: 32px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03); border: 1px solid #f3f4f6; margin-bottom: 24px; position: relative; overflow: hidden;">
        <div style="position: absolute; top: 0; right: 0; width: 300px; height: 100%; background: linear-gradient(225deg, #eff6ff 0%, transparent 70%); z-index: 0;"></div>
        
        <div style="position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end;">
            <div>
                <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;">
                    <span style="background: #1d4ed8; color: white; padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em;">EQUIPMENT</span>
                    <span style="color: #6b7280; font-size: 14px; font-weight: 500;">ID: {{ $equipment->code }}</span>
                </div>
                <h1 style="font-size: 32px; font-weight: 800; color: #111827; margin: 0; line-height: 1.2;">{{ $equipment->name }}</h1>
            </div>
            
            <div style="display: flex; gap: 12px;">
                @if(in_array(auth()->user()->role, ['mekanik', 'supervisor', 'super_admin']))
                <a href="{{ route('mechanic.scan.gateway', $equipment->code) }}" style="background: #1d4ed8; color: white; padding: 12px 24px; border-radius: 10px; font-weight: 600; font-size: 14px; text-decoration: none; box-shadow: 0 4px 12px rgba(29, 78, 216, 0.25); display: flex; align-items: center; gap: 10px; transition: all 0.2s;" onmouseover="this.style.background='#1e40af'; this.style.transform='translateY(-1px)';" onmouseout="this.style.background='#1d4ed8'; this.style.transform='translateY(0)';">
                    <span>🔧</span> Mulai Servis / Checklist
                </a>
                @endif
            </div>
        </div>
    </div>

    <!-- Summary Widgets -->
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-bottom: 32px;">
        <div style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border-left: 4px solid 
            @if($equipment->status === 'active') #22c55e @elseif($equipment->status === 'standby') #f59e0b @else #ef4444 @endif">
            <p style="color: #6b7280; font-size: 12px; font-weight: 600; text-transform: uppercase; margin: 0 0 8px;">Status Alat</p>
            <div style="display: flex; align-items: center; gap: 8px;">
                <div style="width: 10px; height: 10px; border-radius: 50%; background: @if($equipment->status === 'active') #22c55e @elseif($equipment->status === 'standby') #f59e0b @else #ef4444 @endif"></div>
                <span style="font-size: 20px; font-weight: 700; color: #111827;">{{ ucfirst($equipment->status) }}</span>
            </div>
        </div>
        
        <div style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border-left: 4px solid #3b82f6;">
            <p style="color: #6b7280; font-size: 12px; font-weight: 600; text-transform: uppercase; margin: 0 0 8px;">Lokasi Sekarang</p>
            <span style="font-size: 18px; font-weight: 700; color: #111827;">{{ $equipment->location?->name ?? 'Belum Ditentukan' }}</span>
        </div>
        
        <div style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border-left: 4px solid #6366f1;">
            <p style="color: #6b7280; font-size: 12px; font-weight: 600; text-transform: uppercase; margin: 0 0 8px;">Total Perbaikan</p>
            <span style="font-size: 20px; font-weight: 700; color: #111827;">{{ $equipment->repairs->count() }} <span style="font-size: 14px; font-weight: 500; color: #6b7280;">Kali</span></span>
        </div>
        
        <div style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border-left: 4px solid #ec4899;">
            <p style="color: #6b7280; font-size: 12px; font-weight: 600; text-transform: uppercase; margin: 0 0 8px;">Repair Aktif</p>
            <span style="font-size: 20px; font-weight: 700; color: #111827;">{{ $equipment->repairs->whereIn('status', ['open', 'in_progress'])->count() }} <span style="font-size: 14px; font-weight: 500; color: #6b7280;">Berjalan</span></span>
        </div>
    </div>

    @if(session('success'))
        <div style="background: #ecfdf5; border-left: 4px solid #10b981; color: #065f46; padding: 16px; border-radius: 8px; margin-bottom: 24px; font-size: 14px; font-weight: 500;">
            ✅ {{ session('success') }}
        </div>
    @endif

    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 24px; margin-bottom: 32px;">
        <!-- Detail Card -->
        <div style="background: white; border-radius: 16px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border: 1px solid #f3f4f6;">
            <h3 style="font-size: 18px; font-weight: 700; color: #111827; margin: 0 0 20px; display: flex; align-items: center; gap: 10px;">
                <span style="background: #f3f4f6; padding: 8px; border-radius: 8px;">📋</span> Informasi Dasar
            </h3>
            
            <div style="display: grid; gap: 16px;">
                <div style="display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #f3f4f6;">
                    <span style="color: #6b7280; font-size: 14px;">Nama Alat</span>
                    <span style="color: #111827; font-size: 14px; font-weight: 600;">{{ $equipment->name }}</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #f3f4f6;">
                    <span style="color: #6b7280; font-size: 14px;">Kode Aset</span>
                    <span style="color: #111827; font-size: 14px; font-weight: 600;">{{ $equipment->code }}</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #f3f4f6;">
                    <span style="color: #6b7280; font-size: 14px;">Operator Terkait</span>
                    <span style="color: #111827; font-size: 14px; font-weight: 600;">
                        @if($equipment->operator)
                            <a href="{{ route('operator.show', $equipment->operator) }}" style="color: #1d4ed8; text-decoration: none;">{{ $equipment->operator->name }}</a>
                        @else
                            <span style="color: #9ca3af; font-style: italic;">Belum Ada</span>
                        @endif
                    </span>
                </div>
                <div style="display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #f3f4f6;">
                    <span style="color: #6b7280; font-size: 14px;">Lokasi Warehouse</span>
                    <span style="color: #111827; font-size: 14px; font-weight: 600;">{{ $equipment->warehouse->name ?? 'Semper' }}</span>
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <span style="color: #6b7280; font-size: 14px;">Terakhir Diperbarui</span>
                    <span style="color: #111827; font-size: 14px; font-weight: 600;">{{ $equipment->updated_at->format('d M Y, H:i') }}</span>
                </div>
            </div>
        </div>

        <!-- SILO Card -->
        <div style="background: white; border-radius: 16px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border: 1px solid #f3f4f6;">
            <h3 style="font-size: 18px; font-weight: 700; color: #111827; margin: 0 0 20px; display: flex; align-items: center; gap: 10px;">
                <span style="background: #f3f4f6; padding: 8px; border-radius: 8px;">🛡️</span> Dokumen SILO
            </h3>

            @if($equipment->silo_number)
                <div style="background: @if($equipment->isSiloExpiredAndLocked()) #fef2f2 @else #f0fdf4 @endif; border: 1px solid @if($equipment->isSiloExpiredAndLocked()) #fecaca @else #bbf7d0 @endif; border-radius: 12px; padding: 16px; margin-bottom: 20px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                        <div>
                            <p style="color: #6b7280; font-size: 11px; font-weight: 700; text-transform: uppercase; margin: 0 0 2px;">Nomor Lisensi</p>
                            <p style="color: #111827; font-size: 16px; font-weight: 800; margin: 0;">{{ $equipment->silo_number }}</p>
                        </div>
                        <span style="padding: 4px 12px; border-radius: 50px; font-size: 12px; font-weight: 700; background: @if($equipment->isSiloExpiredAndLocked()) #fee2e2 @else #dcfce7 @endif; color: @if($equipment->isSiloExpiredAndLocked()) #b91c1c @else #166534 @endif;">
                            @if($equipment->isSiloExpiredAndLocked()) EXPIRED @else ACTIVE @endif
                        </span>
                    </div>
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <span style="font-size: 13px; color: #4b5563;">Berlaku hingga: <strong>{{ \Carbon\Carbon::parse($equipment->silo_expire_date)->format('d M Y') }}</strong></span>
                        @if($equipment->silo_file_path)
                            <a href="{{ asset('storage/' . $equipment->silo_file_path) }}" target="_blank" style="color: #1d4ed8; font-size: 13px; font-weight: 600; text-decoration: none; display: flex; align-items: center; gap: 4px;">📂 Lihat File</a>
                        @endif
                    </div>
                </div>
            @else
                <div style="background: #fffbeb; border: 1px solid #fef3c7; border-radius: 12px; padding: 16px; margin-bottom: 20px; color: #92400e; font-size: 14px;">
                    ⚠️ Dokumen SILO belum terdaftar untuk alat ini.
                </div>
            @endif

            @if(in_array(auth()->user()->role, ['bos', 'super_admin', 'supervisor']))
                <div style="border-top: 1px solid #f3f4f6; pt: 20px; padding-top: 20px;">
                    <p style="font-size: 14px; font-weight: 700; color: #111827; margin-bottom: 12px;">Update Dokumen SILO</p>
                    <form action="{{ route('equipment.silo.store', $equipment) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div style="display: grid; gap: 12px;">
                            <input type="text" name="silo_number" placeholder="Input Nomor SILO Baru" value="{{ old('silo_number', $equipment->silo_number) }}" required style="width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid #e5e7eb; font-size: 14px;">
                            <input type="date" name="silo_expire_date" value="{{ old('silo_expire_date', $equipment->silo_expire_date ? \Carbon\Carbon::parse($equipment->silo_expire_date)->format('Y-m-d') : '') }}" required style="width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid #e5e7eb; font-size: 14px;">
                            <div style="position: relative;">
                                <input type="file" name="silo_file" accept=".pdf,.jpg,.jpeg,.png" required style="width: 100%; padding: 8px; font-size: 13px;">
                                <p style="font-size: 11px; color: #9ca3af; margin-top: 4px;">Format: PDF/JPG (Max 4MB)</p>
                            </div>
                            <button type="submit" style="background: #111827; color: white; padding: 12px; border-radius: 10px; font-weight: 600; font-size: 14px; border: none; cursor: pointer; margin-top: 8px; transition: background 0.2s;" onmouseover="this.style.background='#1f2937'" onmouseout="this.style.background='#111827'">
                                Simpan Perubahan Dokumen
                            </button>
                        </div>
                    </form>
                </div>

        <!-- Maintenance Card -->
        <div style="background: white; border-radius: 16px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border: 1px solid #f3f4f6;">
            <h3 style="font-size: 18px; font-weight: 700; color: #111827; margin: 0 0 20px; display: flex; align-items: center; gap: 10px;">
                <span style="background: #f3f4f6; padding: 8px; border-radius: 8px;">⚙️</span> Jadwal Servis Rutin
            </h3>

            @if($equipment->next_service_hm)
                @php
                    $warn = $equipment->isServiceWarning();
                    $due = $equipment->isServiceDue();
                    $pct = $equipment->getServiceProgressPercentage();
                    $bg = '#f0fdf4'; $border = '#bbf7d0'; $text = '#166534'; $label = 'AMAN'; $labelBg = '#dcfce7'; $barColor = '#22c55e';
                    if ($due) {
                        $bg = '#fef2f2'; $border = '#fecaca'; $text = '#b91c1c'; $label = 'OVERDUE'; $labelBg = '#fee2e2'; $barColor = '#ef4444';
                    } elseif ($warn) {
                        $bg = '#fffbeb'; $border = '#fde68a'; $text = '#b45309'; $label = 'SEGERA SERVIS'; $labelBg = '#fef3c7'; $barColor = '#f59e0b';
                    }
                @endphp
                <div style="background: {{ $bg }}; border: 1px solid {{ $border }}; border-radius: 12px; padding: 16px; margin-bottom: 20px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                        <div>
                            <p style="color: #6b7280; font-size: 11px; font-weight: 700; text-transform: uppercase; margin: 0 0 2px;">Hour Meter / Target (HM)</p>
                            <p style="color: #111827; font-size: 16px; font-weight: 800; margin: 0;">{{ $equipment->last_hour_meter ?? 0 }} / {{ $equipment->next_service_hm }} Jam</p>
                        </div>
                        <span style="padding: 4px 12px; border-radius: 50px; font-size: 12px; font-weight: 700; background: {{ $labelBg }}; color: {{ $text }};">
                            {{ $label }}
                        </span>
                    </div>
                    <!-- Progress Bar -->
                    <div style="width: 100%; height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; margin-bottom: 8px;">
                        <div style="height: 100%; background: {{ $barColor }}; border-radius: 4px; width: {{ $pct }}%; transition: width 0.5s ease;"></div>
                    </div>
                    <div style="font-size: 11px; color: #6b7280; text-align: right;"> Progress: {{ $pct }}%</div>
                </div>
            @else
                <div style="background: #f9fafb; border: 1px dashed #d1d5db; border-radius: 12px; padding: 16px; margin-bottom: 20px; color: #4b5563; font-size: 14px; text-align: center;">
                    Belum ada target servis rutin (HM) yang ditetapkan untuk alat ini.
                </div>
            @endif

            @if(in_array(auth()->user()->role, ['mekanik', 'supervisor', 'super_admin', 'bos']))
                <div style="border-top: 1px solid #f3f4f6; padding-top: 20px;">
                    <p style="font-size: 14px; font-weight: 700; color: #111827; margin-bottom: 12px;">Tetapkan Target Servis Baru (HM)</p>
                    <form action="{{ route('equipment.maintenance.update', $equipment) }}" method="POST">
                        @csrf
                        <div style="display: flex; gap: 12px;">
                            <input type="number" step="0.01" name="next_service_hm" placeholder="Contoh Target: 1500" value="{{ old('next_service_hm', $equipment->next_service_hm) }}" required style="flex: 1; min-width: 0; padding: 10px 14px; border-radius: 10px; border: 1px solid #e5e7eb; font-size: 14px;">
                            <button type="submit" style="background: #111827; color: white; padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: 14px; border: none; cursor: pointer; transition: background 0.2s;" onmouseover="this.style.background='#1f2937'" onmouseout="this.style.background='#111827'">
                                Simpan Target
                            </button>
                        </div>
                    </form>
                </div>
            @endif
        </div>
            @endif
        </div>
    </div>

    <!-- Repair History Section -->
    <div style="background: white; border-radius: 16px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border: 1px solid #f3f4f6;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
            <h3 style="font-size: 18px; font-weight: 700; color: #111827; margin: 0; display: flex; align-items: center; gap: 10px;">
                <span style="background: #f3f4f6; padding: 8px; border-radius: 8px;">🔧</span> Riwayat Perbaikan
            </h3>
            <span style="font-size: 13px; color: #6b7280; background: #f9fafb; padding: 4px 12px; border-radius: 50px; border: 1px solid #e5e7eb;">Menampilkan 10 data terakhir</span>
        </div>

        @if($equipment->repairs->count() > 0)
            <div style="overflow-x: auto;">
                <table style="width: 100%; border-collapse: collapse;">
                    <thead>
                        <tr style="border-bottom: 2px solid #f3f4f6;">
                            <th style="padding: 12px 16px; text-align: left; font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase;">Waktu</th>
                            <th style="padding: 12px 16px; text-align: left; font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase;">Status</th>
                            <th style="padding: 12px 16px; text-align: left; font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase;">Mekanik</th>
                            <th style="padding: 12px 16px; text-align: left; font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase;">Catatan & Progress</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($equipment->repairs->sortByDesc('created_at')->take(10) as $repair)
                            <tr style="border-bottom: 1px solid #f3f4f6; transition: background 0.1s;" onmouseover="this.style.background='#fcfcfd'" onmouseout="this.style.background='transparent'">
                                <td style="padding: 16px; font-size: 14px; color: #111827; font-weight: 500;">
                                    {{ $repair->created_at->format('d M Y') }}
                                    <div style="font-size: 11px; color: #9ca3af; margin-top: 2px;">{{ $repair->created_at->format('H:i') }} WIB</div>
                                </td>
                                <td style="padding: 16px;">
                                    <span style="padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase;
                                        @if($repair->status === 'completed') background: #dcfce7; color: #166534; @elseif($repair->status === 'in_progress') background: #dbeafe; color: #1e40af; @else background: #fef9c3; color: #854d0e; @endif">
                                        {{ str_replace('_', ' ', $repair->status) }}
                                    </span>
                                </td>
                                <td style="padding: 16px;">
                                    <div style="display: flex; align-items: center; gap: 8px;">
                                        <div style="width: 24px; height: 24px; border-radius: 50%; background: #f3f4f6; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #4b5563;">
                                            {{ strtoupper(substr($repair->mechanic?->name ?? '?', 0, 1)) }}
                                        </div>
                                        <span style="font-size: 14px; color: #111827; font-weight: 500;">{{ $repair->mechanic?->name ?? 'Belum Ditugaskan' }}</span>
                                    </div>
                                </td>
                                <td style="padding: 16px;">
                                    <div style="font-size: 13px; color: #4b5563; max-width: 400px; line-height: 1.5;">
                                        @if($repair->mechanic_notes)
                                            <p style="margin: 0;">{{ $repair->mechanic_notes }}</p>
                                        @else
                                            <span style="color: #9ca3af; font-style: italic;">Tidak ada catatan</span>
                                        @endif
                                        
                                        @if($repair->spare_parts_requested_notes)
                                            <div style="margin-top: 4px; color: #92400e; font-size: 11px;">
                                                <strong>🛠️ Spareparts:</strong> {{ $repair->spare_parts_requested_notes }}
                                            </div>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div style="padding: 48px; text-align: center; background: #f9fafb; border-radius: 12px; border: 2px dashed #e5e7eb;">
                <p style="color: #9ca3af; font-size: 14px; margin: 0;">Belum ada catatan perbaikan untuk alat ini.</p>
            </div>
        @endif
        
        <div style="margin-top: 24px; display: flex; justify-content: center;">
            <a href="{{ route('servis.index', ['equipment_id' => $equipment->id]) }}" style="color: #1d4ed8; font-size: 14px; font-weight: 600; text-decoration: none;">Lihat Semua Detail Perbaikan →</a>
        </div>
    </div>
</div>
@endsection