@php
use App\Models\ParameterDetail;
use App\Constants\PaymentMethod;
@endphp

@extends('layouts.frontend.index')
@section('title', $label)
@section('meta_title', $label . ' - ' . Config::get('app.name'))
@section('meta_description', 'Berlangganan AturOrder dan nikmati semua fitur canggih untuk mengelola bisnis Anda. Pilih paket yang sesuai dengan kebutuhan Anda dan dapatkan harga promo terbaik!')
@section('meta_keywords', 'Berlangganan AturOrder, Beli AturOrder, Paket Software, Order Management SaaS, Bisnis, Manajemen Order, Stok, Pelanggan')

@section('content')
<x-section-page :label="$label" />

<section class="purchase">
    <div class="d-flex justify-content-center">
        <div class="card card-container">
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="btn-group btn-group-sm mb-3" role="group" aria-label="Basic radio toggle button group">
                            <input type="radio" class="btn-check btn-time" name="btnradio" id="btn-monthly" autocomplete="off" data-time="monthly"{{ ($time == 'monthly') ? ' checked' : '' }}>
                            <label class="btn btn-outline-primary" for="btn-monthly">Bulanan</label>

                            <input type="radio" class="btn-check btn-time" name="btnradio" id="btn-yearly" autocomplete="off" data-time="yearly"{{ ($time == 'yearly') ? ' checked' : '' }}>
                            <label class="btn btn-outline-primary" for="btn-yearly">Tahunan</label>
                        </div>

                        <div class="row">
                            @php
                            $package_id = '';
                            $package_price = 0;
                            @endphp

                            @foreach ($package as $index => $p)
                                @php
                                $price = json_decode($p->value1);
                                $price_monthly = ($price->monthly->discount_rp == 0) ? $price->monthly->price : $price->monthly->discount_rp;
                                $price_yearly = ($price->yearly->discount_rp == 0) ? $price->yearly->price : $price->yearly->discount_rp;
                                $card_active = '';

                                if ($package_selected == $p->value4) {
                                    $card_active = ' active';
                                    $package_id = $p->id;
                                    $package_price = $price_monthly;
                                }

                                if ($price->{$time}->discount_rp == 0) {
                                    $price_fix = $price->{$time}->price;
                                    $price_discount = false;
                                } else {
                                    $price_fix = $price->{$time}->discount_rp;
                                    $price_discount = true;
                                }
                                @endphp

                                <div class="col-sm-6 mb-3">
                                    <div class="card card-package{{ $card_active }}" data-id="{{ $p->id }}" data-monthly="{{ $price_monthly }}" data-monthly-strike="{{ $price->monthly->price }}" data-yearly="{{ $price_yearly }}" data-yearly-strike="{{ $price->yearly->price }}">
                                        <div class="card-body py-2">
                                            <b>{{ $p->name }}</b>
                                            <div class="mt-2">
                                                @if ($price_discount)
                                                    <strike>Rp <span class="price-strike">{{ number_format($price->{$time}->price, 0, '', '.') }}</span></strike>
                                                @endif

                                                <h4 class="mb-0">
                                                    <sup>Rp</sup>
                                                    <span class="price">{{ number_format($price_fix, 0, '', '.') }}</span>
                                                </h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <form id="form-purchase">
                            <div class="mt-4 mb-2">
                                <b><i class="fa-solid fa-user-circle"></i> &nbsp;Identitas Anda</b>
                            </div>

                            @if (Auth::check())
                                <div class="d-none d-sm-block">
                                    <table class="table-padding">
                                        <tr>
                                            <td>Nama Lengkap</td>
                                            <td class="divide">:</td>
                                            <td>{{ Auth::user()->name }}</td>
                                        </tr>
                                        <tr>
                                            <td>Email</td>
                                            <td class="divide">:</td>
                                            <td>{{ Auth::user()->email }}</td>
                                        </tr>
                                        <tr>
                                            <td>No. Handphone</td>
                                            <td class="divide">:</td>
                                            <td>{{ Common::phoneFormat(Auth::user()->phone) }}</td>
                                        </tr>
                                        <tr>
                                            <td>Perusahaan</td>
                                            <td class="divide">:</td>
                                            <td>{{ Auth::user()->entity->type_name }}</td>
                                        </tr>
                                        <tr>
                                            <td>Nama Perusahaan</td>
                                            <td class="divide">:</td>
                                            <td>{{ Auth::user()->entity->name }}</td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="d-block d-sm-none">
                                    <div class="mb-3">
                                        <small class="fw-bold">Nama Lengkap</small><br />
                                        {{ Auth::user()->name }}
                                    </div>
                                    <div class="mb-3">
                                        <small class="fw-bold">Email</small><br />
                                        {{ Auth::user()->email }}
                                    </div>
                                    <div class="mb-3">
                                        <small class="fw-bold">No. Handphone</small><br />
                                        {{ Common::phoneFormat(Auth::user()->phone) }}
                                    </div>
                                    <div class="mb-3">
                                        <small class="fw-bold">Perusahaan</small><br />
                                        {{ Auth::user()->entity->type_name }}
                                    </div>
                                    <div class="mb-3">
                                        <small class="fw-bold">Nama Perusahaan</small><br />
                                        {{ Auth::user()->entity->name }}
                                    </div>
                                </div>
                            @else
                                <x-form.input-text
                                    name="name"
                                    label="Nama Lengkap"
                                    :old="old('name')"
                                />
                                <x-form.input-group-mask
                                    type="email"
                                    name="email"
                                    label="Email"
                                    mask="email"
                                    addon="<i class='fa-solid fa-envelope'></i>"
                                    :old="old('email')"
                                />
                                <x-form.input-group-mask
                                    name="phone"
                                    label="No. Handphone"
                                    mask="handphone"
                                    addon="<i class='fa-solid fa-mobile-screen'></i>"
                                    :old="old('phone')"
                                />
                                <x-form.select
                                    name="entity_type"
                                    label="Perusahaan"
                                    :option="['1' => 'Perdagangan Barang', '2' => 'Jasa']"
                                    :old="old('entity_type')"
                                />
                                <x-form.input-text
                                    name="entity_name"
                                    label="Nama Perusahaan"
                                    :old="old('entity_name')"
                                />

                                <div class="mt-5 mb-2">
                                    <b><i class="fa-solid fa-door-open"></i> &nbsp;Akun Login</b>
                                </div>

                                <x-form.input-group
                                    type="password"
                                    name="password"
                                    label="Password"
                                    addon="<i class='fa-solid fa-lock'></i>"
                                    autocomplete="new-password"
                                    :old="old('password')"
                                />
                                <x-form.input-group
                                    type="password"
                                    name="password_confirm"
                                    label="Konfirmasi Password"
                                    addon="<i class='fa-solid fa-lock'></i>"
                                    :old="old('password_confirm')"
                                />
                            @endif

                            <div class="mt-5 mb-2">
                                <b><i class="fa-solid fa-money-check-dollar"></i> &nbsp;Metode Pembayaran</b>
                            </div>

                            @foreach ($methods as $m)
                                @php
                                $method_payments = ParameterDetail::select('id', 'name', 'value1', 'value2', 'value3')
                                    ->whereIdParameter($m->id)
                                    ->orderBy('id')
                                    ->get();

                                // if ($m->id == $method->id) {
                                //     $method_payment = $method_payments[0];
                                //     $checked = ' checked';
                                //     $bg = '#eeeeee';
                                // } else {
                                    $method_payment = '';
                                    $checked = '';
                                    $bg = '#e6ebef';
                                // }
                                @endphp
                                <div class="card-method{{ $checked }}">
                                    <div class="form-box clearfix py-2 mb-3" style="background: {{ $bg }};padding-left: 1.2rem;padding-right: 1.2rem;">
                                        <div class="float-start" style="padding-top: 12px;">
                                            <div class="form-radio">
                                                <label class="form-check-label">
                                                    <input type="radio" name="method" class="form-check-input method" value="{{ $m->id }}"{{ $checked }}>
                                                    &nbsp;{{ $m->name }}
                                                    <i class="input-helper"></i>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="float-end">
                                            <img src="{{ asset('images/payment/' . $m->value1) }}" class="img-thumbnail" style="height: 50px;" alt="{{ $m->name . ' - ' . Config::get('app.name') }}" />
                                        </div>
                                    </div>

                                    <div class="card-method-payment method-{{ $m->id }} mb-3">
                                        @foreach ($method_payments as $p)
                                            <div class="form-box clearfix py-2 mb-3">
                                                <div class="float-start" style="padding-top: 1px;">
                                                    <div class="form-radio">
                                                        <label class="form-check-label">
                                                            <input type="radio" name="payment_method" class="form-check-input" value="{{ $p->id }}" data-fee="{{ $p->value1 }}" data-method="{{ $p->value3 }}"{{ ($p->id == @$method_payment->id) ? ' checked' : '' }}>
                                                            &nbsp;{{ $p->name }}
                                                            <i class="input-helper"></i>
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="float-end">
                                                    <img src="{{ asset('images/payment/' . $p->value2) }}" style="height: 25px;" alt="{{ $p->name . ' - ' . Config::get('app.name') }}" />
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach

                            <table class="table-padding mt-3" style="width: 100%;">
                                <tr>
                                    <td>Sub Total</td>
                                    <td style="width: 30px;">Rp.</td>
                                    <td id="subtotal" class="text-end" style="width: 120px;">{{ number_format($package_price, 0, '', '.') }}</td>
                                </tr>
                                <tr>
                                    <td>Biaya Transaksi</td>
                                    <td style="width: 30px;">Rp.</td>
                                    <td id="fee" class="text-end" style="width: 120px;">0</td>
                                </tr>
                                <tr>
                                    <td class="text-end pe-4"><b>Total Biaya</b></td>
                                    <td style="width: 30px;"><b>Rp.</b></td>
                                    <td id="total" class="text-end" style="width: 120px;"><b>0</b></td>
                                </tr>
                            </table>

                            <div class="mt-5">
                                <x-form.checkbox
                                    name="agreement"
                                    :label="'Saya menyetujui <a href=\'' . route('page.terms-conditions', 'client') . '\'><u>Terms & Conditions</u></a> serta <a href=\'' . route('page.privacy-policy') . '\'><u>Privacy policy</u></a>'"
                                    value="1"
                                />
                            </div>

                            <div class="d-grid gap-2 mt-4">
                                <button type="button" id="btn-pay" class="btn btn-primary btn-py">
                                    BAYAR SEKARANG
                                </button>
                            </div>
                        </form>
                    </div>
                    <div class="col-sm-6">
                        <div class="card card-package-info shadow-sm" id="loading">
                            <div class="card-header text-center">
                                <b>.....</b>
                                <h4>
                                    .....
                                    <span style="font-size: 12px;">/ .....</span>
                                </h4>

                                <small>
                                    .....
                                </small>
                            </div>
                            <div class="card-body text-center">
                                <img src="{{ asset('images/loading.gif') }}" style="width: 50px;" />
                            </div>
                        </div>
                        <div class="card card-package-info shadow-sm" id="package">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('styles')
