@extends('layouts.app_rest')

@section('content')
    <div class="animate__animated p-6" :class="[$store.app.animation]">

        <div>
            <ul class="flex space-x-2 rtl:space-x-reverse pb-4">
                <li>
                    <a href="{{ action('Auth\LoginController@dashboard') }}"
                        class="text-primary hover:underline">Dashboard</a>
                </li>
                <li class="before:content-['/'] ltr:before:mr-1 rtl:before:ml-1">
                    <span>Currency Setting</span>
                </li>
            </ul>
            <div class="bg-white shadow-lg rounded-lg p-6">
                <div class="mb-5 flex items-center justify-between">
                    <h3 class="font-semibold dark:text-white-light">Currency Setting</h3>
                </div>
                <div class="my-4 h-px w-full border-b border-[#e0e6ed] dark:border-[#1b2e4b]"></div>

                <div class="pt-5">

                    <form action="{{ route('currency.settings.update') }}" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="flex flex-col sm:flex-row gap-6">
                            <div class="flex-1">
                                <div class="mb-4">
                                    <label for="currency_convenience_type"
                                        class="block text-sm font-medium text-gray-700">Currency
                                        Convenience Type:</label>
                                    <select id="currency_convenience_type" name="currency_convenience_type"
                                        class="form-select block border-gray-300 rounded-md shadow-md focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
                                        style="width: 30%;">
                                        <option value="default"
                                            {{ old('currency_convenience_type', $currency->currency_convenience_type) === 'default' ? 'selected' : '' }}>
                                            Default
                                        </option>
                                        <option value="auto"
                                            {{ old('currency_convenience_type', $currency->currency_convenience_type) === 'auto' ? 'selected' : '' }}>
                                            Auto
                                        </option>
                                        <option value="manual"
                                            {{ old('currency_convenience_type', $currency->currency_convenience_type) === 'manual' ? 'selected' : '' }}>
                                            Manual
                                        </option>
                                    </select>
                                    @error('currency_convenience_type')
                                        <p class="text-red-500 text-sm mt-2">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>


                            <div class="flex-1 bg-gray-50">
                                <div x-data="currencyData()">
                                    <div class="mb-4">
                                        <label for="currency_code" class="block text-sm font-medium text-gray-700">
                                            Select Currency:
                                        </label>
                                        <select id="currency_code" name="currency_code"
                                            class="form-select block border-gray-300 rounded-md shadow-md focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
                                            style="width: 30%;" x-model="selectedCurrency" @change="updateCurrencyValue()">
                                            @foreach ($currencies as $code => $name)
                                                <option value="{{ $code }}"
                                                    {{ old('currency_code', $currency->code) == $code ? 'selected' : '' }}>
                                                    {{ $code }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('currency_code')
                                            <p class="text-red-500 text-sm mt-2">{{ $message }}</p>
                                        @enderror
                                    </div>

                                    <div class="mb-4 pt-2">
                                        <label for="usd_value" class="block text-sm font-medium text-gray-700">
                                            USD Value:
                                        </label>
                                        <input type="number" id="usd_value" name="usd_value" step="0.01"
                                            x-model.number="currencyValue"
                                            class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-2 rounded-md focus:border-blue-500 focus:ring focus:ring-blue-500 border-2 border-blue-500">
                                        @error('usd_value')
                                            <p class="text-red-500 text-sm mt-2">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center justify-end mt-6">
                            <button type="submit"
                                class="bg-blue-500 text-white px-4 py-2 rounded-md shadow-sm hover:bg-blue-600 focus:outline-none focus:ring-2 bg-primary focus:ring-offset-2">
                                Save Changes
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
    <script type="text/javascript">
        document.addEventListener('alpine:init', () => {
            Alpine.data('currencyData', () => ({
                selectedCurrency: '{{ old('currency_code', $currency->code) }}',
                currencyValue: '{{ old('usd_value', $currency->USD_value) }}',
                currencyValues: @json($currencyValues),

                updateCurrencyValue() {
                    this.currencyValue = this.currencyValues[this.selectedCurrency] || 0;
                }
            }));
        });
    </script>
@endsection