@extends('layouts.app')

@section('title')
    Notas de Entrega / Oficios
@endsection

@section('css')
<style>
    .tab-pane {
    display: block !important;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
.tab-pane.active {
    height: auto;
    overflow: visible;
    visibility: visible;
}

.document-header {
            border-bottom: 2px solid #007bff;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        .document-section {
            margin-bottom: 15px;
        }
        .document-section h6 {
            color: #007bff;
            font-weight: bold;
        }
        .document-field {
            margin-bottom: 10px;
        }
        .document-field label {
            font-weight: 600;
            color: #343a40;
        }
        .document-field p {
            margin: 0;
            padding: 5px 10px;
            background: #f8f9fa;
            border-radius: 4px;
            min-height: 38px;
            display: flex;
            align-items: center;
        }
        .document-field .instruido-content {
            background: #f8f9fa;
            padding: 10px;
            border-radius: 4px;
            min-height: 100px;
        }
        @media print {
            body * {
                visibility: hidden;
            }
            #printableContent, #printableContent * {
                visibility: visible;
            }
            #printableContent {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .no-print {
                display: none !important;
            }
            .fas { /* Ocultar íconos Font Awesome en impresión */
                display: none !important;
            }
            .document-section h6:before {
                content: '• ';
                color: #007bff;
                font-size: 10px;
                position: absolute;
                left: 0;
            }
            /* Ajustar para una sola página */
            @page {
                size: A4;
                margin: 10mm;
            }
            body {
                margin: 0;
                padding: 10mm;
            }
            .document-header {
                margin-bottom: 5mm;
            }
            .document-section {
                margin-bottom: 5mm;
            }
            .document-section h6 {
                font-size: 12px;
                margin-bottom: 2mm;
            }
            .document-field label {
                width: 100px;
                font-size: 10px;
            }
            .document-field p {
                padding: 2px 4px;
                min-height: 18px;
                font-size: 10px;
                width: calc(100% - 110px);
            }
            .document-field .instruido-content {
                padding: 3mm;
                min-height: 40mm;
                font-size: 10px;
                width: calc(100% - 110px);
            }
        }
</style>
<!-- Summernote CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css">
@endsection

@section('modals')
  <!-- Modal para vista del documento -->
  <div class="modal fade" id="viewDocumentModal" tabindex="-1" aria-labelledby="viewDocumentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-navy">
                <h5 class="modal-title" id="viewDocumentModalLabel"><i class="fas fa-file-alt mr-2"></i>Detalles del Documento</h5>
                <button type="button" class="close no-print" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body" id="printableContent">
                <div class="document-header text-center">
                    <h4 class="mb-0" id="document-type">Nota de Entrega</h4>
                    <p class="text-muted mb-0">Documento Generado el <span id="generated-date">{{ \Carbon\Carbon::now()->format('d-m-Y H:i') }}</span></p>
                </div>
                <div class="document-section">
                    <table class="document-table table table-bordered">
                        <thead>
                            <tr>
                                <th colspan="2">Información del Documento</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="label">Fecha de Emisión</td>
                                <td class="value" id="view_fecha_emitido">-</td>
                            </tr>
                            <tr>
                                <td class="label">Tipo de Documento</td>
                                <td class="value" id="view_tipo_doc">-</td>
                            </tr>
                            <tr>
                                <td class="label">Transcrito por</td>
                                <td class="value" id="view_transcrito">-</td>
                            </tr>
                            <tr>
                                <td class="label">Fecha Recibido</td>
                                <td class="value" id="view_fecha_recibido">-</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="document-section">
                    <table class="document-table table table-bordered">
                        <thead>
                            <tr>
                                <th colspan="2">Destinatario</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="label">Cargo</td>
                                <td class="value" id="view_cargo">-</td>
                            </tr>
                            <tr>
                                <td class="label">Destinatario</td>
                                <td class="value" id="view_destinatario">-</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="document-section">
                    <table class="document-table table table-bordered">
                        <thead>
                            <tr>
                                <th colspan="2">Contenido</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="label">Asunto</td>
                                <td class="value" id="view_asunto">-</td>
                            </tr>
                            <tr>
                                <td class="label">Atención Relacionada</td>
                                <td class="value" id="view_atencion">-</td>
                            </tr>
                            <tr>
                                <td class="label">Instrucciones</td>
                                <td class="value">
                                    <div class="instruido-content" id="view_instruido">-</div>
                                </td>
                            </tr>
                            <tr>
                                <td class="label">Observaciones</td>
                                <td class="value" id="view_observaciones">-</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="document-footer text-center text-muted">
                    <p>Generado por el Sistema de Gestión de Documentos</p>
                </div>
            </div>
            <div class="modal-footer justify-content-between no-print">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    <i class="fas fa-times mr-1"></i>Cerrar
                </button>
                <button type="button" class="btn bg-gradient-navy shadow" id="btn-print">
                    <i class="fas fa-print mr-1"></i>Imprimir
                </button>
            </div>
        </div>
    </div>
