@extends('layouts.admin')
@section('title', 'Requêtes formulées - ' . getRadioUsers()->name)
@section('content')
    <div class="row g-4 mb-4">
        <div class="p-5 bg-linear-gradient mt-0">
            <div class="container-fluid text-white text-center">
                <div class="row justify-content-center">
                    <div class="col-md-10">
                        <h2 class="fw-bold mb-4" style="font-size: clamp(1.1rem, 2.5vw + 0.7rem, 2.1875rem);">Requêtes Formulées </h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-custom px-4">
            <div class="bg-white rounded-4 shadow-sm p-4">
                <div class="header-section">
                    <div
                        class="d-flex flex-column flex-md-row justify-content-between align-items-stretch align-items-md-center mb-4">
                        <button class="btn gradient-btn mb-3 mb-md-0" data-bs-toggle="modal" data-bs-target="#createSubmissionModal">
                            Formuler une requête
                        </button>
                    </div>
                </div>

                @if (count($submissions) > 0)
                    <div class="">
                        <table class="table table-bordered table-striped align-middle w-100" id="datatable-buttons">
                            <thead class="table-white">
                                <tr>
                                    <th>#</th>
                                    <th>objet</th>
                                    <th>Description</th>
                                    <th>Documents</th>
                                    <th>Formulé</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($submissions as $key => $submission)
                                    <tr>
                                        <td> {{ $key + 1 }} </td>
                                        
                                       <td>{{ $submission->object }}</td>
                                        <td>{{ Str::limit($submission->description, 200, '...') }}</td>
                                        <td>
                                            @if ($submission->uploads)
                                            <div class="d-flex flex-wrap gap-2 justify-content-center">
                                                @foreach ($submission->uploads as $file)
                                                    <a href="{{asset("media/".$file['path']) }}" target="_blank"
                                                        class="document-pill d-flex align-items-center text-decoration-none"
                                                        data-bs-toggle="tooltip"
                                                        title="{{ $file['original_name'] }} - {{ round($file['size'] / 1024) }}KB">
                                                        <span
                                                            class="badge bg-light text-dark border d-flex align-items-center py-2 px-3">
                                                            @switch($file['mime_type'])
                                                                @case('application/pdf')
                                                                    <i class="bi bi-filetype-pdf text-danger fs-5 me-2"></i>
                                                                @break

                                                                @case(['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'])
                                                                    <i
                                                                        class="bi bi-filetype-docx text-primary fs-5 me-2"></i>
                                                                @break

                                                                @case(['application/zip', 'application/x-zip-compressed'])
                                                                    <i
                                                                        class="bi bi-file-earmark-zip text-warning fs-5 me-2"></i>
                                                                @break

                                                                @default
                                                                    <i class="bi bi-file-earmark fs-5 me-2"></i>
                                                            @endswitch
                                                            <span class="text-truncate" style="max-width: 100px;">
                                                                {{ pathinfo($file['original_name'], PATHINFO_FILENAME) }}
                                                            </span>
                                                            <small
                                                                class="text-muted ms-2">{{ strtoupper(pathinfo($file['original_name'], PATHINFO_EXTENSION)) }}</small>
                                                        </span>
                                                    </a>
                                                @endforeach
                                            </div>
                                            @else
                                                Aucun document soumis
                                            @endif
                                        </td>
                                        <td>{{ \Carbon\Carbon::parse($submission->created_at)->locale('fr')->translatedFormat('l d F Y') }}</td>
                                        <td>
                                            @switch($submission->status)
                                                @case('pending')
                                                    <span class="badge text-bg-warning">En attente</span>
                                                @break

                                                @case('approved')
                                                    <span class="badge text-bg-success">Traité</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>
                                            <button type="button" class="btn btn-sm btn-outline-info btn-view-submission"
                                                data-submission='@json($submission)'
                                                data-created="{{ \Carbon\Carbon::parse($submission->created_at)->locale('fr')->translatedFormat('l d F Y à H\hi') }}" data-bs-toggle="modal" data-bs-target="#showSubmissionModal">
                                                <i class="bi bi-eye-fill"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="main-content-card">
                        <div>
                            <img src="{{ asset('assets/images/not-content.svg') }}" alt="aucun" />
                        </div>
                        <div>
                            <p class="h5">Aucune Requête formulée.</p>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

<!-- Modal: Créer une requête -->
<div class="modal fade" id="createSubmissionModal" tabindex="-1" aria-labelledby="createSubmissionLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg">
    <form action="{{ route('admin_submissions.store',  ['radio_id' => $radio->id])}}" method="POST" enctype="multipart/form-data" class="modal-content">
      @csrf
      <div class="modal-header">
        <h5 class="modal-title" id="createSubmissionLabel">Formuler une requête</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
          <label for="object" class="form-label">Objet *</label>
          <input type="text" class="form-control border-1 border-black" id="object" name="object" required>
        </div>
        <div class="mb-3">
          <label for="description" class="form-label">Description *</label>
          <textarea class="form-control border-1 border-black" id="description" name="description" rows="5" required></textarea>
        </div>
        <div class="mb-3">
          <label for="uploads" class="form-label">Documents (facultatif)</label>
          <input type="file" name="uploads[]" multiple class="form-control border-1 border-black">
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn gradient-btn">Soumettre</button>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
      </div>
    </form>
  </div>
</div>

<!-- Modal: Voir une requête -->
<div class="modal fade" id="showSubmissionModal" tabindex="-1" aria-labelledby="showSubmissionLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="showSubmissionLabel">Détails de la requête</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
      </div>
      <div class="modal-body" id="submissionDetailContent">
        <!-- Contenu injecté dynamiquement en JS -->
      </div>
    </div>
  </div>
</div>

@endsection

@section('script')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const showModal = new bootstrap.Modal(document.getElementById('showSubmissionModal'));

    $('#datatable-buttons tbody').on('click', '.btn-view-submission', function () {
        const btn = this;

        const submission = JSON.parse(btn.dataset.submission);
        const created = btn.dataset.created;

        let html = `
            <p><strong>Objet:</strong> ${submission.object}</p>
            <p><strong>Description:</strong><br>${submission.description}</p>
            <p><strong>Statut:</strong> 
                <span class="badge bg-${statusClass(submission.status)}">${statusLabel(submission.status)}</span>
            </p>
            ${submission.admin_message ? `<p><strong>Message du rejet :</strong> <br> ${submission.admin_message}` : ``}</p>
            <p><strong>Soumis le:</strong> ${created}</p>
        `;

        if (submission.uploads && submission.uploads.length > 0) {
            html += `<p><strong>Documents:</strong></p><div class="d-flex flex-wrap gap-2 justify-content-start">`;

            submission.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>`;
        }

        $('#submissionDetailContent').html(html);
        showModal.show();
    });

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

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

    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