@php
    $breadcrumbs = [
        'My Document' => url('/my_document_list'),
        'Bulk Import' => ''
    ];
@endphp
@extends('layouts.master')

@section('title')
    Bulk Import - Upload Files
@endsection

@section('style')
<style>
    .draft-drop-zone {
        border: 2px dashed #6f42c1;
        border-radius: 12px;
        padding: 40px;
        text-align: center;
        background: #f9f7fd;
        cursor: pointer;
        transition: background .15s ease;
    }
    .draft-drop-zone.dragover { background: #efe7fb; }
    .draft-item {
        border: 1px solid #d1d9e6;
        border-radius: 10px;
        padding: 10px;
        text-align: center;
        position: relative;
        background: #fff;
    }
    .draft-item .btn-remove-draft {
        position: absolute; top: 4px; right: 4px;
        color: #d90429; cursor: pointer; background: #fff; border-radius: 50%;
        width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
        box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    }
    .draft-item .file-icon { font-size: 2rem; color: #6f42c1; }
    .draft-item small { display: block; word-break: break-all; margin-top: 4px; font-size: 0.75rem; }
</style>
@endsection

@section('content')
<section class="wrapper bg-light">
    <div class="container py-10">
        <div class="row">
            <div class="col-lg-10 mx-auto">

                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2 style="font-size:1.3rem;">Bulk Import: อัปโหลดไฟล์เข้าคลัง Draft</h2>
                    <a href="{{ url('/my_document_list') }}" class="btn btn-outline-dark rounded-pill btn-sm">
                        <i class="uil uil-arrow-left"></i> Back
                    </a>
                </div>

                <p class="text-muted" style="font-size:0.85rem;">
                    ขั้นตอนที่ 1: อัปโหลดไฟล์ Quotation / Invoice (รูปภาพหรือ PDF) เข้าคลัง Draft ก่อน จะกี่ไฟล์ก็ได้
                    เมื่อพร้อมแล้วกด "ไปจับคู่เอกสาร" เพื่อไปขั้นตอนที่ 2
                </p>

                <div class="draft-drop-zone mb-6" id="drop-zone">
                    <i class="uil uil-cloud-upload" style="font-size:2.5rem; color:#6f42c1;"></i>
                    <p class="mb-1 fw-bold">ลากไฟล์มาวางที่นี่ หรือคลิกเพื่อเลือกไฟล์</p>
                    <small class="text-muted">รองรับ .jpg .jpeg .png .pdf (สูงสุด 4MB ต่อไฟล์)</small>
                    <input type="file" id="file-input" multiple accept=".jpg,.jpeg,.png,.pdf" class="d-none">
                </div>

                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="mb-0">คลัง Draft (<span id="draft-count">{{ $drafts->count() }}</span> ไฟล์)</h6>
                    <a href="{{ url('/my_document_bulk_import/match') }}" id="btn-go-match" class="btn btn-violet rounded-pill {{ $drafts->isEmpty() ? 'disabled' : '' }}">
                        ไปจับคู่เอกสาร <i class="uil uil-arrow-right"></i>
                    </a>
                </div>

                <div class="row gy-3" id="draft-list">
                    @foreach($drafts as $d)
                        <div class="col-6 col-md-3 col-lg-2 draft-col" data-id="{{ $d->document_draft_id }}">
                            <div class="draft-item">
                                <span class="btn-remove-draft" data-id="{{ $d->document_draft_id }}"><i class="uil uil-times"></i></span>
                                <i class="uil {{ str_ends_with(strtolower($d->document_draft_original_name), '.pdf') ? 'uil-file-alt' : 'uil-image-v' }} file-icon"></i>
                                <small>{{ $d->document_draft_original_name }}</small>
                            </div>
                        </div>
                    @endforeach
                </div>

            </div>
        </div>
    </div>
</section>
@endsection

@section('script')

<script>
    window.APP_BASE_URL = "{{ url('/') }}";
    // สำคัญ: ห้ามพึ่งพา <meta name="csrf-token"> เพราะ layout อาจไม่ได้ใส่ไว้
    // (หน้าอื่นๆ ในระบบ เช่น bulk_import_match ก็ประกาศตัวแปร CSRF ตรงๆ แบบนี้เหมือนกัน)
    const CSRF = "{{ csrf_token() }}";

    $(document).ready(function() {

        function updateGoButtonState() {
            const count = $('.draft-col').length;
            $('#draft-count').text(count);
            $('#btn-go-match').toggleClass('disabled', count === 0);
        }

        function renderDraftItem(d) {
            const isPdf = d.document_draft_original_name.toLowerCase().endsWith('.pdf');
            const icon = isPdf ? 'uil-file-alt' : 'uil-image-v';
            return `
                <div class="col-6 col-md-3 col-lg-2 draft-col" data-id="${d.document_draft_id}">
                    <div class="draft-item">
                        <span class="btn-remove-draft" data-id="${d.document_draft_id}"><i class="uil uil-times"></i></span>
                        <i class="uil ${icon} file-icon"></i>
                        <small>${d.document_draft_original_name}</small>
                    </div>
                </div>`;
        }

        function uploadFiles(fileList) {
            if (!fileList || fileList.length === 0) return;

            const formData = new FormData();
            for (const f of fileList) {
                formData.append('files[]', f);
            }

            $('#drop-zone p').text('กำลังอัปโหลด...');

            $.ajax({
                url: window.APP_BASE_URL + '/my_document_bulk_import/upload',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: { 'X-CSRF-TOKEN': CSRF },
            }).done(function(res) {
                res.drafts.forEach(function(d) {
                    $('#draft-list').append(renderDraftItem(d));
                });
                updateGoButtonState();
            }).fail(function(xhr) {
                let msg = xhr.responseJSON?.message;
                if (!msg && xhr.status === 419) {
                    msg = 'เซสชันหมดอายุหรือ CSRF token ไม่ถูกต้อง กรุณารีเฟรชหน้าแล้วลองใหม่';
                } else if (!msg && xhr.responseJSON?.errors) {
                    msg = Object.values(xhr.responseJSON.errors).flat().join('\n');
                }
                alert(msg || 'อัปโหลดไม่สำเร็จ');
            }).always(function() {
                $('#drop-zone p').text('ลากไฟล์มาวางที่นี่ หรือคลิกเพื่อเลือกไฟล์');
            });
        }

        $('#drop-zone').on('click', function(e) {
        // ถ้า event เกิดจาก #file-input เอง (หรือ bubble มาจากมัน) ไม่ต้อง trigger ซ้ำ
            if ($(e.target).closest('#file-input').length) return;
            $('#file-input').trigger('click');
        });

        $('#file-input').on('change', function() { uploadFiles(this.files); this.value = ''; });

        $('#drop-zone').on('dragover', function(e) { e.preventDefault(); $(this).addClass('dragover'); });
        $('#drop-zone').on('dragleave', function(e) { e.preventDefault(); $(this).removeClass('dragover'); });
        $('#drop-zone').on('drop', function(e) {
            e.preventDefault();
            $(this).removeClass('dragover');
            uploadFiles(e.originalEvent.dataTransfer.files);
        });

        $(document).on('click', '.btn-remove-draft', function() {
            const id = $(this).data('id');
            const $col = $(this).closest('.draft-col');

            $.ajax({
                url: window.APP_BASE_URL + '/my_document_bulk_import/draft/' + id,
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': CSRF },
            }).done(function() {
                $col.remove();
                updateGoButtonState();
            });
        });

        updateGoButtonState();
    });
</script>
@endsection