</div>

<!-- modal nuevo documento -->
<div class="modal fade" id="new-documento" tabindex="-1" aria-labelledby="addDocumentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="modal-title"></h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form id="form-add" novalidate>
            <!-- CSRF Token (assuming Laravel) -->
            @csrf
            <div class="modal-body">
                <div class="row" id="row_data">
                    <!-- Document Information Section -->
                    <div class="col-12">
                        <h6 class="text-muted"><i class="fas fa-info-circle mr-1"></i>Información del Documento</h6>
                        <hr class="my-2">
                    </div>
                    <div class="col-12 col-md-3">
                        <div class="form-group">
                            <label for="fecha_emitido" class="font-weight-bold">Fecha de Emisión <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                                </div>
                                <input type="date" id="fecha_emitido" name="fecha_emitido" class="form-control" 
                                       value="{{ \Carbon\Carbon::now()->format('Y-m-d') }}" required 
                                       aria-describedby="fecha_emitido_error">
                            </div>
                            <small id="fecha_emitido_error" class="text-danger"></small>
                        </div>
                    </div>
                    <div class="col-12 col-md-3">
                        <div class="form-group">
                            <label for="tipo_doc" class="font-weight-bold">Tipo de Documento <span class="text-danger">*</span></label>
                            <select class="form-control" name="tipo_doc" id="tipo_doc" required 
                                    aria-describedby="tipo_doc_error">
                                <option value="" disabled selected>Seleccione...</option>
                                <option value="OFICIO">Oficio</option>
                                <option value="NOTA DE ENTREGA">Nota de Entrega</option>
                            </select>
                            <small id="tipo_doc_error" class="text-danger"></small>
                        </div>
                    </div>
                    <div class="col-12 col-md-3">
                        <div class="form-group">
                            <label for="transcrito" class="font-weight-bold">Transcrito por</label>
                            <input type="text" id="transcrito" name="transcrito" 
                                   class="form-control bg-light" 
                                   value="{{ Auth::user()->name }}" readonly 
                                   aria-readonly="true">
                        </div>
                    </div>
                    <div class="col-12 col-md-3">
                        <div class="form-group">
                            <label for="fecha_recibido" class="font-weight-bold">Fecha Recibido</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                                </div>
                                <input type="date" id="fecha_recibido" name="fecha_recibido" 
                                       class="form-control" aria-describedby="fecha_recibido_error">
                            </div>
                            <small id="fecha_recibido_error" class="text-danger"></small>
                        </div>
                    </div>

                    <!-- Recipient Section -->
                    <div class="col-12 mt-3">
                        <h6 class="text-muted"><i class="fas fa-user mr-1"></i>Destinatario</h6>
                        <hr class="my-2">
                    </div>
                    <div class="col-12 col-md-4">
                        <div class="form-group">
                            <label for="cargo" class="font-weight-bold">Cargo <span class="text-danger">*</span></label>
                            <input type="text" id="cargo" name="cargo" class="form-control" 
                                   placeholder="Ej. Gerente General" required 
                                   aria-describedby="cargo_error">
                            <small id="cargo_error" class="text-danger"></small>
                        </div>
                    </div>
                    <div class="col-12 col-md-8">
                        <div class="form-group">
                            <label for="destinatario" class="font-weight-bold">Destinatario <span class="text-danger">*</span></label>
                            <input type="text" id="destinatario" name="destinatario" 
                                   class="form-control" placeholder="Nombre del destinatario" 
                                   required aria-describedby="destinatario_error">
                            <small id="destinatario_error" class="text-danger"></small>
                        </div>
                    </div>

                    <!-- Content Section -->
                    <div class="col-12 mt-3">
                        <h6 class="text-muted"><i class="fas fa-file mr-1"></i>Contenido</h6>
                        <hr class="my-2">
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="form-group">
                            <label for="asunto" class="font-weight-bold">Asunto <span class="text-danger">*</span></label>
                            <input type="text" id="asunto" name="asunto" class="form-control" 
                                   placeholder="Asunto del documento" required 
                                   aria-describedby="asunto_error">
                            <small id="asunto_error" class="text-danger"></small>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="form-group">
                            <label for="atencion" class="font-weight-bold">Atención Relacionada</label>
                            <div class="input-group" id="search_atencion">
                                <input type="text" id="atencion" name="atencion" 
                                       class="form-control bg-light" readonly 
                                       aria-readonly="true">
                                <input type="hidden" id="id_atenciones" name="id_atenciones">
                                <div class="input-group-append">
                                    <button class="btn btn-outline-secondary" type="button" id="btn_search_atencion">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                            </div>
                            <small id="atencion_error" class="text-danger"></small>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="form-group">
                            <label for="instruido" class="font-weight-bold">Instrucciones</label>
                            <textarea name="instruido" id="instruido" rows="4" 
                                      class="form-control summernote" 
                                      placeholder="Detalles o instrucciones específicas"></textarea>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="form-group">
                            <label for="observaciones" class="font-weight-bold">Observaciones</label>
                            <input type="text" id="observaciones" name="observaciones" 
                                   class="form-control" placeholder="Observaciones adicionales">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    <i class="fas fa-times mr-1"></i>Cerrar
                </button>
                <button type="submit" class="btn bg-gradient-navy shadow" id="btn-submit" disabled>
                    <i class="fas fa-check mr-1"></i>Finalizar
                </button>
            </div>
        </form>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal nuevo documento end -->

