@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('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('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">{{ tr('add_country') }}</h5>
            </div>

            <div class="card-body">

                <form
                    action="{{ isset($mobile_country_codes)
                        ? route('admin.lookups.update_mobile_country_codes', $mobile_country_codes->unique_id)
                        : route('admin.lookups.store_mobile_country_codes') }}"
                    method="POST">

                    @csrf
                    @if (isset($mobile_country_codes))
                        @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="{{ $mobile_country_codes->country_name ?? old('country_name') }}"
                                class="form-control" required
                                oninput="this.value = this.value.charAt(0).toUpperCase() + this.value.slice(1).toLowerCase()">
                        </div>

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

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

                        <div class="col-xxl-6">
                            <label class="form-label">{{ tr('alpha_3_code') }}</label>
                            <input type="text" name="alpha_3_code" maxlength="3" minlength="3"
                                placeholder="{{ tr('alpha_3_code') }}"
                                value="{{ $mobile_country_codes->alpha_3_code ?? old('alpha_3_code') }}"
                                class="form-control" required oninput="this.value = this.value.toUpperCase()">
                        </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