@extends('backend.layouts.app')

@section('title', 'Import Departments')

@section('content')
    @php
        $pageTitle = 'Import Departments';
        $indexRoute = 'content-directory-department.index';
        $indexLabel = 'Departments';
    @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-4 sm:px-6 sm:py-5">
                <h3 class="text-base font-medium text-gray-800 dark:text-white/90">Import Departments from Excel / CSV</h3>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                    Upload a file to preview and validate rows before inserting or updating departments.
                </p>
            </div>

            <div class="border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
                @if ($errors->any())
                    <div class="mb-5 rounded-lg border border-error-200 bg-error-50 p-4 text-sm text-error-700 dark:border-error-500/20 dark:bg-error-500/10 dark:text-error-400">
                        {{ $errors->first() }}
                    </div>
                @endif

                <div class="mb-6 rounded-xl border border-brand-200 bg-brand-50 p-5 dark:border-brand-500/30 dark:bg-brand-500/10">
                    <div class="flex items-start gap-3">
                        <div class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-brand-500 text-white">
                            <svg class="fill-current" width="18" height="18" viewBox="0 0 20 20" aria-hidden="true">
                                <path d="M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm0 1.5a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13ZM9.25 6a.75.75 0 0 1 1.5 0v4.19l2.22 2.22a.75.75 0 1 1-1.06 1.06l-2.4-2.4a.75.75 0 0 1-.26-.57V6ZM10 14.75a.9.9 0 1 1 0-1.8.9.9 0 0 1 0 1.8Z"/>
                            </svg>
                        </div>
                        <div class="min-w-0">
                            <h4 class="text-sm font-semibold text-brand-700 dark:text-brand-300">How this import works</h4>
                            <div class="mt-3 grid grid-cols-1 gap-3 text-sm text-brand-700/90 dark:text-brand-200/90 sm:grid-cols-2 lg:grid-cols-4">
                                <div>
                                    <p class="font-semibold">1. Download</p>
                                    <p class="mt-1 text-xs">Use the Excel or CSV template so the headers match exactly.</p>
                                </div>
                                <div>
                                    <p class="font-semibold">2. Fill rows</p>
                                    <p class="mt-1 text-xs">One department per row. Use a unique <strong>code</strong> and both BM/EN names.</p>
                                </div>
                                <div>
                                    <p class="font-semibold">3. Preview</p>
                                    <p class="mt-1 text-xs">The system validates every row and shows what will be inserted or updated.</p>
                                </div>
                                <div>
                                    <p class="font-semibold">4. Confirm</p>
                                    <p class="mt-1 text-xs">Only valid files can be imported. All rows are saved in one database transaction.</p>
                                </div>
                            </div>
                            <div class="mt-4 grid grid-cols-1 gap-3 border-t border-brand-200/70 pt-4 text-xs text-brand-700/90 dark:border-brand-500/20 dark:text-brand-200/90 sm:grid-cols-2">
                                <p><strong>Insert or update:</strong> if a row's <strong>code</strong> already exists, that department is updated. If the code is new, a new department is inserted.</p>
                                <p><strong>All-or-nothing:</strong> if one row is invalid, nothing is written. Fix the file and upload it again.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-5 lg:grid-cols-2">
                    <div class="rounded-xl border border-gray-200 p-5 dark:border-gray-800">
                        <h4 class="text-sm font-semibold text-gray-800 dark:text-white/90">1. Download template</h4>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                            Use the template so the column names and sample hierarchy are correct.
                        </p>
                        <div class="mt-4 flex flex-wrap gap-3">
                            <a href="{{ route('content-directory-department.import.template', ['format' => 'xlsx']) }}"
                                class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-600">
                                Excel Template
                            </a>
                            <a href="{{ route('content-directory-department.import.template', ['format' => 'csv']) }}"
                                class="inline-flex items-center gap-2 rounded-lg border border-gray-300 px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-white/[0.03]">
                                CSV Template
                            </a>
                        </div>
                    </div>

                    <div class="rounded-xl border border-gray-200 p-5 dark:border-gray-800">
                        <h4 class="text-sm font-semibold text-gray-800 dark:text-white/90">2. Prepare your file</h4>
                        <ul class="mt-2 space-y-1.5 text-sm text-gray-500 dark:text-gray-400">
                            <li>Use <strong>.xlsx</strong> or <strong>.csv</strong> only. Convert old <strong>.xls</strong> files first.</li>
                            <li><strong>code</strong>, <strong>name_bm</strong> and <strong>name_en</strong> are required.</li>
                            <li>Format the <strong>code</strong> column as Text in Excel if it starts with zero.</li>
                            <li><strong>parent_code</strong> is optional; leave blank for a root department.</li>
                            <li>Use a parent code from the same file or an existing department.</li>
                            <li>The sample rows include three levels (<code>TKSU (KA)</code> → <code>BPI</code> → <code>SDPI</code>) and match the department codes used in the <strong>Staff import</strong> template (<code>BPM</code>, <code>SDPI</code>) — import departments first, then staff.</li>
                            <li>Maximum 5,000 rows and 200MB per file.</li>
                        </ul>
                    </div>
                </div>

                <form action="{{ route('content-directory-department.import.preview') }}" method="POST" enctype="multipart/form-data" class="mt-6 border-t border-gray-100 pt-6 dark:border-gray-800">
                    @csrf
                    <div>
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                            Excel or CSV file <span class="text-error-500">*</span>
                        </label>
                        <input type="file" name="file" id="department_import_file" class="filepond w-full" accept=".xlsx,.csv">
                        @include('backend.layouts.partials._upload-hint', ['text' => 'XLSX or CSV · Max 200MB'])
                        @error('file')
                            <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
                        @enderror
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                            The first worksheet is read. The first row must be the header row.
                        </p>
                    </div>

                    <div class="mt-6 flex justify-end gap-3">
                        <a href="{{ route('content-directory-department.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 dark:hover:bg-white/[0.03]">
                            Cancel
                        </a>
                        <button type="submit"
                            class="rounded-lg bg-brand-500 px-4 py-2 text-sm text-white hover:bg-brand-600">
                            Preview Import
                        </button>
                    </div>
                </form>

            </div>
        </div>

        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="px-5 py-4 sm:px-6 sm:py-5">
                <h3 class="text-base font-medium text-gray-800 dark:text-white/90">File format</h3>
            </div>
            <div class="border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
                <div class="overflow-x-auto">
                    <table class="w-full min-w-[900px] text-left">
                        <thead>
                            <tr class="border-b border-gray-100 dark:border-gray-800">
                                <th class="px-4 py-3 text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Column</th>
                                <th class="px-4 py-3 text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Required</th>
                                <th class="px-4 py-3 text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">What it means</th>
                                <th class="px-4 py-3 text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Example</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                            <tr>
                                <td class="px-4 py-3 text-sm font-medium text-gray-700 dark:text-gray-300"><code>code</code></td>
                                <td class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">Yes</td>
                                <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">Unique department code. Used to match existing departments and as the target for <code>parent_code</code>.</td>
                                <td class="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">BPI</td>
                            </tr>
                            <tr>
                                <td class="px-4 py-3 text-sm font-medium text-gray-700 dark:text-gray-300"><code>name_bm</code></td>
                                <td class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">Yes</td>
                                <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">Department name in Bahasa Malaysia. Shown in the BM interface.</td>
                                <td class="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">Bahagian Perubahan Iklim</td>
                            </tr>
                            <tr>
                                <td class="px-4 py-3 text-sm font-medium text-gray-700 dark:text-gray-300"><code>name_en</code></td>
                                <td class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">Yes</td>
                                <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">Department name in English. Shown in the English interface.</td>
                                <td class="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">Climate Change Division</td>
                            </tr>
                            <tr>
                                <td class="px-4 py-3 text-sm font-medium text-gray-700 dark:text-gray-300"><code>parent_code</code></td>
                                <td class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">No</td>
                                <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">Code of the parent department. Leave blank for a root department. Any existing department (or one in the same file) can be the parent — there is no depth limit.</td>
                                <td class="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">TKSU (KA)</td>
                            </tr>
                            <tr>
                                <td class="px-4 py-3 text-sm font-medium text-gray-700 dark:text-gray-300"><code>sort</code></td>
                                <td class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">No</td>
                                <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">Display order within the same parent. Blank is saved as <code>0</code>.</td>
                                <td class="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">1</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">
                    Existing departments are matched by <strong>code</strong> and updated. New codes are inserted.
                    If any row is invalid, nothing will be imported.
                </p>
            </div>
        </div>

    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.filepond').forEach((el) => {
                FilePond.create(el, {
                    credits: false,
                    allowMultiple: false,
                    allowImagePreview: false,
                    storeAsFile: true,
                    maxFileSize: '200MB',
                    labelIdle: 'Drag & drop your Excel/CSV file or <span class="filepond--label-action">Browse</span>'
                });
            });
        });
    </script>
@endpush