@extends('layouts.app')

@section('title', 'Pilih Tindakan: ' . $equipment->code)

@section('content')
    <div
        style="background-color: #dcdcdc; min-height: 100vh; padding: 4rem 1rem;">
        <div style="max-width: 1100px; margin: 0 auto;">

            <div style="text-align: center; margin-bottom: 2.5rem;">
                <h1 style="font-size: 24px; font-weight: 800; color: #111827; margin: 0 0 8px 0;">Pilih Tindakan (Gateway)
                </h1>
                <p style="font-size: 16px; color: #4b5563; margin: 0;">Apa yang ingin Anda lakukan dengan peralatan
                    {{ $equipment->code }} saat ini?</p>
            </div>

            <!-- Info SIO & SILO (Data Real) -->
            <div
                style="background-color: white; padding: 1.25rem 1.5rem; border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; border-left: 4px solid {{ ($sioExpired || $siloExpired) ? '#dc2626' : '#007bff' }};">
                <div style="display: flex; gap: 3rem; flex-wrap: wrap;">
                    <div>
                        <div
                            style="font-size: 12px; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;">
                            Data Lisensi Operator</div>
                        <div style="font-size: 15px; font-weight: 700; color: #111827;">No. SIO:
                            {{ auth()->user()->sio_number ?? 'Belum terdaftar' }}</div>
                        <div style="font-size: 12px; font-weight: 600; color: {{ $sioExpired ? '#dc2626' : '#059669' }};">
                            Valid s/d:
                            {{ auth()->user()->sio_expire_date ? \Carbon\Carbon::parse(auth()->user()->sio_expire_date)->format('d M Y') : '-' }}
                            @if(auth()->user()->sio_override_until && \Carbon\Carbon::parse(auth()->user()->sio_override_until)->isFuture())
                                (Override Aktif)
                            @endif
                        </div>
                    </div>
                    <div>
                        <div
                            style="font-size: 12px; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;">
                            Data Lisensi Alat Terpilih</div>
                        <div style="font-size: 15px; font-weight: 700; color: #111827;">No. SILO:
                            {{ $equipment->silo_number ?? 'Belum terdaftar' }}</div>
                        <div style="font-size: 12px; font-weight: 600; color: {{ $siloExpired ? '#dc2626' : '#059669' }};">
                            Valid s/d:
                            {{ $equipment->silo_expire_date ? \Carbon\Carbon::parse($equipment->silo_expire_date)->format('d M Y') : '-' }}
                            @if($equipment->silo_override_until && \Carbon\Carbon::parse($equipment->silo_override_until)->isFuture())
                                (Override Aktif)
                            @endif
                        </div>
                    </div>
                </div>
                <div>
                    @if($sioExpired || $siloExpired)
                        <span
                            style="background-color: #fef2f2; color: #991b1b; padding: 6px 14px; border-radius: 50px; font-size: 12px; font-weight: 700; border: 1px solid #f87171; display: inline-flex; align-items: center; gap: 4px;">⛔
                            Berkas Kedaluwarsa</span>
                    @else
                        <span
                            style="background-color: #d1fae5; color: #065f46; padding: 6px 14px; border-radius: 50px; font-size: 12px; font-weight: 700; border: 1px solid #34d399; display: inline-flex; align-items: center; gap: 4px;">✅
                            Berkas Lengkap & Aktif</span>
                    @endif
                </div>
            </div>

            @if($sioExpired || $siloExpired)
                <div
                    style="background-color: #fef2f2; border: 1px solid #fecaca; margin-bottom: 2rem; padding: 2rem; border-radius: 12px; text-align: center;">
                    <div style="font-size: 3rem; margin-bottom: 1rem;">⛔</div>
                    <h2 style="font-size: 20px; color: #b91c1c; font-weight: 800; margin-bottom: 1rem;">LISENSI KEDALUWARSA</h2>
                    <p style="color: #991b1b; margin-bottom: 1.5rem;">
                        @if($sioExpired) SIO Operator Anda telah melewati masa tenggang. <br>@endif
                        @if($siloExpired) SILO Kendaraan ini telah melewati masa tenggang. <br>@endif
                        Menunggu pengesahan dari kepolisian/Dinas. Anda tidak dapat memakai atau mengubah status kendaraan ini.
                    </p>

                    <form action="{{ route('equipment.scan.override', $equipment->code) }}" method="POST">
                        @csrf
                        <input type="hidden" name="type" value="{{ $sioExpired ? 'sio' : 'silo' }}">

                        @if(($sioExpired && $pendingSioRequest) || ($siloExpired && $pendingSiloRequest))
                            <button type="button" disabled
                                style="padding: 12px 24px; background: #fca5a5; color: white; border: none; border-radius: 8px; font-weight: 700; font-size: 15px;">⏳
                                Menunggu Approval Supervisor...</button>
                        @else
                            <button type="submit"
                                style="padding: 12px 24px; background: #dc2626; color: white; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 15px; box-shadow: 0 4px 6px rgba(220,38,38,0.3);">
                                Minta Approval ke Supervisor
                            </button>
                        @endif
                    </form>
                </div>
            @else
                @if(isset($isOperatedByOther) && $isOperatedByOther)
                    <div style="background-color: #fffbeb; border: 1px solid #fde68a; margin-bottom: 2rem; padding: 1.5rem; border-radius: 12px; text-align: center; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
                        <div style="font-size: 36px; margin-bottom: 8px;">⚠️</div>
                        <h2 style="font-size: 18px; color: #b45309; font-weight: 800; margin-bottom: 8px;">ALAT SEDANG DIGUNAKAN OLEH ORANG LAIN</h2>
                        <p style="color: #92400e; margin: 0; font-size: 14px; line-height: 1.5;">
                            Saat ini terdaftar beroperasi di bawah nama <strong>{{ $currentOperatorName }}</strong>. <br>
                            Anda tidak dapat mengambil alih penggunaannya sebelum operator tersebut menyelesaikan jam kerjanya (Form Close).
                        </p>
                    </div>
                @endif

                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">

                    @if(!isset($isOperatedByOther) || !$isOperatedByOther)
                    <!-- Opsi 1: Mulai Operasional -->
                    <a href="{{ route('equipment.scan.form', $equipment->code) }}"
                        style="display: flex; flex-direction: column; justify-content: space-between; background-color: white; padding: 1.5rem; border-radius: 12px; text-decoration: none; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s;"
                        onmouseover="this.style.boxShadow='0 4px 10px rgba(0,0,0,0.1)';"
                        onmouseout="this.style.boxShadow='0 2px 4px rgba(0,0,0,0.05)';">
                        <div>
                            <div
                                style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px;">
                                <div>
                                    <div style="color: #374151; font-size: 14px; font-weight: 600; margin-bottom: 4px;">TINDAKAN
                                        1</div>
                                    <div style="color: #111827; font-size: 18px; font-weight: 700;">{{ $isOperating ? 'Akhiri Operasional' : 'Mulai Operasional' }}</div>
                                </div>
                                <span
                                    style="display: inline-block; padding: 4px 12px; border-radius: 50px; font-size: 11px; font-weight: 600; background-color: #007bff; color: white;">
                                    Normal
                                </span>
                            </div>
                            <p style="color: #4b5563; font-size: 13px; line-height: 1.5; margin: 0;">Lanjutkan untuk mengisi
                                form checklist (Pre-Check Start) secara penuh sebelum menggunakan alat untuk shift sekarang.</p>
                        </div>
                        <div style="color: #1f2937; font-size: 13px; font-weight: 600; text-align: right; margin-top: 24px;">
                            Mulai Check <span style="font-weight: 800; font-size: 14px;">></span>
                        </div>
                    </a>

                    @if(!$isOperating)
                    <!-- Opsi 2: Stand By -->
                    <form action="{{ route('equipment.scan.gateway', $equipment->code) }}" method="POST"
                        style="margin: 0; padding: 0; display: contents;">
                        @csrf
                        <input type="hidden" name="action" value="standby">
                        <button type="submit"
                            style="text-align: left; border: none; outline: none; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; background-color: white; padding: 1.5rem; border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s;"
                            onmouseover="this.style.boxShadow='0 4px 10px rgba(0,0,0,0.1)';"
                            onmouseout="this.style.boxShadow='0 2px 4px rgba(0,0,0,0.05)';">
                            <div>
                                <div
                                    style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px;">
                                    <div>
                                        <div style="color: #374151; font-size: 14px; font-weight: 600; margin-bottom: 4px;">
                                            TINDAKAN 2</div>
                                        <div style="color: #111827; font-size: 18px; font-weight: 700;">Stand By</div>
                                    </div>
                                    <span
                                        style="display: inline-block; padding: 4px 12px; border-radius: 50px; font-size: 11px; font-weight: 600; background-color: #00e335; color: white;">
                                        Parkir
                                    </span>
                                </div>
                                <p style="color: #4b5563; font-size: 13px; line-height: 1.5; margin: 0;">Alat sedang nganggur /
                                    tidak digunakan. Mengubah status seketika menjadi Stand By tanpa perlu mengisi 15 form.</p>
                            </div>
                            <div
                                style="color: #1f2937; font-size: 13px; font-weight: 600; text-align: right; margin-top: 24px; width: 100%;">
                                Update Instan <span style="font-weight: 800; font-size: 14px;">></span>
                            </div>
                        </button>
                    </form>
                    @endif
                    @endif

                    <!-- Opsi 3: Breakdown -->
                    <div style="display: flex; flex-direction: column; justify-content: space-between; background-color: white; padding: 1.5rem; border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s; cursor: pointer;"
                        onclick="toggleBreakdownForm()" onmouseover="this.style.boxShadow='0 4px 10px rgba(0,0,0,0.1)';"
                        onmouseout="this.style.boxShadow='0 2px 4px rgba(0,0,0,0.05)';">
                        <div>
                            <div
                                style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px;">
                                <div>
                                    <div style="color: #374151; font-size: 14px; font-weight: 600; margin-bottom: 4px;">TINDAKAN
                                        3</div>
                                    <div style="color: #111827; font-size: 18px; font-weight: 700;">Breakdown</div>
                                </div>
                                <span
                                    style="display: inline-block; padding: 4px 12px; border-radius: 50px; font-size: 11px; font-weight: 600; background-color: #ff0000; color: white;">
                                    Rusak
                                </span>
                            </div>
                            <p style="color: #4b5563; font-size: 13px; line-height: 1.5; margin: 0;">Laporkan kendala/kerusakan
                                seketika. Notifikasi otomatis akan dikirim ke Tim Mekanik, Supervisor, & Bos.</p>
                        </div>
                        <div style="color: #1f2937; font-size: 13px; font-weight: 600; text-align: right; margin-top: 24px;">
                            Lapor Kerusakan <span style="font-weight: 800; font-size: 14px;">></span>
                        </div>
                    </div>

                </div>
            @endif
        </div>
    </div>

    <!-- Modal Breakdown inline -->
    <div id="breakdown-form-modal"
        style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center;">
        <div
            style="background: white; width: 100%; max-width: 500px; border-radius: 12px; padding: 24px; box-shadow: 0 10px 25px rgba(0,0,0,0.15);">
            <div
                style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 12px; margin-bottom: 16px;">
                <h3 style="margin: 0; font-size: 18px; color: #dc2626; font-weight: 700;">Lapor Alat Rusak</h3>
                <button type="button" onclick="toggleBreakdownForm()"
                    style="background: none; border: none; font-size: 24px; cursor: pointer; color: #9ca3af;">&times;</button>
            </div>

            <form action="{{ route('equipment.scan.gateway', $equipment->code) }}" method="POST" style="margin: 0;">
                @csrf
                <input type="hidden" name="action" value="breakdown">

                <div
                    style="background-color: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; padding: 12px; border-radius: 8px; font-size: 13px; margin-bottom: 16px;">
                    Catatan kendala / kerusakan ini akan langsung diubah menjadi tiket servis untuk Mekanik.
                </div>

                <div style="margin-bottom: 16px;">
                    <label for="breakdown_location"
                        style="display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 8px;">Lokasi Alat Saat Ini <span style="color: red;">*</span></label>
                    <select id="breakdown_location" name="location_id" required
                        style="width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; outline: none; font-family: inherit; box-sizing: border-box; background: #fff; appearance: auto;">
                        <option value="">Pilih Lokasi</option>
                        @foreach(\App\Models\Location::where('warehouse_id', $equipment->warehouse_id)->orderBy('name')->get() as $loc)
                            <option value="{{ $loc->id }}" @selected($equipment->location_id == $loc->id)>{{ $loc->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div style="margin-bottom: 20px;">
                    <label for="breakdown_note"
                        style="display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 8px;">Jelaskan
                        Keluhannya <span style="color: red;">*</span></label>
                    <textarea id="breakdown_note" name="breakdown_note" rows="4" required
                        style="width: 100%; padding: 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; outline: none; font-family: inherit; box-sizing: border-box;"
                        placeholder="Misal: Mesin susah distarter, ada kebocoran oli di area roda kiri..."></textarea>
                </div>

                <div
                    style="display: flex; justify-content: flex-end; gap: 12px; border-top: 1px solid #eee; padding-top: 16px;">
                    <button type="button" onclick="toggleBreakdownForm()"
                        style="padding: 10px 16px; background: #f3f4f6; color: #4b5563; border: none; border-radius: 8px; font-weight: 600; cursor: pointer;">Batal</button>
                    <button type="submit"
                        style="padding: 10px 16px; background: #dc2626; color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);">Kirim
                        Laporan</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        function toggleBreakdownForm() {
            var modal = document.getElementById('breakdown-form-modal');
            if (modal.style.display === 'none' || modal.style.display === '') {
                modal.style.display = 'flex';
                setTimeout(function () { document.getElementById('breakdown_note').focus(); }, 100);
            } else {
                modal.style.display = 'none';
            }
        }
    </script>
@endsection