@extends('layouts.main')

@section('breadcrumbs')
    {{ Breadcrumbs::render('basicdata.referensi-link') }}
@endsection

@section('content')
    <div class="grid">
        <div class="card border border-agi-100 min-w-full">
            <div class="card-header bg-agi-50 py-5 flex-wrap">
                <h3 class="card-title">Import Referensi Link</h3>
                <div class="flex flex-wrap gap-2 lg:gap-5">
                    <a class="btn btn-sm btn-light" href="{{ route('basicdata.referensi-link.download-template') }}">Download Template Excel</a>
                    <a class="btn btn-sm btn-primary" href="{{ route('basicdata.referensi-link.index') }}">Kembali ke Daftar</a>
                </div>
            </div>
            <div class="card-body">
                <form id="importPageForm" action="{{ route('basicdata.referensi-link.import.process') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
                    @csrf
                    <div>
                        <label class="form-label">File Excel</label>
                        <input type="file" name="file" class="input" accept=".xlsx,.xls" required>
                        <div class="form-hint">Format file: .xlsx atau .xls, maksimal 10MB</div>
                    </div>

                    <div class="alert alert-info">
                        <div class="alert-description">
                            <strong>Format kolom yang didukung:</strong>
                            <div>Nama, Link, Kategori, Deskripsi, Status Aktif, Urutan</div>
                            <div class="mt-2">Contoh baris:</div>
                            <div class="mt-1">Contoh Referensi | https://example.com | panduan | Deskripsi contoh referensi link | aktif | 1</div>
                            <div>Contoh Regulasi | https://regulasi.example.com | regulasi | Deskripsi regulasi | aktif | 2</div>
                        </div>
                    </div>

                    <div class="flex gap-3">
                        <button type="submit" class="btn btn-primary">Import</button>
                        <a href="{{ route('basicdata.referensi-link.index') }}" class="btn btn-light">Batal</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script type="module">
    const form = document.getElementById('importPageForm');
    const submitBtn = form.querySelector('button[type="submit"]');

    form.addEventListener('submit', function(e) {
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="ki-filled ki-loading"></i> Mengimport...';
    });
</script>
@endpush