@extends('layouts.app')

@section('title', 'Proses Pembelian - Creasy')

@section('content')

@include('partials.header')

<style>

/* =========================================================
   CREASY PROCESS PAGE
========================================================= */

.creasy-process-page {
    min-height: calc(100vh - 80px);
    padding: 60px 20px 80px;
    background:
        radial-gradient(circle at top right, rgba(34, 207, 228, 0.08), transparent 35%),
        radial-gradient(circle at bottom left, rgba(184, 90, 233, 0.08), transparent 35%),
        #020b11;
    color: #fff;
}

.process-heading {
    text-align: center;
    margin-bottom: 45px;
}

.process-heading h1 {
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 10px;
}

.process-heading p {
    color: #8fa6b2;
    font-size: 15px;
    margin: 0;
}

.process-grid {
    max-width: 1100px;
    margin: auto;
}

.process-card {
    background: rgba(8, 22, 30, 0.92);
    border: 1px solid rgba(34, 207, 228, 0.12);
    border-radius: 22px;
    padding: 30px;
    height: 100%;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.25);
}

.process-card-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 25px;
    color: #fff;
}

/* =========================================================
   PACKAGE BOX
========================================================= */

.package-box {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    padding: 22px;
}

.package-name {
    font-size: 13px;
    color: #8fa6b2;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.package-title {
    font-size: 26px;
    font-weight: 800;
    color: #22cfe4;
    margin-bottom: 20px;
}

.package-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.package-detail-label {
    color: #8fa6b2;
    font-size: 13px;
}

.package-detail-value {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

/* =========================================================
   STARTER CREDIT COUNTER
========================================================= */

.starter-credit-box {
    margin-top: 18px;
    padding: 18px;
    border-radius: 16px;
    background: rgba(34, 207, 228, 0.05);
    border: 1px solid rgba(34, 207, 228, 0.15);
}

.starter-credit-title {
    color: #8fa6b2;
    font-size: 13px;
    margin-bottom: 12px;
}

.starter-credit-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.credit-button {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(34, 207, 228, 0.25);
    background: rgba(34, 207, 228, 0.08);
    color: #22cfe4;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s ease;
}

.credit-button:hover:not(:disabled) {
    background: rgba(34, 207, 228, 0.18);
    transform: translateY(-1px);
}

.credit-button:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.credit-number {
    min-width: 100px;
    text-align: center;
}

.credit-number strong {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.credit-number span {
    display: block;
    color: #8fa6b2;
    font-size: 12px;
    margin-top: 6px;
}

.starter-minimum {
    margin-top: 12px;
    font-size: 12px;
    color: #8fa6b2;
    text-align: center;
}

/* =========================================================
   TOTAL
========================================================= */

.total-box {
    margin-top: 22px;
    padding: 20px;
    border-radius: 17px;
    background: linear-gradient(
        135deg,
        rgba(34, 207, 228, 0.08),
        rgba(184, 90, 233, 0.08)
    );
    border: 1px solid rgba(34, 207, 228, 0.15);
}

.total-label {
    color: #8fa6b2;
    font-size: 13px;
    margin-bottom: 5px;
}

.total-price {
    font-size: 30px;
    font-weight: 800;
    color: #22cfe4;
}

.total-description {
    margin-top: 7px;
    font-size: 12px;
    color: #718994;
}

/* =========================================================
   PAYMENT
========================================================= */

.payment-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.payment-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.025);
    cursor: pointer;
    transition: .2s ease;
}

.payment-option:hover {
    border-color: rgba(34, 207, 228, 0.35);
    background: rgba(34, 207, 228, 0.04);
}

.payment-option input {
    position: absolute;
    opacity: 0;
}

.payment-icon {
    width: 45px;
    height: 45px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34, 207, 228, 0.08);
    color: #22cfe4;
    font-size: 20px;
    flex-shrink: 0;
}

.payment-info {
    flex: 1;
}

.payment-info strong {
    display: block;
    color: #fff;
    font-size: 15px;
    margin-bottom: 3px;
}

.payment-info span {
    color: #718994;
    font-size: 12px;
}

.payment-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
}

.payment-option:has(input:checked) {
    border-color: #22cfe4;
    background: rgba(34, 207, 228, 0.06);
}

.payment-option:has(input:checked) .payment-check {
    border: 5px solid #22cfe4;
}

