@extends('layouts.admin')

@section('breadcrumb')
    <div class="main-breadcrumb d-flex flex-wrap align-items-center my-4 gap-3">
        <h2 class="breadcrumb-title mb-0 flex-grow-1 fs-16">{{ tr('supported_countries') }}</h2>

        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li><i class="ri-home-4-line me-2 text-primary"></i></li>
                <li class="breadcrumb-item">
                    <a href="{{ route('treasury.dashboard') }}">{{ tr('home') }}</a>
                </li>
                <li class="breadcrumb-item active">{{ tr('supported_countries') }}</li>
            </ol>
        </nav>
    </div>
@endsection

@section('content')
    <div class="col-12 col-xl-12">
        <div class="card card-h-100">
            <div class="card-header">
                <h5 class="card-title">
                    {{ isset($selectedCountry) ? tr('edit_supported_country') : tr('add_supported_country') }}</h5>
            </div>

            <div class="card-body">
                <form
                    action="{{ isset($selectedCountry)
                        ? route('admin.lookups.update_supported_countries', $selectedCountry->unique_id)
                        : route('admin.lookups.store_supported_countries') }}"
                    method="POST">

                    @csrf
                    @if (isset($selectedCountry))
                        @method('PUT')
                    @endif

                    <div class="row g-4">

                        <div class="col-xxl-6">
                            <label class="form-label">{{ tr('country_name') }}</label>
                            <input type="text" name="country_name" placeholder="{{ tr('country_name') }}"
                                value="{{ $selectedCountry->country_name ?? old('country_name') }}" class="form-control"
                                required oninput="this.value = this.value.toUpperCase()">
                        </div>

                        <div class="col-xxl-6">
                            <label class="form-label">{{ tr('country_code') }}</label>
                            <input type="text" name="country_code" maxlength="3" placeholder="{{ tr('country_code') }}"
                                value="{{ $selectedCountry->country_code ?? old('country_code') }}" class="form-control"
                                required oninput="this.value = this.value.toUpperCase()">
                        </div>

                        <div class="col-xxl-6">
                            <label class="form-label">{{ tr('currency') }}</label>
                            <input type="text" name="currency" maxlength="3" placeholder="{{ tr('currency') }}"
                                value="{{ $selectedCountry->currency ?? old('currency') }}" class="form-control" required
                                oninput="this.value = this.value.toUpperCase()">
                        </div>

                        <div class="col-xxl-6">
                            <label class="form-label">{{ tr('external_type') }}</label>
                            <select name="external_type" class="form-control" required>
                                <option value="" disabled>{{ tr('select_external_type') }}</option>

                                @foreach (external_types() as $external_type => $external_type_name)
                                    <option value="{{ $external_type }}"
                                        {{ old('external_type', $selectedCountry->external_type ?? '') == $external_type ? 'selected' : '' }}>
                                        {{ $external_type_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                    </div>

                    <div class="d-flex justify-content-end gap-2 mt-4">
                        <button type="submit" class="btn btn-primary">
                            {{ tr('submit') }}
                        </button>
                    </div>

                </form>
            </div>
        </div>
    </div>
@endsection