@extends('layout.front.main')
@section('title')
    @lang('reservasi.title')
@endsection
@section('content')
    <!-- About Banner Section Start -->
    {{-- <section class="d2c_entro_launch_bg">
        <div class="px-4 py-5 my-5 text-center">
            <img class="" src="{{ asset('') }}template/assets/img/logo.png" alt="" style="width: 5%">
            <h1 class="display-5 fw-bold">Merjay</h1>
            <div class="col-lg-6 mx-auto">
            </div>
        </div>
    </section> --}}
    <!-- About Banner Section End -->

    <!-- About Me Section Start -->
    <section class="">
        @php
            if ($p->statusPromo == 1) {
                $price = $p->hargaPromo;
            } else {
                $price = $p->harga;
            }
        @endphp
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-lg-8 offset-md-1 offset-lg-2 text-center">
                    <h2>Form Pemesanan</h2>
                </div>
            </div>
            <div class="row">
                <aside class="col-lg-8">
                    <div class="card shadow-sm p-4 mb-3" style="border-radius: 15px">
                        <h3>Detail Kontak</h3>
                        <hr>
                        <form id="pembayaran-form" action="{{ url('pay') }}" method="POST">
                            @csrf
                            <div class="row">
                                <div class="col-12 mb-4">
                                    <label for="nama" class="form-label mb-3">@lang('payment.form.nama')</label>
                                    <input type="text" class="form-control" id="nama" name="nama"
                                        value="{{ old('nama') }}" autocomplete="off">
                                    <div class="invalid-feedback" id="nama-error"></div>
                                </div>

                                <div class="col-12 col-lg-6 mb-4">
                                    <label for="email" class="form-label mb-3">@lang('payment.form.email')</label>
                                    <input type="email" class="form-control" id="email" name="email"
                                        value="{{ old('email') }}" autocomplete="off">
                                    <div class="invalid-feedback" id="email-error"></div>
                                </div>

                                <div class="col-12 col-lg-6 mb-4">
                                    <label for="telp" class="form-label mb-3">@lang('payment.form.telp')</label>
                                    <input type="tel" class="form-control" id="telp" name="telp"
                                        value="{{ old('telp') }}" autocomplete="off" pattern="^\d{8,12}$"
                                        placeholder="Contoh: 812345678">
                                    <div class="invalid-feedback" id="telp-error"></div>
                                </div>
                                <hr>
                                <h3>Detail Pemesanan</h3>
                                <div class="col-12 col-lg-6 mb-4">
                                    <label for="tanggal" class="form-label mb-3">@lang('payment.form.tanggal')</label>
                                    <input type="date" class="form-control" id="tanggal" name="tanggal"
                                        value="{{ old('tanggal') }}" autocomplete="off">
                                    <div class="invalid-feedback" id="tanggal-error"></div>
                                </div>

                                <div class="col-12 col-lg-3 mb-4">
                                    <label for="mulai" class="form-label mb-3">@lang('payment.form.mulai')</label>
                                    <input type="time" class="form-control" id="mulai" name="mulai"
                                        value="{{ old('mulai') }}" autocomplete="off">
                                    <div class="invalid-feedback" id="mulai-error"></div>
                                </div>

                                <div class="col-12 col-lg-3 mb-4">
                                    <label for="jam" class="form-label mb-3">@lang('payment.form.selesai')</label>
                                    <input type="time" class="form-control" name="selesai" id="selesai"
                                        value="{{ old('selesai') }}" autocomplete="off" readonly>
                                    <div class="invalid-feedback" id="selesai-error"></div>
                                </div>

                                @php
                                    if ($p->nama == 'Short' || $p->nama == 'Sunrise') {
                                        $extraTime = 90;
                                    } elseif ($p->nama == 'Medium') {
                                        $extraTime = 120;
                                    } elseif ($p->nama == 'Long') {
                                        $extraTime = 150;
                                    }
                                @endphp

                                <script>
                                    var extraTime = {{ $extraTime }};

                                    function addTimeToStart() {
                                        var mulai = document.getElementById("mulai").value;
                                        if (mulai) {
                                            var mulaiParts = mulai.split(":");
                                            var mulaiJam = parseInt(mulaiParts[0]);
                                            var mulaiMenit = parseInt(mulaiParts[1]);

                                            var totalMenit = mulaiJam * 60 + mulaiMenit + extraTime;

                                            var selesaiJam = Math.floor(totalMenit / 60) % 24;
                                            var selesaiMenit = totalMenit % 60;

                                            selesaiJam = String(selesaiJam).padStart(2, "0");
                                            selesaiMenit = String(selesaiMenit).padStart(2, "0");

                                            document.getElementById("selesai").value = selesaiJam + ":" + selesaiMenit;
                                        }
                                    }

                                    document.getElementById("mulai").addEventListener("change", addTimeToStart);
                                </script>

                                <div class="col-lg-6">
                                    <label for="paket" class="form-label">Paket Tour</label>
                                    <input type="text" class="form-control" value="{{ $tipe }}">
                                </div>
                                <div class="col-lg-3">
                                    <label for="pax" class="form-label">Pax /Jeep</label>
                                    <input type="number" name="px" id="px" class="form-control"
                                        value="{{ old('px', 1) }}" required style="width: 75px;" min="1">
                                </div>

                                <h6 href="#" class="text-gray-700 mt-4" id="toggle-coupon-form">@lang('reservasi.pbkupon')</h6>
                                <div id="vouc" class="voucher-form-container mt-2">
                                    <form id="voucher-form">
                                        @csrf
                                        <div class="row text-center">
                                            <div class="col-7">
                                                <input type="text" class="form-control form-control-lg coupon w-100"
                                                    name="voucher" id="voucher">
                                            </div>
                                            <div class="col-5">
                                                <button type="button" class="btn btn-primary btn-apply w-100"
                                                    id="apply-coupon">@lang('reservasi.pbkupona')</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>

                                <style>
                                    /* CSS untuk animasi smooth */
                                    .voucher-form-container {
                                        display: none;
                                        opacity: 0;
                                        overflow: hidden;
                                        max-height: 0;
                                        transition: opacity 0.5s ease, max-height 0.5s ease;
                                    }

                                    .voucher-form-container.show {
                                        display: block;
                                        opacity: 1;
                                        max-height: 500px;
                                        /* atur sesuai kebutuhan */
                                    }
                                </style>

                                <script>
                                    document.getElementById('toggle-coupon-form').addEventListener('click', function(e) {
                                        e.preventDefault();
                                        const voucherDiv = document.getElementById('vouc');
                                        // Toggle class "show" untuk memulai animasi
                                        voucherDiv.classList.toggle('show');
                                    });
                                </script>

                                <div class="text-center">
                                    <input type="hidden" name="pi"
                                        value="{{ Crypt::encrypt($p->id, 'merapinihbos') }}">
                                    <input type="hidden" name="p" id="pax">
                                    <input type="hidden" name="vi" id="voucher_id">
                                    <input type="hidden" name="tp" id="total_price">
                                    <input type="hidden" name="te"
                                        value="{{ Crypt::encrypt($tipe, 'merapinihbos') }}">
                                    <button type="submit" class="btn btn-primary w-100 mt-5">@lang('payment.form.button')</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </aside>
                <aside class="col-lg-4">
                    <div class="card" style="border-radius: 15px">
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <b>Pax</b><br>
                                                <p>@lang('reservasi.ppax')</p>
                                            </td>
                                            <td class="text-end">
                                                <div class="d-flex justify-content-end align-items-center"
                                                    style="height: 100%;">
                                                    <b id="pak"></b>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <b>@lang('reservasi.pco') {{ $p->nama }}</b>
                                            </td>
                                            <td class="text-end">
                                                {{ 'Rp ' . number_format($price, 0, ',', '.') }}
                                            </td>
                                        </tr>
                                        <tr id="discount-row" style="display: none;">
                                            <td><b>@lang('reservasi.ppromo')</b></td>
                                            <td class="text-end" id="discount-value"></td>
                                        </tr>
                                        <tr id="food-row" style="display: none;">
                                            <td><b>@lang('reservasi.ppromo')</b></td>
                                            <td class="text-end" id="food-value"></td>
                                        </tr>
                                        <tr>
                                            <td><b>@lang('reservasi.ptotal')</b></td>
                                            <td class="text-end" id="total-price" style="font-weight: bold;">
                                                {{ 'Rp ' . number_format($price, 0, ',', '.') }}
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </aside>
            </div>
        </div>
    </section>
    <!-- About Me Section End -->

    <!-- Counter Section Start -->
    {{-- <section class="d2c_counter_wrapper">
        <div class="container">
            <div class="row">
                <div class="col-6 col-lg-3 text-center mb-4 mb-lg-0">
                    <div class="d2c_counter">
                        <h2><span class="count">15</span></h2>
                        <h4 class="mb-0">Years of experience</h4>
                    </div>
                </div>
                <div class="col-6 col-lg-3 text-center mb-4 mb-md-0">
                    <div class="d2c_counter d2c_border">
                        <h2><span class="count">1250</span>+</h2>
                        <h4 class="mb-0">Happy Clients</h4>
                    </div>
                </div>
                <div class="col-6 col-lg-3 text-center">
                    <div class="d2c_counter">
                        <h2><span class="count">1</span>k+</h2>
                        <h4 class="mb-0">Project Done</h4>
                    </div>
                </div>
                <div class="col-6 col-lg-3 text-center">
                    <div class="d2c_counter">
                        <h2><span class="count">100</span>+</h2>
                        <h4 class="mb-0">Giving Consultancy</h4>
                    </div>
                </div>
            </div>
        </div>
    </section> --}}
    <!-- Counter Section End -->
