@extends('layouts.apps')

@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); }
        }
        .logo-img {
            max-height: 70px;
            width: auto;
            object-fit: contain;
        }

        @media (max-width: 576px) {
            .logo-img {
                max-height: 55px;
            }
        }
    </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="col-12 col-md-8 col-lg-5 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-systems.png') }}" 
                                        alt="Logo parkq-systems"
                                        class="img-fluid logo-img">
                                </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" class="w-100" style="max-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" id="barcode_result" name="foto_kamera" accept="image/*" capture="environment" class="form-control mb-2" placeholder="Hasil scan muncul disini"> --}}
                                                            @endif
                                                        </div>
                                                    </div>

                                                    {{-- <div class="row mb-2">
                                                        <div class="col-md-4 font-weight-bold"> --}}
                                                    <div class="row mb-3 align-items-center">
                                                        <div class="col-12 col-md-4 font-weight-bold mb-1 mb-md-0">
                                                            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"> --}}
                                                    <div class="row mb-3 align-items-center">
                                                        <div class="col-12 col-md-4 font-weight-bold mb-1 mb-md-0">
                                                            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"> --}}
                                                    <div class="row mb-3 align-items-center">
                                                        <div class="col-12 col-md-4 font-weight-bold mb-1 mb-md-0">
                                                            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 flex-column flex-md-row justify-content-md-end gap-2 mt-4">
                                                    <a href="{{ route('apps.index') }}" 
                                                    class="btn btn-outline-secondary w-100 w-md-auto">
                                                    Batal
                                                    </a>

                                                    <button type="submit" 
                                                            class="btn btn-primary w-100 w-md-auto shadow-sm">
                                                            Simpan Perubahan
                                                    </button>
                                                </div>

                                            </form>
                                        </div>
                                    </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
    <script src="https://unpkg.com/html5-qrcode"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        function onScanSuccess(decodedText) {
             html5QrcodeScanner.clear();

            // Redirect ke URL
            window.location.href = "/apps/" + 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>
        @if(session('success'))
        
            <script>
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil',
                    // text: "{{ session('success') }}",
                    // confirmButtonColor: '#3085d6'
                    html: `
                        {{ session('success') }}<br><br>
                        Redirect dalam <b></b> detik...
                    `,
                    timer: 3000, // 3 detik
                    timerProgressBar: true,
                    showConfirmButton: false,
                    didOpen: () => {
                        const b = Swal.getHtmlContainer().querySelector('b');
                        timerInterval = setInterval(() => {
                            b.textContent = Math.ceil(Swal.getTimerLeft() / 1000);
                        }, 100);
                    },
                    willClose: () => {
                        clearInterval(timerInterval);
                        window.location.href = "{{ route('apps.index') }}";
                    }
                });
            </script>
        @endif

    
@endsection