@extends('layouts.web.blank')

@section('main_content')
    <section class="payment-method-section">
        <div class="container">
            <div class="payment-method-wrp">
                <div class="row">
                    <div class="col-lg-5">
                        <div class="nav d-block payment-method-nav">
                            <div class="row">
                                @foreach ($gateways as $gateway)
                                    <div class="col-lg-6">
                                        <a href="#{{ str_replace(' ', '-', $gateway->name) }}" data-bs-toggle="pill"
                                            @class(['add-report-btn payment-items d-flex align-items-center', 'active' => $loop->first ? true : false])>
                                            @if($gateway->image)
                                                <img src="{{ asset($gateway->image) }}" alt="{{ $gateway->name }}"
                                                    style="max-height: 25px; margin-right: 8px;">
                                            @endif
                                            {{ ucfirst($gateway->name) }}
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7 mt-3 mt-sm-0">
                        <div class="tab-content">
                            @foreach ($gateways as $gateway)
                                <div @class(['tab-pane fade', 'show active' => $loop->first ? true : false])
                                    id="{{ str_replace(' ', '-', $gateway->name) }}">
                                    <form
                                        action="{{ route('payments-gateways.payment', ['plan_id' => $plan->id, 'gateway_id' => $gateway->id]) }}"
                                        method="post" enctype="multipart/form-data">
                                        @csrf

                                        <div class="payment-list-table">
                                            @if ($errors->any())
                                                @foreach ($errors->all() as $error)
                                                    <div class="alert alert-warning alert-dismissible fade show mt-2" role="alert">
                                                        {{ $error }}
                                                        <button type="button" class="btn-close" data-bs-dismiss="alert"
                                                            aria-label="Close"></button>
                                                    </div>
                                                @endforeach
                                            @endif

                                            @if($gateway->image)
                                                <div class="text-center mb-3">
                                                    <img src="{{ asset($gateway->image) }}" alt="{{ $gateway->name }}"
                                                        style="width: 300px; height: 500px; object-fit: contain;">
                                                </div>
                                            @endif
                                            <h5 class="payment-title mb-3">{{ ucfirst($gateway->name) }}
                                                ({{ optional($gateway->currency)->code }})</h5>
                                            <table class="table table-striped">
                                                <tbody>

                                                    @php
                                                        $amount = convert_money($plan->offerPrice ?? $plan->subscriptionPrice, $gateway->currency);
                                                    @endphp

                                                    <tr>
                                                        <th class="text-start ">{{ __('Gateway Name') }}</th>
                                                        <td class="text-end">{{ $gateway->name }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th class="text-start">{{ __('Gateway Currency') }}</th>
                                                        <td class="text-end">{{ optional($gateway->currency)->code }}</td>
                                                    </tr>
                                                    @if(optional($gateway->currency)->code != 'IDR')
                                                        <tr>
                                                            <th class="text-start">{{ __('Gateway Rate') }}</th>
                                                            <td class="text-end">
                                                                {{ currency_format($gateway->currency->rate, currency: $gateway->currency) }}
                                                            </td>
                                                        </tr>
                                                    @endif
                                                    <tr>
                                                        <th class="text-start">{{ __('Subscription Name') }}</th>
                                                        <td class="text-end">{{ $plan->subscriptionName }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th class="text-start">{{ __('Subscription Price') }}</th>
                                                        <td class="text-end">
                                                            {{ currency_format($amount, currency: $gateway->currency) }}
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <th class="text-start">{{ __('Gateway Charge') }}</th>
                                                        <td class="text-end">
                                                            {{ currency_format($gateway->charge, currency: $gateway->currency) }}
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <th class="text-start">{{ __('Payable Amount') }}</th>
                                                        <td class="text-end">
                                                            {{ currency_format($amount + $gateway->charge, currency: $gateway->currency) }}
                                                        </td>
                                                    </tr>
                                                    @if ($gateway->phone_required == 1)
                                                        <tr>
                                                            <th>
                                                                <label for="phone" class="required">{{ __('Phone Number') }}</label>
                                                            </th>
                                                            <td>
                                                                <div class="country-number-input w-100 ">
                                                                    <select name="country" id="country"
                                                                        class="form-select w-auto country-input" required>
                                                                        @foreach ($gateway->manual_data ?? [] as $key => $country)
                                                                            <option value="{{ $key }}">{{ $country['country'] ?? '' }}
                                                                                ({{ $country['phone_code'] ?? '' }})</option>
                                                                        @endforeach
                                                                    </select>
                                                                    <input type="text" name="phone" id="phone"
                                                                        class="form-control number-input w-100"
                                                                        placeholder="{{ __('Enter your phone number') }}" required>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    @endif
                                                </tbody>
                                            </table>

                                            @if ($gateway->instructions)
                                                <div class="mb-3">
                                                    <h5 class="payment-title mb-3">{{ __('Instructions') }}</h5>
                                                    <p>{!! $gateway->instructions !!}</p>
                                                </div>
                                            @endif

                                            @if ($gateway->is_manual)
                                                <div class="row mb-3">
                                                    <div class="col-12">
                                                        @if ($gateway->accept_img)
                                                            <div class="form-group">
                                                                <label for="">{{ __('Screenshot/Proof Image') }}</label>
                                                                <input type="file" name="attachment" class="form-control" required>
                                                            </div>
                                                        @endif
                                                        @foreach ($gateway->manual_data['label'] ?? [] as $key => $row)
                                                            <div class="form-group mt-3">
                                                                <label for="">{{ $row }}</label>
                                                                <input type="text" name="manual_data[]"
                                                                    @required($gateway->manual_data['is_required'][$key] == 1)
                                                                    class="form-control" placeholder="{{ __('Enter ') . $row }}">
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            @endif
                                            <div class="text-end">
                                                <button type="submit"
                                                    class="btn btn-md payment-btn">{{ __('Pay Now') }}</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Floating WhatsApp Button -->
    @php
        $whatsapp_number = \App\Models\Option::where('key', 'general')->first()->value['whatsapp_number'] ?? '6289620324323';
    @endphp
    @if($whatsapp_number)
        <a href="https://wa.me/{{ $whatsapp_number }}?text=Halo%20Admin,%20saya%20butuh%20bantuan%20terkait%20pembayaran"
            target="_blank" class="whatsapp-floating-btn">
            <i class="fab fa-whatsapp"></i>
        </a>
    @endif
@endsection

@push('css')
    <link rel="stylesheet" href="{{ asset('assets/css/payments.css') }}">
    <style>
        .whatsapp-floating-btn {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background-color: #25D366;
            color: white;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 35px;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            text-decoration: none;
            transition: background-color 0.3s ease;
            animation: float-up-down 3s ease-in-out infinite;
        }

        .whatsapp-floating-btn:hover {
            background-color: #128C7E;
            color: white;
            animation-play-state: paused;
        }

        @keyframes float-up-down {
            0% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-15px);
            }

            100% {
                transform: translateY(0);
            }
        }
    </style>
@endpush