<!-- modal nuevo documento -->
<div class="modal fade" id="list-atenciones">
    <div class="modal-dialog modal-dialog-centered modal-xl">
      <div class="modal-content">
        <div class="overlay">
            <i class="fas fa-2x fa-sync fa-spin" style="color: azure;"></i>
        </div>
        <div class="modal-header">
          <h4 class="modal-title" id="modal-title">Lista de Antenciones / Casos</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped table-sm table-atenciones">
                        <thead class="text-center">
                            <th>N°</th>
                            <th>Fecha</th>
                            <th>Dirigido a</th>
                            <th>Remitente</th>
                            <th>Categoria</th>
                            <th class="acciones">Acciones</th>
                            <th>Asunto</th>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal"><b>Cerrar</b></button>
            </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal nuevo documento end -->

@endsection

@section('content')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
          <div class="row mb-2">
            <div class="col-sm-6">
              <ol class="breadcrumb">
                  <a class="btn btn-outline-dark btn-sm" href="{{ route('oficios') }}">
                      <i class="fas fa-reply mr-1"></i>
                      Ir a Inicio
                  </a>
                </li>
              </ol>
            </div><!-- /.col -->
          </div><!-- /.row -->
        </div><!-- /.container-fluid -->
      </div>
      <!-- /.content-header -->
