@extends('backend.layouts.app')

@section('title', 'Edit Parameter')

@section('content')
    @php
        $pageTitle = 'Edit Parameter';
        $indexRoute = 'ref.index';
        $indexLabel = 'Parameters';
    @endphp
    @include('backend.layouts.partials._page_header')

    <div class="space-y-6">
        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="px-5 py-5">
                <p class="text-sm text-gray-500 dark:text-gray-400">Update the parameter entry information below.</p>
            </div>

            <form action="{{ route('ref.update', $ref->id) }}" method="POST">
                @csrf
                @method('PUT')
                <div class="space-y-5 border-t border-gray-100 p-6 dark:border-gray-800">

                    @php
                        $inputClass = 'dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 border-gray-300 dark:border-gray-700';
                        $inputErrorClass = 'dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700';
                    @endphp

                    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">Category <span
                                    class="text-error-500">*</span></label>
                            <input type="text" name="cat" value="{{ old('cat', $ref->cat) }}" placeholder="e.g. STATUS"
                                class="{{ $errors->has('cat') ? $inputErrorClass : $inputClass }}">
                            @error('cat')<p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">Code <span
                                    class="text-error-500">*</span></label>
                            <input type="text" name="code" value="{{ old('code', $ref->code) }}" placeholder="e.g. ACTIVE"
                                class="{{ $errors->has('code') ? $inputErrorClass : $inputClass }}">
                            @error('code')<p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>@enderror
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">Description
                                (BM)</label>
                            <input type="text" name="descr" value="{{ old('descr', $ref->descr) }}" placeholder="Penerangan"
                                class="{{ $errors->has('descr') ? $inputErrorClass : $inputClass }}">
                            @error('descr')<p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">Description
                                (EN)</label>
                            <input type="text" name="descr_en" value="{{ old('descr_en', $ref->descr_en) }}"
                                placeholder="Description"
                                class="{{ $errors->has('descr_en') ? $inputErrorClass : $inputClass }}">
                            @error('descr_en')<p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>@enderror
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-5 sm:grid-cols-3">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">Sort
                                Order</label>
                            <input type="number" name="sort" value="{{ old('sort', $ref->sort) }}" placeholder="1"
                                class="{{ $errors->has('sort') ? $inputErrorClass : $inputClass }}">
                            @error('sort')<p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">Parent</label>
                            <select name="parent" id="parent-select"
                                class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm text-gray-800 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                                <option value="">-- None --</option>
                                @foreach($codes as $c)
                                    <option value="{{ $c->code }}" class="parent-opt" data-cat="{{ $c->cat }}" {{ old('parent', $ref->parent) == $c->code ? 'selected' : '' }}>{{ $c->cat }} - {{ $c->code }} ({{ $c->descr }})</option>
                                @endforeach
                            </select>
                            @error('parent')<p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">Icon
                                Name</label>
                            <input type="text" name="icon_name" value="{{ old('icon_name', $ref->icon_name) }}"
                                placeholder="e.g. fa-star"
                                class="{{ $errors->has('icon_name') ? $inputErrorClass : $inputClass }}">
                            @error('icon_name')<p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>@enderror
                        </div>
                    </div>
                </div>

                <div class="flex justify-end gap-3 border-t border-gray-100 px-6 py-4 dark:border-gray-800">
                    <a href="{{ route('ref.index') }}"
                        class="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300">Cancel</a>
                    <!-- <a href="#" class="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300">View</a> -->
                    <button type="submit"
                        class="rounded-lg bg-brand-500 px-4 py-2 text-sm text-white hover:bg-brand-600">Update</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    var catSelect = document.querySelector('[name="cat"]');
    var parentSelect = document.getElementById('parent-select');
    if (catSelect && parentSelect) {
        function filterParent() {
            var val = catSelect.value;
            parentSelect.querySelectorAll('.parent-opt').forEach(function(opt) {
                opt.style.display = !val || opt.dataset.cat === val ? '' : 'none';
            });
            if (parentSelect.value) {
                var sel = parentSelect.querySelector('option[value="' + parentSelect.value + '"]');
                if (sel && sel.style.display === 'none') parentSelect.value = '';
            }
        }
        catSelect.addEventListener('change', filterParent);
        filterParent();
    }
});
</script>
@endpush