@php
    $id_usuario = session('id_usuario');

@endphp
<div class="modal fade" id="create_version_documento_modal">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">

            <form action="{{url('store_documento_version')}}" method="post" enctype="multipart/form-data">
                {{csrf_field()}}

                <div class="modal-header">
                    <h5 class="modal-title">Nueva versión documento</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <div class="modal-body">

                    <div class="card">
                        <div class="card-header text-center">
                            Versión Documento
                        </div>

                        <div class="card-body">

                            @if(session('id_usuario') == 87)
                                {{-- RUTA --}}
                                <div id="grupo_ruta" class="form-group row">
                                    <label class="col-sm-3 col-form-label">Ruta del formato</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" name="ruta_archivo_sistema">
                                    </div>
                                </div>

                                {{-- DOCUMENTO --}}
                                <div id="grupo_archivo" class="form-group row">
                                    <label class="col-sm-3 col-form-label">Documento</label>
                                    <div class="col-sm-9">
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" name="documento_archivo">
                                            <label class="custom-file-label">Elegir archivo</label>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            {{-- CLAVE --}}
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Clave del documento</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="clave">
                                </div>
                            </div>

                            {{-- VERSION --}}
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Versión</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="version" required>
                                </div>
                            </div>

                            {{-- NOMBRE --}}
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Nombre del Documento</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="nombre_archivo">
                                </div>
                            </div>

                            {{-- FECHA --}}
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Fecha de difusión</label>
                                <div class="col-sm-9">
                                    <input type="date" class="form-control" name="fecha" value="{{date('Y-m-d')}}">
                                </div>
                            </div>

                            {{-- ESTATUS --}}
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Estatus</label>
                                <div class="col-sm-9">
                                    <select class="form-control" name="estatus">
                                        <option value="Inactivo" selected>Inactivo</option>
                                    </select>
                                </div>
                            </div>

                            {{-- DESCRIPCIÓN --}}
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Descripción del cambio</label>
                                <div class="col-sm-9">
                                    <textarea class="form-control" name="observaciones"></textarea>
                                </div>
                            </div>

                            {{-- CAMBIOS --}}
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label">Adjuntar documento con cambios señalados</label>
                                <div class="col-sm-9">
                                    <div class="custom-file">
                                        <input type="file" class="custom-file-input" id="documento_cambios" name="documento_cambios[]" accept=".pdf,application/pdf" multiple>
                                        <label class="custom-file-label">Elegir archivo</label>
                                    </div>
                                </div>
                            </div>

                            {{-- PREVIEW DOCUMENTO --}}
                            <div id="preview_documento" style="display:none;">
                                <label><b>Documento</b></label>
                                <table class="table table-bordered table-sm text-center">
                                    <thead>
                                        <tr>
                                            <th>Archivo</th>
                                            <th>Nombre archivo</th>
                                            <th>Fecha y hora de carga</th>
                                            <th>Cargado por</th>
                                            <th>Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                        <td>
                                            <button type="button" class="btn btn-info" id="btn_preview_doc">Ver archivo</button>
                                        </td>
                                        <td id="nombre_doc"></td>
                                        <td>{{ now()->format('d/m/Y h:i a') }}</td>
                                        <td>{{ session('nombre') }}</td>
                                        <td>
                                            <button type="button" class="btn btn-danger" id="btn_remove_doc">🗑</button>
                                        </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            {{-- PREVIEW CAMBIOS --}}
                            <div id="preview_cambios" style="display:none;">
                                <label><b>Documento con cambios</b></label>
                                <table class="table table-bordered table-sm text-center">
                                    <thead>
                                        <tr>
                                            <th>Archivo</th>
                                            <th>Nombre archivo</th>
                                            <th>Fecha y hora de carga</th>
                                            <th>Cargado por</th>
                                            <th>Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody id="preview_cambios_body">
                                    <tr>
                                        <td>
                                            <button type="button" class="btn btn-warning" id="btn_preview_cambios">Ver archivo</button>
                                        </td>
                                        <td id="nombre_cambios"></td>
                                        <td>{{ now()->format('d/m/Y h:i a') }}</td>
                                        <td>{{ session('nombre') }}</td>
                                        <td>
                                            <button type="button" class="btn btn-danger" id="btn_remove_cambios">🗑</button>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>

                </div>

                <div class="modal-footer">
                    <button class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    <button class="btn btn-primary">Guardar</button>
                </div>

                <input type="hidden" name="id_documento" value="{{$datos_documento->id_documento}}">
                <input type="hidden" name="categoria_documento" value="{{$datos_documento->categoria_documento}}">

            </form>

        </div>
    </div>
