@extends('layouts.master')

@section('styles')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css"
        rel="stylesheet" />
    <link rel="stylesheet" href="{{ asset('vendors/select2/select2.min.css') }}">
    <style>
        .detail-label {
            font-size: 14px;
            color: #6c757d;
        }

        .detail-value {
            font-size: 16px;
            font-weight: 600;
            color: #212529;
        }

        .detail-row {
            margin-bottom: 8px;
        }
    </style>
@endsection

@section('content')
    <div class="container-fluid page-body-wrapper">
        <div class="main-panel">
            <div class="content-wrapper">
                <nav aria-label="Breadcrumb" class="breadcrumb">
                    <ol>
                        <li><a href="/">Home</a></li>
                        <li><a href="/products">Front Office</a></li>
                        <li><a href="#">Check IN/OUT</a></li>
                        {{-- <li><span aria-current="page"></span></li> --}}
                    </ol>
                </nav>
                <div class="row">
                    <div class="col-md-12 grid-margin stretch-card">
                        <div class="card">
                            {{-- <div class="card-header">
                                <h3 class="card-title">Pill Tabs style</h3>
                            </div> --}}
                            <div class="card-body">
                                <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill"
                                            data-bs-target="#pills-home" type="button" role="tab"
                                            aria-controls="pills-home" aria-selected="true">Check IN</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill"
                                            data-bs-target="#pills-profile" type="button" role="tab"
                                            aria-controls="pills-profile" aria-selected="false">Check OUT</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill"
                                            data-bs-target="#pills-contact" type="button" role="tab"
                                            aria-controls="pills-contact" aria-selected="false">Contact</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill"
                                            data-bs-target="#pills-disabled" type="button" role="tab"
                                            aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button>
                                    </li>
                                </ul>
                                <div class="tab-content" id="pills-tabContent">
                                    <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                                        aria-labelledby="pills-home-tab" tabindex="0">
                                        <div class="row g-3">

                                            <!-- LEFT PANEL (SCAN / INPUT) -->
                                            <div class="col-md-2">
                                                <div class="card shadow-sm h-100">
                                                    <div class="card-body">

                                                        <label class="form-label fw-semibold">
                                                            Input / Scan Tiket / Kartu Akses
                                                        </label>

                                                        <input type="text" class="form-control mb-2" id="search-value"
                                                            placeholder="Scan / input tiket..." autofocus>

                                                        <small id="search-status" class="text-muted d-block mb-3"></small>

                                                        <div class="d-grid">
                                                            <button class="btn btn-primary btn-sm" data-bs-toggle="modal"
                                                                data-bs-target=".bd-example-modal-lg">
                                                                <i class="fa fa-plus me-1"></i> Tambah
                                                            </button>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>

                                            <!-- RIGHT PANEL -->
                                            <div class="col-md-10">
                                                <div class="row g-3">
                                                    <!-- DETAIL TRANSAKSI -->
                                                    <div class="col-md-5">
                                                        <div class="card h-100">
                                                            <div class="card-body">

                                                                <h5 class="card-title mb-3">Detail Transaksi</h5>

                                                                <form id="formTransaksi" method="POST">
                                                                    @csrf
                                                                    {{-- @method('PUT') --}}

                                                                    <!-- ACTION BUTTON -->
                                                                    <div id="rowActions" class="d-none mb-3"></div>

                                                                    <hr>

                                                                    <!-- FORM INPUT -->
                                                                    <div class="d-none mt-3" id="formEdit">

                                                                        <!-- Nama / Kamar -->
                                                                        <div class="row align-items-center mb-2">
                                                                            <div class="col-4">
                                                                                <label class="form-label detail-label mb-0">
                                                                                    Nama / No. Kamar
                                                                                </label>
                                                                            </div>
                                                                            <div class="col-8">
                                                                                <input type="text"
                                                                                    name="nama"
                                                                                    class="form-control"
                                                                                    placeholder="Nama / K501">
                                                                            </div>
                                                                        </div>

                                                                        <!-- No Polisi -->
                                                                        <div class="row align-items-center mb-2">
                                                                            <div class="col-4">
                                                                                <label class="form-label detail-label mb-0">
                                                                                    No. Polisi
                                                                                </label>
                                                                            </div>
                                                                            <div class="col-8">
                                                                                <input type="text"
                                                                                    name="no_pol"
                                                                                    class="form-control"
                                                                                    placeholder="B123TES">
                                                                            </div>
                                                                        </div>

                                                                        <!-- Lama Parkir -->
                                                                        <div class="row align-items-center mb-3">
                                                                            <div class="col-4">
                                                                                <label class="form-label detail-label mb-0">
                                                                                    Lama Parkir
                                                                                </label>
                                                                            </div>
                                                                            <div class="col-8">
                                                                                <select name="durasi" class="form-select">
                                                                                    <option value="1">1 Malam</option>
                                                                                    <option value="2">2 Malam</option>
                                                                                    <option value="3">3 Malam</option>
                                                                                </select>
                                                                            </div>
                                                                        </div>

                                                                        <!-- SUBMIT BUTTON -->
                                                                        <div class="d-flex justify-content-end">
                                                                            <button type="submit" class="btn btn-success">
                                                                                <i class="fa fa-save me-1"></i> Simpan
                                                                            </button>
                                                                        </div>

                                                                    </div>
                                                                </form>

                                                                <!-- DETAIL DISPLAY -->
                                                                <div id="detail-content" class="text-muted mt-3">
                                                                    Pilih transaksi untuk melihat detail
                                                                </div>

                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- IMAGE PREVIEW -->
                                                    <div class="col-md-7">
                                                        <div class="card h-100">
                                                            <div
                                                                class="card-body d-flex justify-content-center align-items-center">

                                                                <img id="pic_body_masuk" src=""
                                                                    alt="Preview Kendaraan"
                                                                    class="w-100 h-100 rounded d-none"
                                                                    style="max-height: 880px; object-fit: cover;">

                                                                <span id="no-image" class="text-muted">
                                                                    Tidak ada gambar
                                                                </span>

                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>

                                            </div>

                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="pills-profile" role="tabpanel"
                                        aria-labelledby="pills-profile-tab" tabindex="0">
                                        <ul class="list-group">
                                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                                <div class="me-auto d-flex align-items-center">
                                                    <div>
                                                        <input class="form-check-input me-2 mt-0" name="checkbox1"
                                                            type="checkbox" value="" checked="">
                                                        <label class="form-check-label" for="checkbox1"></label>
                                                    </div>
                                                    <div>
                                                        <div class="fw-bold">Heading</div>
                                                        <p class="mb-0 text-muted">Donec id elit non mi porta
                                                            gravida at eget metus. Maecenas sed diam eget risus
                                                            varius blandit.</p>
                                                    </div>
                                                </div>
                                                <span class="badge bg-info rounded-pill">14</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                                <div class="me-auto d-flex align-items-center">
                                                    <div>
                                                        <input class="form-check-input me-2 mt-0" name="checkbox1"
                                                            type="checkbox" value="">
                                                        <label class="form-check-label" for="checkbox1"></label>
                                                    </div>
                                                    <div>
                                                        <div class="fw-bold">Heading</div>
                                                        <p class="mb-0 text-muted">Donec id elit non mi porta
                                                            gravida at eget metus. Maecenas sed diam eget risus
                                                            varius blandit.</p>
                                                    </div>
                                                </div>
                                                <span class="badge bg-danger rounded-pill">14</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                                <div class="me-auto d-flex align-items-center">
                                                    <div>
                                                        <input class="form-check-input me-2 mt-0" name="checkbox1"
                                                            type="checkbox" value="">
                                                        <label class="form-check-label" for="checkbox1"></label>
                                                    </div>
                                                    <div>
                                                        <div class="fw-bold">Heading</div>
                                                        <p class="mb-0 text-muted">Donec id elit non mi porta
                                                            gravida at eget metus. Maecenas sed diam eget risus
                                                            varius blandit.</p>
                                                    </div>
                                                </div>
                                                <span class="badge bg-success rounded-pill">14</span>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="tab-pane fade" id="pills-contact" role="tabpanel"
                                        aria-labelledby="pills-contact-tab" tabindex="0">
                                        <ul class="list-group">
                                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                                <div class="me-auto d-flex align-items-center">
                                                    <div>
                                                        <input class="form-check-input me-2 mt-0" name="checkbox1"
                                                            type="checkbox" value="">
                                                        <label class="form-check-label" for="checkbox1"></label>
                                                    </div>
                                                    <div>
                                                        <div class="fw-bold">Heading</div>
                                                        <p class="mb-0 text-muted">Donec id elit non mi porta
                                                            gravida at eget metus. Maecenas sed diam eget risus
                                                            varius blandit.</p>
                                                    </div>
                                                </div>
                                                <span class="badge bg-info rounded-pill">14</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                                <div class="me-auto d-flex align-items-center">
                                                    <div>
                                                        <input class="form-check-input me-2 mt-0" name="checkbox1"
                                                            type="checkbox" value="">
                                                        <label class="form-check-label" for="checkbox1"></label>
                                                    </div>
                                                    <div>
                                                        <div class="fw-bold">Heading</div>
                                                        <p class="mb-0 text-muted">Donec id elit non mi porta
                                                            gravida at eget metus. Maecenas sed diam eget risus
                                                            varius blandit.</p>
                                                    </div>
                                                </div>
                                                <span class="badge bg-danger rounded-pill">14</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                                <div class="me-auto d-flex align-items-center">
                                                    <div>
                                                        <input class="form-check-input me-2 mt-0" name="checkbox1"
                                                            type="checkbox" value="" checked="">
                                                        <label class="form-check-label" for="checkbox1"></label>
                                                    </div>
                                                    <div>
                                                        <div class="fw-bold">Heading</div>
                                                        <p class="mb-0 text-muted">Donec id elit non mi porta
                                                            gravida at eget metus. Maecenas sed diam eget risus
                                                            varius blandit.</p>
                                                    </div>
                                                </div>
                                                <span class="badge bg-success rounded-pill">14</span>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="tab-pane fade" id="pills-disabled" role="tabpanel"
                                        aria-labelledby="pills-disabled-tab" tabindex="0">
                                        <ul class="list-group">
                                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                                <div class="me-auto d-flex align-items-center">
                                                    <div>
                                                        <input class="form-check-input me-2 mt-0" name="checkbox1"
                                                            type="checkbox" value="" id="checkbox1">
                                                        <label class="form-check-label" for="checkbox1"></label>
                                                    </div>
                                                    <div>
                                                        <div class="fw-bold">Heading</div>
                                                        <p class="mb-0 text-muted">Donec id elit non mi porta
                                                            gravida at eget metus. Maecenas sed diam eget risus
                                                            varius blandit.</p>
                                                    </div>
                                                </div>
                                                <span class="badge bg-info rounded-pill">14</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                                <div class="me-auto d-flex align-items-center">
                                                    <div>
                                                        <input class="form-check-input me-2 mt-0" name="checkbox1"
                                                            type="checkbox" value="" checked="">
                                                        <label class="form-check-label" for="checkbox1"></label>
                                                    </div>
                                                    <div>
                                                        <div class="fw-bold">Heading</div>
                                                        <p class="mb-0 text-muted">Donec id elit non mi porta
                                                            gravida at eget metus. Maecenas sed diam eget risus
                                                            varius blandit.</p>
                                                    </div>
                                                </div>
                                                <span class="badge bg-danger rounded-pill">14</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                                <div class="me-auto d-flex align-items-center">
                                                    <div>
                                                        <input class="form-check-input me-2 mt-0" name="checkbox1"
                                                            type="checkbox" value="">
                                                        <label class="form-check-label" for="checkbox1"></label>
                                                    </div>
                                                    <div>
                                                        <div class="fw-bold">Heading</div>
                                                        <p class="mb-0 text-muted">Donec id elit non mi porta
                                                            gravida at eget metus. Maecenas sed diam eget risus
                                                            varius blandit.</p>
                                                    </div>
                                                </div>
                                                <span class="badge bg-success rounded-pill">14</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.31/jspdf.plugin.autotable.min.js"></script>
    <script src="{{ asset('vendors/select2/select2.min.js') }}"></script>
    <script src="{{ asset('js/select2.js') }}"></script>

    <script>
        $(document).ready(function() {
            $('#no-image').addClass('d-none');

            function searchData(value) {
                if (!value) return;

                $('#search-status').text('Mencari...');
                console.log(value);

                $.ajax({
                    url: "{{ route('check-in-out.search') }}",
                    type: "GET",
                    data: {
                        q: value
                    },
                    success: function(res) {
                        if (res.status) {
                            $('#search-status').html('<span class="text-success">Ditemukan</span>');
                            let data = res.data;
                            $('#rowActions').html(`
                                <div>
                                    <div class="detail-row">
                                        <span class="detail-label">No. :</span>
                                        <span class="detail-value">${data.id}</span>
                                        <input type="hidden" name="id" value="${data.id}">
                                    </div>
                                    <div class="detail-row">
                                        <span class="detail-label">No. Transaksi :</span>
                                        <span class="detail-value">${data.no_pol}</span>
                                        <input type="hidden" name="notrans" value="${data.no_pol}">
                                    </div>
                                    <div class="detail-row">
                                        <span class="detail-label">Jam Masuk : </span>
                                        <span class="detail-value" name="indate">${data.waktu_masuk}</span>
                                        <input type="hidden" name="waktu_masuk" value="${data.waktu_masuk}">
                                    </div>
                                </div>
                            `).removeClass('d-none');
                            $('#formEdit').removeClass('d-none');
                            if (data.vehicle_capt) {
                                $('#pic_body_masuk').attr('src', `data:image/jpeg;base64,${data.vehicle_capt}`).removeClass('d-none');
                                // $('#pic_body_masuk').html(`
                                //     <img src="data:image/jpeg;base64,${data.vehicle_capt}" alt="Pic Body Masuk" style="max-width: 700px; max-height: 300px;">
                                // `);
                                $('#no-image').addClass('d-none');
                            } else {
                                $('#pic_body_masuk').addClass('d-none');
                                $('#no-image').removeClass('d-none');
                            }

                            console.log(res);
                            // window.location.href = "/check-in-out" + res.data.id;
                        } else {
                            $('#search-status').html('<span class="text-danger">' + res.message +
                                '</span>');
                        }

                        $('#search-value').val('').focus();
                    },
                    error: function() {
                        $('#search-status').html('<span class="text-danger">Error server</span>');
                    }
                });
            }

            $('#search-value').on('keypress', function(e) {
                if (e.which == 13) {
                    e.preventDefault();
                    searchData($(this).val());
                }
            });

            let timer;
            $('#search-value').on('input', function() {
                clearTimeout(timer);
                let val = $(this).val();

                timer = setTimeout(() => {
                    if (val.length >= 5) {
                        searchData(val);
                    }

                }, 300);
            });

            $('#search-value').on('paste', function(e) {
                let input = $(this);

                setTimeout(() => {
                    let val = input.val();

                    console.log('PASTE VALUE:', val); // debug

                    searchData(val);
                }, 100); // tunggu value masuk dulu
            });

            $('#formTransaksi').on('submit', function(e){
                e.preventDefault();

                let formData = $(this).serialize();

                $.ajax({
                    url: $(this).attr('action'),
                    type: 'POST',
                    data: formData,
                    success: function(res){
                        alert('Berhasil disimpan');
                    }
                });
            });


        });
    </script>
@endsection