@extends('layouts.expert.main')

@section('style')
<style>
    .number-statistic {
        color: red
    }
</style>
@endsection

@section('content')
    @isset($complementary_activities)
        @php
            $compl_ids = array_column(json_decode($complementary_activities, true), 'id');
        @endphp
    @endisset

<div class="page-wrapper">
    <!-- ============================================================== -->
    <!-- Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    @include('layouts.expert.miniHeader')
    <!-- ============================================================== -->
    <!-- End Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <!-- -------------------------------------------------------------- -->
    <!-- Container fluid  -->
    <!-- -------------------------------------------------------------- -->
    <div class="container-fluid page-content">
        <!-- -------------------------------------------------------------- -->
        <!-- Start Page Content -->
        <!-- -------------------------------------------------------------- -->
        <div class="row">
            <!-- Column -->
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div class="col-lg-12 col-md-12 col-sm-12">
                        @if ($status_candidate->status == "en_cours")
                            <form action="{{ route('expert.conformed', ['id' => $complementary_activities[0]->candidature_id]) }}"     method="post">
                                @csrf
                                <div class="d-flex justify-content-center">
                                    <button type="submit" class="btn px-4 rounded-pill btn-primary"
                                    style="margin-right: 10px;"
                                    name="status" value="conforme">
                                        VALIDER CE DOSSIER
                                    </button>
                                </div>
                            </form>
                        @else
                            <form action="{{ route('admin.expert', ['id' => $complementary_activities[0]->candidature_id]) }}"  method="post">
                                @csrf
                                <div class="d-flex justify-content-center">
                                    <button type="submit" class="btn px-4 rounded-pill btn-primary"
                                    style="margin-right: 10px;"
                                    name="status" value="yes">
                                        SUIVRE CE DOSSIER
                                    </button>
                                    <button type="submit" class="btn px-4 rounded-pill btn-danger"
                                        style="margin-right: 10px;"
                                        name="status" value="no">
                                        REJETER CE DOSSIER
                                    </button>
                                </div>
                            </form>
                        @endif

                        {{-- AFFICHAGE DES PIECES JOINTES --}}
                        <h3 class="box-title mt-5 text-success">Activités complémentaires</h3>
                        <div class="table-responsive">
                            <table class="table">
                                <tbody>
                                    <tr>
                                        <th width=""> Type </th>
                                        <th> Libellés </th>
                                        <th> Description </th>
                                        <th> Pièce jointe </th>
                                    </tr>
                                    @foreach ($complementary_activities as $activity)
                                        <tr>
                                            <td> {{ $activity->type }} </td>
                                            <td> {{ $activity->libelles }} </td>
                                            <td> {{ $activity->description }} </td>
                                            <td>
                                                @if($activity->file)
                                                    <div class="card text-center alert-dismissible fade show alert p-0 card-hover"
                                                        role="alert">
                                                        <button type="button" class="btn-close d-none" data-bs-dismiss="alert"
                                                            aria-label="Close"></button>
                                                        <div class="p-2 d-block mt-3">
                                                            <img src="{{ asset("../assets/images/pdf.png") }}" width="75" />
                                                            <h5 class="card-title mt-3">Attestation</h5>
                                                            <button
                                                                class="btn btn-light-success text-success font-weight-medium d-block w-100"
                                                                id="openPdfButton_file_{{ $activity->id }}"
                                                                data-pdf="{{config('app.aws_url') . $activity->file }}"
                                                                data-target-modal="pdfModal"
                                                            >
                                                                Lire
                                                            </button>
                                                        </div>
                                                    </div>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        {{-- FIN AFFICHAGE DES PIECES JOINTES --}}

                        <div class="modal fade pdf-modal" id="pdfModal" tabindex="-1" aria-labelledby="pdfModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-fullscreen">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title h4" id="pdfModalLabel">Visualiseur PDF</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <iframe id="pdfViewer" width="100%" height="500"></iframe>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button"
                                            class="btn btn-light-danger text-danger font-weight-medium"
                                            data-bs-dismiss="modal">Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @if ($status_candidate->status == "en_cours")
                        <form method="POST" action="{{ route('expert.suggestions', ['id' =>   $complementary_activities[0]->candidature_id]) }}" enctype="multipart/form-data">
                            @csrf
                            <div class="">
                                <div class="m-5">
                                    <h5>Observation:</h5>
                                    <div>
                                        <textarea name="observation" id="" cols="30" rows="4" class="w-100"></textarea>
                                    </div>
                                </div>
                                <div class=" m-5  d-none">
                                    <div class="mt-5 d-flex flex-column align-items-end">
                                        <input class="form-control hidden " type="text" id="" name="rubrique" value="activites_complementaires">
                                    </div>
                                </div>
                                <div class=" m-5">
                                    <h5>Joindre le fichier d'observation:</h5>
                                    <div class="mt-5 d-flex flex-column align-items-end">
                                        <input class="form-control" type="file" id="formFile" name="observation_file">
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-end" style="margin: 20px">
                                <button
                                    type="submit"
                                    class="btn px-4 rounded-pill btn-info ml-auto"
                                    style="margin-right: 10px;"
                                >
                                    Enregistrer
                                </button>
                                <button
                                    type="button"
                                    class="btn px-4 rounded-pill btn-primary"
                                    style="margin-right: 10px;"
                                    onclick="history.back()"
                                >
                                    Précédent
                                </button>
                                <a
                                    href="{{ route('expert.candidat_renseignement_step7', ["id"=> $complementary_activities[0]->candidature_id]) }}"
                                    type="button"
                                    class="btn px-4 rounded-pill btn-primary"
                                >
                                    Suivant
                                </a>
                            </div>
                        </form>

                    @else
                    <div class="d-flex justify-content-end" style="margin: 20px">
                        <button
                            type="button"
                            class="btn px-4 rounded-pill btn-primary"
                            style="margin-right: 10px;"
                            onclick="history.back()"
                        >
                            Précédent
                        </button>
                        <a
                            href="{{ route('expert.candidat_renseignement_step7', ["id"=> $complementary_activities[0]->candidature_id]) }}"
                            type="button"
                            class="btn px-4 rounded-pill btn-primary"
                        >
                            Suivant
                        </a>
                    </div>
                    @endif
                </div>
            </div>
        </div>
        <!-- Column -->
    </div>
    <!-- -------------------------------------------------------------- -->
    <!-- End PAge Content -->
    <!-- -------------------------------------------------------------- -->
</div>
</div>

@endsection

@section('script')

    <script>
        @isset($compl_ids)
            let compl_ids = @json($compl_ids, JSON_PRETTY_PRINT);
            compl_ids.forEach(element => {
                $('#openPdfButton_file_'+ element).on("click", (event) => {
                    event.preventDefault();
                    console.log(element);

                    const file = $('#openPdfButton_file_'+ element)[0].dataset.pdf;

                    // const pdfPath = "/storage/pdfs/ample-admin-template-by-wrappixel_20231023133936.pdf";
                    const pdfPath = file;
                    const pdfViewer = document.getElementById("pdfViewer");
                    pdfViewer.src = `${pdfPath}`;
                    openPdfModal();
                });
            });
        @endisset

        function openPdfModal() {
            const pdfModal = new bootstrap.Modal(document.getElementById("pdfModal"));
            pdfModal.show();
        }
    </script>

@endsection