@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Pengajuan Kelengkapan Dokumen / Edit'])

    @php
        $document = $task->documentDraft ?? $task->document;
        $documentTypes = [
            'tds' => [
                'label' => 'TDS',
                'description' => 'Technical Data Sheet',
                'required' => true,
                'icon' => 'fas fa-file-alt',
            ],
            'msds' => [
                'label' => 'MSDS',
                'description' => 'Material Safety Data Sheet',
                'required' => true,
                'icon' => 'fas fa-shield-alt',
            ],
            'sertifikat_halal' => [
                'label' => 'Sertifikat Halal',
                'description' => 'Pilih dokumen ini jika tersedia',
                'required' => false,
                'icon' => 'fas fa-certificate',
            ],
            'halal_declaration' => [
                'label' => 'Halal Declaration',
                'description' => 'Alternatif jika sertifikat halal tidak tersedia',
                'required' => false,
                'icon' => 'fas fa-file-signature',
            ],
            'flowchart' => [
                'label' => 'Flowchart',
                'description' => 'Diagram alur proses produksi',
                'required' => false,
                'icon' => 'fas fa-project-diagram',
            ],
            'others' => [
                'label' => 'Dokumen Lainnya',
                'description' => 'Dokumen pendukung tambahan',
                'required' => false,
                'icon' => 'fas fa-paperclip',
            ],
        ];
        $statusMap = [
            'Approved' => ['Disetujui', 'bg-gradient-success'],
            'Rejected' => ['Ditolak', 'bg-gradient-danger'],
            'Revisi' => ['Menunggu Review', 'bg-gradient-info'],
            'Pending' => ['Draft', 'bg-gradient-warning'],
            'N/A' => ['Tidak Diperlukan', 'bg-gradient-secondary'],
        ];
    @endphp

    <div class="container-fluid py-4">
        @include('components.alert')

        <form method="POST" action="{{ URL::to($url_menu . '/' . encrypt($task->purchasing_id)) }}" id="edit-document-form"
            enctype="multipart/form-data" novalidate>
            @csrf
            @method('PUT')
            <input type="hidden" name="purchasing_id" value="{{ $task->purchasing_id }}">

            <div class="card shadow-lg mb-2">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <a href="{{ url($url_menu) }}" class="btn btn-secondary mb-0">
                            <i class="fas fa-arrow-left me-1"></i> Kembali
                        </a>
                        <div class="col-md-4 text-md-end mt-3 mt-md-0">
                            <button type="button" class="btn btn-info mb-0" data-bs-toggle="modal"
                                data-bs-target="#aturanModal">
                                <i class="fas fa-info-circle me-1"></i> Lihat Panduan
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card border-0 shadow-sm mb-4 overflow-hidden">
                <div class="card-header bg-gradient-primary p-4">

                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <p class="text-white text-xs text-uppercase font-weight-bold opacity-8 mb-1">
                                Perbarui Pengajuan Dokumen
                            </p>
                            <h4 class="text-white mb-1">{{ $task->material->nama_material ?? '-' }}</h4>
                            <span class="badge bg-white text-primary">{{ $task->material->kode_material ?? '-' }}</span>
                        </div>

                    </div>
                </div>
                <div class="card-body p-4">
                    <div class="row align-items-center">
                        <div class="col-md-3 mb-3 mb-md-0">
                            <span class="text-xs text-secondary text-uppercase font-weight-bold">Supplier</span>
                            <h6 class="mb-0">{{ $task->supplier->nama_vendor ?? '-' }}</h6>
                        </div>
                        <div class="col-md-3 mb-3 mb-md-0">
                            <span class="text-xs text-secondary text-uppercase font-weight-bold">PIC Supplier</span>
                            <h6 class="mb-0">{{ $task->nama_pic ?? '-' }}</h6>
                        </div>
                        <div class="col-md-3 mb-3 mb-md-0">
                            <span class="text-xs text-secondary text-uppercase font-weight-bold">Ketentuan File</span>
                            <h6 class="mb-0">PDF, maksimal 5 MB</h6>
                        </div>

                    </div>
                </div>
            </div>

            <div class="alert alert-info text-white d-flex align-items-center" role="alert">
                <i class="fas fa-lightbulb me-3 text-lg"></i>
                <div class="text-sm">
                    Dokumen berstatus <strong>Draft</strong> atau <strong>Ditolak</strong> dapat diganti.
                    Dokumen yang sudah disetujui tidak dapat diubah.
                </div>
            </div>

            @if ($document && in_array($document->overall_status, ['Approved', 'Rejected', 'Revisi'], true))
                <div class="card border-0 shadow-sm mb-4 overflow-hidden">
                    <div class="card-header bg-gradient-warning px-4 py-3">
                        <div class="d-flex align-items-center">
                            <div class="d-flex align-items-center justify-content-center bg-white rounded-circle me-3 flex-shrink-0"
                                style="width: 40px; height: 40px;">
                                <i class="fas fa-comment-alt text-warning" style="position: static;"></i>
                            </div>
                            <div>
                                <h6 class="text-white mb-0">Catatan dari Tim Halal</h6>
                                <p class="text-white text-xs opacity-8 mb-0">
                                    Perhatikan catatan berikut sebelum memperbarui dokumen
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-4">
                        @if (!empty($document->remarks))
                            <p class="text-sm text-dark mb-0" style="white-space: pre-line;">{{ $document->remarks }}</p>
                        @else
                            <div class="d-flex align-items-center text-secondary">
                                <i class="fas fa-info-circle me-2"></i>
                                <span class="text-sm">Tim Halal tidak memberikan catatan tambahan.</span>
                            </div>
                        @endif
                    </div>
                </div>
            @endif

            <div class="card border-0 shadow-sm">
                <div class="card-header pb-0">
                    <h6 class="mb-1">Perbarui Dokumen</h6>
                    <p class="text-sm mb-0">Tinjau file lama dan unggah file pengganti jika diperlukan</p>
                </div>
                <div class="card-body p-4">
                    <div class="row">
                        @foreach ($documentTypes as $type => $config)
                            @php
                                $path = $document?->$type;
                                $currentStatus = $document?->{'status_' . $type} ?? 'Pending';
                                $editable = in_array($currentStatus, ['Pending', 'Rejected'], true);
                                $statusDisplay = $statusMap[$currentStatus] ?? [
                                    $currentStatus,
                                    'bg-gradient-secondary',
                                ];
                            @endphp
                            <div class="col-lg-6 mb-4">
                                <div class="card border h-100 upload-card" data-upload-card="{{ $type }}"
                                    data-has-existing="{{ $path ? '1' : '0' }}">
                                    <div class="card-body p-3">
                                        <div class="d-flex align-items-start mb-3">
                                            <div class="d-flex align-items-center justify-content-center bg-gradient-primary rounded me-3 flex-shrink-0"
                                                style="width: 36px; height: 36px;">
                                                <i class="{{ $config['icon'] }} text-white"
                                                    style="position: static; font-size: 0.875rem;"></i>
                                            </div>
                                            <div class="flex-grow-1">
                                                <h6 class="mb-0">
                                                    {{ $config['label'] }}
                                                    @if ($config['required'])
                                                        <span class="text-danger">*</span>
                                                    @endif
                                                </h6>
                                                <span class="text-xs text-secondary">{{ $config['description'] }}</span>
                                            </div>
                                            <span class="badge {{ $statusDisplay[1] }}">{{ $statusDisplay[0] }}</span>
                                        </div>

                                        <input type="hidden" name="delete_files[{{ $type }}]"
                                            id="delete_{{ $type }}" value="0">

                                        @if ($path)
                                            <div class="existing-file-info bg-gray-100 rounded p-3 mb-3"
                                                id="existing_file_{{ $type }}">
                                                <div class="d-flex justify-content-between align-items-start">
                                                    <div class="d-flex align-items-center min-width-0">
                                                        <i class="fas fa-file-pdf text-danger text-xl me-3"></i>
                                                        <div class="min-width-0">
                                                            <p class="text-sm font-weight-bold text-dark text-truncate mb-0"
                                                                title="{{ basename($path) }}">{{ basename($path) }}</p>
                                                            <span class="text-xs text-secondary">File yang sedang
                                                                digunakan</span>
                                                        </div>
                                                    </div>
                                                    @if ($editable)
                                                        <button type="button"
                                                            class="btn btn-link text-danger text-xs p-0 mb-0 ms-2 btn-delete-existing"
                                                            data-type="{{ $type }}" title="Ganti file">
                                                            <i class="fas fa-sync-alt me-1"></i> Ganti
                                                        </button>
                                                    @endif
                                                </div>
                                            </div>
                                        @endif

                                        @if ($editable)
                                            <div class="{{ $path ? 'd-none' : '' }}" id="input_group_{{ $type }}">
                                                <label
                                                    class="border border-dashed rounded p-3 d-block text-center mb-0 file-drop-zone"
                                                    for="{{ $type }}_file" style="cursor: pointer;">
                                                    <i
                                                        class="fas fa-cloud-upload-alt text-primary text-xl mb-2 d-block"></i>
                                                    <span class="text-sm font-weight-bold d-block">Klik untuk memilih
                                                        PDF</span>
                                                    <span class="text-xs text-secondary file-name">Belum ada file
                                                        dipilih</span>
                                                </label>
                                                <input
                                                    class="d-none document-file @error($type . '_file') is-invalid @enderror"
                                                    type="file" name="{{ $type }}_file"
                                                    id="{{ $type }}_file" accept="application/pdf"
                                                    data-required="{{ $config['required'] ? '1' : '0' }}">
                                                <div class="d-flex justify-content-end mt-2">
                                                    <button type="button"
                                                        class="btn btn-link text-danger text-xs p-0 mb-0 btn-clear-file"
                                                        style="display: none;">
                                                        <i class="fas fa-trash-alt me-1"></i> Hapus pilihan
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="invalid-feedback d-block file-error"
                                                style="display: none !important;">
                                                Dokumen {{ $config['label'] }} wajib tersedia sebelum submit ulang.
                                            </div>
                                            @error($type . '_file')
                                                <div class="text-danger text-xs mt-2">{{ $message }}</div>
                                            @enderror
                                        @else
                                            <div class="rounded border p-3 bg-gray-100 d-flex align-items-center">
                                                <i
                                                    class="fas {{ $currentStatus === 'Approved' ? 'fa-lock text-success' : 'fa-clock text-info' }} me-2"></i>
                                                <span class="text-sm text-secondary">
                                                    @if ($currentStatus === 'Approved')
                                                        Sudah disetujui dan tidak dapat diubah.
                                                    @elseif ($currentStatus === 'N/A')
                                                        Dokumen tidak diperlukan.
                                                    @else
                                                        Menunggu review dari Tim Halal.
                                                    @endif
                                                </span>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div
                        class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 border-top pt-3">
                        <p class="text-xs text-secondary mb-0">
                            <span class="text-danger">*</span> TDS dan MSDS wajib tersedia sebelum submit ulang
                        </p>
                        <div class="d-flex flex-column flex-sm-row gap-2">
                            <button type="submit" name="action" value="save" class="btn btn-outline-success mb-0"
                                formnovalidate>
                                <i class="fas fa-save me-1"></i> Simpan Draft
                            </button>
                            <button type="submit" name="action" value="submit" class="btn btn-primary mb-0">
                                <i class="fas fa-paper-plane me-1"></i> Submit ke Tim Halal
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="modal fade" id="aturanModal" tabindex="-1" aria-labelledby="aturanModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg overflow-hidden">
                <div class="modal-header bg-gradient-primary border-0 px-4 py-3">
                    <div>
                        <h5 class="modal-title text-white mb-0" id="aturanModalLabel">Panduan Pengajuan Dokumen</h5>
                        <p class="text-white text-xs opacity-8 mb-0">Pastikan dokumen mengikuti ketentuan berikut</p>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="card border-0 bg-gray-100 mb-3">
                        <div class="card-body p-3">
                            <h6 class="mb-3">
                                <i class="fas fa-clipboard-check text-primary me-2"></i>Aturan Pengajuan Dokumen
                            </h6>
                            <div class="d-flex align-items-start mb-3">
                                <span class="badge bg-gradient-danger me-3 mt-1">Wajib</span>
                                <div>
                                    <h6 class="text-sm mb-0">Dokumen TDS</h6><span
                                        class="text-xs text-secondary">Technical Data Sheet</span>
                                </div>
                            </div>
                            <div class="d-flex align-items-start mb-3">
                                <span class="badge bg-gradient-danger me-3 mt-1">Wajib</span>
                                <div>
                                    <h6 class="text-sm mb-0">Dokumen MSDS</h6><span
                                        class="text-xs text-secondary">Material Safety Data Sheet</span>
                                </div>
                            </div>
                            <div class="d-flex align-items-start mb-3">
                                <span class="badge bg-gradient-info me-3 mt-1">Jika ada</span>
                                <div>
                                    <h6 class="text-sm mb-0">Dokumen Sertifikat Halal</h6><span
                                        class="text-xs text-secondary">Jika tersedia, Halal Declaration dan Flowchart tidak
                                        perlu diunggah.</span>
                                </div>
                            </div>
                            <div class="d-flex align-items-start mb-3">
                                <span class="badge bg-gradient-info me-3 mt-1">Jika ada</span>
                                <div>
                                    <h6 class="text-sm mb-0">Halal Declaration</h6><span
                                        class="text-xs text-secondary">Jika digunakan, usahakan Flowchart juga
                                        disertakan.</span>
                                </div>
                            </div>
                            <div class="d-flex align-items-start mb-3">
                                <span class="badge bg-gradient-secondary me-3 mt-1">Opsional</span>
                                <div>
                                    <h6 class="text-sm mb-0">Flowchart</h6><span class="text-xs text-secondary">Dokumen
                                        ini tidak wajib diunggah.</span>
                                </div>
                            </div>
                            <div class="d-flex align-items-start">
                                <span class="badge bg-gradient-secondary me-3 mt-1">Opsional</span>
                                <div>
                                    <h6 class="text-sm mb-0">Others</h6><span class="text-xs text-secondary">Dokumen
                                        pendukung lainnya.</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="alert alert-light border d-flex align-items-start mb-3">
                        <i class="fas fa-file-pdf text-danger me-3 mt-1"></i>
                        <div>
                            <h6 class="mb-1">Ketentuan File</h6>
                            <p class="text-sm mb-0">Format file harus PDF dengan ukuran maksimal 5 MB per file.</p>
                        </div>
                    </div>
                    <div class="alert alert-warning d-flex align-items-center mb-0">
                        <i class="fas fa-exclamation-triangle me-3"></i>
                        <strong class="text-sm">Periksa dokumen Anda sekali lagi sebelum diajukan ke Tim Halal.</strong>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-primary mb-0" data-bs-dismiss="modal">Saya Mengerti</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(function() {
            const form = $('#edit-document-form');
            const existingFiles = @json(collect(array_keys($documentTypes))->mapWithKeys(fn($type) => [$type => !empty($document?->$type)]));

            function hasDocument(type) {
                const input = document.getElementById(type + '_file');
                return Boolean(existingFiles[type]) || Boolean(input?.files.length);
            }

            function updateHalalDocumentState() {
                const hasCertificate = hasDocument('sertifikat_halal');
                const hasDeclaration = hasDocument('halal_declaration');

                const declarationInput = $('#halal_declaration_file');
                const flowchartInput = $('#flowchart_file');
                const certificateInput = $('#sertifikat_halal_file');

                declarationInput.prop('disabled', hasCertificate);
                flowchartInput.prop('disabled', hasCertificate);
                certificateInput.prop('disabled', hasDeclaration);

                $('[data-upload-card="halal_declaration"], [data-upload-card="flowchart"]')
                    .toggleClass('opacity-5', hasCertificate);
                $('[data-upload-card="sertifikat_halal"]').toggleClass('opacity-5', hasDeclaration);
            }

            $('.document-file').on('change', function() {
                const card = $(this).closest('.upload-card');
                const file = this.files[0];

                card.find('.file-name').text(file ? file.name : 'Belum ada file dipilih');
                card.find('.btn-clear-file').toggle(!!file);
                card.toggleClass('border-primary shadow-sm', !!file);
                card.removeClass('border-danger');
                card.find('.file-error').attr('style', 'display: none !important;');
                updateHalalDocumentState();
            });

            $('.btn-clear-file').on('click', function() {
                $(this).closest('.upload-card').find('.document-file').val('').trigger('change');
            });

            $('.btn-delete-existing').on('click', function() {
                const type = $(this).data('type');
                existingFiles[type] = false;
                $('#delete_' + type).val('1');
                $('#existing_file_' + type).hide();
                $('#input_group_' + type).removeClass('d-none');
                updateHalalDocumentState();
            });

            form.on('submit', function(event) {
                const action = event.originalEvent?.submitter?.value;
                if (action !== 'submit') {
                    return;
                }

                let valid = true;
                ['tds', 'msds'].forEach(function(type) {
                    const missing = !hasDocument(type);
                    const card = $('[data-upload-card="' + type + '"]');
                    card.find('.file-error')
                        .attr('style', missing ? 'display: block !important;' :
                            'display: none !important;');
                    card.toggleClass('border-danger', missing);
                    valid = valid && !missing;
                });

                if (!valid) {
                    event.preventDefault();
                    document.querySelector('.upload-card.border-danger')?.scrollIntoView({
                        behavior: 'smooth',
                        block: 'center'
                    });
                }
            });

            updateHalalDocumentState();
        });
    </script>
@endpush