@extends('layouts.superadmin')
@section('title', 'Intention')
@section('style')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.bootstrap5.min.css">
@endsection
@section('content')
    <div class="contentbar">
        <div class="row">
            <div class="col-lg-12">
                <div class="card rounded-5 border-0 m-b-30">
                    <div class="card-header rounded-top-5">
                        <div class="row d-flex justify-content-end align-items-center">
                            <div class="col-md-12">
                                <h5 class="card-title mb-0">Gestion des Requêtes</h5>
                            </div>
                       
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="">
                            <table id="datatables-buttons" class="table table-bordered table-striped align-middle w-100">
                                <thead class="table-light">
                                    <tr>
                                        <th>#</th>
                                        <th>Radio</th>
                                        <th>Objet</th>  
                                        <th>Description</th>
                                        <th>Status</th>
                                        <th>Soumis</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($admin_submissions as $admin_submission)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $admin_submission->radio->name }}</td>
                                            <td>{{ $admin_submission->object }}</td>
                                            <td>{{ Str::limit($admin_submission->description, 200, '...') }}</td>
                                            <td>
                                                @switch($admin_submission->status)
                                                    @case('pending')
                                                        <span class="badge text-bg-warning">En attente</span>
                                                    @break

                                                    @case('approved')
                                                        <span class="badge text-bg-success">Validée</span>
                                                    @break

                                                    @case('rejected')
                                                        <span class="badge text-bg-danger">Rejeté</span>
                                                    @break

                                                    @default
                                                        <span class="badge text-bg-warning">En attente</span>
                                                @endswitch
                                            </td>
                                            <td>{{ \Carbon\Carbon::parse($admin_submission->created_at)->locale('fr')->translatedFormat('l d F Y') }}</td>
                                            <td>
                                                <div class="dropdown">
                                                    <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button"
                                                        data-bs-toggle="dropdown">
                                                        Actions
                                                    </button>
                                                    <ul class="dropdown-menu">
                                                        
                                                        <li>
                                                            <button type="button" class="dropdown-item btn-view-submission"
                                                                data-submission='@json($admin_submission)'
                                                                data-id="{{ $admin_submission->id }}"
                                                                data-created="{{ \Carbon\Carbon::parse($admin_submission->created_at)->locale('fr')->translatedFormat('l d F Y à H\hi') }}"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#superadminSubmissionModal">
                                                                <i class="bi bi-eye-fill me-2"></i>Voir / Traiter
                                                            </button>
                                                        </li>
        
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>

                                    @endforeach
                                </tbody>
                            </table>

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

    <div class="modal fade" id="superadminSubmissionModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <form method="POST" id="submissionActionForm">
      @csrf
      @method('PATCH')
      <div class="modal-content modal-dialog-scrollable">
        <div class="modal-header">
          <h5 class="modal-title">Détails de la requête</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body" id="superadminSubmissionContent">
          <!-- Contenu rempli par JS -->
        </div>
        <div class="modal-footer d-flex flex-column" id="modalFooterActions">
          <div class="me-3 d-none w-100" id="adminMessageBox">
            <textarea class="form-control border-1 border-black" autofocus name="admin_message" placeholder="Motif du rejet..."></textarea>
          </div>
          <div class="">
            <button type="submit" class="btn btn-danger d-none" id="btnReject">Rejeter</button>
            <button type="submit" class="btn btn-success d-none" id="btnApprove">Valider</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

 



@endsection

@section('script')
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

    <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.bootstrap5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>

    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>
    <script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datepicker/datepicker.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datepicker/i18n/datepicker.en.js') }}"></script>
    <script src="{{ asset('assets/js/musioo-custom.js') }}"></script>

    <script>
        $(document).ready(function () {
            document.querySelector('#editIntentionModal3')
            $('#datatables-buttons').DataTable({
                responsive: true,
                language: {
                    url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/fr-FR.json',
                    paginate: {
                        previous: '<i class="bi bi-chevron-left"></i>',
                        next: '<i class="bi bi-chevron-right"></i>'
                    }
                },
                initComplete: function () {
                    $('.dataTables_filter input[type="search"]').css({
                    'width': '180px',
                    'display': 'inline-block'
                    });
                },

                /* buttons: [
                    'copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5'
                ], */
                lengthMenu: [
                    [5, 10, 25, 50, 100, -1],
                    [5, 10, 25, 50, 100, "Tous"]
                ],
                pageLength: 5,
                lengthChange: true,
            });
        });
    </script>

    <script>
