@extends(EcommerceHelper::viewPath('customers.master'))

@php
    use Botble\Payment\Facades\PaymentMethods;
@endphp
{{-- @section('title', __('Order information')) --}}

@section('content')
 <link href="https://cdn.materialdesignicons.com/7.2.96/css/materialdesignicons.min.css" rel="stylesheet">
    <style>
       .btn-secondary{
            border-radius: 6px !important;
            font-weight: 600 !important;
            padding: .5rem 1rem !important;
        }
        .bb-profile-header {
            display: none;
        }

        .orders-table thead th {
            background: #f9fafb;
            padding: 12px 15px;
            text-align: left;
            font-weight: 600;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: rgb(7, 55, 99);
            vertical-align: middle;
            border-bottom: 2px solid #dee2e6;
            white-space: nowrap;
        }

        .orders-table tbody tr:hover {
            /* background-color: #f8f9fa; */
            background-color: #ECECEC;
        }

        .orders-table tbody td {
            padding: 12px 15px;
            vertical-align: middle;
            border-bottom: 1px solid #e9ecef;
            font-size: 14px;
            color: #495057;
        }

        .orders-table tbody tr {
            transition: background-color 0.15s ease;
        }

        .bb-order-detail-wrapper .card {
            box-shadow: none !important;
        }

        /* .bb-payment-proof-card {
                border: 0px solid #eee !important;
                box-shadow: none !important;
            } */
        .form-control {

            height: 38px !important;
        }

        .bb-customer-page .bb-profile-content {
            padding: 0rem 2rem 2rem 2rem;
        }
           .custom-steps .step {
          display: block;
          flex: 1;
          text-align: center;
      }

      .custom-steps .step .step-icon-wrap {
          display: block;
          position: relative;
          width: 100%;
          height: 70px;
          text-align: center;
      }

      .custom-steps .step.completed .step-icon {
          border-color: #88aaf3;
          background-color: #88aaf3;
          color: #fff;
      }

      .custom-steps .step .step-icon {
            display: inline-block;
            position: relative;
            width: 53px;
            height: 53px;
            border: 1px solid #e1e7ec;
            border-radius: 10px;
            background-color: #f5f5f5;
            color: #374250;
            font-size: 33px;
            line-height: 53px;
            z-index: 5;
      }

      .custom-steps .step.completed .step-icon-wrap::after {
          background-color: #88aaf3;
      }

      .custom-steps .step .step-icon-wrap::after {
          display: block;
          position: absolute;
          top: 38%;
          width: 50%;
          height: 3px;
          margin-top: -1px;
          background-color: #e1e7ec;
          content: "";
          z-index: 1;
          right: 0;
      }

      .custom-steps .step .step-title {
         margin-top: 0px;
        margin-bottom: 0;
        color: #606975;
        font-size: 13px;    
        font-weight: 500;
      }

      .custom-steps .step .step-icon-wrap::before {
          display: block;
          position: absolute;
          top: 38%;
          width: 50%;
          height: 3px;
          margin-top: -1px;
          background-color: #e1e7ec;
          content: "";
          z-index: 1;
          left: 0;
      }

      .custom-steps .step.completed .step-icon-wrap::before {
          background-color: #88aaf3;
      }

      .bg-faded,
      .bg-secondary {
          background-color: #f5f5f5 !important;
          color: #606975;
      }

      .custom-steps .step:first-child .step-icon-wrap::before {
          display: none;
      }

      .custom-steps .step:last-child .step-icon-wrap::after {
          display: none;
      }

      .ec-odr-dtl .product-img {
          width: 50px;
          border-radius: 15px;
      }

      tbody {
          /* color: #8a909d; */
          /* text-align: center; */
      }

      @media (max-width: 576px) {
          .custom-steps .step {
              margin-bottom: 12px;
          }
      }
       @media (max-width:  810px) {
        .bb-order-header .bb-order-title { 
            font-size: 1.25rem;
         }
       }

        @media (max-width: 767px) {
            h2 {
                line-height: 19px !important;
            }
            .bb-order-header{
                margin-bottom:10px;
            }
            .orders-table-container {
                margin: 0 -15px;
            }

            .orders-table-wrapper {
                overflow-x: visible;
            }

            .orders-table {
                display: block;
                width: 100%;
                min-width: auto;
            }

            .orders-table thead {
                display: none;
            }

            .orders-table tbody {
                display: block;
                width: 100%;
            }

            .orders-table tbody tr {
                display: block;
                background: #fff;
                border: 1px solid #e9ecef;
                border-radius: 8px;
                margin-bottom: 15px;
                padding: 15px;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }

            .orders-table tbody td {
                display: block;
                width: 100%;
                padding: 8px 0;
                border: none;
                text-align: left;
                position: relative;
                padding-left: 120px;
                min-height: 24px;
            }

            .orders-table tbody td:before {
                content: attr(data-label);
                position: absolute;
                left: 0;
                top: 8px;
                width: 110px;
                font-weight: 600;
                color: #495057;
                font-size: 13px;
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }

            .orders-table tbody td:nth-child(1):before {
                content: "Product";
            }

            .orders-table tbody td:nth-child(2):before {
                content: "Price";
            }

            .orders-table tbody td:nth-child(3):before {
                content: "Quantity";
            }

            .orders-table tbody td:nth-child(4):before {
                content: "Total";
            }
            .bb-order-header .bb-order-title{
                    font-size: 15PX !important;
            }
        }
        
        .payment-summary {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }
        

        
        .list_payment_method .list-group-item.active {
            background-color: #e3f2fd;
            border-color: #2196f3;
        }
        
        /* Payment Methods Section Styling */
        .payment-methods-section {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            border: 1px solid #e9ecef;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        .payment-methods-header {
            border-bottom: 1px solid #f0f0f0;
            padding-bottom: 15px;
        }
        
        .payment-methods-title {
            color: #2c3e50;
            font-weight: 600;
            font-size: 16px;
            display: flex;
            align-items: center;
        }
        
        .payment-methods-subtitle {
            font-size: 13px;
            margin-top: 4px;
        }
        
        .payment-methods-list .list-group-item {
            border: 2px solid #e9ecef;
            border-radius: 10px;
            margin-bottom: 12px;
            padding: 16px 20px;
            transition: all 0.3s ease;
            cursor: pointer;
            background: #fafbfc;
        }
        
        .payment-methods-list .list-group-item:hover {
            border-color: #007bff;
            background-color: #f8f9ff;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0,123,255,0.15);
        }
        
        .payment-methods-list .list-group-item.active {
            background-color: #e7f3ff;
            border-color: #007bff;
            box-shadow: 0 4px 12px rgba(0,123,255,0.2);
        }
        
        .payment-methods-list .payment_method_item {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .payment-methods-list .payment_method_item label {
            display: flex;
            align-items: center;
            margin: 0;
            cursor: pointer;
            font-weight: 500;
            color: #495057;
        }
        
        .payment-methods-list .payment_method_item input[type="radio"] {
            margin-right: 12px;
            transform: scale(1.2);
        }
        
        .payment-methods-list .payment_method_item .payment-method-logo {
            height: 24px;
            margin-left: auto;
        }
        .bb-customer-page .customer-order-detail span{
            margin: 4px 0 !important;
        }
        .bb-order-detail-wrapper .bb-order-info-list {
            gap: 0rem !important;
        }
        
        /* Mobile Responsive Styles */
        @media (max-width: 768px) {
            .input-group>.form-control, .input-group>.form-floating, .input-group>.form-select{
                    width: 100% !important;
            }
            .bb-customer-page .bb-profile-content {
                padding: 0rem 1rem 1.5rem;
            }
            
            .bb-order-header {
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 1rem;
            }
            
            .bb-order-header .bb-order-title {
                font-size: 1.25rem !important;
            }
            
            .bb-order-actions {
                width: 100%;
                justify-content: flex-start !important;
            }
            
            .bb-order-actions .btn {
                font-size: 12px !important;
                padding: 0.4rem 0.8rem !important;
                flex: 1;
                min-width: auto;
            }
            
            .custom-steps {
                flex-direction: column !important;
            }
            
            .custom-steps .step {
                display: flex !important;
                align-items: center;
                text-align: left !important;
                /* padding: 0.75rem; */
                background: #f8f9fa;
                border-radius: 8px;
                margin-bottom: 0;
            }
            
            .custom-steps .step .step-icon-wrap {
                width: 45px !important;
                height: 45px !important;
                margin-right: 0.75rem;
                flex-shrink: 0;
            }
            
            .custom-steps .step .step-icon {
                width: 35px !important;
                height: 35px !important;
                font-size: 18px !important;
                line-height: 35px !important;
            }
            
            .custom-steps .step .step-icon-wrap::before,
            .custom-steps .step .step-icon-wrap::after {
                display: none !important;
            }
            
            .custom-steps .step .step-title {
                font-size: 13px !important;
                margin: 0;
                font-weight: 500;
            }
            
           
            
            .input-group {
                flex-direction: column !important;
            }
            
            .input-group .form-control {
                border-radius: 0.375rem !important;
                margin-bottom: 0.5rem;
            }
            
            .input-group .btn {
                border-radius: 0.375rem !important;
                width: 100%;
            }
            
            .modal-dialog {
                margin: 1rem;
            }
            
            .modal-content {
                border-radius: 12px;
            }
            
            .modal-header {
                padding: 1rem;
                flex-direction: column;
                align-items: flex-start;
            }
            
            .modal-header .btn-close {
                position: absolute;
                top: 1rem;
                right: 1rem;
            }
            
            .modal-body {
                padding: 1rem;
            }
            
            .modal-footer {
                padding: 1rem;
                flex-direction: column;
                gap: 0.5rem;
            }
            
            .modal-footer .btn {
                width: 100%;
                margin: 0;
            }
            
            .payment-summary {
                padding: 1rem;
                margin-bottom: 1rem;
            }
            
            .payment-summary .row {
                flex-direction: column;
                gap: 0.5rem;
            }
            
            .payment-summary .col-sm-6 {
                text-align: left !important;
            }
            
            .payment-methods-section {
                padding: 1rem;
            }
            
            .payment-methods-title {
                font-size: 1.1rem;
            }
            
            .payment-methods-list .list-group-item {
                padding: 1rem;
                margin-bottom: 0.75rem;
            }
            
            .payment-methods-list .payment_method_item {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }
            
            .payment-methods-list .payment_method_item label {
                width: 100%;
            }
            
            .payment-methods-list .payment_method_item .payment-method-logo {
                margin-left: 0;
                align-self: flex-end;
            }
        }
        
        @media (max-width: 576px) {
            .bb-customer-page .bb-profile-content {
                padding: 0rem 0.5rem 1rem;
            }
            
            .bb-order-header .bb-order-title {
                font-size: 1.1rem !important;
            }
            
            .bb-order-actions .btn {
                font-size: 11px !important;
                padding: 0.35rem 0.6rem !important;
            }
            
            .custom-steps .step {
                /* padding: 0.5rem; */
            }
            
            .custom-steps .step .step-icon-wrap {
                width: 40px !important;
                height: 40px !important;
                margin-right: 0.5rem;
            }
            
            .custom-steps .step .step-icon {
                width: 30px !important;
                height: 30px !important;
                font-size: 16px !important;
                line-height: 30px !important;
            }
            
            .custom-steps .step .step-title {
                font-size: 12px !important;
            }
            
            .bb-payment-proof-card {
                margin: 0.75rem 0;
            }
            
            .bb-payment-proof-card-content {
                padding: 1rem;
            }
            
            .bb-payment-proof-card-title {
                font-size: 1rem;
            }
            
            .modal-dialog {
                margin: 0.5rem;
            }
            
            .modal-header,
            .modal-body,
            .modal-footer {
                padding: 0.75rem;
            }
            
            .payment-summary {
                padding: 0.75rem;
                font-size: 0.9rem;
            }
            
            .payment-methods-section {
                padding: 0.75rem;
            }
            
            .payment-methods-title {
                font-size: 1rem;
            }
            
            .payment-methods-list .list-group-item {
                padding: 0.75rem;
            }
        }
        
        @media (max-width: 480px) {
            .bb-order-actions {
                flex-direction: column;
            }
            
            .bb-order-actions .btn {
                width: 100%;
                margin-bottom: 0.25rem;
            }
            
            .custom-steps .step {
                /* padding: 0.4rem; */
            }
            
            .custom-steps .step .step-title {
                font-size: 11px !important;
                line-height: 1.2;
            }
        }
    </style>
    <div class="customer-order-detail">
        <div class="bb-order-header d-flex justify-content-between align-items-center">
            <h2 class="bb-order-title mb-0">{{ __('Order Details') }}</h2>
            <div class="bb-order-actions d-flex flex-wrap gap-2">
                @if ($order->shipment->can_confirm_delivery)
                    <button type="button" class="btn btn-sm btn-primary" style="font-size: 14px;" data-bs-toggle="modal"
                        data-bs-target="#confirmDeliveredModal" data-toggle="modal" data-target="#confirmDeliveredModal">
                        <x-core::icon name="ti ti-check" />
                        {{ __('Confirm Delivery') }}
                    </button>
                @endif
                {{-- @if ($order->isInvoiceAvailable()) --}}
                {{-- <a class="btn btn-sm btn-success" style="font-size: 12px;" href="{{ route('customer.print-order', $order->id) }}?type=print"
                        target="_blank">
                        <x-core::icon name="ti ti-printer" />
                        {{ __('Print invoice') }}
                    </a> --}}
                @if ($order->isInvoiceAvailable())
                <a class="btn btn-sm btn-success" style="font-size: 14px;"
                    href="{{ route('sales.orders.customer.download.pdf', $order->id) }}">
                    <x-core::icon name="ti ti-download" />
                    {{ __('Download invoice') }}
                </a>
                @endif
                @if($order->status == 'pending')
                    @if ($order->canBeCanceled())
                        <a class="btn btn-sm btn-danger" style="font-size: 14px;" data-bs-toggle="modal"
                            data-bs-target="#modal-cancel-order" data-toggle="modal" data-target="#modal-cancel-order">
                            <x-core::icon name="ti ti-x" />
                            {{ __('Cancel order') }}
                        </a>
                    @endif
                @endif
                @if ($order->canBeReturned())
                    <a class="btn btn-sm btn-danger" style="font-size: 14px;"
                        href="{{ route('customer.order_returns.request_view', $order->id) }}">
                        <x-core::icon name="ti ti-arrow-back-up" />
                        {{ __('Return Product(s)') }}
                    </a>
                @endif
                @if (is_plugin_active('payment') && $order->payment && $order->payment->status == 'pending')
                    <button type="button" class="btn btn-sm btn-warning" style="font-size: 14px;" data-bs-toggle="modal"
                        data-bs-target="#paymentModal">
                        <x-core::icon name="ti ti-credit-card" />
                        {{ __('Pay Now') }}
                    </button>
                @endif
            </div>
        </div>

        @include(EcommerceHelper::viewPath('includes.order-tracking-detail'))

        @if (EcommerceHelper::isPaymentProofEnabled())
            @if ($order->canBeCanceled())
                <div class="bb-payment-proof-card">
                    <div class="bb-payment-proof-card-content">
                        <div class="bb-payment-proof-card-icon">
                            <x-core::icon name="ti ti-receipt" class="payment-icon" />
                        </div>
                        <div class="bb-payment-proof-card-details">
                            <h5 class="bb-payment-proof-card-title">{{ __('Payment Proof') }}</h5>
                            <x-core::form method="post" :files="true" class="customer-order-upload-receipt"
                                :url="route('customer.orders.upload-proof', $order)">
                                <div class="bb-payment-proof-card-content-inner">
                                    <div class="bb-payment-proof-card-message">
                                        @if (!$order->proof_file)
                                            <p class="mb-3">
                                                {{ __('The order is currently being processed. For expedited processing, kindly upload a copy of your payment proof:') }}
                                            </p>
                                        @else
                                            <p class="mb-2">{{ __('You have uploaded a copy of your payment proof.') }}
                                            </p>
                                            <div class="bb-payment-proof-card-file mb-3">
                                                <span class="label">{{ __('View Receipt:') }}</span>
                                                <a href="{{ route('customer.orders.download-proof', $order) }}"
                                                    target="_blank" class="value">
                                                    <x-core::icon name="ti ti-file" />
                                                    {{ $order->proof_file }}
                                                </a>
                                            </div>
                                            <p class="mb-3 fw-medium">
                                                {{ __('Or you can upload a new one, the old one will be replaced.') }}</p>
                                        @endif
                                    </div>
                                    <div class="bb-payment-proof-card-upload">
                                        <div class="input-group">
                                            <input type="file" name="file" id="file" class="form-control">
                                            <button type="submit" class="btn btn-primary">
                                                <x-core::icon name="ti ti-upload" />
                                                {{ __('Upload') }}
                                            </button>
                                        </div>
                                        <small
                                            class="text-muted d-block mt-2">{{ __('You can upload the following file types: jpg, jpeg, png, pdf and max file size is 2MB.') }}</small>
                                    </div>
                                </div>
                            </x-core::form>
                        </div>
                    </div>
                </div>
            @elseif ($order->proof_file)
                <div class="bb-payment-proof-card">
                    <div class="bb-payment-proof-card-content">
                        <div class="bb-payment-proof-card-icon">
                            <x-core::icon name="ti ti-receipt" class="payment-icon" />
                        </div>
                        <div class="bb-payment-proof-card-details">
                            <h5 class="bb-payment-proof-card-title">{{ __('Payment Proof') }}</h5>
                            <div class="bb-payment-proof-card-content-inner">
                                <div class="bb-payment-proof-card-message">
                                    <p class="mb-2">{{ __('You have uploaded a copy of your payment proof.') }}</p>
                                    <div class="bb-payment-proof-card-file">
                                        <span class="label">{{ __('View Receipt:') }}</span>
                                        <a href="{{ route('customer.orders.download-proof', $order) }}" target="_blank"
                                            class="value">
                                            <x-core::icon name="ti ti-file" />
                                            {{ $order->proof_file }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        @endif
    </div>

    @if ($order->canBeCanceled())
        <div class="modal fade" id="modal-cancel-order" tabindex="-1" aria-labelledby="modalCancelOrderLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header align-items-start">
                        <div>
                            <h4 class="modal-title fs-5" id="modalCancelOrderLabel">{{ __('Cancel Order') }}</h4>
                            <p class="text-muted mb-0">{{ __('Please provide a reason for the cancellation.') }}</p>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        {!! $cancelOrderForm->renderForm() !!}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary"
                            data-bs-dismiss="modal">{{ __('Close') }}</button>
                        <button type="submit" class="btn btn-primary"
                            form="cancel-order-form">{{ __('Submit') }}</button>
                    </div>
                </div>
            </div>
        </div>
    @endif

    @if ($order->shipment->can_confirm_delivery)
        <div class="modal fade" id="confirmDeliveredModal" tabindex="-1" aria-labelledby="confirmDeliveredModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <button type="button" class="btn-close position-absolute" data-bs-dismiss="modal"
                        aria-label="Close" style="top: 1rem; inset-inline-end: 1rem; z-index: 1000"></button>
                    <form action="{{ route('customer.orders.confirm-delivery', $order) }}" method="post"
                        class="modal-body text-center my-3">
                        @csrf
                        <h5 class="modal-title fs-5 mb-2" id="confirmDeliveredModalLabel">{{ __('Confirm Delivery') }}
                        </h5>
                        <p class="mb-4">
                            {{ __('Are you sure you have received your order? Please confirm that the package has been delivered to you?') }}
                        </p>
                        <div class="d-flex justify-content-center">
                            <button type="button" class="w-50 btn btn-secondary me-2"
                                data-bs-dismiss="modal">{{ __('Close') }}</button>
                            <button type="submit" class="w-50 btn btn-primary">{{ __('Confirm') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif

    @if (is_plugin_active('payment') && $order->payment && $order->payment->status == 'pending')
        <div class="modal fade" id="paymentModal" tabindex="-1" aria-labelledby="paymentModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="paymentModalLabel">{{ __('Complete Payment') }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="payment-summary mb-4">
                            <div class="row">
                                <div class="col-sm-6">
                                    <strong>{{ __('Order') }}:</strong> #{{ $order->code }}
                                </div>
                                <div class="col-sm-6 text-end">
                                    <strong>{{ __('Total') }}:</strong> {{ format_price($order->amount) }}
                                </div>
                            </div>
                        </div>
                        
                        @if (is_plugin_active('payment'))
                            @include('plugins/payment::partials.header')
                        @endif
                        
                        <form class="payment-checkout-form-new" method="post" id="payment-checkout-form-new" action="{{ route('payments.checkout') }}">
                            @csrf
                            <input name="order_id" type="hidden" value="{{ $order->id }}">
                            <input name="amount" type="hidden" value="{{ $order->amount }}">
                            <input name="currency" type="hidden" value="{{ strtoupper(get_application_currency()->title) }}">
                            <input name="return_url" type="hidden" value="{{ route('customer.orders.view', $order->id) }}">
                            <input name="callback_url" type="hidden" value="{{ route('customer.orders.view', $order->id) }}">
                            
                            <!-- Hidden fields for BPOINT -->
                            <input id="bpoint-auth-key-input" type="hidden" name="bpoint_auth_key" value="">
                            <input id="bpoint-crn-input" type="hidden" name="bpoint_crn" value="">
                            
                            {!! apply_filters(PAYMENT_FILTER_PAYMENT_PARAMETERS, null) !!}
                            
                            @php
                                $paymentMethods = apply_filters(PAYMENT_FILTER_ADDITIONAL_PAYMENT_METHODS, null, [
                                    'amount' => $order->amount,
                                    'currency' => strtoupper(get_application_currency()->title),
                                    'name' => 'Order #' . $order->code,
                                    'selected' => PaymentMethods::getSelectedMethod(),
                                    'default' => PaymentMethods::getDefaultMethod(),
                                    'selecting' => PaymentMethods::getSelectingMethod(),
                                ]) . PaymentMethods::render();
                            @endphp
                            
                            @if ($paymentMethods)
                                <div class="payment-methods-section mb-4">
                                    <div class="payment-methods-header mb-3">
                                        <h5 class="payment-methods-title mb-0">
                                            <i class="ti ti-credit-card me-2"></i>
                                            {{ __('Payment Method') }}
                                        </h5>
                                     
                                    </div>
                                    <div class="payment-methods-list">
                                        {!! $paymentMethods !!}
                                    </div>
                                </div>
                            @endif
                            
                            {!! apply_filters(PAYMENT_FILTER_AFTER_PAYMENT_METHOD, null) !!}
                        </form>
                        
                        @if (is_plugin_active('payment'))
                            @include('plugins/payment::partials.footer')
                        @endif
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="button" 
                                id="payment-checkout-new-btn"
                                class="btn btn-primary"
                                data-processing-text="{{ __('Processing. Please wait...') }}" 
                                data-error-header="{{ __('Error') }}">
                            <x-core::icon name="ti ti-credit-card" />
                            {{ __('Pay Now') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {{-- BPOINT Payment Modal --}}
        <div class="modal fade" id="bpointModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
            <div class="modal-dialog modal-lg modal-dialog-centered" style="max-width: 900px;">
                <div class="modal-content payment-modal">
                    <div class="modal-header bg-bpoint text-white">
                        <h5 class="modal-title">
                            <i class="fas fa-lock me-2"></i>Secure Payment
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal">
                        </button>
                    </div>
                    
                    <style>
                        .payment-modal {
                            border-radius: 10px;
                            overflow: hidden;
                            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
                        }
                        
                        .payment-info-section {
                            border-bottom: 1px solid #dee2e6;
                        }
                        
                        .card-logo {
                            padding: 5px 10px;
                            background-color: white;
                            border-radius: 5px;
                            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            height: 45px;
                        }
                        
                        .security-badge {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            padding: 10px;
                        }
                        
                        .modal-header.bg-bpoint {
                            background: linear-gradient(135deg, #4b79a1 0%, #283e51 100%) !important;
                        }
                        
                        #paymentLoading {
                            background-color: #f8f9fa;
                            min-height: 200px;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                        }
                        
                        .modal-footer {
                            border-top: 1px solid #dee2e6;
                        }
                        
                        @media (max-width: 768px) {
                            .card-logo img {
                                height: 25px;
                            }
                            
                            .security-badge {
                                padding: 5px;
                            }
                            
                            .security-badge i {
                                font-size: 1.5rem;
                            }
                        }
                        .card-logo {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            padding: 8px 12px;
                            border: 1px solid #ddd;
                            border-radius: 6px;
                            background: #fff;
                            transition: all 0.2s ease-in-out;
                        }

                        .card-logo img {
                            height: 40px;
                            object-fit: contain;
                            display: block;
                            width: 45px;
                        }

                        .card-logo:hover {
                            border-color: #999;
                            background: #f5f5f5;
                            transform: translateY(-2px);
                        }

                        .payment-card-wrapper {
                            display: flex;
                            flex-wrap: wrap;
                            gap: 10px;
                        }
                    </style>
                    <div class="modal-body p-0">
                        <!-- Payment Info Section -->
                        <div class="payment-info-section p-4 bg-light">
                            <div class="row align-items-center">
                                <div class="col-md-12">
                                    <h6 class="mb-3">Secure Payment Processing</h6>
                                    <p class="text-muted small mb-3">Your payment information is encrypted and secure. We accept the following payment methods:</p>
                                    <div class="d-flex flex-wrap gap-2">
                                        <div class="card-logo">
                                            <img src="https://www.svgrepo.com/show/303248/mastercard-2-logo.svg" 
                                                alt="Mastercard">
                                        </div>

                                        <div class="card-logo">
                                            <img src="https://www.svgrepo.com/show/452128/visa.svg" 
                                                alt="Visa">
                                        </div>

                                        <div class="card-logo">
                                            <img src="https://www.svgrepo.com/show/361978/amex.svg" 
                                                alt="American Express">
                                        </div>

                                        <div class="card-logo">
                                            <img src="https://www.svgrepo.com/show/508420/diners-club-international.svg" 
                                                alt="Diners Club">
                                        </div>

                                        <div class="card-logo">
                                            <img src="https://www.svgrepo.com/show/328140/jcb.svg" 
                                                alt="JCB">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Loading state shown while the iframe is being prepared -->
                        <div id="paymentLoading" class="text-center p-4">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <p class="mt-2">Initializing secure payment form...</p>
                            <p class="text-muted small">Please wait while we connect to our secure payment gateway</p>
                        </div>

                        <!-- The BPOINT payment iframe is loaded in here -->
                        <iframe id="bpointFrame"
                                src=""
                                frameborder="0"
                                width="100%"
                                height="250"
                                sandbox="allow-scripts allow-same-origin allow-forms"
                                style="display:none;border:none;margin-top:10px">
                        </iframe>
                    </div>
                </div>
            </div>
        </div>
    @endif
@stop

@prepend('header')
    <script src="{{ Theme::asset()->url('plugins/jquery-3.6.0.min.js') }}"></script>
    <link href="{{ asset('vendor/core/plugins/payment/css/payment.css') }}?v=1.1.0" rel="stylesheet">
@endprepend
@if (is_plugin_active('payment') && $order->payment && $order->payment->status == 'pending')
<script src="{{ Theme::asset()->url('plugins/jquery-3.6.0.min.js') }}"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // --- CONFIGURATION & STATE ---
    const BPOINT_IFRAME_ORIGIN = "https://www.bpoint.com.au";
    const $paymentForm = $('#payment-checkout-form-new');
    const $payButton = $('#payment-checkout-new-btn');
    const $mainPaymentModal = $('#paymentModal');
    const $bpointModal = $('#bpointModal');
    const $bpointIframe = $('#bpointFrame');
    const $paymentLoading = $('#paymentLoading');

    let isPaymentProcessing = false; // Prevents multiple simultaneous payment attempts

    // --- UTILITY FUNCTIONS ---

    /**
     * Resets the UI to its initial state after a failed or cancelled payment.
     */
    function resetPaymentUI() {
        isPaymentProcessing = false;
        $payButton.prop('disabled', false).html(`<x-core::icon name="ti ti-credit-card" /> {{ __("Pay Now") }}`);
        $bpointIframe.attr('src', '').hide();
        $paymentLoading.show();
        
        // Hide BPOINT modal and show the main payment modal again
        const bpointModalInstance = bootstrap.Modal.getInstance($bpointModal[0]);
        if (bpointModalInstance) bpointModalInstance.hide();

        setTimeout(() => {
            const mainModalInstance = bootstrap.Modal.getInstance($mainPaymentModal[0]);
            if (mainModalInstance) mainModalInstance.show();
        }, 300); // Delay to allow the first modal to close fully
    }

    /**
     * Global function for the "Try Again" button in the BPOINT modal.
     */
    window.tryAgain = function() {
        resetPaymentUI();
    };

    /**
     * Global function for the "Cancel" button in the BPOINT modal.
     */
    window.cancelPayment = function() {
        resetPaymentUI();
    };

    // --- EVENT HANDLERS ---

    /**
     * 1. Handles the click on the main "Pay Now" button.
     */
    $payButton.on('click', function (e) {
        e.preventDefault();

        if (isPaymentProcessing) {
            return; // Prevent double-clicking
        }

        const selectedMethod = $paymentForm.find('input[name="payment_method"]:checked');

        if (!selectedMethod.length) {
            alert('{{ __("Please select a payment method.") }}');
            return;
        }

        // If the selected method is NOT Card, submit the form normally
        if (selectedMethod.val() !== 'CARD') {
            $paymentForm[0].submit();
            return;
        }

        // --- CARD PAYMENT FLOW (BPOINT) ---
        isPaymentProcessing = true;
        $payButton.prop('disabled', true).html('<i class="ti ti-loader-2 spin"></i> {{ __("Processing...") }}');

        // Hide the main modal and show the BPOINT modal
        const mainModalInstance = bootstrap.Modal.getInstance($mainPaymentModal[0]);
        if (mainModalInstance) mainModalInstance.hide();

        setTimeout(() => {
            const bpointModalInstance = bootstrap.Modal.getInstance($bpointModal[0]) || new bootstrap.Modal($bpointModal[0]);
            bpointModalInstance.show();
        }, 300);

        // Request a new payment session from the backend
        fetch("{{ route('payments.checkout.bpoint.auth') }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json",
                "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({
                order_id: $paymentForm.find('input[name="order_id"]').val(),
                amount: $paymentForm.find('input[name="amount"]').val(),
                currency: $paymentForm.find('input[name="currency"]').val()
            })
        })
        .then(response => {
            if (!response.ok) {
                // Try to get error message from response, otherwise use a generic one
                return response.text().then(text => { throw new Error(text || 'Network response was not ok') });
            }
            return response.json();
        })
        .then(data => {
            if (!data.success || !data.authKey) {
                throw new Error(data.message || 'Failed to initialize payment session.');
            }

            // Populate hidden fields for the final form submission
            $('#bpoint-auth-key-input').val(data.authKey);
            $('#bpoint-crn-input').val(data.crn);

            // Load the BPOINT iframe
            $bpointIframe.attr('src', BPOINT_IFRAME_ORIGIN + "/webapi/v3/txns/iframe/" + encodeURIComponent(data.authKey));
        })
        .catch(error => {
            console.error('BPOINT Auth Error:', error);
            alert('{{ __("Could not initiate the payment. Please try again.") }}');
            resetPaymentUI();
        });
    });

    window.addEventListener("message", function (event) {

        const allowed = [
            BPOINT_IFRAME_ORIGIN,
            window.location.origin
        ];

        if (!allowed.includes(event.origin)) {
            console.warn("Blocked event from:", event.origin);
            return;
        }

        const data = event.data || {};
        console.log("PostMessage Received:", data);

        // --- IMPORTANT: Prevent main window reload ---
        // Ignore all iframe internal events
        if (
            data.type === "resize" ||
            data.event === "resize" ||
            data.event === "frameLoaded" ||
            data.height ||
            data.width ||
            typeof data === "string"
        ) {
            console.log("Ignored non-payment message");
            return;
        }

        // If no responseCode → ignore
        if (!data.responseCode) {
            console.log("Ignored non-payment message (no responseCode)");
            return;
        }

        // --- Handle real payment results only ---
        const code = String(data.responseCode);
        const isSuccess = data.success === true || code === "0" || code === "00";

        if (isSuccess) {
            console.log("BPOINT Payment SUCCESS");

            const modalBody = $bpointModal.find(".modal-body");
            modalBody.html(`
                <div class="text-center p-5">
                    <i class="fas fa-check-circle text-success" style="font-size:4rem;"></i>
                    <h4 class="text-success mt-3">Payment Successful!</h4>
                    <p>Finalizing your order…</p>
                </div>
            `);

            setTimeout(() => {
                $paymentForm[0].submit(); // Only submit form, DO NOT reload window
            }, 1000);

        } else {
            console.log("BPOINT Payment FAILED");

            const modalBody = $bpointModal.find(".modal-body");
            modalBody.html(`
                <div class="text-center p-5">
                    <i class="fas fa-times-circle text-danger" style="font-size:4rem;"></i>
                    <h4 class="text-danger mt-3">Payment Failed</h4>
                    <p>Please try again.</p>
                    <button class="btn btn-primary mt-3" onclick="tryAgain()">Try Again</button>
                </div>
            `);
        }
    });


  
    window.submitFormAfterPayment = function() {
        console.log('Submitting form after successful payment.');
         $paymentForm[0].submit();
    };

  
    $bpointIframe.on('load', function() {
        $paymentLoading.hide();
        $bpointIframe.show();
    });

    // --- STYLES FOR LOADING SPINNER ---
    const style = document.createElement("style");
    style.textContent = `.spin { animation: spin 1s linear infinite; } @keyframes spin { 100% { transform: rotate(360deg); } }`;
    document.head.appendChild(style);
});
window.onbeforeunload = function(e) {
    if (isPaymentProcessing) return true;
};

</script>
@endif