<div class="row justify-content-center">
    <div class="col-md-10">
        <div class="card card-outline card-danger">
            <div class="card-header">
                <div class="row">
                    <div class="col-md-6">
                        <h4><i class="fa fa-th"></i> Lista de Oficios y Notas de Entrega</h4>
                    </div>
                    <div class="col-md-6 text-right">
                        <a href="#" class="btn bg-gradient-navy btn-sm shadow" id="btn-add" data-toggle="modal" data-target="#new-documento"><i class="fa fa-plus"></i> Nuevo Documento</a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <ul class="nav nav-tabs" id="custom-content-below-tab" role="tablist">
                    <li class="nav-item">
                      <a class="nav-link active font-weight-bold h4" id="custom-content-below-home-tab" data-toggle="pill" href="#custom-content-below-home" role="tab" aria-controls="custom-content-below-home" aria-selected="true">Oficios</a>
                    </li>
                    <li class="nav-item ml-auto">
                      <a class="nav-link font-weight-bold h4" id="custom-content-below-profile-tab" data-toggle="pill" href="#custom-content-below-profile" role="tab" aria-controls="custom-content-below-profile" aria-selected="false">Notas de entrega</a>
                    </li>
                </ul>
                <div class="tab-content m-1" id="custom-content-below-tabContent">
                    <div class="tab-pane fade show active" id="custom-content-below-home" role="tabpanel" aria-labelledby="custom-content-below-home-tab">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped table-sm table-ofico">
                                <thead class="text-center">
                                    <th>N°</th>
                                    <th>Documento</th>
                                    <th>Fecha de Emisión</th>
                                    <th>Destinatario</th>
                                    <th>Asunto</th>
                                    <th class="actions">Estatus</th>
                                    <th class="acciones actions">Acciones</th>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="custom-content-below-profile" role="tabpanel" aria-labelledby="custom-content-below-profile-tab">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped table-sm table-nota">
                                <thead class="text-center">
                                    <th>N°</th>
                                    <th>Documento</th>
                                    <th>Fecha de Emisión</th>
                                    <th>Destinatario</th>
                                    <th>Asunto</th>
                                    <th class="actions">Estatus</th>
                                    <th class="acciones actions">Acciones</th>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<!-- Summernote JS -->
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
<script>
    $(document).ready(function () {
        var id = '';
        listaDocumentos();

        // Initialize Summernote
        $('.summernote').summernote({   
            height: 200,
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'italic', 'underline', 'clear']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['insert', ['link', 'table', 'hr']],
                ['view', ['undo', 'redo', 'codeview']]
            ],
            placeholder: 'Detalles o instrucciones específicas',
            callbacks: {
                onChange: function() {
                    // Trigger validation or other logic if needed
                }
            }
        });

        // Reiniciar formulario de registro
        $('#btn-add').click(function(){
            $('#form-edit').trigger('reset');
            $('#form-add').trigger('reset');
            $('#form-edit').attr('id', 'form-add');
            $('#form-add input, #form-add select, #form-add textarea').prop('disabled', false);
            $('#form-edit input, #form-edit select, #form-edit textarea').prop('disabled', false);
            $("#btn-submit").show();
            $('#btn-submit').attr('class', 'btn bg-gradient-navy shadow').html('<i class="fas fa-check"></i> Finalizar');
            $('#modal-title').html('<i class="fa fa-plus"></i> <b>Nuevo Documento</b>');
        });

        //Metodo para cargar la lista de atenciones y que se selecciones el que necesitan
        $(document).on("click", "#search_atencion", function (e) {
            $("#list-atenciones").modal('show');
            fetch('api/atenciones/list/all', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Error en la consulta...');
                    }
                    return response.json();
                })
                .then(data => {
                    var template = "";
                    console.log(data);
                    data.data.forEach(e => {
                    var status = e.estatus; // Aquí defines el estado según tu lógica
                    console.table(e)
                        template += `
                            <tr>
                                <td class="text-center"> ${e.correlativo}</td>
                                <td  class="text-center"> ${moment(e.fecha_recibido).utc().format('DD-MM-YYYY')}</td>
                                <td class="text-center"> ${e.dirigido}</td>
                                <td class="text-center"> ${e.nombre}</td>
                                <td class="text-center"> ${e.categoria}</td>
                                <td class="text-center"> 
                                    <button type="button" class="btn btn-sm bg-gradient-navy select-atencion" data-id="${e.id}" data-atencion="${e.correlativo} - ${e.nombre}: ${e.categoria} - ${e.asunto}">
                                        <i class="fas fa-share-square"></i>
                                    </button>
                                </td>
                                <td class="text-center text-sm text-truncate"> ${e.asunto}</td>
                            </tr>
                        `;
                        
                    });

                    // //Destruir y recrear la tabla
                    $('.table-atenciones').DataTable().destroy();
                    $('.table-atenciones tbody').html(template);
                    $('.table-atenciones').DataTable(t);

                    
                    $(".overlay").hide();

                })
                .catch(error => console.error('Error:', error));
        })

        // Enviar formulario para crear un nuevo documento
        $(document).on('submit', '#form-add', function(e){
            e.preventDefault();
            if(validateForm()){
                let form = new FormData(this);
                form.delete('_method');

                fetch('api/notas_oficios/store', {
                    method: 'POST',
                    body: form,
                    headers: {
                        // 'Authorization': 'Bearer ' + token, 
                    }
                })
                .then(res => res.json())
                .then(function (data) {
                    console.log(data);
                    if (data.status) {

                            Swal.fire({
                                title: '¡Perfecto!',
                                icon: 'success',
                                text: data.message,
                                timer: 1500, // 3 segundos
                                //timerProgressBar: true,
                                showConfirmButton: false,
                            });

                        
                        listaDocumentos();
                        $('#form-add').trigger('reset');
                        $('#new-documento').modal('hide');
                    }
                    if (!data.status) {

                        template = `
                                <div>
                                    <ol>     
                            `;
                        if (data.mjs) {
                            template += "<li class='text-left text-danger'>" + data.mjs + "</li>";
                        } else {

                            $.each(data.errors, function (key, value) {
                                template += "<li class='text-left text-danger'>" + value + "</li>";
                            });

                        }
                        template += `
                                </ol>
                            </div>  
                            `;

                        Swal.fire({
                            icon: 'error',
                            title: '¡Ups!',
                            html: template
                        })

                    }
                })
            }
            
        })

        // Enviar formulario para editar un documento
        $(document).on('submit', '#form-edit', function(e){
            e.preventDefault();
            if(validateForm()){
                let form = new FormData(this);
                    form.append('_method', 'PUT');

                fetch('api/notas_oficios/update/' + id, {
                    method: 'POST',
                    body: form
                })
                .then(res => res.json())
                .then(function (data) {
                    console.log(data);
                    if (data.status) {

                            Swal.fire({
                                title: '¡Perfecto!',
                                icon: 'success',
                                text: data.msj,
                                timer: 1500, // 3 segundos
                                //timerProgressBar: true,
                                showConfirmButton: false,
                            });

                        
                        listaDocumentos();
                        $('#new-documento').modal('hide');
                    }
                    if (!data.status) {

                        template = `
                                <div>
                                    <ol>     
                            `;
                        if (data.mjs) {
                            template += "<li class='text-left text-danger'>" + data.mjs + "</li>";
                        } else {

                            $.each(data.errors, function (key, value) {
                                template += "<li class='text-left text-danger'>" + value + "</li>";
                            });

                        }
                        template += `
                                </ol>
                            </div>  
                            `;

                        Swal.fire({
                            icon: 'error',
                            title: '¡Ups!',
                            html: template
                        })

                    }
                })
            }
            
        })

         // Function to fetch and populate form data for editing
         $(document).on('click', '.edit', function () {
                fetch(`api/notas_oficios/show/${$(this).data('id')}`, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': $('input[name="_token"]').val()
                    }
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Error al obtener los datos del documento.');
                    }
                    return response.json();
                })
                .then(data => {
                    id = data.data.id;
                    // Populate form fields
                    $('#document_id').val(data.data.id || '');
                    $('#fecha_emitido').val(data.data.fecha_emitido ? moment(data.data.fecha_emitido).utc().format('YYYY-MM-DD') : '');
                    $('#tipo_doc').val(data.data.tipo_doc || '');
                    $('#transcrito').val(data.data.transcrito || '{{ Auth::user()->name }}');
                    $('#fecha_recibido').val(data.data.fecha_recibido ? moment(data.data.fecha_recibido).utc().format('YYYY-MM-DD') : '');
                    $('#cargo').val(data.data.cargo || '');
                    $('#destinatario').val(data.data.destinatario || '');
                    $('#asunto').val(data.data.asunto || '');
                    $('#atencion').val(data.data.atencione.correlativo + ' - ' + data.data.atencione.nombre + ': ' + data.data.atencione.categoria + ' - ' + ((data.data.atencione.asunto) ? data.data.atencione.asunto : 'S/A' ) || '');
                    $('#id_atenciones').val(data.data.id_atenciones || '');
                    $('#instruido').summernote('code', data.data.instruido || '');
                    $('#observaciones').val(data.data.observaciones || '');

                    // Update modal title for edit mode
                    $('#modalTitle').text('Editar Documento');
                    $('#form-add').attr('id', 'form-edit');
                    validateForm();
                    $('#new-documento').modal('show');
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert(error.message);
                });
        });

        // Function to fetch and display document data
        $(document).on('click', '.details', function () {
            const documentId = $(this).data('id');
                fetch(`api/notas_oficios/show/${documentId}`, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': $('input[name="_token"]').val() // Assuming CSRF token is available
                    }
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Error al obtener los datos del documento.');
                    }
                    return response.json();
                })
                .then(data => {
                    // Populate display fields
                    $('#document-type').text(data.data.tipo_doc || 'Nota de Entrega');
                    $('#view_fecha_emitido').text(moment(data.data.fecha_emitido).utc().format('DD-MM-YYYY') || '-');
                    $('#view_tipo_doc').text(data.data.tipo_doc || '-');
                    $('#view_transcrito').text(data.data.transcrito || '-');
                    $('#view_fecha_recibido').text(moment(data.data.fecha_recibido).utc().format('DD-MM-YYYY') || '-');
                    $('#view_cargo').text(data.data.cargo || '-');
                    $('#view_destinatario').text(data.data.destinatario || '-');
                    $('#view_asunto').text(data.data.asunto || '-');
                    $('#view_atencion').text(data.data.atencione.correlativo + ' - ' + data.data.atencione.nombre + ': ' + data.data.atencione.categoria + ' - ' + ((data.data.atencione.asunto) ? data.data.atencione.asunto : 'S/A' ) || '');
                    $('#view_instruido').html(data.data.instruido || '-');
                    $('#view_observaciones').text(data.data.observaciones || '-');

                    // Show the modal
                    $('#viewDocumentModal').modal('show');
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert(error.message);
                });
            });

