@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); }
        }
    </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">
                                <!-- 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)
                                    <h3>Ubah Jenis kendaraan</h3>
                                    <hr>
                                    <form action="{{ route('apps.update', $data->no_pol) }}" method="POST" class="pt-3">
                                        @csrf           
                                        @method('PUT')
                                        {{-- Menampilkan No. Transaksi sebagai info (Read Only) --}}
                                        <div class="form-group row mb-0">
                                            <strong class="col-md-6 col-form-label">No. Transaksi</strong>
                                            <div class="col-md-6 text-right">
                                                <p class="form-control-plaintext text-primary font-weight-bold">{{ $data->no_pol }}</p>
                                                {{-- Input hidden jika Anda butuh no_pol terkirim ke backend --}}
                                                <input type="hidden" name="no_transaksi" value="{{ $data->no_pol }}">
                                            </div>
                                        </div>

                                        <div class="form-group row mb-0">
                                            <strong class="col-md-6 col-form-label">Jam Masuk</strong>
                                            <p class="col-md-6 form-control-plaintext text-right">
                                                {{ date('Y-m-d H:i:s', strtotime($data->waktu_masuk)) }}
                                            </p>
                                        </div>

                                        <div class="form-group row mb-3">
                                            <strong class="col-md-6 col-form-label">Pintu Masuk</strong>
                                            <p class="col-md-6 form-control-plaintext text-right">
                                                {{ $data->gateIn }} (Gate : {{ $data->id_pintu_masuk }})
                                            </p>
                                        </div>

                                        <div class="form-group">
                                            <label class="font-weight-bold">Ubah Jenis Kendaraan Menjadi:</label>
                                            <select name="id_kendaraan_baru" class="form-control shadow-sm" required>
                                                <option value="" disabled selected>-- Pilih Jenis Kendaraan --</option>
                                                @foreach ($vehicle as $kendaraan)
                                                    <option value="{{ $kendaraan->id }}" {{ $data->id_kendaraan == $kendaraan->id ? 'selected' : '' }}>
                                                        {{ $kendaraan->nama }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="row mt-4">
                                            <div class="col-12">
                                                <button type="submit" class="btn btn-primary btn-block shadow">Simpan Perubahan</button>
                                                <a href="{{ route('apps.index') }}" class="btn btn-light btn-block">Batal</a>
                                            </div>
                                        </div>
                                    </form>
                                @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>
        $(document).ready(function () {

        });
    </script>
@endsection