@extends('layouts.montir')

@section('title', 'Dashboard Montir')

@section('content')
<div class="container-fluid px-4 py-6">

    <div class="flex justify-between items-center mb-8">
        <div>
            <h1 class="text-3xl font-bold text-gray-800">Dashboard</h1>
            <p class="text-gray-600 mt-1">
                Selamat datang, {{ auth()->user()->name }}!
            </p>
        </div>
        <div>
            <a href="{{ route('montir.dashboard.export') }}" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow flex items-center gap-2">
                <i class="fas fa-file-pdf"></i> Export Rekap
            </a>
        </div>
    </div>

    <!-- PANDUAN BANNER -->
    <div class="bg-gradient-to-r from-orange-500 to-yellow-500 rounded-xl shadow-lg p-6 mb-8 text-white relative overflow-hidden">
        <div class="relative z-10 flex flex-col md:flex-row justify-between items-center">
            <div class="mb-4 md:mb-0">
                <h2 class="text-2xl font-bold mb-1">Panduan Penggunaan Alat</h2>
                <p class="opacity-90">Pelajari tata cara pengecekan menggunakan alat inspeksi yang benar.</p>
            </div>
            <a href="{{ route('guide.alat') }}" class="bg-white text-orange-600 font-bold py-3 px-8 rounded-lg shadow hover:bg-gray-100 transition whitespace-nowrap">
                <i class="fas fa-book-open me-2"></i> Buka Panduan
            </a>
        </div>
        <i class="fas fa-tools absolute -bottom-4 -right-4 text-white opacity-10 text-9xl transform rotate-12"></i>
    </div>

    <!-- STATS -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-white p-6 rounded shadow">
            <p>Total Inspeksi</p>
            <h3 class="text-3xl font-bold">{{ $stats['total_inspeksi'] }}</h3>
        </div>
        <div class="bg-white p-6 rounded shadow">
            <p>Draft</p>
            <h3 class="text-3xl font-bold">{{ $stats['draft'] }}</h3>
        </div>
        <div class="bg-white p-6 rounded shadow">
            <p>Pending</p>
            <h3 class="text-3xl font-bold text-yellow-600">{{ $stats['pending'] }}</h3>
        </div>
        <div class="bg-white p-6 rounded shadow">
            <p>Selesai</p>
            <h3 class="text-3xl font-bold text-green-600">{{ $stats['selesai'] }}</h3>
        </div>
    </div>

    <!-- INSPEKSI TERBARU -->
    <div class="bg-white rounded shadow overflow-hidden">
        <table class="w-full">
            <thead class="bg-gray-100">
                <tr>
                    <th class="px-4 py-2">Tanggal</th>
                    <th class="px-4 py-2">Customer</th>
                    <th class="px-4 py-2">Progress</th>
                    <th class="px-4 py-2">Status</th>
                    <th class="px-4 py-2 text-center">Aksi</th>
                </tr>
            </thead>
            <tbody>
            @forelse($inspeksi_terbaru as $item)
                <tr class="border-t">
                    <td class="px-4 py-2">
                        {{ $item->inspection_date?->format('d/m/Y') ?? '-' }}
                    </td>
                    <td class="px-4 py-2 font-medium">
                        {{ $item->customer_name }}
                    </td>
                    <td class="px-4 py-2">
                        {{ $item->current_step }}/20
                    </td>
                    <td class="px-4 py-2">
                        {{ ucfirst($item->status) }}
                    </td>
                    <td class="px-4 py-2 text-center flex gap-2 justify-center">

                        <a href="{{ route('montir.my-inspeksi.show', $item->id) }}"
                           class="text-blue-600 hover:underline">
                            Detail
                        </a>

                        <!-- Tombol Export selalu muncul -->
                        <a href="{{ route('montir.export-pdf', $item->id) }}"
                           class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded text-sm">
                            <i class="fas fa-file-pdf"></i> Export
                        </a>

                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="5" class="text-center py-8 text-gray-500">
                        Belum ada inspeksi
                    </td>
                </tr>
            @endforelse
            </tbody>
        </table>
    </div>

</div>
@endsection