<style>
    .purchase {
        background-color: #deedfa;
    }

    .purchase .card-container {
        border: 0;
        border-radius: 20px;
        width: 900px;
        padding: 15px;
    }

    .card-package {
        text-align : center;
        border: 1px solid #eeeeee;
        color: #697179;
    }
    .card-package.active {
        border: 1px solid var(--blue);
        color: #212529;
    }
    .card-package:hover:not(.active) {
        cursor: pointer;
        color: #212529;
        border: 1px solid #b9b9b9;
    }

    .card-package-info {
        border: 1px solid #eeeeee;
    }
    .card-package-info small {
        font-size: 12px;
    }
    .card-package-info td {
        font-size: 14px;
        padding-top: 8px;
        padding-bottom: 8px;
        border-bottom: 1px dashed #cdd5df;
    }
    .card-package-info .card-header {
        border: 0;
    }

    .card-method-payment {
        padding: 0 1.2rem;
        border: 1px solid #eeeeee;
    }

    .btn-group .btn {
        font-weight: normal;
    }

    @media (max-width: 768px) {
        .purchase .card-container {
            width: 100%;
        }
    }
</style>
@endpush

@push('scripts')
<script>
let package_id = "{{ $package_id }}"
let package_time = "{{ $time }}"
let subtotal = parseFloat("{{ $package_price }}")
let fee = 0
let total = 0

