@extends('layouts.master')
@section('title') @lang('translation.setup-payment-method') @endsection

@section('breadcrumb')
@component('components.breadcrumb')
@slot('title')
@lang('translation.setup-payment-method')
@endslot
@endcomponent
@endsection

@section('css')
<style>[x-cloak] { display: none !important; }</style>
@endsection

@section('content')

<h3 class="mb-4">@lang('translation.setup-payment-method')</h3>

<div class="card mb-4 shadow-sm py-5">
    <div class="card-body">
        <form class="row justify-content-center" x-data="paymentFormHandler()" x-init="init()" @submit.prevent="submitForm">
            @csrf
            <div class="col-lg-6">
                <!-- Method Type -->
                <div class="mb-3">
                    <label class="form-label">@lang('translation.payment-method') <span class="text-danger">*</span></label>
                    <select class="form-select form-select-lg" name="method_type" x-model="form.method_type" @change="resetFields()">
                        <option value="bank">@lang('translation.bank-transfer')</option>
                        <option value="card">@lang('translation.card-payment')</option>
                        <option value="crypto">@lang('translation.crypto-wallet')</option>
                    </select>
                </div>

                <!-- Bank Fields -->
                <div x-show="form.method_type === 'bank'" x-cloak>
                    <div class="mb-3">
                        <label class="form-label">@lang('translation.bank') <span class="text-danger">*</span></label>
                        <select class="form-select form-select-lg" name="bank_id" x-model="form.bank_id">
                            <option selected disabled value="">@lang('translation.select-bank')</option>
                            @foreach($banks as $bank)
                            <option value="{{ $bank->id }}">{{ $bank->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">@lang('translation.account-title') <span class="text-danger">*</span></label>
                        <input type="text" class="form-control form-control-lg" name="account_title" x-model="form.account_title">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">@lang('translation.iban-or-account-number') <span class="text-danger">*</span></label>
                        <input type="text" class="form-control form-control-lg" name="account_number" x-model="form.account_number">
                    </div>
                </div>

                <!-- Card Fields -->
                <div x-show="form.method_type === 'card'" x-cloak>
                    <div class="py-5 text-center">
                        <i class="ri-time-line text-muted display-4 mb-3"></i>
                        <h5 class="text-muted mb-1">@lang('translation.coming-soon')</h5>
                    </div>
                    
                    {{--
                    <div class="mb-3">
                        <label class="form-label">@lang('translation.card-brand') <span class="text-danger">*</span></label>
                        <select class="form-select form-select-lg" name="card_brand" x-model="form.card_brand">
                            <option selected disabled value="">@lang('translation.select-card-brand')</option>
                            <option value="Visa">Visa</option>
                            <option value="Mastercard">Mastercard</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">@lang('translation.card-holder-name') <span class="text-danger">*</span></label>
                        <input type="text" class="form-control form-control-lg" name="card_holder" x-model="form.card_holder">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">@lang('translation.card-number') <span class="text-danger">*</span></label>
                        <input type="text" class="form-control form-control-lg" name="card_number" x-model="form.card_number">
                    </div>--}}
                </div>

                <!-- Crypto Fields -->
                <div x-show="form.method_type === 'crypto'" x-cloak>
                    {{--<div class="py-5 text-center">
                        <i class="ri-time-line text-muted display-4 mb-3"></i>
                        <h5 class="text-muted mb-1">@lang('translation.coming-soon')</h5>
                    </div>--}}
                    
                    <div class="mb-3">
                        <label class="form-label">@lang('translation.network') <span class="text-danger">*</span></label>
                        <select class="form-select form-select-lg" name="crypto_network" x-model="form.crypto_network">
                            <option selected disabled value="">@lang('translation.select-network')</option>
                            {{--<option value="ERC-20">Ethereum (ERC-20)</option>--}}
                            <option value="TRC-20">Tron (TRC-20)</option>
                        </select>
                    </div>
                    <p>@lang('translation.crypto-requires-one')</p>
                    <div class="mb-3">
                        <label class="form-label">@lang('translation.wallet-address')</label>
                        <input type="text" class="form-control form-control-lg" name="wallet_address" x-model="form.wallet_address">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">@lang('translation.okx-uid')</label>
                        <input type="text" class="form-control form-control-lg" name="okx_uid" x-model="form.okx_uid">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">@lang('translation.binance-pay-id')</label>
                        <input type="text" class="form-control form-control-lg" name="binance_pay_id" x-model="form.binance_pay_id">
                    </div>
                </div>

                <!-- Submit -->
                <div class="text-center mt-4">
                    <button class="btn btn-success px-5" type="submit" :disabled="!isValid"><i class="ri-check-line"></i> @lang('translation.save')</button>
                </div>
            </div>
        </form>
    </div>
</div>

@endsection

@section('script')
<script>
    function paymentFormHandler() {
        return {
            form: {
                method_type: 'bank',
                bank_id: '',
                account_title: '',
                account_number: '',
                card_brand: '',
                card_holder: '',
                card_number: '',
                crypto_network: 'TRC-20',
                wallet_address: '',
                okx_uid: '',
                binance_pay_id: '',
            },
            resetFields() {
                for (const key in this.form) {
                    if (key !== 'method_type' && key !== 'crypto_network') this.form[key] = '';
                }
            },
            get isValid() {
                const requiredFields = {
                    bank: ['bank_id', 'account_title', 'account_number'],
                    card: ['card_brand', 'card_holder', 'card_number'],
                    crypto: [], // handled separately
                };

                if (this.form.method_type === 'crypto') {
                    const hasAnyCryptoId =
                        ['wallet_address', 'okx_uid', 'binance_pay_id'].some(field => {
                            const value = this.form[field];
                            return value !== null && value !== undefined && String(value).trim() !== '';
                        });
                    return hasAnyCryptoId;
                }

                return requiredFields[this.form.method_type].every(field => {
                    const value = this.form[field];
                    return value !== null && value !== undefined && String(value).trim() !== '';
                });
            },
            submitForm() {
                fetch('{{ route("payment-methods.store") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify(this.form)
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire('Success', data.message, 'success')
                            .then(() => window.location.href = data.redirect);
                    } else {
                        Swal.fire('Error', data.message || 'Something went wrong.', 'error');
                    }
                })
                .catch(() => {
                    Swal.fire('Error', 'Server error. Please try again later.', 'error');
                });
            }
        }
    }
</script>
@endsection