@endsection
@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1-crypto-js.js"></script>
    <script>
        // Menonaktifkan F12
        document.addEventListener("keydown", function(e) {
            if (e.key === "F12" || (e.ctrlKey && e.shiftKey && e.key === "I")) {
                e.preventDefault();
            }
        });

        window.onerror = function(message, source, lineno, colno, error) {
            alert("Ada kesalahan atau modifikasi yang terdeteksi di halaman!");
            return true;
        };

        // Menonaktifkan klik kanan
        document.addEventListener("contextmenu", function(e) {
            e.preventDefault();
        });

        $(document).ready(function() {
            var appliedDiscount = 0; // Variabel untuk menyimpan diskon yang diterapkan

            function calculateTotal() {
                var px = $('#px').val(); // Jumlah pax
                var pricePerpx = {{ $price }}; // Harga per pax
                var totalPrice = px * pricePerpx; // Total harga tanpa diskon

                // Hitung harga setelah diskon
                if (appliedDiscount > 0) {
                    totalPrice -= appliedDiscount; // Kurangi diskon
                }

                // Update tampilan harga total
                $('#total-price').text('Rp ' + totalPrice.toLocaleString('id-ID'));
                $('#total_price').val(totalPrice);
                $('#pax').val(px);
                $('#pak').text(px + ' Pax');
            }

            $('#px').on('input', function() {
                calculateTotal();
            });

            $('#apply-coupon').click(function() {
                var voucherCode = $('#voucher').val(); // Ambil kode voucher
                resetVoucherInfo(); // Reset informasi voucher yang lama
                if (voucherCode) {
                    $.ajax({
                        url: '{{ route('check-voucher') }}',
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            voucher: voucherCode
                        },
                        success: function(response) {
                            if (response.success) {
                                $('#voucher_id').val(response.voucher_id); // Simpan ID voucher

                                // Cek jenis voucher
                                if (response.jenis === 'food') {
                                    var totalPrice = {{ $price }} * $('#px').val();
                                    $('#food-row').show();
                                    $('#food-value').text(response.value);
                                    // totalPrice -= response.value;
                                    $('#total-price').text('Rp ' + totalPrice.toLocaleString(
                                        'id-ID'));
                                    $('#food_value').val(response.value);
                                    $('#discount-row').hide();
                                } else {
                                    var discount = response.discount;
                                    appliedDiscount = discount; // Simpan nilai diskon
                                    var totalPrice = {{ $price }} * $('#px').val() -
                                        discount;
                                    $('#discount-row').show();
                                    $('#discount-value').text('Rp ' + discount.toLocaleString(
                                        'id-ID'));
                                    $('#total-price').text('Rp ' + totalPrice.toLocaleString(
                                        'id-ID'));
                                    $('#discount_value').val(discount); // Simpan nilai diskon
                                }

                                $('#total_price').val(totalPrice); // Update total harga
                            } else {
                                var totalPrice = {{ $price }} * $('#px').val();
                                $('#total_price').val(totalPrice);
                                $('#total-price').text('Rp ' + totalPrice.toLocaleString(
                                    'id-ID'));
                                Swal.fire({
                                    icon: "error",
                                    title: "Oops...",
                                    text: response.message,
                                });
                            }
                        },
                        error: function(xhr, status, error) {
                            Swal.fire({
                                icon: "error",
                                title: "Oops...",
                                text: "Something went wrong!",
                            });
                        }
                    });
                } else {
                    Swal.fire({
                        icon: "error",
                        title: "Oops...",
                        text: "Please enter a voucher code.",
                    });
                }
            });

            function resetVoucherInfo() {
                appliedDiscount = 0; // Reset diskon yang diterapkan
                $('#discount-row').hide();
                $('#food-row').hide();
                $('#discount-value').text('');
                $('#food-value').text('');
            }

            function encryptData() {
                var pax = $('#pax').val();
                var voucherId = $('#voucher_id').val();
                var totalPrice = $('#total_price').val();

                // Encrypt using AES encryption
                var secretKey = 'your-secret-key'; // Replace with a secure key

                $('#pax').val(CryptoJS.AES.encrypt(pax, secretKey).toString());
                $('#voucher_id').val(CryptoJS.AES.encrypt(voucherId, secretKey).toString());
                $('#total_price').val(CryptoJS.AES.encrypt(totalPrice, secretKey).toString());
            }

            $('#cartForm').submit(function(e) {
                encryptData(); // Encrypt fields before submitting the form
            });

            calculateTotal();
        });
    </script>
    {{-- <script src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="{{ env('MIDTRANS_CLIENT_KEY') }}"></script> --}}
    <script src="https://app.midtrans.com/snap/snap.js" data-client-key="{{ env('MIDTRANS_CLIENT_KEY') }}"></script>
    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $("#pembayaran-form").on("submit", function(event) {
                event.preventDefault();

                $(".invalid-feedback").text("");
                $(".form-control").removeClass("is-invalid");

                let isValid = true;

                if ($("#nama").val().trim() === "") {
                    isValid = false;
                    $("#nama").addClass("is-invalid");
                    $("#nama-error").text("Nama harus diisi.");
                }

                if ($("#email").val().trim() === "") {
                    isValid = false;
                    $("#email").addClass("is-invalid");
                    $("#email-error").text("Email harus diisi.");
                }

                const telpValue = $("#telp").val().trim();
                const telpPattern = /^\d{8,12}$/;
                if (telpValue === "") {
                    isValid = false;
                    $("#telp").addClass("is-invalid");
                    $("#telp-error").text("Nomor WhatsApp harus diisi.");
                } else if (!telpPattern.test(telpValue)) {
                    isValid = false;
                    $("#telp").addClass("is-invalid");
                    $("#telp-error").text(
                        "Nomor WhatsApp harus terdiri dari 8 hingga 12 digit tanpa awalan 08, +62, atau 62."
                    );
                }

                if ($("#tanggal").val().trim() === "") {
                    isValid = false;
                    $("#tanggal").addClass("is-invalid");
                    $("#tanggal-error").text("Tanggal harus diisi.");
                }

                if ($("#mulai").val().trim() === "") {
                    isValid = false;
                    $("#mulai").addClass("is-invalid");
                    $("#mulai-error").text("Jam mulai harus diisi.");
                }

                if (isValid) {
                    var formData = $(this).serialize();
                    $.ajax({
                        url: $(this).attr("action"),
                        type: "POST",
                        data: formData,
                        success: function(data, status) {
                            // alert(data);
                            if (data.snap_token) {
                                snap.pay(data.snap_token, {
                                    onSuccess: function(result) {
                                        Swal.fire({
                                            icon: "success",
                                            title: "Pembayaran Berhasil",
                                            text: "Transaksi Anda telah diproses dengan sukses. Terima kasih atas pembayaran Anda."
                                        });
                                        $.ajax({
                                            url: "{{ url('updateStatusPembayaran') }}",
                                            type: 'POST',
                                            data: {
                                                order_id: data
                                                    .order_id,
                                                status: 'success',
                                                _token: '{{ csrf_token() }}'
                                            },
                                            success: function(response) {
                                                // location
                                                //     .reload();
                                                window.location =
                                                    "{{ url('invoice') }}" +
                                                    '/' + response
                                                    .order_id;
                                            },
                                            error: function(xhr,
                                                ajaxOptions, thrownError
                                            ) {
                                                alert("Error while updating payment status: " +
                                                    xhr.status +
                                                    "\n" + xhr
                                                    .responseText +
                                                    "\n" +
                                                    thrownError);
                                            }
                                        });
                                    },

                                    onPending: function(result) {
                                        Swal.fire({
                                            icon: "info",
                                            title: "Harap Bersabar!",
                                            text: "Pembayaran Anda sedang dalam proses. Mohon tunggu beberapa saat.",
                                        });
                                        $.ajax({
                                            url: "{{ url('updateStatusPembayaran') }}",
                                            type: 'POST',
                                            data: {
                                                order_id: data
                                                    .order_id,
                                                status: 'pending',
                                                _token: '{{ csrf_token() }}'
                                            },
                                            success: function(response) {
                                                window.location =
                                                    "{{ url('invoice') }}" +
                                                    '/' + response
                                                    .order_id;
                                            },
                                            error: function(xhr,
                                                ajaxOptions, thrownError
                                            ) {
                                                alert("Error while updating payment status: " +
                                                    xhr.status +
                                                    "\n" + xhr
                                                    .responseText +
                                                    "\n" +
                                                    thrownError);
                                            }
                                        });
                                    },

                                    onError: function(result) {
                                        Swal.fire({
                                            icon: "error",
                                            title: "Terjadi Kesalahan!",
                                            text: "Kami mengalami kendala dalam memproses pembayaran Anda. Silakan hubungi admin Merjay melalui WhatsApp untuk bantuan lebih lanjut.",
                                        });
                                        $.ajax({
                                            url: "{{ url('updateStatusPembayaran') }}",
                                            type: 'POST',
                                            data: {
                                                order_id: data
                                                    .order_id,
                                                status: 'failed',
                                                _token: '{{ csrf_token() }}'
                                            },
                                            success: function(response) {
                                                // location
                                                //     .reload();
                                                window.location =
                                                    "{{ url('invoice') }}" +
                                                    '/' + response
                                                    .order_id;
                                            },
                                            error: function(xhr,
                                                ajaxOptions, thrownError
                                            ) {
                                                alert("Error while updating payment status: " +
                                                    xhr.status +
                                                    "\n" + xhr
                                                    .responseText +
                                                    "\n" +
                                                    thrownError);
                                            }
                                        });
                                    }
                                });
                            } else {
                                Swal.fire({
                                    icon: "error",
                                    title: "Yahh !",
                                    text: "Terjadi error. Silahkan hubungi admin.",
                                });
                            }
                        },
                        error: function(xhr, ajaxOptions, thrownError) {
                            alert("Error : " + xhr.status + "\n" + xhr.responseText + "\n" +
                                thrownError);
                        },
                    });
                }
            });
        });
    </script>
@endsection