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

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

    @php
        $document = $task->document;
        $overallStatus = $document->overall_status ?? 'Pending';
        $overallStatusMap = [
            'Approved' => ['Disetujui', 'bg-gradient-success'],
            'Rejected' => ['Menunggu Perbaikan Supplier', 'bg-gradient-danger'],
            'Revisi' => ['Dokumen Sudah Direvisi', 'bg-gradient-info'],
            'Pending' => ['Belum Direview', 'bg-gradient-warning'],
        ];
        $overallDisplay = $overallStatusMap[$overallStatus]
            ?? [$overallStatus, 'bg-gradient-secondary'];
        $documentTypes = [
            'tds' => 'TDS',
            'msds' => 'MSDS',
            'sertifikat_halal' => 'Sertifikat Halal',
            'halal_declaration' => 'Halal Declaration',
            'flowchart' => 'Flowchart',
            'others' => 'Dokumen Lainnya',
        ];
        $uploadedCount = collect(array_keys($documentTypes))->filter(fn ($type) => ! empty($document?->$type))->count();
    @endphp

    <form method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form" novalidate>
        @csrf
        <input type="hidden" name="purchasing_id" value="{{ $task->purchasing_id }}">

        <div class="card shadow-lg mx-4">
            <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-center">
                    <a href="{{ URL::to($url_menu) }}" class="btn btn-secondary mb-0">
                        <i class="fas fa-arrow-left me-1"></i> Kembali
                    </a>
                    {{-- <button type="button" class="btn btn-primary mb-0" id="btn-preview">
                        <i class="fas fa-clipboard-check me-1"></i> Review & Simpan
                    </button> --}}
                </div>
            </div>
        </div>

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

            {{-- Konteks review --}}
            <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">
                                Workspace Review 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 class="col-md-4 text-md-end mt-3 mt-md-0">
                            <span class="badge {{ $overallDisplay[1] }} px-3 py-2">
                                {{ $overallDisplay[0] }}
                            </span>
                        </div>
                    </div>
                </div>
                <div class="card-body p-4">
                    <div class="row">
                        <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>
                            <span class="text-sm text-secondary">{{ $task->email_pic ?? '-' }}</span>
                        </div>
                        <div class="col-md-3 mb-3 mb-md-0">
                            <span class="text-xs text-secondary text-uppercase font-weight-bold">Dokumen Terunggah</span>
                            <h6 class="mb-0">{{ $uploadedCount }} dari {{ count($documentTypes) }}</h6>
                        </div>
                        <div class="col-md-3">
                            <span class="text-xs text-secondary text-uppercase font-weight-bold">Terakhir Diperbarui</span>
                            <h6 class="mb-0">{{ $document->updated_at?->format('d/m/Y H:i') ?? '-' }}</h6>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Progress review --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <div>
                            <h6 class="mb-0">Progress Review</h6>
                            <span class="text-xs text-secondary">
                                Berikan keputusan pada setiap dokumen yang diunggah
                            </span>
                        </div>
                        <span class="font-weight-bold text-primary" id="review-progress-label">0/{{ $uploadedCount }}</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-gradient-primary" id="review-progress-bar" role="progressbar"
                            style="width: 0%;" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>

            {{-- Dokumen --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="mb-1">Dokumen untuk Direview</h6>
                        <p class="text-sm mb-0">Buka file terlebih dahulu, kemudian tentukan keputusan</p>
                    </div>
                    @if ($uploadedCount > 0)
                        <a href="{{ URL::to($url_menu . '/show/' . encrypt($task->purchasing_id)) }}?download_all=true"
                            class="btn btn-sm btn-outline-primary mb-0">
                            <i class="fas fa-download me-1"></i> Download Semua
                        </a>
                    @endif
                </div>
                <div class="card-body p-4">
                    <div class="row g-3">
                        @foreach ($documentTypes as $type => $label)
                            <div class="col-lg-6">
                                @include('halals.partials.document-item', [
                                    'type' => $type,
                                    'label' => $label,
                                    'task' => $task,
                                    'overallStatus' => $overallStatus,
                                ])
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            {{-- Catatan --}}
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <div class="d-flex align-items-start mb-3">
                        <div class="d-flex align-items-center justify-content-center bg-gradient-warning rounded-circle me-3 flex-shrink-0"
                            style="width: 42px; height: 42px;">
                            <i class="fas fa-comment-alt text-white" style="position: static;"></i>
                        </div>
                        <div>
                            <h6 class="mb-1">Catatan untuk Supplier</h6>
                            <p class="text-sm text-secondary mb-0">
                                Jelaskan bagian yang perlu diperbaiki. Catatan wajib jika ada dokumen yang ditolak.
                            </p>
                        </div>
                    </div>
                    <textarea name="remarks" id="review-remarks" class="form-control" rows="5"
                        placeholder="Contoh: Mohon unggah ulang MSDS versi terbaru dan pastikan seluruh halaman terbaca.">{{ old('remarks', $document->remarks ?? '') }}</textarea>
                    <div class="invalid-feedback" id="remarks-error">
                        Catatan wajib diisi ketika ada dokumen yang ditolak.
                    </div>
                    <div class="d-flex justify-content-end mt-3">
                        <button type="button" class="btn btn-primary mb-0" id="btn-preview-bottom">
                            <i class="fas fa-clipboard-check me-1"></i> Review & Simpan
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>

    {{-- Konfirmasi hasil review --}}
    <div class="modal fade" id="previewModal" tabindex="-1" aria-labelledby="previewModalLabel" 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="previewModalLabel">Konfirmasi Hasil Review</h5>
                        <p class="text-white text-xs opacity-8 mb-0">
                            Pastikan keputusan sudah sesuai sebelum disimpan
                        </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="alert alert-light border d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0">{{ $task->material->nama_material ?? '-' }}</h6>
                            <span class="text-xs text-secondary">{{ $task->supplier->nama_vendor ?? '-' }}</span>
                        </div>
                        <div>
                            <span class="badge bg-gradient-success me-1" id="preview-approved-count">0 Disetujui</span>
                            <span class="badge bg-gradient-danger" id="preview-rejected-count">0 Ditolak</span>
                        </div>
                    </div>
                    <div class="table-responsive mb-3">
                        <table class="table align-items-center mb-0">
                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                <tr>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        Dokumen
                                    </th>
                                    <th
                                        class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                        Keputusan
                                    </th>
                                </tr>
                            </thead>
                            <tbody id="preview-status-list"></tbody>
                        </table>
                    </div>
                    <h6 class="mb-1">Catatan untuk Supplier</h6>
                    <div class="bg-gray-100 rounded p-3">
                        <p class="text-sm mb-0" id="preview-remarks" style="white-space: pre-line;">-</p>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-secondary mb-0" data-bs-dismiss="modal">
                        Periksa Kembali
                    </button>
                    <button type="button" class="btn btn-primary mb-0" id="final-save-button">
                        <i class="fas fa-save me-1"></i> Simpan Hasil Review
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(function() {
            const form = $('#{{ $dmenu }}-form');
            const uploadedCount = {{ $uploadedCount }};
            const documentLabels = @json($documentTypes);

            function updateProgress() {
                const reviewedCount = $('.review-document-card[data-has-document="1"]').filter(function() {
                    return $(this).find('.review-status:checked').length > 0;
                }).length;
                const percentage = uploadedCount > 0 ? Math.round((reviewedCount / uploadedCount) * 100) : 100;

                $('#review-progress-label').text(`${reviewedCount}/${uploadedCount}`);
                $('#review-progress-bar').css('width', `${percentage}%`).attr('aria-valuenow', percentage);
            }

            function validateReview() {
                let valid = true;

                $('.review-document-card[data-has-document="1"]').each(function() {
                    const hasDecision = $(this).find('.review-status:checked').length > 0;
                    $(this).find('.review-error').toggleClass('d-none', hasDecision);
                    $(this).toggleClass('border-danger', !hasDecision);
                    valid = valid && hasDecision;
                });

                const hasRejected = $('.review-status[value="Rejected"]:checked').length > 0;
                const remarks = $('#review-remarks').val().trim();
                const remarksValid = !hasRejected || remarks.length > 0;
                $('#review-remarks').toggleClass('is-invalid', !remarksValid);
                valid = valid && remarksValid;

                if (!valid) {
                    const firstInvalid = document.querySelector('.review-document-card.border-danger, #review-remarks.is-invalid');
                    firstInvalid?.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }

                return valid;
            }

            function showPreview() {
                if (!validateReview()) return;

                let approved = 0;
                let rejected = 0;
                $('#preview-status-list').empty();

                $('.review-status:checked').each(function() {
                    const type = this.name.replace('status[', '').replace(']', '');
                    const status = this.value;
                    const isApproved = status === 'Approved';
                    isApproved ? approved++ : rejected++;

                    $('#preview-status-list').append(`
                        <tr>
                            <td class="text-sm font-weight-bold">${documentLabels[type] || type}</td>
                            <td class="text-center">
                                <span class="badge ${isApproved ? 'bg-gradient-success' : 'bg-gradient-danger'}">
                                    ${isApproved ? 'Disetujui' : 'Ditolak'}
                                </span>
                            </td>
                        </tr>
                    `);
                });

                $('#preview-approved-count').text(`${approved} Disetujui`);
                $('#preview-rejected-count').text(`${rejected} Ditolak`);
                $('#preview-remarks').text($('#review-remarks').val().trim() || 'Tidak ada catatan.');
                bootstrap.Modal.getOrCreateInstance(document.getElementById('previewModal')).show();
            }

            $('.review-status').on('change', function() {
                $(this).closest('.review-document-card').removeClass('border-danger')
                    .find('.review-error').addClass('d-none');
                updateProgress();
            });

            $('#review-remarks').on('input', function() {
                $(this).removeClass('is-invalid');
            });

            $('#btn-preview, #btn-preview-bottom').on('click', showPreview);
            $('#final-save-button').on('click', function() {
                this.disabled = true;
                this.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Menyimpan...';
                form.trigger('submit');
            });

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