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

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

    <!-- Form Card -->
    <div class="card">
            <form action="{{ route('admin.currency.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>

                    <!-- Code -->
                    <div class="mb-4 input-with-label">
                        <label for="code" class="block text-sm font-medium text-gray-700">Code</label>
                        <input type="text" id="code" name="code" value="{{ old('code') }}"
                            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
                        <small class="text-gray-500 text-xs">Example: USD, EUR, GBP</small>
                    </div>

                    <!-- Country Code -->
                    <div class="mb-4 input-with-label">
                        <label for="country_code" class="block text-sm font-medium text-gray-700">Country code</label>
                        <input type="text" id="country_code" name="country_code" value="{{ old('country_code') }}"
                            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('country_code') border-red-500 @enderror">
                        @error('country_code')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Symbol -->
                    <div class="mb-4 input-with-label">
                        <label for="symbol" class="block text-sm font-medium text-gray-700">Symbol</label>
                        <input type="text" id="symbol" name="symbol" value="{{ old('symbol') }}"
                            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('symbol') border-red-500 @enderror">
                        @error('symbol')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Exchange Rate -->
                    <div class="mb-4 input-with-label">
                        <label for="exchange_rate" class="block text-sm font-medium text-gray-700">Exchange rate</label>
                        <input type="number" id="exchange_rate" name="exchange_rate" value="{{ old('exchange_rate') }}"
                            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('exchange_rate') border-red-500 @enderror">
                        @error('exchange_rate')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Symbol Position -->
                    <div class="mb-4 input-with-label">
                        <label for="symbol_position" class="block text-sm font-medium text-gray-700 mb-1">
                            Symbol Position
                        </label>
                        <select class="form-select" id="symbol_position" name="symbol_position"
                            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('symbol_position') border-red-500 @enderror">
                            <option value="before" {{ old('symbol_position') === 'before' ? 'selected' : '' }}>
                                Before
                            </option>
                            <option value="after" {{ old('symbol_position') === 'after' ? 'selected' : '' }}>
                                After
                            </option>
                        </select>
                        @error('symbol_position')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>


                    <!-- Checkboxes -->
                    <div class="flex flex-wrap gap-6 mt-4">

                        <!-- Status -->
                        <label for="status" class="flex items-center cursor-pointer space-x-3">
                            <div class="relative">
                                <input type="checkbox" id="status" name="status" checked value="{{ old('status') }}"
                                    class="sr-only peer">
                                <div
                                    class="w-12 h-6 bg-gray-200 rounded-full peer-focus:ring-2 peer-focus:ring-indigo-500 
                        peer-checked:bg-indigo-600 transition-colors">
                                </div>
                                <div
                                    class="absolute left-0.5 top-0.5 w-5 h-5 bg-white rounded-full shadow 
                        peer-checked:translate-x-6 transition-transform">
                                </div>
                            </div>
                            <span class="text-sm font-medium text-gray-700">Status</span>
                        </label>

                        <!-- Default -->
                        <label for="is_default" class="flex items-center cursor-pointer space-x-3">
                            <div class="relative">
                                <input type="checkbox" id="is_default" name="is_default" class="sr-only peer">
                                <div
                                    class="w-12 h-6 bg-gray-200 rounded-full peer-focus:ring-2 peer-focus:ring-indigo-500 
                        peer-checked:bg-indigo-600 transition-colors">
                                </div>
                                <div
                                    class="absolute left-0.5 top-0.5 w-5 h-5 bg-white rounded-full shadow 
                        peer-checked:translate-x-6 transition-transform">
                                </div>
                            </div>
                            <span class="text-sm font-medium text-gray-700">Make it default</span>
                        </label>

                    </div>



                </div>

                <!-- Buttons -->
                <div class="flex justify-end gap-3 mt-5">
                       <a href="{{ route('admin.currency.index') }}"
                        class="btn btn-secondary">
                        Cancel
                    </a>
                    <button type="submit"
                        class="btn btn-primary">
                        Create Currency
                    </button>
                 
                </div>
            </form>
    </div>
@endsection