@extends('layout.front.main')
@section('title')
    @lang('payment.title')
@endsection
@section('content')
    <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>Paket {{ $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>{{ $p->nama . ' | ' . $tipe }}</h4>
                        <hr>
                        <meta name="csrf-token" content="{{ csrf_token() }}">
                        <form id="pembayaran-form" action="{{ url('pembayaran') }}" 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>

                                <div class="col-12 col-lg-4 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-4 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-4 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="text-center">
                                    <input type="hidden" name="paket_id" value="{{ $p->id }}">
                                    <input type="hidden" name="tipe" value="{{ $tipe }}">
                                    <input type="hidden" name="voucher_id" id="voucher_id"
                                        value="{{ $voucher != null ? $voucher->id : '' }}">
                                    <input type="hidden" name="pax" id="pax" value="{{ $pax }}">
                                    <input type="hidden" name="total_price" id="total_price" value="{{ $total_price }}">
                                    <button type="submit" class="btn btn-primary w-100 mt-5">@lang('payment.form.button')</button>
                                </div>
                            </div>
                        </form>
                        <script src="https://app.sandbox.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) {
                                                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>
                    </div>
                </aside>
                <aside class="col-lg-4">
                    <div class="card" style="border-radius: 15px">
                        <div class="card-body">
                            <h4>@lang('payment.daftar.h4')</h4>
                            <div class="table-responsive">
                                <table class="table table-borderless">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <b>Pax</b><br>
                                                <p>@lang('payment.daftar.pax')</p>
                                            </td>
                                            <td class="text-end">
                                                {{ $pax }} Pax
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <b>@lang('payment.daftar.paket') {{ $p->nama }}</b>
                                            </td>
                                            <td class="text-end">
                                                {{ 'Rp ' . number_format($price, 0, ',', '.') }}
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <hr>
                            <div class="table-responsive">
                                <table class="table table-borderless">
                                    <tbody>
                                        @if ($voucher != '')
                                            <tr>
                                                <td><b>@lang('payment.daftar.subtotal')</b></td>
                                                <td class="text-end" id="total-price">
                                                    {{ 'Rp ' . number_format($p->harga * $pax, 0, ',', '.') }}
                                                </td>
                                            </tr>
                                            <tr id="discount-row">
                                                <td><b>@lang('payment.daftar.promo')</b></td>
                                                <td class="text-end" id="discount-value">
                                                    {{ 'Rp ' . number_format($voucher->value, 0, ',', '.') }}</td>
                                            </tr>
                                        @endif
                                        <tr>
                                            <td><b>@lang('payment.daftar.total')</b></td>
                                            <td class="text-end" id="total-price" style="font-weight: bold;">
                                                {{ 'Rp ' . number_format($total_price, 0, ',', '.') }}
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </aside>
            </div>
        </div>
    </section>

    {{-- <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> --}}
@endsection
@section('script')
    <script>
        document.addEventListener("keydown", function(e) {
            if (e.key === "F12" || (e.ctrlKey && e.shiftKey && e.key === "I")) {
                e.preventDefault();
            }
        });
        document.addEventListener("contextmenu", function(e) {
            e.preventDefault();
        });
    </script>
@endsection