@extends('frontend.layouts.app')

@section('content')
@php
    $cgst  = $data['amount'] * 9 / 100;
    $sgst  = $data['amount'] * 9 / 100;
    $total = $data['amount'];
@endphp

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap');

.cd-page { font-family: 'DM Sans', sans-serif; background: #f0f2f8; min-height: 100vh; }

/* ── HERO ── */
.cd-hero {
    background: linear-gradient(135deg, #0b1426 0%, #1e3a5f 100%);
    padding: 44px 0 56px; position: relative; overflow: hidden;
}
.cd-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(232,76,30,.12) 0%, transparent 60%);
}
.cd-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .04;
    background-image: radial-gradient(circle, #fff 1px, transparent 1px);
    background-size: 28px 28px;
}
.cd-hero-inner { position: relative; z-index: 1; text-align: center; }
.cd-hero-tag {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(245,166,35,.12); border: 1px solid rgba(245,166,35,.3);
    color: #f5a623; padding: 5px 16px; border-radius: 50px;
    font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; margin-bottom: 14px;
}
.cd-hero h1 {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(24px, 3.5vw, 40px);
    color: #fff; line-height: 1.15; margin: 0;
}

/* ── LAYOUT ── */
.cd-wrap { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.cd-body { padding: 48px 0 72px; }
.cd-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px; align-items: start;
}