/* =========================================================
   SUBMIT
========================================================= */

.process-submit {
    width: 100%;
    margin-top: 22px;
    border: 0;
    border-radius: 14px;
    padding: 15px 20px;
    background: linear-gradient(
        135deg,
        #22cfe4,
        #1bb4ca
    );
    color: #021015;
    font-size: 15px;
    font-weight: 800;
    transition: .2s ease;
}

.process-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(34, 207, 228, 0.18);
}

.payment-note {
    margin-top: 14px;
    text-align: center;
    color: #718994;
    font-size: 12px;
    line-height: 1.6;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 767px) {

    .creasy-process-page {
        padding: 40px 15px 60px;
    }

    .process-heading h1 {
        font-size: 28px;
    }

    .process-card {
        padding: 22px;
    }

    .total-price {
        font-size: 26px;
    }

}

</style>


<section class="creasy-process-page">

    <div class="process-heading">

        <h1>Proses Pembelian</h1>

        <p>
            Pilih paket dan metode pembayaran yang kamu inginkan.
        </p>

    </div>


    <div class="container process-grid">

        <div class="row g-4">


            {{-- =====================================================
                PACKAGE
            ====================================================== --}}

            <div class="col-lg-5">

                <div class="process-card">

                    <div class="process-card-title">
                        Paket yang Dipilih
                    </div>


                    <div class="package-box">

                        <div class="package-name">
                            Creasy Package
                        </div>

                        <div class="package-title">
                            {{ $paket->paket }}
                        </div>


                        {{-- =================================================
                            STARTER
                        ================================================== --}}

                        @if (strtolower($paket->paket) === 'starter')

                            @php

                                $starterMinCredit = 5;

                                /*
                                |--------------------------------------------------------------------------
                                | HARGA PER CREDIT DARI DATABASE
                                |--------------------------------------------------------------------------
                                */

                                $starterPricePerCredit =
                                    $paket->kredit > 0
                                        ? ($paket->harga / $paket->kredit)
                                        : 2000;

                                $starterCredit = $starterMinCredit;

                                $starterPrice =
                                    $starterCredit * $starterPricePerCredit;

                                $uniqueCode = 415;

                                $starterTotal =
                                    $starterPrice + $uniqueCode;

                            @endphp


                            {{-- CREDIT COUNTER --}}

                            <div class="starter-credit-box">

                                <div class="starter-credit-title">
                                    Creative Credits
                                </div>


                                <div class="starter-credit-control">

                                    <button
                                        type="button"
                                        class="credit-button"
                                        id="starterMinus"
                                        disabled
                                    >
                                        <i class="bi bi-dash"></i>
                                    </button>


                                    <div class="credit-number">

                                        <strong id="starterCreditDisplay">
                                            {{ $starterCredit }}
                                        </strong>

                                        <span>
                                            Credits
                                        </span>

                                    </div>


                                    <button
                                        type="button"
                                        class="credit-button"
                                        id="starterPlus"
                                    >
                                        <i class="bi bi-plus"></i>
                                    </button>

                                </div>


                                <div class="starter-minimum">

                                    Minimal pembelian
                                    <strong>5 credit</strong>

                                </div>

                            </div>


                            {{-- PACKAGE DETAILS --}}

                            <div class="package-details">

                                <div>

                                    <div class="package-detail-label">
                                        Harga per credit
                                    </div>

                                    <div class="package-detail-value">

                                        Rp
                                        <span id="starterPricePerCredit">
                                            {{ number_format($starterPricePerCredit, 0, ',', '.') }}
                                        </span>

                                    </div>

                                </div>


                                <div style="text-align:right;">

                                    <div class="package-detail-label">
                                        Total Credit
                                    </div>

                                    <div class="package-detail-value">

                                        <span id="starterCreditDetail">
                                            {{ $starterCredit }}
                                        </span>

                                        Credit

                                    </div>

                                </div>

                            </div>


                            {{-- TOTAL --}}

                            <div class="total-box">

                                <div class="total-label">
                                    Total Pembayaran
                                </div>

                                <div
                                    class="total-price"
                                    id="starterTotalDisplay"
                                >
                                    Rp {{ number_format($starterTotal, 0, ',', '.') }}
                                </div>

                                <div
                                    class="total-description"
                                    id="starterPriceDescription"
                                >
                                    {{ $starterCredit }}
                                    Credits ×
                                    Rp {{ number_format($starterPricePerCredit, 0, ',', '.') }}
                                    + Kode unik Rp
                                    {{ number_format($uniqueCode, 0, ',', '.') }}
                                </div>

                            </div>


                        {{-- =================================================
                            PACKAGE LAIN
                        ================================================== --}}

                        @else

                            <div class="package-details">

                                <div>

                                    <div class="package-detail-label">
                                        Harga Paket
                                    </div>

                                    <div class="package-detail-value">

                                        Rp
                                        {{ number_format($paket->harga, 0, ',', '.') }}

                                    </div>

                                </div>


                                <div style="text-align:right;">

                                    <div class="package-detail-label">
                                        Credit
                                    </div>

                                    <div class="package-detail-value">

                                        {{ $paket->kredit }}
                                        Credit

                                    </div>

                                </div>

                            </div>


                            <div class="total-box">

                                <div class="total-label">
                                    Total Pembayaran
                                </div>

                                <div class="total-price">

                                    Rp
                                    {{ number_format($paket->harga + 415, 0, ',', '.') }}

                                </div>

                                <div class="total-description">

                                    Harga paket
                                    + kode unik Rp 415

                                </div>

                            </div>

                        @endif

                    </div>

                </div>

            </div>



            {{-- =====================================================
                PAYMENT
            ====================================================== --}}

            <div class="col-lg-7">

                <div class="process-card">

                    <div class="process-card-title">
                        Pilih Metode Pembayaran
                    </div>


                    @if (session('error'))

                        <div class="alert alert-danger">
                            {{ session('error') }}
                        </div>

                    @endif


                    <form
                        action="{{ route('proses.payment') }}"
                        method="POST"
                    >

                        @csrf


                        {{-- =================================================
                            STARTER HIDDEN DATA
                        ================================================== --}}

                        @if (strtolower($paket->paket) === 'starter')

                            <input
                                type="hidden"
                                name="credit"
                                id="paymentCredit"
                                value="{{ $starterCredit }}"
                            >

                            <input
                                type="hidden"
                                name="harga"
                                id="paymentHarga"
                                value="{{ $starterPrice }}"
                            >

                        @endif


                        {{-- PACKAGE ID --}}

                        <input
                            type="hidden"
                            name="idpaket"
                            value="{{ $paket->idpaket }}"
                        >


                        {{-- =================================================
                            PAYMENT OPTIONS
                        ================================================== --}}

                        <div class="payment-list">

                            @forelse ($payments as $payment)

                                <label class="payment-option">

                                    <input
                                        type="radio"
                                        name="payment"
                                        value="{{ $payment->payment }}"
                                        required
                                    >


                                    <div class="payment-icon">

                                        @if (strtolower($payment->payment) === 'dana')

                                            <i class="bi bi-wallet2"></i>

                                        @elseif (strtolower($payment->payment) === 'mandiri')

                                            <i class="bi bi-bank"></i>

                                        @else

                                            <i class="bi bi-credit-card"></i>

                                        @endif

                                    </div>


                                    <div class="payment-info">

                                        <strong>
                                            {{ $payment->payment }}
                                        </strong>

                                        <span>
                                            {{ $payment->metode }}
                                        </span>

                                        <span
                                            style="display:none;"
                                        >
                                            {{ $payment->rekening }}
                                        </span>

                                    </div>


                                    <div class="payment-check"></div>

                                </label>

                            @empty

                                <div class="alert alert-warning">

                                    Belum ada metode pembayaran
                                    yang tersedia.

                                </div>

                            @endforelse

                        </div>


                        {{-- =================================================
                            SUBMIT
                        ================================================== --}}

                        @if ($payments->count() > 0)

                            <button
                                type="submit"
                                class="process-submit"
                            >

                                <i class="bi bi-arrow-right-circle me-2"></i>

                                Lanjutkan Pembayaran

                            </button>

                        @endif


                        <div class="payment-note">

                            Setelah melanjutkan, kamu akan mendapatkan
                            instruksi pembayaran sesuai metode yang dipilih.

                        </div>

                    </form>

                </div>

            </div>

        </div>

    </div>

