@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>@lang('reservasi.pco') {{ $p->nama }}</h2>
                </div>
            </div>
            <div class="row">
                <aside class="col-lg-8">
                    <div class="card shadow-sm p-4 mb-3" style="border-radius: 15px">
                        <h4 class="fw-bold text-primary">{{ $p->nama . ' | ' . $tipe }}</h4>
                        <hr>
                        <label for="durasi" class="form-label fw-semibold">Destinasi</label>
                        {{-- {{ $pakets->destinasis }} --}}
                        <ul class="feature-list">
                            @foreach ($pakets as $d)
                                <li>{{ $d->destinasi->nama }}</li>
                            @endforeach
                        </ul>
                    </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 style="display: flex; justify-content: flex-end;">
                                                    <input type="number" name="px" id="px" class="form-control"
                                                        value="{{ old('px', 1) }}" required style="width: 75px;"
                                                        min="1">
                                                </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>
                                <h6 href="#" class="text-gray-700" 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" required>
                                            </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>
                            {{-- <form action="{{ url('konfirmasi-pemesanan') }}" method="POST"> --}}
                            <form action="{{ url(App::getLocale() . '/cart') }}" method="GET">
                                @csrf
                                <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('reservasi.pbuttonl')</button>
                            </form>
                        </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() {
            function calculateTotal() {
                var px = $('#px').val();
                var pricePerpx = {{ $price }};
                var totalPrice = px * pricePerpx;

                var discount = $('#discount_value').val();
                var foodValue = $('#food_value').val();

                if (discount) {
                    totalPrice -= discount;
                } else if (foodValue) {
                    totalPrice -= foodValue;
                }

                $('#total-price').text('Rp ' + totalPrice.toLocaleString('id-ID'));
                $('#total_price').val(totalPrice);
                $('#pax').val(px);
            }

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

            $('#apply-coupon').click(function() {
                var voucherCode = $('#voucher').val();
                resetVoucherInfo();
                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);
                                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;
                                    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);
                                    $('#food-row').hide();
                                }
                                $('#total_price').val(totalPrice);
                            } 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() {
                $('#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>
@endsection