@php
    $authUser = auth()->user();
@endphp
@extends('frontend.member.user_layouts')
@push('style')
    <style>
        .payment-form-container {
            background-color: #fff;
            padding: 40px;
            max-width: 600px;
            margin: 40px auto;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            font-family: 'Segoe UI', sans-serif;
        }

        .payment-form-container h2 {
            text-align: center;
            color: #0d6efd;
            margin-bottom: 25px;
            font-weight: 700;
        }

        .radio-group {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .radio-option {
            flex: 1 1 48%;
            border: 1px solid #ccc;
            border-radius: 6px;
            text-align: center;
            padding: 12px;
            cursor: pointer;
            position: relative;
            transition: background-color 0.3s;
        }

        .radio-option input {
            position: absolute;
            left: -9999px;
        }

        .radio-option.active {
            background-color: #0d6efd;
            color: #fff;
            border-color: #0d6efd;
        }

        .conditional-field {
            display: none;
            margin-top: 20px;
        }

        .bank_info,
        .mobile_info {
            background: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .bank_info h5,
        .mobile_info h5 {
            border-bottom: 1px dashed #ccc;
            padding-bottom: 5px;
            margin-bottom: 15px;
            font-weight: 600;
            color: #0d6efd;
        }

        .bank_account_box,
        .mobile_gateway_item {
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 12px;
            margin-bottom: 10px;
        }

        .submit-btn {
            width: 100%;
            padding: 12px;
            background: #0d6efd;
            border: none;
            border-radius: 6px;
            color: #fff;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .submit-btn:hover {
            background-color: #0a58ca;
        }

        @media(max-width:767px) {
            .payment-form-container {
                padding: 20px;
                margin: 20px auto;
            }
        }

        @media (max-width: 767px) {

            html,
            body {
                background-color: #fff;
            }

            .payment-form-container {
                background-color: #fff;
                width: 100% !important;
                margin: 0 !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                padding: 15px !important;
            }

            .card {
                border: 0px;
                box-shadow: none !important;
            }
        }
    </style>
@endpush

@section('member-content')
    <div class="payment-form-container">

        <h2>Pay Your Invoice</h2>
        <p class="text-center mb-4">Invoice: <strong>#{{ $invoice->invoice_no }}</strong> | Amount:
            ৳{{ number_format($invoice->amount, 2) }}</p>

        <form action="{{ route('member.pay.submit', $invoice->id) }}" method="POST">
            @csrf

            {{-- radio payment type --}}
            <div class="form-group mb-3">
                <label class="fw-bold mb-2">Select Payment Type</label>
                <div class="radio-group">
                    <label class="radio-option">
                        <input type="radio" name="payment_type" value="mobile_bank"> Mobile Banking
                    </label>
                    <label class="radio-option">
                        <input type="radio" name="payment_type" value="bank"> Bank Transfer
                    </label>
                    <label class="radio-option">
                        <input type="radio" name="payment_type" value="cash"> Cash
                    </label>
                </div>
            </div>

            {{-- mobile bank info --}}
            <div id="mobile-info" class="conditional-field mobile_info">
                <h5>Mobile Banking Accounts</h5>
                @foreach ($gateways->where('gateway_type', 'Mobile Bank') as $acc)
                    <div class="mobile_gateway_item">
                        <strong>{{ $acc->company_name }}:</strong> {{ $acc->mobile_number }}
                    </div>
                @endforeach
                <div class="form-group mt-2">
                    <label>Select Mobile Account</label>
                    <select name="mobile_account_id" class="form-control">
                        <option value="">Select</option>
                        @foreach ($gateways->where('gateway_type', 'Mobile Bank') as $acc)
                            <option value="{{ $acc->id }}">{{ $acc->company_name }} - {{ $acc->mobile_number }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            {{-- bank info --}}
            <div id="bank-info" class="conditional-field bank_info">
                <h5>Bank Accounts</h5>
                @foreach ($gateways->where('gateway_type', 'Bank') as $acc)
                    <div class="bank_account_box">
                        <p><strong>Account Name:</strong> {{ $acc->account_name }}</p>
                        <p><strong>Account Number:</strong> {{ $acc->account_number }}</p>
                        <p><strong>Bank:</strong> {{ $acc->bank_name }}</p>
                        <p><strong>Branch:</strong> {{ $acc->branch_name }}</p>
                        @if ($acc->routing_number)
                            <p><strong>Routing No:</strong> {{ $acc->routing_number }}</p>
                        @endif
                    </div>
                @endforeach
                <div class="form-group mt-2">
                    <label>Select Bank Account</label>
                    <select name="bank_account_id" class="form-control">
                        <option value="">Select</option>
                        @foreach ($gateways->where('gateway_type', 'Bank') as $acc)
                            <option value="{{ $acc->id }}">{{ $acc->bank_name }} - {{ $acc->account_number }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            {{-- transaction number --}}
            <div class="form-group mt-3 conditional-field" id="transaction-field">
                <label>Transaction Number</label>
                <input type="text" name="transaction_no" class="form-control"
                    placeholder="Enter transaction/reference number">
            </div>

            {{-- remarks --}}
            <div class="form-group mt-3">
                <label>Remarks (optional)</label>
                <textarea name="payment_remark" class="form-control" placeholder="Any additional notes"></textarea>
            </div>

            {{-- submit --}}
            <div class="form-group mt-4">
                <button type="submit" class="submit-btn">Submit Payment</button>
            </div>
        </form>
    </div>
@endsection

@push('script')
    <script>
        $(function() {
            function toggleFields() {
                let type = $('input[name="payment_type"]:checked').val();
                $('.conditional-field').hide();
                if (type === 'mobile_bank') {
                    $('#mobile-info').slideDown();
                    $('#transaction-field').slideDown();
                }
                if (type === 'bank') {
                    $('#bank-info').slideDown();
                    $('#transaction-field').slideDown();
                }
            }

            $('.radio-option input').on('change', function() {
                $('.radio-option').removeClass('active');
                $(this).closest('.radio-option').addClass('active');
                toggleFields();
            });
            toggleFields();
        });
    </script>
@endpush