</section>



{{-- =========================================================
    LOGIN / REGISTER
========================================================= --}}

@if (!session()->has('user_id') || !session()->has('token'))

    <div class="container pb-5">

        <div
            class="text-center"
            style="color:#718994;font-size:13px;"
        >

            Silakan

            <a
                href="/loginpanel?redirect={{ urlencode(url('/proses?idpaket=' . $paket->idpaket)) }}"
                style="color:#22cfe4;text-decoration:none;font-weight:700;"
            >
                Login
            </a>

            atau

            <a
                href="/register?redirect={{ urlencode(url('/proses?idpaket=' . $paket->idpaket)) }}"
                style="color:#22cfe4;text-decoration:none;font-weight:700;"
            >
                Daftar
            </a>

            terlebih dahulu untuk melanjutkan pembelian.

        </div>

    </div>

@endif



{{-- =========================================================
    STARTER CREDIT JAVASCRIPT
========================================================= --}}

@if (strtolower($paket->paket) === 'starter')

<script>

document.addEventListener('DOMContentLoaded', function () {

    let credit = 5;

    const minCredit = 5;

    /*
    |--------------------------------------------------------------------------
    | Harga per credit berasal dari DATABASE
    |--------------------------------------------------------------------------
    */

    const pricePerCredit = {{ $starterPricePerCredit }};

    /*
    |--------------------------------------------------------------------------
    | KODE UNIK
    |--------------------------------------------------------------------------
    */

    const uniqueCode = 415;


    /*
    |--------------------------------------------------------------------------
    | ELEMENT
    |--------------------------------------------------------------------------
    */

    const minusButton =
        document.getElementById('starterMinus');

    const plusButton =
        document.getElementById('starterPlus');

    const creditDisplay =
        document.getElementById('starterCreditDisplay');

    const creditDetail =
        document.getElementById('starterCreditDetail');

    const paymentCredit =
        document.getElementById('paymentCredit');

    const paymentHarga =
        document.getElementById('paymentHarga');

    const totalDisplay =
        document.getElementById('starterTotalDisplay');

    const priceDescription =
        document.getElementById('starterPriceDescription');


    /*
    |--------------------------------------------------------------------------
    | FORMAT RUPIAH
    |--------------------------------------------------------------------------
    */

    function formatRupiah(number) {

        return new Intl.NumberFormat('id-ID').format(number);

    }


    /*
    |--------------------------------------------------------------------------
    | UPDATE STARTER
    |--------------------------------------------------------------------------
    */

    function updateStarter() {

        /*
        | Harga credit tanpa kode unik
        */

        const price =
            credit * pricePerCredit;


        /*
        | Total transfer
        */

        const total =
            price + uniqueCode;


        /*
        | Update tampilan
        */

        creditDisplay.textContent =
            credit;

        creditDetail.textContent =
            credit;


        totalDisplay.textContent =
            'Rp ' + formatRupiah(total);


        priceDescription.innerHTML =
            credit +
            ' Credits × Rp ' +
            formatRupiah(pricePerCredit) +
            ' + Kode unik Rp ' +
            formatRupiah(uniqueCode);


        /*
        |--------------------------------------------------------------------------
        | Update hidden input untuk backend
        |--------------------------------------------------------------------------
        */

        paymentCredit.value =
            credit;

        paymentHarga.value =
            price;


        /*
        |--------------------------------------------------------------------------
        | DISABLE MINUS JIKA 5
        |--------------------------------------------------------------------------
        */

        if (credit <= minCredit) {

            minusButton.disabled = true;

            minusButton.style.opacity = '0.35';

            minusButton.style.cursor = 'not-allowed';

        } else {

            minusButton.disabled = false;

            minusButton.style.opacity = '1';

            minusButton.style.cursor = 'pointer';

        }

    }


    /*
    |--------------------------------------------------------------------------
    | PLUS
    |--------------------------------------------------------------------------
    */

    plusButton.addEventListener('click', function () {

        credit++;

        updateStarter();

    });


    /*
    |--------------------------------------------------------------------------
    | MINUS
    |--------------------------------------------------------------------------
    */

    minusButton.addEventListener('click', function () {

        if (credit > minCredit) {

            credit--;

            updateStarter();

        }

    });


    /*
    |--------------------------------------------------------------------------
    | INITIAL
    |--------------------------------------------------------------------------
    */

    updateStarter();

});

</script>

@endif


@endsection