document.addEventListener('DOMContentLoaded', () => {
    const modal = new bootstrap.Modal(document.getElementById('superadminSubmissionModal'));
    const form = document.getElementById('submissionActionForm');
    const messageBox = document.getElementById('adminMessageBox');
    const btnReject = document.getElementById('btnReject');
    const btnApprove = document.getElementById('btnApprove');
    const content = document.getElementById('superadminSubmissionContent');
    const modalFooterActions = document.getElementById('modalFooterActions');

    document.querySelectorAll('.btn-view-submission').forEach(btn => {
        btn.addEventListener('click', () => {
            const data = JSON.parse(btn.dataset.submission);
            const id = btn.dataset.id;
            let created = btn.dataset.created;
            let html = '';

            html = `
                <p><strong>Objet :</strong> ${data.object}</p>
                <p><strong>Description :</strong><br>${data.description}</p>
                <p><strong>Statut actuel :</strong> 
                    <span class="badge bg-${statusClass(data.status)}">${statusLabel(data.status)}</span>
                </p>
                <p><strong>Soumis le:</strong> ${created}</p>
                ${data.admin_message ? `<p><strong>Motif du rejet :</strong> ${data.admin_message}</p>` : ''}
            `;
            if (data.uploads && data.uploads.length > 0) {
                html += `<p><strong>Documents:</strong></p><div class="d-flex flex-wrap gap-2 justify-content-start">`;

                data.uploads.forEach(file => {
                    const extension = file.original_name.split('.').pop().toUpperCase();
                    const name = file.original_name.replace(/\.[^/.]+$/, '');
                    const sizeKB = Math.round(file.size / 1024);
                    const icon = getIcon(file.mime_type);

                    html += `
                        <a href="/media/${file.path}" target="_blank"
                            class="document-pill d-flex align-items-center text-decoration-none"
                            data-bs-toggle="tooltip"
                            title="${file.original_name} - ${sizeKB}KB">
                            <span class="badge bg-light text-dark border d-flex align-items-center py-2 px-3">
                                ${icon}
                                <span class="text-truncate" style="max-width: 100px;">${name}</span>
                                <small class="text-muted ms-2">${extension}</small>
                            </span>
                        </a>
                    `;
                });

                html += `</div>`;
            }

            content.innerHTML = html

            if (data.admin_message) {
                modalFooterActions.classList.add('d-none');
            }
            

            btnApprove.classList.remove('d-none');
            btnReject.classList.remove('d-none');
            messageBox.classList.remove('d-none');

            btnApprove.onclick = () => {
                form.action = `/admin_submissions/${id}/approve`;
                form.submit();
            };
            btnReject.onclick = () => {
                form.action = `/admin_submissions/${id}/reject`;
                form.submit();
            };

            modal.show();
        });
    });

    function statusLabel(status) {
        switch (status) {
            case 'pending': return 'En attente';
            case 'approved': return 'Validée';
            case 'rejected': return 'Rejetée';
            default: return 'Inconnu';
        }
    }

    function statusClass(status) {
        switch (status) {
            case 'pending': return 'warning';
            case 'approved': return 'success';
            case 'rejected': return 'danger';
            default: return 'secondary';
        }
    }

    function getIcon(mimeType) {
        switch (mimeType) {
            case 'application/pdf':
                return '<i class="bi bi-filetype-pdf text-danger fs-5 me-2"></i>';
            case 'application/msword':
            case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
                return '<i class="bi bi-filetype-docx text-primary fs-5 me-2"></i>';
            case 'application/zip':
            case 'application/x-zip-compressed':
                return '<i class="bi bi-file-earmark-zip text-warning fs-5 me-2"></i>';
            default:
                return '<i class="bi bi-file-earmark fs-5 me-2"></i>';
        }
    }
});
</script>

@endsection