$(document).ready(function() {
    $(".card-method:not(.checked) .card-method-payment").hide()
    getPackage()

    if ($(".email-mask").length) {
        $(".email-mask").inputmask({ alias: "email" })
        $(".handphone-mask").inputmask({ alias: "handphone" })
    }

    $(".btn-time").click(function() {
        package_time = $(this).data("time")

        $(".card-package").each(function() {
            $(this).find(".price").html(moneyFormat($(this).data(package_time)))
            $(this).find(".price-strike").html(moneyFormat($(this).data(`${package_time}-strike`)))
        })

        getPackage()
    })

    $(".card-package").click(function() {
        $(".card-package").removeClass("active")
        $(this).addClass("active")

        package_card = $(this)
        package_id = $(this).data("id")
        getPackage()
    })

    $(".card-method input.method").click(function() {
        method = $(this).val()

        $(".card-method-payment").slideUp()
        $(`.card-method-payment.method-${method}`).slideDown()
        $(`.card-method-payment.method-${method} .form-box`).first().find("input").prop("checked", true)

        getFee($(".card-method-payment input:checked"))
    })

    $(".card-method-payment input").click(function() {
        getFee($(this))
    })

    $("#btn-pay").click(function() {
        const btn = $(this)
        let formData = $("#form-purchase").serializeArray()

        if ($("input[name=method]:checked").val() == "{{ PaymentMethod::transferBank }}")
            formData.push({name: "payment_method", value: "{{ PaymentMethod::permata }}"})

        formData.push({name: "id_package", value: package_id})
        formData.push({name: "package_time", value: package_time})
        formData.push({name: "subtotal", value: subtotal})
        formData.push({name: "fee", value: fee})
        formData.push({name: "total", value: total})

        btn.html("PROCESSING...").attr("disabled", true)

        $.ajax({
            type: "POST",
            url: "{{ route('purchase.store') }}",
            data: formData,
            dataType: "json",
            success: function (response) {
                btn.html("BAYAR SEKARANG").removeAttr("disabled")

                if (response.status) {
                    setNotifsuccess(response.message, response.data.redirect)
                } else {
                    setNotifInfo(response.message)
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                btn.html("BAYAR SEKARANG").removeAttr("disabled")
                ajaxLaravelError(xhr)
            }
        })
    })
})

function getPackage()
{
    const formData = {id: package_id, time: package_time}

    $("#package").hide()
    $("#loading").show()

    $.ajax({
        type: "POST",
        url: "{{ route('purchase.get.package') }}",
        data: formData,
        dataType: "json",
        success: function (response) {
            subtotal = parseFloat(response.data.price)
            getFee($(".card-method-payment input:checked"))

            $("#loading").hide()
            $("#package").html(response.data.package).show()
            $("#subtotal").html(moneyFormat(subtotal))
        },
        error: function (xhr, ajaxOptions, thrownError) {
            ajaxError(xhr.status)
        }
    })
}

function getFee(e)
{
    if (e.length == 0)
        return false

    const fee_amount = parseFloat(e.data("fee"))
    const fee_method = e.data("method")

    fee = (fee_method == "nominal") ? fee_amount : Math.ceil((subtotal * fee_amount) / 100)
    total = subtotal + fee

    $("#fee").html(moneyFormat(fee))
    $("#total").html(moneyFormat(total))
}
</script>
@endpush