</div>
<script>
    $(document).on('click','.create_version_documento_modal',function(){
        $('#create_version_documento_modal').modal('show');
    });

    $('#create_version_documento_modal').on('show.bs.modal', function(){

        let categoria = "{{ $datos_documento->categoria_documento }}";

        if(categoria === "Generado por sistema"){

            $('#grupo_archivo').hide();
            $('#grupo_archivo input').prop('disabled', true);

            $('#grupo_ruta').show();
            $('#grupo_ruta input').prop('disabled', false);

        }else{

            $('#grupo_archivo').show();
            $('#grupo_archivo input').prop('disabled', false);

            $('#grupo_ruta').hide();
            $('#grupo_ruta input').prop('disabled', true);
        }

    });

    let urlDoc = null;
    let archivosCambiosSeleccionados = [];

    // =======================
    // DOCUMENTO
    // =======================
    $('input[name="documento_archivo"]').on('change', function(e){

        let file = e.target.files[0];
        if(!file) return;

        urlDoc = URL.createObjectURL(file);

        $('#nombre_doc').text(file.name);
        $('#preview_documento').show();
    });

    $(document).on('click','#btn_preview_doc',function(){
        if(urlDoc) window.open(urlDoc, '_blank');
    });

    $(document).on('click','#btn_remove_doc',function(){
        $('input[name="documento_archivo"]').val('');
        $('#preview_documento').hide();
    });

    // =======================
    // CAMBIOS
    // =======================
    $('input[name="documento_cambios[]"]').on('change', function(e){
        archivosCambiosSeleccionados = Array.from(e.target.files || []);
        renderPreviewCambios();
    });

    function sincronizarArchivosCambios(){
        const input = document.getElementById('documento_cambios');

        if(!input) return;

        const dataTransfer = new DataTransfer();
        archivosCambiosSeleccionados.forEach(file => dataTransfer.items.add(file));
        input.files = dataTransfer.files;
    }

    function renderPreviewCambios(){
        if(archivosCambiosSeleccionados.length === 0){
            $('#preview_cambios_body').html('');
            $('#preview_cambios').hide();
            return;
        }

        let rows = '';

        archivosCambiosSeleccionados.forEach((file, index) => {
            rows += `
                <tr>
                    <td>
                        <button type="button" class="btn btn-warning btn_preview_cambio_item" data-index="${index}">Ver archivo</button>
                    </td>
                    <td>${file.name}</td>
                    <td>{{ now()->format('d/m/Y h:i a') }}</td>
                    <td>{{ session('nombre') }}</td>
                    <td>
                        <button type="button" class="btn btn-danger btn_remove_cambio_item" data-index="${index}">
                            <i class="trash icon"></i>
                        </button>
                    </td>
                </tr>
            `;
        });

        $('#preview_cambios_body').html(rows);
        $('#preview_cambios').show();
        sincronizarArchivosCambios();
    }

    $(document).on('click','.btn_preview_cambio_item',function(){
        let index = Number($(this).data('index'));
        let file = archivosCambiosSeleccionados[index];

        if(!file) return;

        window.open(URL.createObjectURL(file), '_blank');
    });

    $(document).on('click','.btn_remove_cambio_item',function(){
        let index = Number($(this).data('index'));

        archivosCambiosSeleccionados.splice(index, 1);
        renderPreviewCambios();
    });
</script>