@extends('dashboard.admin.layouts.master')

@section('content')
    <div class="d-flex flex-column flex-column-fluid">
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <h1 class="page-heading d-flex text-dark fw-bold fs-3 my-0">{{ $gateway->name }} Settings</h1>
                </div>
                <a href="{{ route('admin.dashboard.finance.setup.payment_gateways.index') }}" class="btn btn-sm fw-bold btn-secondary">Back</a>
            </div>
        </div>

        <div id="kt_app_content" class="app-content flex-column-fluid">
            <div id="kt_app_content_container" class="app-container container-xxl">
                <form method="POST" action="{{ route('admin.dashboard.finance.setup.payment_gateways.update', $gateway) }}" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="card">
                        <div class="card-body">
                            <div class="row g-5">
                                <div class="col-md-6">
                                    <label class="form-label required">English Name</label>
                                    <input name="name[en]" class="form-control @error('name.en') is-invalid @enderror" value="{{ old('name.en', $gateway->getTranslation('name', 'en', false) ?: $gateway->name) }}">
                                    @error('name.en')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Arabic Name</label>
                                    <input name="name[ar]" class="form-control @error('name.ar') is-invalid @enderror" value="{{ old('name.ar', $gateway->getTranslation('name', 'ar', false) ?: $gateway->name) }}">
                                    @error('name.ar')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label required">Mode</label>
                                    <select name="mode" class="form-select">
                                        <option value="test" @selected(old('mode', $gateway->mode) === 'test')>Test</option>
                                        <option value="live" @selected(old('mode', $gateway->mode) === 'live')>Live</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label required">Sort Order</label>
                                    <input type="number" min="0" name="sort_order" class="form-control" value="{{ old('sort_order', $gateway->sort_order) }}">
                                </div>
                                <div class="col-md-4 d-flex align-items-end">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" value="1" name="is_active" id="is_active" @checked(old('is_active', $gateway->is_active))>
                                        <label class="form-check-label" for="is_active">Show this payment type on site</label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Payment Gateway Icon</label>
                                    <input type="file" name="icon" accept=".png,.jpg,.jpeg,.webp,.svg" class="form-control @error('icon') is-invalid @enderror">
                                    <div class="form-text">Upload PNG, JPG, WEBP, or SVG. Recommended size: 160x80px with transparent background.</div>
                                    @error('icon')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Current Icon</label>
                                    <div class="border rounded p-3 d-flex align-items-center justify-content-center" style="min-height: 82px;">
                                        @if($gateway->iconUrl())
                                            <img src="{{ $gateway->iconUrl() }}" alt="{{ $gateway->name }}" style="max-width: 160px; max-height: 60px;">
                                        @else
                                            <span class="text-muted">No icon uploaded</span>
                                        @endif
                                    </div>
                                </div>

                                <div class="col-12"><div class="separator my-3"></div></div>

                                @foreach($fields as $field)
                                    @php($fieldHint = $gateway->configFieldHints()[$field] ?? null)
                                    <div class="col-md-6">
                                        <label class="form-label">{{ str($field)->replace('_', ' ')->title() }}</label>
                                        <input
                                            name="config[{{ $field }}]"
                                            class="form-control @error('config.'.$field) is-invalid @enderror"
                                            value="{{ old('config.'.$field) }}"
                                            placeholder="{{ array_key_exists($field, $config) ? 'Saved. Enter a new value to replace.' : '' }}"
                                        >
                                        @if($fieldHint)
                                            <div class="form-text">
                                                <strong>Hint:</strong> {{ $fieldHint['hint'] }}<br>
                                                <strong>How to get it:</strong> {{ $fieldHint['steps'] }}
                                            </div>
                                        @endif
                                        @error('config.'.$field)<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="card-footer d-flex justify-content-end gap-2">
                            <a href="{{ route('admin.dashboard.finance.setup.payment_gateways.index') }}" class="btn btn-light">Cancel</a>
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection