@extends('layouts.main')

@section('breadcrumbs')
    {{ Breadcrumbs::render(request()->route()->getName()) }}
@endsection

@section('content')
    <div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
        <form method="POST" action="{{ route('basicdata.referensi-link.store') }}">
            @csrf
            <div class="card border border-agi-100 pb-2.5">
                <div class="card-header bg-agi-50" id="basic_settings">
                    <h3 class="card-title">
                        Tambah Referensi Link
                    </h3>
                    <div class="flex items-center gap-2">
                        <a href="{{ route('basicdata.referensi-link.index') }}" class="btn btn-xs btn-info"><i class="ki-filled ki-exit-left"></i> Back</a>
                    </div>
                </div>
                <div class="card-body grid gap-5">
                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                        <label class="form-label max-w-56">
                            Nama Referensi Link <span class="text-danger">*</span>
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input class="input @error('name') border-danger bg-danger-light @enderror" 
                                   type="text" 
                                   name="name" 
                                   value="{{ old('name') }}" 
                                   placeholder="Masukkan nama referensi link"
                                   required>
                            @error('name')
                            <em class="alert text-danger text-sm">{{ $message }}</em>
                            @enderror
                        </div>
                    </div>

                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                        <label class="form-label max-w-56">
                            Link URL <span class="text-danger">*</span>
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input class="input @error('link') border-danger bg-danger-light @enderror" 
                                   type="url" 
                                   name="link" 
                                   value="{{ old('link') }}" 
                                   placeholder="https://example.com"
                                   required>
                            @error('link')
                            <em class="alert text-danger text-sm">{{ $message }}</em>
                            @enderror
                            <div class="form-hint">Pastikan link diawali dengan http:// atau https://</div>
                        </div>
                    </div>

                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                        <label class="form-label max-w-56">
                            Kategori
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input class="input @error('kategori') border-danger bg-danger-light @enderror" 
                                   type="text" 
                                   name="kategori" 
                                   value="{{ old('kategori') }}" 
                                   placeholder="Misal: regulasi, panduan, dll">
                            @error('kategori')
                            <em class="alert text-danger text-sm">{{ $message }}</em>
                            @enderror
                            <div class="form-hint">Kosongkan jika tidak ada kategori</div>
                        </div>
                    </div>

                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                        <label class="form-label max-w-56">
                            Deskripsi
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <textarea class="textarea @error('deskripsi') border-danger bg-danger-light @enderror" 
                                      name="deskripsi" 
                                      rows="4"
                                      placeholder="Masukkan deskripsi lengkap referensi link">{{ old('deskripsi') }}</textarea>
                            @error('deskripsi')
                            <em class="alert text-danger text-sm">{{ $message }}</em>
                            @enderror
                        </div>
                    </div>

                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                        <label class="form-label max-w-56">
                            Status Aktif
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <label class="switch">
                                <input type="checkbox" name="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}>
                                <span class="switch-slider"></span>
                            </label>
                            <span class="ml-3 text-sm text-gray-600">Aktifkan referensi link ini</span>
                            @error('is_active')
                            <em class="alert text-danger text-sm">{{ $message }}</em>
                            @enderror
                        </div>
                    </div>

                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                        <label class="form-label max-w-56">
                            Urutan Tampil
                        </label>
                        <div class="flex flex-wrap items-baseline w-full">
                            <input class="input @error('urutan') border-danger bg-danger-light @enderror" 
                                   type="number" 
                                   name="urutan" 
                                   value="{{ old('urutan', 0) }}" 
                                   min="0"
                                   placeholder="0">
                            @error('urutan')
                            <em class="alert text-danger text-sm">{{ $message }}</em>
                            @enderror
                            <div class="form-hint">Semakin kecil angka, semakin atas posisinya</div>
                        </div>
                    </div>
                </div>
                <div class="card-footer justify-end">
                    <div class="flex flex-wrap gap-2">
                        <a href="{{ route('basicdata.referensi-link.index') }}" class="btn btn-light">
                            <i class="ki-filled ki-exit-left"></i> Batal
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="ki-filled ki-check"></i> Simpan
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
<script>
    // Auto-add https:// if not present
    document.querySelector('input[name="link"]').addEventListener('blur', function() {
        let value = this.value.trim();
        if (value && !value.match(/^https?:\/\//i)) {
            this.value = 'https://' + value;
        }
    });
</script>
@endpush