@extends('layouts.app')

@section('content')
<style>
    .general-field-card {
        border: 1px solid #e9ecf1;
        border-radius: 12px;
        padding: 14px;
        background: #f8f9fb;
        height: 100%;
    }

    .general-field-card .input-group-text {
        background: #eef4ff;
        border-color: #d9e6ff;
        color: #2a6fd6;
    }

    .general-field-card .form-control,
    .general-field-card .form-select {
        border-color: #d9e0ea;
    }

    .general-field-card .form-control:focus,
    .general-field-card .form-select:focus {
        border-color: #4c8bf5;
        box-shadow: 0 0 0 0.15rem rgba(76, 139, 245, 0.18);
    }

    .general-field-card .input-group > .select2-container--bootstrap-5 {
        flex: 1 1 auto;
        width: 1% !important;
        min-width: 0;
    }

    .general-field-card .input-group > .select2-container--bootstrap-5 .select2-selection {
        min-height: calc(2.375rem + 2px);
    }
</style>

<div class="page-wrapper">
    <div class="page-content">
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item">
                            <a href="javascript:;"><i class="bx bx-home-alt"></i></a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('settings.view') }}">Settings</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">Payment Settings</li>
                    </ol>
                </nav>
            </div>
        </div>

        <hr />

        <div class="card">
            <div class="card-body">
                <form action="{{ route('settings.payment.update') }}" method="POST">
                    @csrf

                    <div class="row g-3">
                        <div class="col-md-6 col-xl-3">
                            <div class="general-field-card">
                                <label for="single-select-optgroup-field" class="form-label fw-semibold">Escrow Enabled</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bx bx-shield"></i></span>
                                    <select
                                        id="single-select-optgroup-field"
                                        name="escrow_enabled"
                                        class="form-select @error('escrow_enabled') is-invalid @enderror"
                                        data-placeholder="Choose option"
                                    >
                                        <option></option>
                                        <option value="1" {{ old('escrow_enabled', $payment['escrow_enabled']) === '1' ? 'selected' : '' }}>Yes</option>
                                        <option value="0" {{ old('escrow_enabled', $payment['escrow_enabled']) === '0' ? 'selected' : '' }}>No</option>
                                    </select>
                                    @error('escrow_enabled')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="text-muted d-block mt-2">Enable/disable escrow based payments.</small>
                            </div>
                        </div>

                        <div class="col-md-6 col-xl-3">
                            <div class="general-field-card">
                                <label for="payment_currency" class="form-label fw-semibold">Currency</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bx bx-wallet"></i></span>
                                    <select
                                        id="payment_currency"
                                        name="currency"
                                        class="form-select w-100 @error('currency') is-invalid @enderror"
                                        data-width="100%"
                                        data-placeholder="Choose currency"
                                    >
                                        <option></option>
                                        @foreach($countries as $country)
                                            <option
                                                value="{{ strtoupper($country->iso3) }}"
                                                data-symbol="{{ $country->currency_symbol ?: '' }}"
                                                {{ old('currency', strtoupper($payment['currency'])) === strtoupper($country->iso3) ? 'selected' : '' }}
                                            >
                                                {{ strtoupper($country->iso3) }} - {{ $country->currency_symbol ?: '-' }} ({{ $country->name }})
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('currency')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="text-muted d-block mt-2">Select currency from country ISO3 list.</small>
                            </div>
                        </div>

                        <div class="col-md-6 col-xl-3">
                            <div class="general-field-card">
                                <label for="payment_currency_symbol" class="form-label fw-semibold">Currency Symbol</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bx bx-money"></i></span>
                                    <input
                                        type="text"
                                        id="payment_currency_symbol"
                                        name="currency_symbol"
                                        class="form-control @error('currency_symbol') is-invalid @enderror"
                                        value="{{ old('currency_symbol', $payment['currency_symbol']) }}"
                                        placeholder="Auto fill from selected currency"
                                        readonly
                                    >
                                    @error('currency_symbol')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="text-muted d-block mt-2">Ye field locked rahegi aur currency change par auto update hogi.</small>
                            </div>
                        </div>

                        <div class="col-md-6 col-xl-3">
                            <div class="general-field-card">
                                <label for="withdraw_min_amount" class="form-label fw-semibold">Withdraw Min Amount</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bx bx-wallet"></i></span>
                                    <input
                                        type="number"
                                        step="0.01"
                                        min="0"
                                        id="withdraw_min_amount"
                                        name="withdraw_min_amount"
                                        class="form-control @error('withdraw_min_amount') is-invalid @enderror"
                                        value="{{ old('withdraw_min_amount', $payment['withdraw_min_amount']) }}"
                                        placeholder="Enter minimum withdraw amount"
                                    >
                                    @error('withdraw_min_amount')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="text-muted d-block mt-2">Minimum payout amount users can request.</small>
                            </div>
                        </div>
                    </div>

                    <div class="mt-4 d-flex flex-wrap gap-2">
                        <button type="submit" class="btn btn-primary px-4">
                            <i class="bx bx-save me-1"></i> Save Changes
                        </button>
                        <a href="{{ route('settings.view') }}" class="btn btn-light px-4">
                            <i class="bx bx-arrow-back me-1"></i> Back
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const currencySelect = document.getElementById('payment_currency');
        const currencySymbolInput = document.getElementById('payment_currency_symbol');

        if (!currencySelect || !currencySymbolInput) {
            return;
        }

        const syncCurrencySymbol = function () {
            const selectedOption = currencySelect.options[currencySelect.selectedIndex];
            const symbol = selectedOption ? (selectedOption.getAttribute('data-symbol') || '') : '';

            if (symbol !== '') {
                currencySymbolInput.value = symbol;
            }
        };

        if (window.jQuery && typeof window.jQuery.fn.select2 === 'function') {
            const $currencySelect = window.jQuery(currencySelect);

            if (!$currencySelect.hasClass('select2-hidden-accessible')) {
                $currencySelect.select2({
                    theme: 'bootstrap-5',
                    width: $currencySelect.data('width') ? $currencySelect.data('width') : ($currencySelect.hasClass('w-100') ? '100%' : 'style'),
                    placeholder: $currencySelect.data('placeholder'),
                });
            }
        }

        currencySelect.addEventListener('change', syncCurrencySymbol);

        if (!currencySymbolInput.value.trim()) {
            syncCurrencySymbol();
        }
    });
</script>
@endsection