@if (Auth::check())
    @extends('layouts.master')
@else
    @extends('layouts.apps')
@endif

@section('styles')
    <!-- CSS untuk Efek Ceklist -->
    <style>
        .success-checkmark {
            width: 80px;
            height: 80px;
            margin: 0 auto;
        }
        .check-icon {
            width: 80px;
            height: 80px;
            position: relative;
            border-radius: 50%;
            box-sizing: content-box;
            border: 4px solid #4CAF50;
        }
        .check-icon::before {
            top: 3px; left: -2px; width: 30px; transform-origin: 100% 50%; border-radius: 100px 0 0 100px;
        }
        .check-icon::after {
            top: 0; left: 30px; width: 60px; transform-origin: 0 50%; border-radius: 0 100px 100px 0; animation: rotateCircle 4.25s ease-in;
        }
        .icon-line {
            height: 5px; background-color: #4CAF50; display: block; border-radius: 2px; position: absolute; z-index: 10;
        }
        .line-tip { top: 46px; left: 14px; width: 25px; transform: rotate(45deg); }
        .line-long { top: 38px; right: 8px; width: 47px; transform: rotate(-45deg); }
        
        @keyframes rotateCircle {
            0% { transform: rotate(0deg); }
            5% { transform: rotate(0deg); }
            12% { transform: rotate(-5deg); }
            100% { transform: rotate(-270deg); }
        }
    </style>
@endsection

@section('content')
    <div class="container-scroller">
        <div class="container-fluid page-body-wrapper full-page-wrapper">
            <div class="main-panel">
                <div class="content-wrapper d-flex align-items-center auth px-0">
                    <div class="row w-100 mx-0">
                        <div class="col-lg-4 mx-auto">
                            <div class="auth-form-light text-left py-5 px-4 px-sm-5">
                                <div class="text-center mb-1">
                                    <img src="{{ asset('images/parkq-services.png') }}" 
                                        alt="Logo Perusahaan"
                                        style="max-height: 80px;">
                                </div>
                                <!-- Tampilan Jika Berhasil (Success Card) -->
                                @if(session('status_update'))
                                    <div class="card border-success mb-4 shadow animate__animated animate__fadeIn">
                                        <div class="card-body text-center">
                                            <!-- Animasi Ceklist Sederhana -->
                                            <div class="success-checkmark">
                                                <div class="check-icon">
                                                    <span class="icon-line line-tip"></span>
                                                    <span class="icon-line line-long"></span>
                                                    <div class="icon-circle"></div>
                                                    <div class="icon-fix"></div>
                                                </div>
                                            </div>
                                            
                                            <h4 class="text-success mt-3">{{ session('status_update') }}</h4>
                                            <p class="text-muted">Jenis kendaraan telah berhasil diubah di sistem.</p>
                                            <a href="{{ route('apps.index') }}" class="btn btn-outline-success btn-sm">Kembali ke Beranda</a>
                                        </div>
                                    </div>
                                @endif
                                {{-- @if($data) --}}
                                {{-- @if($data || $cameraText) --}}
                                    <div class="card shadow-sm border-0">
                                        <div class="card-body p-4">

                                            <h4 class="mb-3 font-weight-bold text-primary">
                                                <i class="fa fa-edit mr-2"></i> Ubah Jenis Kendaraan
                                            </h4>
                                            <hr>

                                            <form action="{{ route('apps.update', $data->no_pol ?? '') }}" method="POST">
                                                @csrf
                                                @method('PUT')

                                                {{-- Informasi Transaksi --}}
                                                <div class="bg-light rounded p-3 mb-4">

                                                    <div class="row mb-2">
                                                        <div class="col-md-4 font-weight-bold">
                                                            No. Transaksi
                                                        </div>
                                                        <div class="col-md-8 text-md-right text-primary font-weight-bold">
                                                            @if ($data)
                                                                {{ $data->no_pol }}
                                                                <input type="hidden" name="no_transaksi" value="{{ $data->no_pol }}">
                                                            @else
                                                            <div id="reader" style="width:300px;"></div>

                                                                <input type="text" 
                                                                    id="barcode_result" 
                                                                    name="barcode_result"
                                                                    class="form-control mt-3"
                                                                    placeholder="Hasil scan muncul disini">
                                                                {{-- <input type="file"
                                                                    name="foto_kamera"
                                                                    accept="image/*"
                                                                    capture="environment"
                                                                    class="form-control mb-2"> --}}
                                                            @endif
                                                        </div>
                                                    </div>

                                                    <div class="row mb-2">
                                                        <div class="col-md-4 font-weight-bold">
                                                            Jam Masuk
                                                        </div>
                                                        <div class="col-md-8 text-md-right">
                                                            @if ($data)
                                                                {{ date('Y-m-d H:i:s', strtotime($data->waktu_masuk)) }}
                                                             @else
                                                                Not Detected
                                                            @endif
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-md-4 font-weight-bold">
                                                            Pintu Masuk
                                                        </div>
                                                        <div class="col-md-8 text-md-right">
                                                            @if ($data)
                                                                {{ $data->gateIn }} 
                                                                <span class="text-muted">(Gate : {{ $data->id_pintu_masuk }})</span>
                                                             @else
                                                                Not Detected
                                                            @endif    
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-md-4 font-weight-bold">
                                                            Kendaraan terbaca :
                                                        </div>
                                                        <div class="col-md-8 text-md-right">
                                                            @if ($data)
                                                                <span class="text-muted"> <strong>{{ $data->vehiclename }}</strong></span>
                                                            @else
                                                                Not Detected
                                                            @endif
                                                        </div>
                                                    </div>

                                                </div>

                                                {{-- Ubah Kendaraan --}}
                                                <div class="form-group">
                                                    <label class="font-weight-bold">
                                                        Ubah Jenis Kendaraan
                                                    </label>
                                                    {{-- {{ json_encode($vehicle) }} --}}
                                                    @if ($data)
                                                        <select name="id_kendaraan_baru"  class="form-control shadow-sm rounded"  required>
                                                            <option value="" disabled>-- Pilih Jenis Kendaraan --</option>
                                                            @foreach ($vehicle as $kendaraan)
                                                            <option value="{{ $kendaraan->id }}"> {{ $kendaraan->nama }}</option>
                                                            @endforeach
                                                        </select>
                                                    @else
                                                                Not Detected
                                                            @endif
                                                </div>

                                                {{-- Tombol --}}
                                                <div class="d-flex justify-content-end gap-2 mt-4">
                                                    <a href="{{ route('apps.index') }}" 
                                                    class="btn btn-outline-secondary px-4">
                                                    Batal
                                                    </a>

                                                    <button type="submit" 
                                                            class="btn btn-primary px-4 shadow-sm">
                                                            Simpan Perubahan
                                                    </button>
                                                </div>

                                            </form>
                                        </div>
                                    </div>
                                {{-- @else
                                    <h1>Halaman Utama Apps</h1>
                                    <p>Ini adalah tampilan standar ketika tidak ada ID yang dipilih.</p>
                                @endif --}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
    <script src="https://unpkg.com/html5-qrcode"></script>

    <script>
        function onScanSuccess(decodedText) {
            document.getElementById('barcode_result').value = decodedText;

            // Optional: auto kirim ke server
            fetch("{{ route('apps.scan') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                body: JSON.stringify({ code: decodedText })
            })
            .then(res => res.json())
            .then(data => {
                console.log(data);
            });
        }

        let html5QrcodeScanner = new Html5QrcodeScanner(
            "reader", 
            { fps: 10, qrbox: 250 }
        );

        html5QrcodeScanner.render(onScanSuccess);
    </script>
@endsection