@extends('layouts.app')

@section('content')
    <div class="flex-1 space-y-6">
        <!-- Header -->
        <div class="flex items-center gap-2 text-slate-500 text-sm mb-2">
            <a href="{{ route('dashboard') }}" class="hover:text-blue-600 cursor-pointer">Trang chủ</a>
            <i data-lucide="chevron-right" class="w-4 h-4"></i>
            <a href="{{ route('tenant-domain.index') }}" class="hover:text-blue-600 cursor-pointer">Quản lý Tenant
                Domain</a>
            <i data-lucide="chevron-right" class="w-4 h-4"></i>
            <span>Tạo Domain</span>
        </div>
        <h1 class="text-3xl font-bold text-slate-900 mb-6">Tạo Tenant Domain</h1>

        <!-- Notifications -->
        @if(session('success'))
            <div
                class="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg flex items-center justify-between">
                {{ session('success') }}
                <button type="button" onclick="this.parentElement.remove()" class="text-green-600 hover:text-green-800"><i
                        data-lucide="x" class="w-5 h-5"></i></button>
            </div>
        @endif
        @if(session('error'))
            <div class="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg flex items-center justify-between">
                {{ session('error') }}
                <button type="button" onclick="this.parentElement.remove()" class="text-red-600 hover:text-red-800"><i
                        data-lucide="x" class="w-5 h-5"></i></button>
            </div>
        @endif
        @if($errors->any())
            <div class="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg">
                <ul class="list-disc list-inside space-y-1 text-sm">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
            <form action="{{ route('tenant-domain.store') }}" id="form_domain_info" method="post">
                @csrf
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Domain Name <span
                                class="text-red-500">*</span></label>
                        <input type="text" name="name" value="{{ old('name') }}"
                            class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none"
                            placeholder="Nhập domain (vd: testsite.hocmai.vn)" required>
                        <p class="mt-1 text-xs text-slate-500">Tên domain đầy đủ</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Tenant <span
                                class="text-red-500">*</span></label>
                        <select name="tenant_id"
                            class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none"
                            required>
                            <option value="">-- Chọn Tenant --</option>
                            @foreach($tenants as $tenant)
                                <option value="{{ $tenant->id }}" {{ old('tenant_id') == $tenant->id ? 'selected' : '' }}>
                                    {{ $tenant->name }} ({{ $tenant->code }})
                                </option>
                            @endforeach
                        </select>
                        <p class="mt-1 text-xs text-slate-500">Chọn tenant mà domain này thuộc về</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">API Key</label>
                        <input type="text" name="api_key" value="{{ old('api_key') }}"
                            class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none"
                            placeholder="Nhập API key (optional)">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Trạng thái <span
                                class="text-red-500">*</span></label>
                        <select name="status"
                            class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none"
                            required>
                            <option value="1" {{ old('status', 1) == 1 ? 'selected' : '' }}>Active</option>
                            <option value="0" {{ old('status') == 0 ? 'selected' : '' }}>Inactive</option>
                        </select>
                    </div>
                    <!-- <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Domain Shared? <span
                                    class="text-red-500">*</span></label>
                            <select name="is_shared"
                                class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none"
                                required>
                                <option value="0" {{ old('is_shared', 0) == 0 ? 'selected' : '' }}>No</option>
                                <option value="1" {{ old('is_shared') == 1 ? 'selected' : '' }}>Yes</option>
                            </select>
                            <p class="mt-1 text-xs text-slate-500">Domain có dùng chung cho các tenant không?</p>
                        </div> -->
                </div>

                <div class="mt-6 flex items-center gap-3">
                    <button type="submit" id="btn-save"
                        class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors shadow-sm">
                        Tạo Domain
                    </button>
                    <a href="{{ route('tenant-domain.index') }}"
                        class="px-4 py-2 bg-white border border-slate-300 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors">
                        Huỷ
                    </a>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        if (typeof lucide !== 'undefined') lucide.createIcons();
    </script>
@endsection