@extends('adminlte::page')


@section('title', 'Listado Ticket - Insertbog')


@section('content_header')
<div></div>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.2/main.js" integrity="sha256-3YcmbVFydbcbP+ax1x6VxV1swYap/YsD/+RFVqSGqxk=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.2/main.css" integrity="sha256-jLWPhwkAHq1rpueZOKALBno3eKP3m4IMB131kGhAlRQ=" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
@stop

@section('content')
<section>
    <form action="{{route ('ticket.store')}}" method="POST" id="formTicket" novalidate>
        @csrf
        <div class="card-body">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-success">
                        <div class="card-header">
                            <h3 class="card-title">Datos del Assets</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="form-label" for="assets">Assets</label>
                                    <select id="" class="form-select form-select-lg mb-3 selectAsset" size="1" name="asset">
                                        <option></option>
                                        @foreach($assets as $asset)
                                        <option value="{{ $asset[ 'modelo'] }}: {{ $asset[ 'serial'] }}">{{ $asset[ 'proveedor'] }} | {{ $asset[ 'cliente'] }} | {{ $asset[ 'modelo'] }}: {{ $asset[ 'serial'] }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label" for="fechaIncidente">Fecha Incidente</label>
                                    <input class="form-control" type="date" value="" id="fechaIncidente" name="fechaIncidente">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label" for="solicitadoPor">Solicitado por</label>
                                    <input class="form-control" type="text" value="{{ auth()->user()->name }}" id="solicitadoPor" name="solicitadoPor">
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="falloAsset" name="falloAsset" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                                    <label class="form-check-label" for="falloAsset">
                                        ¿Fallo el Activo?
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Datos de la Falla --->
                <div class="col-md-12  collapse" id="collapseExample">
                    <div class=" card card-danger">
                        <div class="card-header">
                            <h3 class="card-title">Datos de la Falla</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="form-label" for="tipoFalla">Tipo de la falla</label>
                                    <input class="form-control" type="text" value="" id="tipoFalla" name="tipoFalla">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label" for="causaFalla">Causa de la Falla</label>
                                    <input class="form-control" type="text" value="" id="causaFalla" name="causaFalla">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label" for="metodoDeteccionFalla">Metodo deteccion de Falla</label>
                                    <input class="form-control" type="text" value="" id="metodoDeteccionFalla" name="metodoDeteccionFalla">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label" for="severidadFalla">Severidad de Falla</label>
                                    <input class="form-control" type="text" value="" id="severidadFalla" name="severidadFalla">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label" for="dañoCausado">Daños Causados</label>
                                    <input class="form-control" type="text" value="" id="dañoCausado" name="dañoCausado">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label" for="tiempoInterrupcion">Tiempo de Interrupción</label>
                                    <input class="form-control" type="time" value="" id="tiempoInterrupcion" name="tiempoInterrupcion">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label" for="fechaInicioFalla">Fecha Inicio de Falla</label>
                                    <input class="form-control" type="date" value="" id="fechaInicioFalla" name="fechaInicioFalla">
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" id="fueraService" type="checkbox" value="" data-bs-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample1">
                                    <label class="form-check-label" for="fueraService">
                                        ¿Activo fuera de Servicio?
                                    </label>
                                </div>
                                <div class="collapse" id="collapseExample1">
                                    <div class="row">
                                        <div class="col-md-2">
                                            <label class="form-label" for="desdeCuando">Desde Cuando?</label>
                                            <input class="form-control" type="datetime-local" value="" id="desdeCuando" name="desdeCuando">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /Datos de la Falla --->
                <!-- Detalles de la Tarea --->
                <div class="col-md-12">
                    <div class=" card card-success">
                        <div class="card-header">
                            <h3 class="card-title">Datos de la Tarea</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <label class="form-label" for="descripcionTarea">Descripción de Tarea</label>
                                    <input class="form-control" type="text" value="" id="descripcionTarea" name="descripcionTarea">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label" for="nota">Nota</label>
                                    <input class="form-control" type="text" value="" id="nota" name="nota">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label" for="tipoTarea">Tipo de Tarea</label>
                                    <select id="selectTipoTarea" class="form-select" name="tipoTarea" id="tipoTarea">
                                        <option></option>
                                        <option value="Diagnostico">Diagnostico</option>
                                        <option value="Reparación">Reparación</option>
                                        <option value="Procedimientos Generales">Procedimientos Generales</option>
                                        <option value="Instalación">Instalación</option>
                                        <option value="Capacitación">Capacitación</option>
                                        <option value="Desinstalación">Desinstalación</option>
                                        <option value="Preventivo Incubadora">Preventivo Incubadora</option>
                                        <option value="Preventivo Stellant">Preventivo Stellant</option>
                                        <option value="Preventivo Spectris">Preventivo Spectris</option>
                                        <option value="Preventivo Intego">Preventivo Intego</option>
                                        <option value="Preventivo Veris">Preventivo Veris</option>
                                        <option value="Preventivo VisuaStim">Preventivo VisuaStim</option>
                                        <option value="Preventivo Maglife">Preventivo Maglife</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label" for="prioridad">Prioridad</label>
                                    <select class="form-select" name="prioridad" id="">
                                        <option value="Muy Baja">Muy Baja</option>
                                        <option value="Baja">Baja</option>
                                        <option value="Media">Media</option>
                                        <option value="Alta">Alta</option>
                                        <option value="Muy Alta">Muy Alta</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label" for="duracionEstimada">Duración Estimada</label>
                                    <input class="form-control" type="time" value="" id="duracionEstimada" name="duracionEstimada">
                                </div>
                                <div class="col-md-10">
                                    <label class="form-label" for="responsable">Responsable</label>
                                    <select class="form-select" name="responsable" id="responsable" required>
                                        <option></option>
                                        @foreach($user as $user)
                                        <option value="{{ $user[ 'name'] }}">{{ $user[ 'name'] }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label" for="statusTicket">Tipo de Proceso</label>
                                    <select class="form-select" name="statusTicket" id="" required>
                                        <option value="En Proceso">En Proceso</option>
                                        <option value="Tarea Pendiente">Tarea Pendiente</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label" for="fechaProgramada">Fecha Programada</label>
                                    <input class="form-control" type="datetime-local" value="" id="fechaProgramada" name="fechaProgramada">
                                </div>
                                <div class="col-md-2">
                                    <input class="form-check-input" type="checkbox" value="En Proceso" id="ticketEnProceso">
                                    <label class="form-check-label" for="ticketEnProceso">
                                        ¿Ticket En Proceso?
                                    </label>
                                </div>
                                <div class="col-md-12">
                                    <label class="form-label" for="subTareas">Sub Tareas</label>
                                    <select id="selectTipoTarea" class="form-select" name="subTarea" id="subTareas">
                                        <option></option>
                                        <option value="Diagnostico">Diagnostico</option>
                                        <option value="Reparación">Reparación</option>
                                        <option value="Instalación">Instalación</option>
                                        <option value="Capacitación">Capacitación</option>
                                        <option value="Desinstalación">Desinstalación</option>
                                    </select>
                                </div>
                                <div class="col-md-12">
                                    <label class="form-label" for="recursos">Recursos</label>
                                    <select class="form-select recursos" name="recursos" id="recursos">
                                        <option></option>
                                        @foreach($product as $product)
                                        <option value="{{ $product[ 'codigo'] }} | {{ $product[ 'descripcion'] }}">{{ $product[ 'codigo'] }} | {{ $product[ 'descripcion'] }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="trabajoRealizado" data-bs-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample2">
                                    <label class="form-check-label" for="trabajoRealizado">
                                        ¿Trabajo Realizado?
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Trabajo realizado --->
                <div class="col-md-12 collapse" id="collapseExample2">
                    <div class=" card card-success">
                        <div class="card-header">
                            <h3 class="card-title">Trabajo realizado.</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-2">
                                    <label class="form-label" for="fechaInicio">Fecha Inicio</label>
                                    <input class="form-control" type="date" value="" id="fechaInicio" name="fechaInicio">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label" for="fechaFinalizacion">Fecha Finalización</label>
                                    <input class="form-control" type="date" value="" id="fechaFinalizacion" name="fechaFinalizacion">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label" for="tiempoEjecucion">Tiempo Ejecución</label>
                                    <input class="form-control" type="time" value="" id="tiempoEjecucion" name="tiempoEjecucion">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label" for="ticketPadre">Ticket Padre</label>
                                    <select id="" class="form-select form-select-lg mb-3 selectAsset" size="1" name="ticketPadre">
                                        <option></option>
                                        @foreach($ticket as $ticket)
                                        <option value="{{ $ticket[ 'id'] }}">{{ $ticket[ 'id'] }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /Trabajo realizado --->
            </div>
            <br>
        </div>
        <div class="row">
            <div class="col-md-12">
                <button type="submit" class="btn btn-outline-success" tabindex="25" data-bs-toggle="tooltip" data-bs-placement="top" title="Generar ticket"><i class="fas fa-save"></i> Generar ticket</button>
            </div>
        </div>

    </form>
    <form>
        <input type="submit" name="btnEnviar" value="Enviar" id="boton" />
    </form>

</section>
@stop

@section('css')

<link rel="stylesheet" href="/css/admin_custom.css">
<link rel="stylesheet" href="{{asset('vendor/jquery-ui/jquery-ui.min.css')}}">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https:////cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">

<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">

<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.4/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">


@stop

@section('js')

<script src="{{asset('vendor/jquery/jquery.min.js')}}"></script>
<script src="{{asset('vendor/jquery-ui/jquery-ui.min.js')}}"></script>
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>

<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>



<script>
    $(document).ready(function() {
        $('#ticket').DataTable({
            dom: 'Bfrtip',
            stateSave: true,
            "language": {
                "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Spanish.json"
            },
            "columnDefs": [{
                    "targets": [2],
                    "visible": true,
                    "searchable": true
                },
                {
                    "targets": [3],
                    "visible": true,
                    "searchable": true
                }
            ],
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]
        });
        $("#boton").click(function(event) {
            event.preventDefault();
            $("#boton").prop('disabled', true)

            return false;
        });
        $('.selectAsset').select2({
            placeholder: "Selecciona un Equipo",
            allowClear: true,
            height: '100%',
            width: '100%',
        });
        $('#recursos').select2({
            allowClear: true,
            tags: true, // Habilita la opción de etiquetas
            tokenSeparators: [',', ' '], // Define los caracteres que separan las etiquetas
            height: '100%',
            width: '100%',
        });
    });
</script>
@stop