@extends("admin.layout.layout")

@section("styles")
    @php
        $titulo = "Estudiante";
        $modulo = "Estudiantes";
        $vista = "Expediente $estudiante->identificacion";
    @endphp
    <title>{{ getenv("APP_NAME") }} | {{$titulo }} {{$vista}}</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.css">

    <style>
        .expediente-container {
            padding: 20px;
        }
        .matricula-card {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            background-color: #f9f9f9;
        }
        .matricula-header {
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 10px;
        }
        .document-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .document-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .document-item i {
            margin-right: 10px;
            font-size: 20px;
        }
        .document-item a {
            text-decoration: none;
            color: #007bff;
            margin-right: auto;
        }
        .document-description {
            font-size: 12px;
            color: #6c757d;
        }
    </style>
@endsection
@section("contenido")
    @include("estudiante.perfil.components.header")
    @include("admin.estudiante.components.links")

    <div class="container card my-8">
        <button class="btn btn-sm btn-success" id="btnNuevoDocumento">Agregar documento</button>
    </div>
    <div class="container card my-8">
        @forelse ($matriculasMedia as $item)
            <div class="matricula-section mb-4 my-6">
                <h5 class="mb-3">Matrícula: {{ $item['matricula']->id }} | Grupo: {{ $item['matricula']->grupo->grupo }} | Periodo: {{ $item['matricula']->periodo->periodo }}</h5>
                <table class="table table-hover">
                    <thead class="table-light">
                    <tr>
                        <th scope="col"></th>
                        <th scope="col">Nombre del Archivo</th>
                        <th scope="col">Descripción</th>
                        <th scope="col">Acción</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse ($item['media'] as $archivo)
                        @php
                            // Determinar el ícono según el formato del archivo
                            $extension = pathinfo($archivo->file_name, PATHINFO_EXTENSION);
                            $icon = match ($extension) {
                                'pdf' => 'fas fa-file-pdf text-danger',
                                'jpg', 'jpeg', 'png' => 'fas fa-file-image text-primary',
                                'doc', 'docx' => 'fas fa-file-word text-blue',
                                'xls', 'xlsx' => 'fas fa-file-excel text-success',
                                default => 'fas fa-file text-secondary',
                            };
                        @endphp
                        <tr>
                            <td><i class="{{ $icon }}"></i></td>
                            <td>
                                <a href="{{ route('admin::matricula.ver.media', ['uuid' => $archivo->uuid]) }}" target="_blank">
                                    {{ \Illuminate\Support\Str::limit($archivo->name, 50, '...') }}
                                </a>
                            </td>
                            <td>{{ $archivo->getCustomProperty('descripcion', 'Sin descripción') }}</td>
                            <td>
                                <a href="{{ route('admin::matricula.ver.media', ['uuid' => $archivo->uuid]) }}" class="btn btn-sm btn-primary" target="_blank">Ver</a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="text-center">No hay documentos adjuntos para esta matrícula.</td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        @empty
            <p>No se encontraron matrículas con documentos adjuntos.</p>
        @endforelse
    </div>


    <div class="modal fade" id="modalDocumento" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Cambiar de grupo </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <form action="" method="post" enctype="multipart/form-data" id="frmSubirMedia">
                        @csrf
                        <select name="matricula_id" id="matricula_id" class="form-select form-control-sm" required>
                            <option value="">-</option>
                            @foreach ($matriculas as $matricula)
                                <option value="{{ $matricula->id }}">{{ $matricula->grupo->grupo }} | {{ $matricula->periodo->periodo }}</option>
                            @endforeach
                        </select>
                        <label for="descripcion" class="text-start"><b>Descripción</b></label>
                        <input type="text" class="form-control form-control-sm " id="descripcion" name="descripcion" placeholder="Descripción">
                        <hr>
                        <input type="file" id="archivo" name="archivo" class="dropify inputFile my-5" accept=".pdf, .png, .jpg, .jpeg" required>
                        <button class="btn btn-success btn-sm mt-4" type="submit">Subir archivo</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection



@section("scripts")
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js"></script>

    <script>
        $(document).ready(function(){
            $('.dropify').dropify({
                height: "100px",
                //cambiar tammaño texto mensaje
                tpl: {
                    message: '<div class="dropify-message"><span class="file-icon" /> <p>Subir archivo</p></div>',
                },
            });
        });
        
        $(document).on("click", "#btnNuevoDocumento", function() {
            $("#modalDocumento").modal({backdrop: 'static', keyboard: false}).modal('show');
        });

        $(document).on("change", "#matricula_id", function() {
            let url_insetar="{{route("admin::matricula.subirMedia",":matricula_id")}}"
            let matricula_id = $(this).val();

            if (matricula_id) {
                url_insetar = url_insetar.replace(":matricula_id", matricula_id);
                $("#frmSubirMedia").attr("action", url_insetar);
            }else{
                $("#frmSubirMedia").attr("action", "");
            }
        });

    </script>
@endsection