$('#btn-print').on('click', function() {
            // Create a new window for printing
            const printWindow = window.open('', '', 'width=800,height=600');
            if (!printWindow) {
                alert('Por favor, habilita las ventanas emergentes para imprimir.');
                return;
            }

            // Extract data from modal fields
            const docType = $('#document-type').text() || 'Nota de Entrega';
            const fechaEmitido = $('#view_fecha_emitido').text() || '-';
            const tipoDoc = $('#view_tipo_doc').text() || '-';
            const transcrito = $('#view_transcrito').text() || '-';
            const fechaRecibido = $('#view_fecha_recibido').text() || '-';
            const cargo = $('#view_cargo').text() || '-';
            const destinatario = $('#view_destinatario').text() || '-';
            const asunto = $('#view_asunto').text() || '-';
            const atencion = $('#view_atencion').text() || '-';
            const instruido = $('#view_instruido').html() || '-'; // Preserve HTML
            const observaciones = $('#view_observaciones').text() || '-';

            // Define print-specific styles
            const styles = `
                <style>
                    body {
                        font-family: Arial, sans-serif;
                        margin: 10mm;
                        padding: 0;
                        color: #343a40;
                        font-size: 10px;
                        line-height: 1.2;
                    }
                    .print-container {
                        width: 100%;
                        max-width: 190mm; /* A4 width minus margins */
                        margin: 0 auto;
                    }
                    .document-header {
                        text-align: center;
                        border-bottom: 2px solid #007bff;
                        padding-bottom: 5mm;
                        margin-bottom: 5mm;
                    }
                    .document-header h1 {
                        font-size: 16px;
                        margin: 0;
                        color: #007bff;
                    }
                    .document-header p {
                        font-size: 10px;
                        color: #6c757d;
                        margin: 2px 0 0;
                    }
                    .document-table {
                        width: 100%;
                        border-collapse: collapse;
                        margin-bottom: 5mm;
                    }
                    .document-table th, .document-table td {
                        border: 1px solid #dee2e6;
                        padding: 3mm;
                        vertical-align: top;
                    }
                    .document-table th {
                        background: #007bff;
                        color: white;
                        font-weight: bold;
                        font-size: 10px;
                        text-align: left;
                    }
                    .document-table td.label {
                        width: 30%;
                        font-weight: 600;
                        background: #f8f9fa;
                        font-size: 10px;
                    }
                    .document-table td.value {
                        width: 70%;
                        font-size: 10px;
                    }
                    .document-table td.full-width {
                        font-size: 10px;
                        background: #f8f9fa;
                    }
                    .instruido-content {
                        min-height: 30mm;
                        max-height: 100mm;
                        overflow: hidden;
                        word-wrap: break-word;
                    }
                    .footer {
                        text-align: center;
                        font-size: 8px;
                        color: #6c757d;
                        margin-top: 5mm;
                        border-top: 1px solid #dee2e6;
                        padding-top: 2mm;
                    }
                    @page {
                        size: A4;
                        margin: 10mm;
                    }
                    @media print {
                        body {
                            margin: 0;
                            padding: 10mm;
                        }
                        .print-container {
                            page-break-after: avoid;
                        }
                        .document-table {
                            page-break-inside: auto;
                        }
                        .document-table tr {
                            page-break-inside: avoid;
                            page-break-after: auto;
                        }
                    }
                </style>
            `;

            // Generate table-based HTML content
            const content = `
                <div class="print-container">
                    <div class="document-header">
                        <h1>${docType}</h1>
                        <p>Documento Generado el ${moment().format('DD-MM-YYYY HH:mm')}</p>
                    </div>
                    <table class="document-table">
                        <thead>
                            <tr>
                                <th colspan="2">Información del Documento</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="label">Fecha de Emisión</td>
                                <td class="value">${fechaEmitido}</td>
                            </tr>
                            <tr>
                                <td class="label">Tipo de Documento</td>
                                <td class="value">${tipoDoc}</td>
                            </tr>
                            <tr>
                                <td class="label">Transcrito por</td>
                                <td class="value">${transcrito}</td>
                            </tr>
                            <tr>
                                <td class="label">Fecha Recibido</td>
                                <td class="value">${fechaRecibido}</td>
                            </tr>
                        </tbody>
                    </table>
                    <table class="document-table">
                        <thead>
                            <tr>
                                <th colspan="2">Destinatario</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="label">Cargo</td>
                                <td class="value">${cargo}</td>
                            </tr>
                            <tr>
                                <td class="label">Destinatario</td>
                                <td class="value">${destinatario}</td>
                            </tr>
                        </tbody>
                    </table>
                    <table class="document-table">
                        <thead>
                            <tr>
                                <th colspan="2">Contenido</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="label">Asunto</td>
                                <td class="value">${asunto}</td>
                            </tr>
                            <tr>
                                <td class="label">Atención Relacionada</td>
                                <td class="value">${atencion}</td>
                            </tr>
                            <tr>
                                <td class="label">Instrucciones</td>
                                <td class="value">
                                    <div class="instruido-content">${instruido}</div>
                                </td>
                            </tr>
                            <tr>
                                <td class="label">Observaciones</td>
                                <td class="value">${observaciones}</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="footer">
                        <p>Generado por el Sistema de Gestión de Documentos</p>
                        <p>Página 1 de 1</p>
                    </div>
                </div>
            `;

            // Write content to print window
            printWindow.document.write(`
                <html>
                    <head>
                        <title>Imprimir ${docType}</title>
                        ${styles}
                    </head>
                    <body>
                        ${content}
                    </body>
                </html>
            `);
            printWindow.document.close();
            printWindow.focus();
            printWindow.print();
            printWindow.close();
        });

        $(document).on("click", ".select-atencion", function (e) {
            var id = $(this).attr('data-id'),
                atencion = $(this).attr('data-atencion');
                $("#id_atenciones").val(id);
                $("#atencion").val(atencion);
                $("#list-atenciones").modal('hide');
        })



        // Función auxiliar para generar el HTML de una fila
        function generarFilaDocumento(doc) {
            return `
                <tr>
                    <td class="text-center">${doc.correlativo}</td>
                    <td class="text-center">${doc.tipo_doc}</td>
                    <td class="text-center">${moment(doc.fecha_emitido).utc().format('DD-MM-YYYY')}</td>
                    <td class="text-center">${(doc.destinatario) ? doc.cargo + ' ' + doc.destinatario : '<i>Sin Destinatario</i>'}</td>
                    <td class="text-center">${doc.asunto}</td>
                    <td class="text-center">${doc.status == 0 ? '<i class="far fa-check-circle"></i>' : 'Sin Efecto'}</td>
                    <td class="text-center">
                        <button type="button" class="detalle btn btn-sm bg-gradient-navy details" data-id="${doc.id}">
                            <i class="fas fa-info-circle"></i>
                        </button>
                        <button type="button" class="btn btn-sm bg-gradient-navy edit" data-id="${doc.id}">
                            <i class="fas fa-edit"></i>
                        </button>
                    </td>
                </tr>
            `;
        }

        // Función para inicializar o actualizar DataTable
        function actualizarDataTable(selector, datos) {
            const table = $(selector).DataTable();
            table.clear(); // Limpia las filas existentes
            datos.forEach(doc => table.row.add($(generarFilaDocumento(doc))));
            table.draw(); // Redibuja la tabla con los nuevos datos
        }


        // Función principal con async/await
        async function listaDocumentos() {
            try {
                const response = await fetch('api/notas_oficios/list/all', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });

                if (!response.ok) {
                    throw new Error(`Error en la consulta: ${response.status} - ${response.statusText}`);
                }

                const data = await response.json();
                console.log(data);

                // Separar documentos por tipo
                const oficios = data.data.filter(doc => doc.tipo_doc === 'OFICIO');
                const notas = data.data.filter(doc => doc.tipo_doc === 'NOTA DE ENTREGA');

                // Actualizar las tablas
                actualizarDataTable('.table-ofico', oficios);
                actualizarDataTable('.table-nota', notas);

            } catch (error) {
                console.error('Error:', error);
                // Opcional: Mostrar un mensaje al usuario
                alert('Ocurrió un error al cargar los documentos. Por favor, intenta de nuevo.');
            }
        }
            
        $('.table-ofico, .table-nota').DataTable(t);



        // Form Validation
        const form = $('#form-add');
        const submitBtn = $('#btn-submit');
        const fields = {
            fecha_emitido: { required: true, message: 'Seleccione una fecha de emisión.' },
            tipo_doc: { required: true, message: 'Seleccione un tipo de documento.' },
            cargo: { required: true, message: 'Ingrese el cargo del destinatario.' },
            destinatario: { required: true, message: 'Ingrese el nombre del destinatario.' },
            asunto: { required: true, message: 'Ingrese el asunto del documento.' }
        };

        function validateForm() {
            let isValid = true;
            $.each(fields, function(id, field) {
                const input = $(`#${id}`);
                const error = $(`#${id}_error`);
                if (field.required && !input.val().trim()) {
                    error.text(field.message);
                    input.addClass('is-invalid');
                    isValid = false;
                } else {
                    error.text('');
                    input.removeClass('is-invalid');
                }
            });
            submitBtn.prop('disabled', !isValid);
            return isValid;
        }

        // Real-time validation
        $.each(fields, function(id) {
            $(`#${id}`).on('input change', validateForm);
        });

        

        // Initialize form validation
        validateForm();

        // Auto-open modal for demo (remove in production)
        $('#addDocumentModal').modal('show');

        

           

    
    
    });
</script>



@endsection