@csrf

<div class="grid gap-5 md:grid-cols-2">
    <div>
        <label for="name" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Company name</label>
        <input
            id="name"
            name="name"
            value="{{ old('name', $company->name) }}"
            class="mt-2 h-12 w-full rounded-xl border-zinc-300 bg-white px-4 text-sm text-zinc-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
            required
        >
        @error('name')
            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
        @enderror
    </div>

    <div>
        <label for="billing_email" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Billing email</label>
        <input
            id="billing_email"
            type="email"
            name="billing_email"
            value="{{ old('billing_email', $company->billing_email) }}"
            placeholder="billing@example.com"
            class="mt-2 h-12 w-full rounded-xl border-zinc-300 bg-white px-4 text-sm text-zinc-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
        >
        @error('billing_email')
            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
        @enderror
    </div>

    <div>
        <label for="status" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Status</label>
        <select
            id="status"
            name="status"
            class="mt-2 h-12 w-full rounded-xl border-zinc-300 bg-white px-4 text-sm text-zinc-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
            required
        >
            <option value="active" @selected(old('status', $company->status) === 'active')>Active</option>
            <option value="suspended" @selected(old('status', $company->status) === 'suspended')>Suspended</option>
            <option value="inactive" @selected(old('status', $company->status) === 'inactive')>Inactive</option>
        </select>
        @error('status')
            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
        @enderror
    </div>

    <div class="wms-select2-field">
        <label for="country_id" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Country</label>
        <select
            id="country_id"
            name="country_id"
            data-wms-select2
            data-placeholder="Search and select a country"
            class="wms-select2-control"
        >
            <option value=""></option>
            @foreach ($countries as $country)
                <option value="{{ $country->id }}" @selected((int) old('country_id', $company->address?->country_id) === $country->id)>
                    {{ $country->display_name ?: $country->common_name ?: $country->name }}
                </option>
            @endforeach
        </select>
        @error('country_id')
            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
        @enderror
    </div>
</div>

<div class="mt-6 flex flex-wrap items-center gap-3">
    <button class="rounded-xl bg-green-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/40">
        Save company
    </button>

    <a
        href="{{ $company->exists ? route('platform.companies.show', $company) : route('platform.companies.index') }}"
        class="rounded-xl border border-zinc-300 px-4 py-2 text-sm font-semibold text-zinc-700 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-800"
    >
        Cancel
    </a>
</div>