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

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

    <div class="card">
            <form action="{{ route('admin.currency.update', $currency->id) }}') }}" method="POST"
                enctype="multipart/form-data">
                @method('PUT')
                @csrf

                <div class="grid grid-cols-1 gap-4">
                    <div class="input-with-label">
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-1">
                            Name <span class="text-red-500">*</span>
                        </label>
                        <input type="text" id="name" name="name" value="{{ old('name', $currency->name) }}"
                            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"
                            required>
                        @error('name')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="mb-4 input-with-label">
                        <label for="code" class="block text-sm font-medium text-gray-700 mb-1">Code</label>
                        <input type="text" id="code" name="code" value="{{ old('code', $currency->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>

                    <div class="mb-4 input-with-label">
                        <label for="country_code" class="block text-sm font-medium text-gray-700 mb-1">Country code</label>
                        <input type="text" id="country_code" name="country_code"
                            value="{{ old('country_code', $currency->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>

                    <div class="mb-4 input-with-label">
                        <label for="symbol" class="block text-sm font-medium text-gray-700 mb-1">Symbol</label>
                        <input type="text" id="symbol" name="symbol" value="{{ old('symbol', $currency->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>

                    <div class="mb-4 input-with-label">
                        <label for="exchange_rate" class="block text-sm font-medium text-gray-700 mb-1">Exchange
                            rate</label>
                        <input type="number" id="exchange_rate" name="exchange_rate"
                            value="{{ old('exchange_rate', $currency->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>

                    <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 @selected($currency->symbol_position == 'before') value="before">Before</option>
                            <option @selected($currency->symbol_position == 'after') value="after">After</option>
                        </select>
                        @error('symbol_position')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="grid grid-cols-2 gap-4 mt-4">
                        <!-- Status Switch -->
                        <div class="flex items-center gap-2">
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" id="status" name="status"
                                    value="{{ old('status', $currency->status) }}" @checked($currency->status)
                                    class="sr-only peer">
                                <div
                                    class="w-11 h-6 bg-gray-300 rounded-full peer peer-checked:bg-indigo-600 transition-all">
                                </div>
                                <div
                                    class="absolute left-0.5 top-0.5 w-5 h-5 bg-white rounded-full shadow transform peer-checked:translate-x-5 transition-transform">
                                </div>
                            </label>
                            <span class="text-sm text-gray-700">Status</span>
                        </div>

                        <!-- Default Switch -->
                        <div class="flex items-center gap-2">
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" id="is_default" name="is_default" @checked($currency->is_default)
                                    class="sr-only peer">
                                <div
                                    class="w-11 h-6 bg-gray-300 rounded-full peer peer-checked:bg-indigo-600 transition-all">
                                </div>
                                <div
                                    class="absolute left-0.5 top-0.5 w-5 h-5 bg-white rounded-full shadow transform peer-checked:translate-x-5 transition-transform">
                                </div>
                            </label>
                            <span class="text-sm text-gray-700">Make it default</span>
                        </div>
                    </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