@extends('layouts.app')

@section('title', __('dashboard.Edit Reservation Option'))
@section('page_heading', __('dashboard.Edit Reservation Option'))


@section('content')
<div style="display:flex;align-items:center;justify-content:flex-end;gap:.5rem;margin-bottom:1.25rem">
    <a href="{{ route('dashboard.reservation_options.index') }}" class="app-btn app-btn--secondary app-btn--sm">
        <i class="fa-solid fa-arrow-right"></i> {{ __('dashboard.Reservation Options') }}
    </a>
</div>

@include('layouts.partials.workspace-page-styles')

<div class="workspace-shell">
    <div class="workspace-body">
        <div class="collection-card__header">
            <div class="collection-card__intro">
                <span class="collection-card__icon"><i class="fa-solid fa-sliders2"></i></span>
                <div class="collection-card__title">
                    <h2>{{ __('dashboard.Edit Reservation Option') }}: {{ $reservationOption->name }}</h2>
                    <p>{{ __('dashboard.edit_reservation_option_desc') }}</p>
                </div>
            </div>
        </div>

        <form action="{{ route('dashboard.reservation_options.update', $reservationOption->id) }}" method="POST" class="mt-4">
            @csrf @method('PATCH')

            <div class="app-grid gap-4">
                <div class="md:col-span-6">
                    <label class="app-label font-bold required">{{ __('dashboard.Name') }}</label>
                    <input type="text" name="name" class="app-input @error('name') app-input--invalid @enderror" value="{{ old('name', $reservationOption->name) }}" required>
                    @error('name')<div class="app-field-error">{{ $message }}</div>@enderror
                </div>

                <div class="md:col-span-6">
                    <label class="app-label font-bold required">{{ __('dashboard.Type') }}</label>
                    <select name="type" class="app-input app-select @error('type') app-input--invalid @enderror" id="option_type">
                        <option value="text" @selected(old('type', $reservationOption->type) === 'text')>{{ __('dashboard.Text') }}</option>
                        <option value="multiple" @selected(old('type', $reservationOption->type) === 'multiple')>{{ __('dashboard.Multiple') }}</option>
                    </select>
                    @error('type')<div class="app-field-error">{{ $message }}</div>@enderror
                </div>

                <div class="md:col-span-6">
                    <label class="app-label font-bold required">{{ __('dashboard.Category') }}</label>
                    <select name="product_category_id" class="app-input app-select @error('product_category_id') app-input--invalid @enderror">
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}" @selected(old('product_category_id', $reservationOption->product_category_id) == $category->id)>{{ $category->name }}</option>
                        @endforeach
                    </select>
                    @error('product_category_id')<div class="app-field-error">{{ $message }}</div>@enderror
                </div>
            </div>

            <div id="values_section" class="mt-4" style="display:{{ $reservationOption->type === 'multiple' ? '' : 'none' }}">
                <label class="app-label font-bold">{{ __('dashboard.Values') }}</label>
                <div id="values_container" class="flex flex-col gap-2">
                    @forelse($reservationOption->values as $value)
                        <input type="text" name="values[]" class="app-input" value="{{ $value->value_name }}">
                    @empty
                        <input type="text" name="values[]" class="app-input" placeholder="{{ __('dashboard.Enter value') }}">
                    @endforelse
                </div>
                <button type="button" id="add_value_btn" class="app-btn app-btn--secondary app-btn--sm mt-2">
                    <i class="fa-solid fa-plus"></i> {{ __('dashboard.Add More') }}
                </button>
            </div>

            <div class="flex justify-end gap-2 mt-5">
                <a href="{{ route('dashboard.reservation_options.index') }}" class="app-btn app-btn--secondary">{{ __('dashboard.Cancel') }}</a>
                <button type="submit" class="app-btn app-btn--primary">{{ __('dashboard.Save Changes') }}</button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.getElementById('option_type').addEventListener('change', function() {
        document.getElementById('values_section').style.display = this.value === 'multiple' ? '' : 'none';
    });
    document.getElementById('add_value_btn').addEventListener('click', function() {
        const inp = document.createElement('input');
        inp.type = 'text'; inp.name = 'values[]'; inp.className = 'app-input';
        inp.placeholder = '{{ __("dashboard.Enter value") }}';
        document.getElementById('values_container').appendChild(inp);
    });
</script>
@endsection