/* ── CARD ── */
.cd-card {
    background: #fff; border-radius: 20px;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 2px 12px rgba(11,20,38,.06);
    overflow: hidden;
}
.cd-card-head {
    padding: 18px 24px; border-bottom: 1px solid #f0f2f8;
    display: flex; align-items: center; gap: 12px;
}
.cd-card-head-ico {
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, #0b1426, #1e3a5f);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 15px; flex-shrink: 0;
}
.cd-card-head h3 { font-size: 14px; font-weight: 700; color: #0b1426; margin: 0; letter-spacing: .2px; }
.cd-card-body { padding: 24px; }

/* ── FORM FIELDS ── */
.cd-fg { margin-bottom: 16px; }
.cd-fg label {
    font-size: 11px; font-weight: 700; color: #64748b;
    letter-spacing: .8px; text-transform: uppercase;
    margin-bottom: 6px; display: block;
}
.cd-fg input[type="text"],
.cd-fg input[type="email"] {
    width: 100%; padding: 11px 14px;
    border: 1.5px solid #e2e8f0; border-radius: 10px;
    font-size: 14px; font-family: 'DM Sans', sans-serif;
    color: #0b1426; background: #f8f9fb; outline: none;
    transition: border-color .2s, background .2s;
}
.cd-fg input[type="text"]:focus,
.cd-fg input[type="email"]:focus { border-color: #e84c1e; background: #fff; }
.cd-fg input[disabled] { color: #64748b; cursor: not-allowed; }
#email_message { margin-top: 4px; }

/* ── ORDER SUMMARY ── */
.cd-summary-card {
    background: #fff; border-radius: 20px;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 2px 12px rgba(11,20,38,.06);
    overflow: hidden; position: sticky; top: 20px;
}
.cd-summary-head {
    background: linear-gradient(135deg, #0b1426, #1e3a5f);
    padding: 18px 22px;
}
.cd-summary-head h3 { font-size: 14px; font-weight: 700; color: #fff; margin: 0; }
.cd-summary-body { padding: 22px; }

.cd-summary-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-bottom: 1px solid #f0f2f8;
    font-size: 14px; color: #475569;
}
.cd-summary-row:last-child { border-bottom: none; }
.cd-summary-row.total {
    font-size: 16px; font-weight: 700; color: #0b1426;
    padding-top: 14px; margin-top: 4px;
    border-top: 2px dashed #e2e8f0; border-bottom: none;
}
.cd-summary-val { font-weight: 600; color: #0b1426; }

/* pay button */
.cd-pay-btn {
    width: 100%; padding: 14px;
    background: linear-gradient(130deg, #e84c1e, #ff6b3d);
    color: #fff; border: none; border-radius: 12px;
    font-size: 15px; font-family: 'DM Sans', sans-serif; font-weight: 700;
    cursor: pointer; transition: all .2s; margin-top: 18px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    letter-spacing: .2px;
}
.cd-pay-btn:hover { box-shadow: 0 8px 28px rgba(232,76,30,.4); transform: translateY(-2px); }
.cd-pay-btn:active { transform: scale(.98); }

.cd-secure { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: #94a3b8; margin-top: 12px; }

/* ── PAYMENT METHOD MODAL ── */
.pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 8px; }
.pm-option { position: relative; }
.pm-option input[type="radio"] { display: none; }
.pm-label {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 16px 12px;
    border: 1.5px solid #e2e8f0; border-radius: 12px;
    cursor: pointer; transition: all .2s; background: #f8f9fb;
    min-height: 90px; position: relative;
}
.pm-label:hover { border-color: #0b1426; background: #fff; }
.pm-option input[type="radio"]:checked + .pm-label {
    border-color: #e84c1e; background: #fff4f1;
    box-shadow: 0 0 0 3px rgba(232,76,30,.12);
}
.pm-label img { width: 48px; height: auto; object-fit: contain; }
.pm-label span { font-size: 12px; font-weight: 600; color: #334155; }
.pm-check {
    position: absolute; top: -6px; right: -6px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #e84c1e; color: #fff;
    display: none; align-items: center; justify-content: center;
    font-size: 10px;
}
.pm-option input[type="radio"]:checked + .pm-label .pm-check { display: flex; }

.pm-section-label {
    font-size: 11px; font-weight: 700; color: #94a3b8;
    letter-spacing: 1px; text-transform: uppercase;
    margin: 16px 0 0; display: block;
}
#payment_validation_message { min-height: 20px; }

@media (max-width: 768px) {
    .cd-grid { grid-template-columns: 1fr; }
    .cd-summary-card { position: static; }
    .cd-body { padding: 32px 0 56px; }
}
@media (max-width: 480px) {
    .pm-grid { grid-template-columns: 1fr 1fr; }
}
</style>

<div class="cd-page">

{{-- Hero --}}
<section class="cd-hero">
    <div class="cd-wrap cd-hero-inner">
        <div class="cd-hero-tag">🤝 Partner Registration</div>
        <h1>{{ translate('Complete Your Registration') }}</h1>
    </div>
</section>

<input type="hidden" id="pincode" name="pincode" value="{{ $data['pincode'] }}">

<div class="cd-body">
    <div class="cd-wrap">
        <div class="cd-grid">

            {{-- Left: User Info --}}
            <div class="cd-card">
                <div class="cd-card-head">
                    <div class="cd-card-head-ico">👤</div>
                    <h3>{{ translate('Your Details') }}</h3>
                </div>
                <div class="cd-card-body">
                    <div class="cd-fg">
                        <label>{{ translate('Full Name') }}</label>
                        <input type="text" class="form-control" disabled value="{{ auth()->user()->name }}" name="uname">
                    </div>
                    <div class="cd-fg">
                        <label>{{ translate('Phone Number') }}</label>
                        <input type="text" class="form-control" disabled value="{{ auth()->user()->phone }}" name="uphone">
                    </div>
                    <div class="cd-fg">
                        <label>{{ translate('Email Address') }} <span style="color:#e84c1e;">*</span></label>
                        <input type="email" class="form-control" id="uemail" value="{{ auth()->user()->email }}" name="uemail" required placeholder="your@email.com">
                        <div id="email_message"></div>
                    </div>

                    {{-- GST (hidden by default) --}}
                    <div class="gst-details" style="display:none;">
                        <div class="cd-fg">
                            <label>{{ translate('GST Number') }} <span style="color:#e84c1e;">*</span></label>
                            <input type="text" class="form-control" name="gst_number" id="gst_number">
                            <div id="gst_message" style="margin-top:4px;"></div>
                        </div>
                        <div class="cd-fg">
                            <label>{{ translate('Company Name') }} <span style="color:#e84c1e;">*</span></label>
                            <input type="text" class="form-control" id="company_name" name="company_name">
                        </div>
                        <div style="text-align:center;margin-bottom:8px;">
                            <button onclick="verifyGst()" class="btn btn-primary verify" type="button">{{ translate('Verify GST') }}</button>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Right: Order Summary --}}
            <div class="cd-summary-card">
                <div class="cd-summary-head">
                    <h3>🧾 {{ translate('Order Summary') }}</h3>
                </div>
                <div class="cd-summary-body">
                    <div class="cd-summary-row">
                        <span>{{ translate('Package Amount') }}</span>
                        <span class="cd-summary-val">{{ single_price($data['amount']) }}</span>
                    </div>
                    <div class="cd-summary-row">
                        <span>{{ translate('Duration') }}</span>
                        <span class="cd-summary-val">{{ $data['limitation'] }} {{ translate('Year') }}</span>
                    </div>
                    <div class="cd-summary-row">
                        <span>{{ translate('Commission') }}</span>
                        <span class="cd-summary-val">{{ $data['sharing'] }}%</span>
                    </div>
                    <div class="cd-summary-row">
                        <span>{{ translate('Pincode') }}</span>
                        <span class="cd-summary-val">{{ $data['pincode'] }}</span>
                    </div>
                    <div class="cd-summary-row total">
                        <span>{{ translate('Total Payable') }}</span>
                        <span style="color:#e84c1e;">{{ single_price($total) }}</span>
                    </div>

                    <button type="button" onclick="select_payment_type({{ $data['id'] }})" class="cd-pay-btn">
                        <i class="fa fa-lock" style="font-size:13px;"></i>
                        {{ translate('Proceed to Payment') }}
                    </button>
                    <div class="cd-secure">
                        <i class="fa fa-shield-halved"></i>
                        {{ translate('100% Secure & Encrypted') }}
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

</div>

{{-- ── MODALS ── --}}

{{-- Payment Method Modal --}}
<div class="modal fade" id="select_payment_type_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content" style="border-radius:20px;border:none;overflow:hidden;">
            <div class="modal-header" style="background:linear-gradient(135deg,#0b1426,#1e3a5f);border:none;padding:18px 24px;">
                <h5 class="modal-title" style="color:#fff;font-family:'DM Sans',sans-serif;font-weight:700;font-size:15px;">
                    💳 {{ translate('Select Payment Method') }}
                </h5>
                <button type="button" class="close" style="color:#fff;opacity:.7;" onclick="closeModel('payment_type_model')">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body" style="padding:24px;">
                <div id="payment_validation_message" style="margin-bottom:4px;"></div>

                <form id="package_payment_form" action="{{ route('customer_packages.purchase') }}" method="post">
                    @csrf
                    <input type="hidden" name="customer_package_id" id="customer_package_id" value="{{ $data['id'] }}">
                    <input type="hidden" id="company_name1" name="company_name1">
                    <input type="hidden" id="gst_number1" name="gst_number1">
                    <input type="hidden" id="check_gst1" name="check_gst1">
                    <input type="hidden" id="total_amount" name="total_amount" value="{{ $total }}">
                    <input type="hidden" id="email" name="email" value="">
                    <input type="hidden" id="payment_type" value="">
                    <input type="hidden" id="payment_option" name="payment_option">

                    <span class="pm-section-label">{{ translate('Online Payment') }}</span>
                    <div class="pm-grid">
                        <div class="pm-option">
                            <input type="radio" name="payment" id="cashfree" onclick="selectPaymentMethod('online','cashfree')">
                            <label for="cashfree" class="pm-label">
                                <div class="pm-check">✓</div>
                                <div style="width:80px;height:36px;background:linear-gradient(135deg,#00b84a,#00d05a);border-radius:8px;display:flex;align-items:center;justify-content:center;">
                                    <span style="color:#fff;font-size:11px;font-weight:800;letter-spacing:.5px;font-family:'DM Sans',sans-serif;">cashfree</span>
                                </div>
                                <span>Cashfree</span>
                            </label>
                        </div>
                        <div class="pm-option">
                            <input type="radio" name="payment" id="paytm" onclick="selectPaymentMethod('online','paytm')">
                            <label for="paytm" class="pm-label">
                                <div class="pm-check">✓</div>
                                <img src="{{ asset('public/assets/img/payment_method/paytm.png') }}" alt="Paytm">
                                <span>Paytm</span>
                            </label>
                        </div>
                        <div class="pm-option">
                            <input type="radio" name="payment" id="payu" onclick="selectPaymentMethod('online','payumoney')">
                            <label for="payu" class="pm-label">
                                <div class="pm-check">✓</div>
                                <div style="width:80px;height:36px;background:linear-gradient(135deg,#002f6c,#1a56a0);border-radius:8px;display:flex;align-items:center;justify-content:center;">
                                    <span style="color:#fff;font-size:13px;font-weight:800;letter-spacing:1px;font-family:'DM Sans',sans-serif;">Pay<span style="color:#f7c948;">U</span></span>
                                </div>
                                <span>PayU</span>
                            </label>
                        </div>
                    </div>

                    <span class="pm-section-label">{{ translate('Offline Payment') }}</span>
                    <div class="pm-grid">
                        <div class="pm-option">
                            <input type="radio" name="payment" id="bank_transfer" onclick="selectPaymentMethod('offline','bank_transfer')">
                            <label for="bank_transfer" class="pm-label">
                                <div class="pm-check">✓</div>
                                <img src="{{ asset('public/assets/img/payment_method/bank_transer_large.png') }}" alt="Bank Transfer">
                                <span>Bank Transfer</span>
                            </label>
                        </div>
                    </div>

                    <div style="display:flex;gap:10px;margin-top:20px;">
                        <button type="button" onclick="closeModel('payment_type_model')"
                            style="flex:1;padding:12px;border:1.5px solid #e2e8f0;border-radius:10px;background:#f8f9fb;color:#475569;font-family:'DM Sans',sans-serif;font-weight:600;font-size:14px;cursor:pointer;">
                            {{ translate('Cancel') }}
                        </button>
                        <button type="button" onclick="makePayment()"
                            style="flex:2;padding:12px;background:linear-gradient(130deg,#e84c1e,#ff6b3d);color:#fff;border:none;border-radius:10px;font-family:'DM Sans',sans-serif;font-weight:700;font-size:14px;cursor:pointer;">
                            {{ translate('Confirm & Pay') }} →
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{{-- Offline Payment Modal --}}
<div class="modal fade" id="offline_customer_package_purchase_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content" style="border-radius:20px;overflow:hidden;">
            <div class="modal-header" style="background:linear-gradient(135deg,#0b1426,#1e3a5f);border:none;padding:18px 24px;">
                <h5 class="modal-title" style="color:#fff;font-family:'DM Sans',sans-serif;font-weight:700;">
                    🏦 {{ translate('Offline Package Purchase') }}
                </h5>
                <button type="button" class="close" style="color:#fff;opacity:.7;" data-dismiss="modal" aria-label="Close">
                    <span>&times;</span>
                </button>
            </div>
            <div id="offline_customer_package_purchase_modal_body"></div>
        </div>
    </div>
</div>

@endsection

@section('script')
<script>
function select_payment_type(id) {
    var email = $('#uemail').val();
    if (email == '') {
        $('#email_message').show();
        $('#email_message').html('<span style="color:#e84c1e;font-size:12px;">⚠️ Please enter your email address</span>');
        $('#email_message').delay(5000).fadeOut('slow');
        return false;
    } else {
        $('#email').val(email);
    }
    $('input[name=customer_package_id]').val(id);
    $('#select_payment_type_modal').modal('show');
}

function makePayment() {
    if (!$("input:radio[name='payment']").is(":checked")) {
        $('#payment_validation_message').show();
        $('#payment_validation_message').html('<span style="color:#e84c1e;font-size:12px;">⚠️ Please select a payment method</span>');
        $('#payment_validation_message').delay(5000).fadeOut('slow');
        return;
    }
    var package_id = $('#customer_package_id').val();
    var amount     = $('#total_amount').val();
    var type       = $('#payment_type').val();
    var pincode    = $('#pincode').val();

    if (type == 'online') {
        $('#package_payment_form').submit();
    } else if (type == 'offline') {
        $('#select_payment_type_modal').modal('hide');
        $.post('{{ route('offline_customer_package_purchase_modal') }}', {
            _token: '{{ csrf_token() }}',
            package_id: package_id,
            amount: amount,
            pincode: pincode
        }, function(data) {
            $('#offline_customer_package_purchase_modal_body').html(data);
            $('#offline_customer_package_purchase_modal').modal('show');
        });
    }
}

function showHideGstDetails() {
    if ($(".gst-checkbox").prop('checked') == false) {
        $('.gst-details').hide();
        $('#check_gst1').val("");
        $(".make_payment").removeAttr("disabled");
    } else {
        $('.gst-details').show();
        $('#check_gst1').val(1);
        $(".make_payment").attr("disabled", true);
    }
}

function verifyGst() {
    var g = $('#gst_number').val();
    var reg = /^([0-9]{2}[a-zA-Z]{4}([a-zA-Z]{1}|[0-9]{1})[0-9]{4}[a-zA-Z]{1}([a-zA-Z]|[0-9]){3}){0,15}$/;
    if (g != '') {
        if (g.match(reg)) {
            $(".make_payment").removeAttr("disabled");
            $(".verify").hide();
            $('#gst_message').html('<span style="color:#059669;font-size:12px;">✓ GST verified successfully!</span>');
        } else {
            $(".make_payment").attr("disabled", true);
            $('#gst_message').html('<span style="color:#e84c1e;font-size:12px;">⚠️ Invalid GST number</span>');
        }
    } else {
        $('#gst_message').html('<span style="color:#e84c1e;font-size:12px;">⚠️ Please enter GST number</span>');
    }
    $('#gst_message').delay(5000).fadeOut('slow');
}

function closeModel(type) {
    if (type == "payment_type_model") {
        $('#select_payment_type_modal').modal('hide');
    } else if (type == "package_model") {
        $('#price_modal').modal('hide');
    }
}

function selectPaymentMethod(payment_type, payment_method) {
    $('#payment_type').val(payment_type);
    $('#payment_option').val(payment_method);
}

function show_price_modal(id) {
    $('input[name=customer_package_id]').val(id);
    var company_name = $('#company_name').val();
    var gst_number   = $('#gst_number').val();
    $('#company_name1').val(company_name);
    $('#gst_number1').val(gst_number);
    $('#price_modal').modal('show');
}
</script>
@endsection