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

@section('content')
    @include('layouts.navbars.auth.topnav', [
        'title_group' => $title_group,
        'title_menu' => $title_menu,
        'title' => $title,
    ])

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

        {{-- Ringkasan pekerjaan Procurement --}}
        <div class="row">
            <div class="col-xl-3 col-sm-6 mb-4">
                <div class="card h-100">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Pengajuan</p>
                                <h5 class="font-weight-bolder">{{ $totalMaterialRequests ?? 0 }}</h5>
                            </div>
                            <div class="col-4 text-end">
                                <div
                                    class="icon icon-shape bg-gradient-secondary shadow-secondary text-center rounded-circle">
                                    <i class="ni ni-collection text-lg opacity-10"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-sm-6 mb-4">
                <a href="{{ URL::to('procur') }}" class="text-decoration-none">
                    <div class="card h-100" style="cursor: pointer;">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-8">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Menunggu Supplier</p>
                                    <h5 class="font-weight-bolder text-warning">{{ $waitingSupplierCount ?? 0 }}</h5>
                                </div>
                                <div class="col-4 text-end">
                                    <div
                                        class="icon icon-shape bg-gradient-warning shadow-warning text-center rounded-circle">
                                        <i class="ni ni-time-alarm text-lg opacity-10"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-xl-3 col-sm-6 mb-4">
                <div class="card h-100">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <p class="text-sm mb-0 text-uppercase font-weight-bold">Supplier Ditentukan</p>
                                <h5 class="font-weight-bolder text-success">{{ $assignedMaterialCount ?? 0 }}</h5>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-success shadow-success text-center rounded-circle">
                                    <i class="ni ni-check-bold text-lg opacity-10"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-sm-6 mb-4">
                <div class="card filter-card h-100" data-status="Expired" style="cursor: pointer;">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <p class="text-sm mb-0 text-uppercase font-weight-bold">Akun Expired</p>
                                <h5 class="font-weight-bolder text-danger">{{ $expiredCount ?? 0 }}</h5>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-danger shadow-danger text-center rounded-circle">
                                    <i class="ni ni-notification-70 text-lg opacity-10"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Progres penyelesaian penetapan supplier --}}
        @php
            $assignmentProgress =
                ($totalMaterialRequests ?? 0) > 0
                    ? round((($assignedMaterialCount ?? 0) / $totalMaterialRequests) * 100)
                    : 0;
        @endphp
        {{-- Monitoring perjalanan dokumen supplier --}}
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <h6 class="mb-0">Monitoring Dokumen Supplier</h6>
                        <p class="text-sm mb-0">
                            Pantau progres dokumen setelah supplier ditetapkan hingga disetujui Tim Halal
                        </p>
                    </div>
                    <div class="card-body">
                        <div class="row justify-content-center mb-4">
                            <div class="col-lg-5 col-md-7">
                                <div style="height: 300px;">
                                    <canvas id="procurement-document-chart"></canvas>
                                </div>
                                <p class="text-xs text-secondary text-center mt-2 mb-0">
                                    Klik segmen atau legenda untuk memfilter tabel
                                </p>
                            </div>
                        </div>

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

        {{-- Antrean utama Procurement --}}
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0">Antrean Penetapan Supplier</h6>
                            <p class="text-sm mb-0">Material terlama ditampilkan lebih dahulu agar segera diproses</p>
                        </div>
                        <a href="{{ URL::to('procur') }}" class="btn btn-sm btn-outline-primary mb-0">
                            Lihat Semua
                        </a>
                    </div>
                    <div class="card-body px-0 pt-0 pb-2">
                        <div class="table-responsive p-4" id="table-detail-dinamis">
                            <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">
                                            Material</th>
                                        <th
                                            class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">
                                            Rencana Line</th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Stok</th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Tanggal Pengajuan</th>
                                        <th class="text-secondary opacity-7"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($pendingMaterials as $material)
                                        <tr>
                                            <td>
                                                <div class="px-3">
                                                    <h6 class="mb-0 text-sm">{{ $material->kode_material }}</h6>
                                                    <p class="text-xs text-secondary mb-0">{{ $material->nama_material }}
                                                    </p>
                                                </div>
                                            </td>
                                            <td class="text-sm text-center">{{ $material->rencana_line ?: '-' }}</td>
                                            <td class="text-center text-sm">{{ $material->stock ?? 0 }}</td>
                                            <td class="text-center text-sm">
                                                {{ optional($material->created_at)->format('d/m/Y') ?? '-' }}
                                            </td>
                                            <td class="text-center">
                                                <a href="{{ URL::to('procur/add/' . encrypt($material->material_id)) }}"
                                                    class="btn btn-sm btn-warning mb-0">
                                                    <i class="fas fa-user-plus me-1"></i> Tetapkan Supplier
                                                </a>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center py-4">
                                                Semua material sudah memiliki supplier.
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>



        {{-- Riwayat supplier yang sudah ditetapkan --}}
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0">Penetapan Supplier Terbaru</h6>
                            <p class="text-sm mb-0">Pantau supplier, PIC, material, dan status akun aksesnya</p>
                        </div>
                        <div>
                            <button class="btn btn-sm btn-success filter-card account-filter mb-0 active"
                                data-status="Active" aria-pressed="true">
                                Akun Aktif ({{ $isactive ?? 0 }})
                            </button>
                            <button class="btn btn-sm btn-outline-danger filter-card account-filter mb-0"
                                data-status="Expired" aria-pressed="false">
                                Akun Expired ({{ $expiredCount ?? 0 }})
                            </button>
                        </div>
                    </div>
                    <div class="card-body px-0 pt-0 pb-2">
                        <div id="supplier-table-container">
                            @include('pages.dashboard.procurementDashboard.partials._supplier_table', [
                                'purchasing' => $purchasing,
                            ])
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="resendAccountModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form method="POST" action="{{ URL::to('supply') }}">
                    @csrf
                    <input type="hidden" name="action" value="reactivate">
                    <input type="hidden" name="purchasing_id" id="resend-purchasing-id">

                    <div class="modal-header">
                        <h5 class="modal-title">Konfirmasi Resend Email</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>Akun akan diaktifkan kembali dan kredensial baru dikirim melalui email.</p>
                        <ul class="list-group">
                            <li class="list-group-item">
                                <strong>Supplier:</strong> <span id="resend-supplier-name"></span>
                            </li>
                            <li class="list-group-item">
                                <strong>Email PIC:</strong> <span id="resend-supplier-email"></span>
                            </li>
                        </ul>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-paper-plane me-1"></i> Ya, Resend Email
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="{{ asset('assets/js/plugins/chartjs.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const tableContainer = document.getElementById('supplier-table-container');
            const monitoringContainer = document.getElementById('table-detail-dinamis');
            const documentStatuses = [
                'waiting_supplier',
                'waiting_document',
                'under_review',
                'revision',
                'approved'
            ];
            const documentStatusValues = @json(array_values($documentStatusSummary ?? []));

            function fetchDocumentData(url) {
                monitoringContainer.innerHTML = `
                    <div class="text-center p-5">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                `;

                fetch(url, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => response.text())
                    .then(html => {
                        monitoringContainer.innerHTML = html;
                        monitoringContainer.closest('.card').scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                    })
                    .catch(error => {
                        console.error('Error fetching document monitoring:', error);
                        monitoringContainer.innerHTML =
                            '<p class="text-center text-danger py-4">Gagal memuat monitoring dokumen.</p>';
                    });
            }

            new Chart(document.getElementById('procurement-document-chart'), {
                type: 'doughnut',
                data: {
                    labels: [
                        'Belum Diberi Supplier',
                        'Menunggu Dokumen',
                        'Sedang Diperiksa',
                        'Perlu Revisi',
                        'Disetujui'
                    ],
                    datasets: [{
                        data: documentStatusValues,
                        backgroundColor: ['#8392ab', '#fb6340', '#11cdef', '#f5365c', '#2dce89'],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    onClick: function(event, elements) {
                        if (!elements.length) {
                            return;
                        }

                        const status = documentStatuses[elements[0].index];
                        fetchDocumentData(
                            `{{ route('dashboard.procurement.documents') }}?status=${status}`
                        );
                    },
                    onHover: function(event, elements) {
                        event.native.target.style.cursor = elements.length ? 'pointer' : 'default';
                    },
                    plugins: {
                        legend: {
                            position: 'bottom',
                            onClick: function(event, legendItem) {
                                const status = documentStatuses[legendItem.index];
                                fetchDocumentData(
                                    `{{ route('dashboard.procurement.documents') }}?status=${status}`
                                );
                            }
                        }
                    }
                }
            });

            function fetchData(url) {
                tableContainer.innerHTML = `
                    <div class="text-center p-5">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                `;

                fetch(url, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => response.text())
                    .then(html => {
                        tableContainer.innerHTML = html;
                        tableContainer.closest('.card').scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                    })
                    .catch(error => {
                        console.error('Error fetching supplier data:', error);
                        tableContainer.innerHTML =
                            '<p class="text-center text-danger">Gagal memuat data supplier.</p>';
                    });
            }

            document.addEventListener('click', function(e) {
                const resendButton = e.target.closest('.btn-resend-account');
                if (resendButton) {
                    document.getElementById('resend-purchasing-id').value = resendButton.dataset.id;
                    document.getElementById('resend-supplier-name').textContent =
                        resendButton.dataset.supplier;
                    document.getElementById('resend-supplier-email').textContent =
                        resendButton.dataset.email;

                    bootstrap.Modal.getOrCreateInstance(
                        document.getElementById('resendAccountModal')
                    ).show();
                    return;
                }

                const monitoringPagination = e.target.closest(
                    '#table-detail-dinamis .pagination a'
                );
                if (monitoringPagination) {
                    e.preventDefault();
                    fetchDocumentData(monitoringPagination.href);
                    return;
                }

                const paginationLink = e.target.closest('#supplier-table-container .pagination a');
                if (paginationLink) {
                    e.preventDefault();
                    fetchData(paginationLink.href);
                }
            });

            document.querySelectorAll('.filter-card').forEach(card => {
                card.addEventListener('click', function() {
                    const status = this.dataset.status;

                    if (this.classList.contains('account-filter')) {
                        document.querySelectorAll('.account-filter').forEach(button => {
                            const isActive = button === this;
                            const isActiveFilter = button.dataset.status === 'Active';

                            button.classList.toggle('active', isActive);
                            button.setAttribute('aria-pressed', isActive ? 'true' : 'false');
                            button.classList.toggle('btn-success', isActive && isActiveFilter);
                            button.classList.toggle('btn-outline-success', !isActive && isActiveFilter);
                            button.classList.toggle('btn-danger', isActive && !isActiveFilter);
                            button.classList.toggle('btn-outline-danger', !isActive && !isActiveFilter);
                        });
                    }

                    const url =
                        `{{ route('dashboard.procurement.filter') }}?filter_status=${status}`;
                    fetchData(url);
                });
            });
        });
    </script>
@endpush