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

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



    @php
        $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',
            ],
        ];
    @endphp

    <div class="container-fluid py-4">
        @include('components.alert')
        <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>
        <form method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form" enctype="multipart/form-data"
            novalidate>
            @csrf
            <input type="hidden" name="purchasing_id" value="{{ $task->purchasing_id }}">

            {{-- Ringkasan tugas --}}
            <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">
                                Pengajuan Dokumen Material
                            </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">
                        <div class="col-md-4 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-4 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-4">
                            <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">
                    <strong>TDS dan MSDS wajib saat submit.</strong> Anda tetap dapat menyimpan form sebagai draft
                    sebelum seluruh dokumen lengkap.
                </div>
            </div>

            {{-- Kartu unggah --}}
            <div class="card border-0 shadow-sm">
                <div class="card-header pb-0">
                    <h6 class="mb-1">Unggah Dokumen</h6>
                    <p class="text-sm mb-0">Pilih file PDF sesuai jenis dokumennya</p>
                </div>
                <div class="card-body p-4">
                    <div class="row">
                        @foreach ($documentTypes as $type => $config)
                            <div class="col-lg-6 mb-4">
                                <div class="card border h-100 upload-card" data-upload-card="{{ $type }}">
                                    <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>
                                            @if ($config['required'])
                                                <span class="badge bg-gradient-warning">Wajib</span>
                                            @else
                                                <span class="badge bg-gradient-secondary">Opsional</span>
                                            @endif
                                        </div>

                                        <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 class="invalid-feedback d-block file-error" style="display: none !important;">
                                            Dokumen {{ $config['label'] }} wajib dipilih sebelum submit.
                                        </div>
                                        @error($type . '_file')
                                            <div class="text-danger text-xs mt-2">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="d-flex justify-content-between align-items-center border-top pt-3">
                        <p class="text-xs text-secondary mb-0">
                            <span class="text-danger">*</span> Wajib dilengkapi sebelum submit
                        </p>
                        <div>
                            <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 ms-1">
                                <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 dokumen ini 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 dokumen ini 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 = $('#{{ $dmenu }}-form');

            function updateHalalDocumentState() {
                const hasCertificate = $('#sertifikat_halal_file')[0].files.length > 0;
                const hasDeclaration = $('#halal_declaration_file')[0].files.length > 0;

                $('#halal_declaration_file, #flowchart_file').prop('disabled', hasCertificate);
                $('#sertifikat_halal_file').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 input = this;
                const card = $(input).closest('.upload-card');
                const file = input.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.find('.file-error').attr('style', 'display: none !important;');

                updateHalalDocumentState();
            });

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

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

                if (action !== 'submit') {
                    return;
                }

                let valid = true;
                $('.document-file[data-required="1"]').each(function() {
                    const missing = this.files.length === 0;
                    $(this).closest('.upload-card').find('.file-error')
                        .attr('style', missing ? 'display: block !important;' :
                            'display: none !important;');
                    $(this).closest('.upload-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