@extends('admin.layouts.app')

@section('title', __('admin/domain-costs.create_modal_title'))

@section('content')
<div class="container-fluid px-4">
    <x-admin.page-header
        :title="__('admin/domain-costs.create_modal_title')"
        icon="fas fa-dollar-sign"
        :buttons="[
            ['label' => __('admin/domain-costs.buttons_back'), 'route' => route('admin.domain-costs.index'), 'icon' => 'fas fa-arrow-left', 'color' => 'outline-secondary'],
        ]"
    />

    <x-admin.alert />

    <form id="createDomainCostForm">
        <x-admin.card>
            <div class="row g-3">
                <div class="col-md-6">
                    <label for="tld_id" class="form-label">{{ __('admin/domain-costs.create_modal_tld_label') }} <span class="text-danger">*</span></label>
                    <select class="form-select" id="tld_id" name="tld_id" required>
                        <option value="">{{ __('admin/domain-costs.filters_all_tlds') }}</option>
                        @foreach($tlds as $tld)
                            <option value="{{ $tld->id }}" @selected(old('tld_id') == $tld->id)>{{ $tld->tld }}</option>
                        @endforeach
                    </select>
                    @error('tld_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-6">
                    <label for="registrar" class="form-label">{{ __('admin/domain-costs.create_modal_registrar_label') }}</label>
                    <input type="text" class="form-control" id="registrar" name="registrar" placeholder="{{ __('admin/domain-costs.create_modal_registrar_placeholder') }}">
                </div>
            </div>

            <div class="row g-3 mt-1">
                <div class="col-md-6">
                    <label for="currency_id" class="form-label">{{ __('admin/domain-costs.create_modal_currency_label') }} <span class="text-danger">*</span></label>
                    <select class="form-select" id="currency_id" name="currency_id" required>
                        <option value="">{{ __('admin/domain-costs.create_modal_currency_placeholder') }}</option>
                        <option value="5">USD</option>
                        <option value="6">EUR</option>
                        <option value="1">TRY</option>
                    </select>
                    @error('currency_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-6 d-flex align-items-end">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="1" checked>
                        <label class="form-check-label" for="is_active">{{ __('admin/domain-costs.create_modal_is_active_label') }}</label>
                    </div>
                </div>
            </div>

            <div class="mt-3">
                <label class="form-label">{{ __('admin/domain-costs.fields_years') }}</label>
                <div class="row g-2">
                    @foreach(range(1,10) as $year)
                        <div class="col-6 col-md-4 col-lg-3">
                            <div class="input-group input-group-sm">
                                <span class="input-group-text">{{ $year }} {{ __('admin/domain-costs.fields_year') }}</span>
                                <input type="text" class="form-control" name="prices[{{ $year }}]" placeholder="0.00" inputmode="decimal" lang="en">
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <x-slot:footer>
                <x-admin.form-actions :cancel-url="route('admin.domain-costs.index')" />
            </x-slot:footer>
        </x-admin.card>
    </form>
</div>
@endsection

@push('scripts')
<script>
    window.routes = {
        domainCosts: {
            store: '{{ route('admin.domain-costs.store') }}',
            index: '{{ route('admin.domain-costs.index') }}'
        }
    };
</script>
@vite('resources/js/admin/domain-costs/index.js')
@endpush
