@extends('layouts.app')

@section('content')
@php
    $status = old('status', 'active');
@endphp
<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="{{ route('admin.dashboard') }}"><i class="bx bx-home-alt"></i></a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.country-taxes.index') }}">Country Taxes</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Create Tax</li>
                    </ol>
                </nav>
            </div>
        </div>

        <hr />

        <div class="card">
            <div class="card-body">
                <h6 class="mb-1">Create Country Tax</h6>
                <p class="text-muted mb-4">Add country based tax rates for booking pricing.</p>

                <form method="POST" action="{{ route('admin.country-taxes.store') }}">
                    @csrf

                    <div class="row g-3">
                        <div class="col-md-4">
                            <label for="country_id" class="form-label">Country <span class="text-danger">*</span></label>
                            <select id="country_id" name="country_id" class="form-select country-select @error('country_id') is-invalid @enderror" required>
                                <option value="">Select country</option>
                                @foreach($countries as $country)
                                    <option value="{{ $country->id }}" {{ (string) old('country_id') === (string) $country->id ? 'selected' : '' }}>
                                        {{ $country->name }}{{ $country->iso2 ? ' (' . $country->iso2 . ')' : '' }}
                                    </option>
                                @endforeach
                            </select>
                            @error('country_id')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4">
                            <label for="tax_name" class="form-label">Tax Name <span class="text-danger">*</span></label>
                            <input
                                type="text"
                                id="tax_name"
                                name="tax_name"
                                class="form-control @error('tax_name') is-invalid @enderror"
                                value="{{ old('tax_name') }}"
                                placeholder="GST"
                                maxlength="100"
                                required
                            >
                            @error('tax_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-2">
                            <label for="tax_rate" class="form-label">Tax Rate % <span class="text-danger">*</span></label>
                            <input
                                type="number"
                                step="0.0001"
                                min="0"
                                max="100"
                                id="tax_rate"
                                name="tax_rate"
                                class="form-control @error('tax_rate') is-invalid @enderror"
                                value="{{ old('tax_rate') }}"
                                placeholder="18"
                                required
                            >
                            @error('tax_rate')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-2">
                            <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                            <select id="status" name="status" class="form-select @error('status') is-invalid @enderror" required>
                                <option value="active" {{ $status === 'active' ? 'selected' : '' }}>Active</option>
                                <option value="deactivated" {{ $status === 'deactivated' ? 'selected' : '' }}>Deactivated</option>
                            </select>
                            @error('status')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12 d-flex flex-wrap gap-2 mt-2">
                            <button type="submit" class="btn btn-primary px-4">Save Tax</button>
                            <a href="{{ route('admin.country-taxes.index') }}" class="btn btn-light border px-4">Back</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@push('scripts')
<script>
    $(function() {
        $('#country_id').select2({
            theme: 'bootstrap-5',
            width: '100%',
            placeholder: 'Select country',
            allowClear: true
        });
    });
</script>
@endpush
@endsection