
<div>
    <!-- anchor tag horizontally -->
    <div class="flex items-center gap-2 text-xs text-gray-600">
        <!-- Home link -->
        <a href="/main/profile" class="flex items-center hover:text-orange-600">
            <x-heroicon-o-home class="w-3 h-3 mr-1" />
            <span class="leading-none">Home</span>
        </a>
        <x-heroicon-o-chevron-right class="w-3 h-3" />
        <a href="/main/about-us/card-type" class="hover:text-orange-600">
            Card Types
        </a>
        <x-heroicon-o-chevron-right class="w-3 h-3" />
        <span>
            Create Card Type
        </span>
    </div>

    <!-- Page Title -->
    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Card Types</h3>

    <!-- Bottom border -->
    <div class="border-b border-gray-300 mt-5"></div>

    <div class="p-6 mt-10 max-w-5xl mx-auto bg-white rounded-md shadow-md">
        <h2 class="text-lg font-semibold mb-4">Card Type Details</h2>

        <div class="space-y-4">
            <!-- Card Code -->
            <div class="flex items-center gap-2">
                <label class="w-40">Card Code:</label>
                <input type="text" wire:model="card_code" class="flex-1 border rounded px-3 py-2" placeholder="Card Code">
            </div>

            <!-- Card Type Description -->
            <div class="flex items-center gap-2">
                <label class="w-40">Card Type Description:</label>
                <input type="text" wire:model="card_type_description" class="flex-1 border rounded px-3 py-2" placeholder="Card Type Description">
            </div>

            <!-- Card Type Short Description -->
                <div class="flex items-center gap-2">
                <label class="w-40">Card Type Short Description:</label>
                <input type="text" wire:model="card_type_short_description" class="flex-1 border rounded px-3 py-2" placeholder="Card Type Short Description">
            </div>

            <!-- Image Card Type -->
            <div class="flex items-start gap-2">
                <label class="w-40 pt-2">Upload Card Type Image:</label>
                <div class="flex-1">
                    <input type="file" wire:model="image" class="border rounded px-3 py-2" accept="image/*">

                    @error('image') 
                        <span class="text-red-500 text-sm">{{ $message }}</span> 
                    @enderror

                    @if ($typeImage)
                        <div class="mt-4">
                            <p class="text-sm text-gray-600 mb-2">Preview:</p>
                            <img src="{{ $typeImage->temporaryUrl() }}" class="h-48 rounded border">
                        </div>
                    @endif
                </div>
            </div>

            <!-- Virtual Card Font Color -->
                    <div class="flex items-center gap-4">
                <label class="w-40">Virtual Card Font Color:</label>
                <label>
                    <input type="radio" wire:model="role" name="role" value="admin" class="mr-1"> White
                </label>
                <label>
                    <input type="radio" wire:model="role" name="role" value="marketing" class="mr-1"> Black
                </label>
            </div>

            <!-- Image Card Type -->
            <div class="flex items-start gap-2">
                <label class="w-40 pt-2">Upload Card Type Image:</label>
                <div class="flex-1">
                    <input type="file" wire:model="image" class="border rounded px-3 py-2" accept="image/*">

                    @error('image') 
                        <span class="text-red-500 text-sm">{{ $message }}</span> 
                    @enderror

                    @if ($coverImage)
                        <div class="mt-4">
                            <p class="text-sm text-gray-600 mb-2">Preview:</p>
                            <img src="{{ $coverImage->temporaryUrl() }}" class="h-48 rounded border">
                        </div>
                    @endif
                </div>
            </div>

            <!-- ID Number Required -->
            <div class="flex items-center gap-4">
                <label class="w-40">ID Number Required:</label>
                <label>
                    <input type="radio" wire:model="role" name="role" value="admin" class="mr-1"> Yes
                </label>
                <label>
                    <input type="radio" wire:model="role" name="role" value="marketing" class="mr-1"> No
                </label>
            </div>

             <!-- ID Number Description -->
            <div class="flex items-center gap-2">
                <label class="w-40">ID Number Description:</label>
                <input type="text" wire:model="card_type_description" disabled class="flex-1 border rounded px-3 py-2" placeholder="ID Number Descriptionn">
            </div>

            <h2 class="text-lg font-semibold mb-4">Data Privacy</h2>

            <!-- Terms & Condition -->
            <div class="flex items-start gap-2">
                <label class="w-40 pt-2">Terms & Condition:</label>
                <textarea wire:model="email" class="flex-1 border rounded px-3 py-2" rows="4" placeholder="Terms & Condition"></textarea>
            </div>

            <!-- FAQs -->
            <div class="flex items-start gap-2">
                <label class="w-40 pt-2">FAQs:</label>
                <textarea wire:model="email" class="flex-1 border rounded px-3 py-2" rows="4" placeholder="FAQs"></textarea>
            </div>


        <!-- Submit / Cancel -->
        <div class="mt-6 flex justify-end gap-2">
            <button wire:click="cancel" class="px-4 py-2 bg-gray-300 text-black rounded hover:bg-gray-400">Cancel</button>
            <button wire:click="submit" class="px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600">Submit</button>
        </div>
    </div>
</div>
