@extends('layouts.app')
@section('titulo','Plantillas de Contratos')
@section('content')
    
<!--img-fondo-admin-->
<div class="page-inner">
    <div class="page-header">
        <h4 class="page-title">Plantillas de Contratos</h4>
        <ul class="breadcrumbs">
            <li class="nav-home"><a href="{{ route('home') }}"><i class="flaticon-home"></i></a></li>
            {{-- <li class="separator"><i class="flaticon-right-arrow"></i></li>
            <li class="nav-item"><a href="javascript:void(0)">Base</a></li>
            <li class="separator"><i class="flaticon-right-arrow"></i></li>
            <li class="nav-item"><a href="javascript:void(0)">Line Awesome</a></li> --}}
        </ul>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">Plantillas de Contratos registradas</div>
                    <div class="card-category">Para generar los contratos se debe tener una plantilla <strong>ACTIVA</strong></div>
                </div>
                <div class="card-body">
                    <div id="row-demo-icon" class="row">
                    </div>
                    <div class="alert alert-info">
                        <strong>INSTRUCCIONES IMPORTANTES:</strong><br><br>

                        ✔ Las variables deben escribirse exactamente así:<br>
                        <code>${codigo_contrato}</code>
                        <code>${fecha_emision}</code>
                        <code>${nombre_completo}</code>
                        <code>${ci}</code>
                        <code>${cargo}</code>
                        <code>${unidad_organizacional}</code>
                        <code>${salario}</code>
                        <code>${vigencia_contrato}</code>
                        <code>${certificacion_poa}</code>
                        <code>${certificacion_presupuestaria}</code>
                        <code>${lugar}</code>
                        <code>${horario}</code> <br>

                        ⚠ Puede eliminar variables que no use.<br><br>
                        <strong>❌ No debe cambiar el nombre de las variables existentes.</strong><br>
                        <strong>❌ No debe modificar la sintaxis ${variable}.</strong><br>
                    </div>
                    <button class="btn btn-primary mb-2" data-bs-toggle="modal" data-bs-target="#modalPlantilla" id="btnNuevo">
                        Agregar Planilla
                    </button>
                    <table class="table table-hover table-sm" id="datos">
                        <thead>
                            <tr>
                                <th class="text-center">Acciones</th>
                                <th class="text-center">Nombre</th>
                                <th class="text-center">Versión</th>
                                <th class="text-center">Estado</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($plantillas as $plantilla)
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center justify-content-center">
                                        @if(!$plantilla->activa)
                                        <form method="POST" action="{{ route('plantillas.activar',$plantilla->id) }}">
                                            @csrf
                                            <button class="btn btn-success">Activar</button>
                                        </form>
                                        @endif
                                        <form method="POST" action="{{ route('plantillas.destroy',$plantilla->id) }}">
                                            @csrf
                                            @method('DELETE')
                                            <button type="button" class="btn btn-danger btn-eliminar">Eliminar</button>
                                        </form>
                                    </div>
                                </td>
                                <td>{{ $plantilla->nombre }}</td>
                                <td>V{{ $plantilla->version }}</td>
                                <td>
                                    @if($plantilla->activa)
                                        <span class="badge bg-success">Activa</span>
                                    @else
                                        <span class="badge bg-secondary">Inactiva</span>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@include('plantillas._modal_form')
@endsection
@section('scripts')
    <script src="{{ asset('assets/js/tablas/basica.js') }}"></script>
    <script>
        @if ($errors->any())
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    var modal = new bootstrap.Modal(document.getElementById('modalPlanilla'));
                    modal.show();
                });
            </script>
        @endif
        document.addEventListener('DOMContentLoaded', function(){
            document.querySelectorAll('.btn-eliminar').forEach(button => {
                button.addEventListener('click', function(){
                    let form = this.closest('form');
                    Swal.fire({
                        title: '¿Eliminar planilla?',
                        text: "Esta acción no se puede deshacer",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#d33',
                        cancelButtonColor: '#3085d6',
                        confirmButtonText: 'Sí, eliminar',
                        cancelButtonText: 'Cancelar'
                    }).then((result) => {
                        if(result.isConfirmed){
                            form.submit(); 
                        }
                    });
                });
            });
        });

        $('#btnNuevo').click(function () {
            $('#formPlanilla')[0].reset();
        });

        $(document).on('click', '.btnEditar', function () {
            let id = $(this).data('id');
            let url = $(this).data('url');
            $('.is-invalid').removeClass('is-invalid');
            $('.invalid-feedback').remove();
            $.get(url, function (data) {
                $('#persona_id').val(data.id); // id de personal_unidad
                $('#ci').val(data.ci);
                $('#ci_buscar').val(data.ci);
                $('#nombre_completo').val(data.nombre_completo);
                if(data.direccion && data.direccion.trim() !== ''){
                    $('#direccion')
                        .val(data.direccion)
                        .prop('readonly', true)
                        .attr('placeholder', '');
                } else {
                    $('#direccion')
                        .val(data.unidad.direccion)
                        .prop('readonly', false)
                        .attr('placeholder', 'Ingrese la dirección')
                        .focus();
                }
                if(data.numero_telefono && data.numero_telefono.trim() !== ''){
                $('#numero_telefono')
                    .val(data.numero_telefono)
                    .prop('readonly', true)
                    .attr('placeholder', '');
                } else {
                    $('#numero_telefono')
                        .val(data.unidad.numero_telefono)
                        .prop('readonly', false)
                        .attr('placeholder', 'Ingrese la dirección')
                        .focus();
                }
                $('#cargo').val(data.unidad.cargo);
                $('#gerencia').val(data.unidad.gerencia);
                $('#unidad_organizacional').val(data.unidad.unidad_organizacional);

                $('#nuri_informe').val(data.unidad.nuri_informe);
                $('#lugar').val(data.unidad.lugar);
                $('#horario').val(data.unidad.horario);

                $('#modalPersona').modal('show');
            });

        });
    </script>
@endsection