@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'Create Language')

@section('content')
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-semibold">Create Language</h1>
        <a href="{{ route('admin.language.index') }}" class="btn btn-primary">
            <i class="fas fa-arrow-left mr-2"></i> Back to Languages
        </a>
    </div>

    <div class="card">
        <div class="p-6">
            <form action="{{ route('admin.language.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="space-y-4">
                    <!-- Name -->
                    <div class="mb-4 input-with-label">
                        <label for="name" class="block text-sm font-medium text-gray-700">
                            Name <span class="text-red-500">*</span>
                        </label>
                        <input type="text" id="name" name="name" value="{{ old('name') }}" required
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm 
                      focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
                      @error('name') border-red-500 @enderror">
                        @error('name')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Native Name -->
                    <div class="mb-4 input-with-label">
                        <label for="native_name" class="block text-sm font-medium text-gray-700">
                            Native Name <span class="text-red-500">*</span>
                        </label>
                        <input type="text" id="native_name" name="native_name" value="{{ old('native_name') }}" required
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm 
                      focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
                      @error('native_name') border-red-500 @enderror">
                        @error('native_name')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Code -->
                    <div class="mb-4 input-with-label">
                        <label for="code" class="block text-sm font-medium text-gray-700">
                            Code <span class="text-red-500">*</span>
                        </label>
                        <input type="text" id="code" name="code" value="{{ old('code') }}" required
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm 
                      focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
                      @error('code') border-red-500 @enderror">
                        @error('code')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Sort Order -->
                    <div class="mb-4 input-with-label">
                        <label for="sort_order" class="block text-sm font-medium text-gray-700">Sort Order</label>
                        <input type="number" id="sort_order" name="sort_order" value="{{ old('sort_order', 0) }}"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm 
                      focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
                      @error('sort_order') border-red-500 @enderror">
                        @error('sort_order')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Checkboxes -->
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-4">
                        <!-- Is RTL -->
                        <label class="flex items-center cursor-pointer space-x-4">
                            <input type="checkbox" id="is_rtl" name="is_rtl" {{ old('is_rtl') ? 'checked' : '' }}
                                class="w-5 h-5 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500">
                            <span class="text-sm font-medium text-gray-700 ml-2">Is RTL Language</span>
                        </label>
                        <!-- Is Active -->
                        <label class="flex items-center cursor-pointer space-x-4">
                            <input type="checkbox" id="is_active" name="is_active"
                                {{ old('is_active', 1) ? 'checked' : '' }}
                                class="w-5 h-5 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500">
                            <span class="text-sm font-medium text-gray-700 ml-2">Is Active</span>
                        </label>
                        <!-- Is Default -->
                        <label class="flex items-center cursor-pointer space-x-4">
                            <input type="checkbox" id="is_default" name="is_default"
                                {{ old('is_default') ? 'checked' : '' }}
                                class="w-5 h-5 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500">
                            <span class="text-sm font-medium text-gray-700 ml-2">Make it Default</span>
                        </label>
                    </div>

                </div>

                <div class="col-span-full flex-col sm:flex-row flex justify-end gap-4 mt-5">
                    <a class="btn-secondary" href="{{ route('admin.language.index') }}">
                        Cancel
                    </a>
                    <button type="submit" class="btn btn-primary">Create Language</button>
                </div>


            </form>
        </div>
    </div>
@endsection