@extends('adminlte::page')

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

@section('content_header')

@stop

@section('content')
<section class="content">
    <div class="container-fluid">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active btn-primary" id="me-tab" data-bs-toggle="tab" data-bs-target="#me-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true"><i class="fas fa-user"> Me </i></button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link btn-primary" id="all-tab" data-bs-toggle="tab" data-bs-target="#all-tab-pane" type="button" role="tab" aria-controls="all-tab-pane" aria-selected="false"> Todos </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link btn-primary" id="assigned-tab" data-bs-toggle="tab" data-bs-target="#assigned-tab-pane" type="button" role="tab" aria-controls="assigned-tab-pane" aria-selected="false"> Asignados </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link btn-primary" id="last-tab" data-bs-toggle="tab" data-bs-target="#last-tab-pane" type="button" role="tab" aria-controls="last-tab-pane" aria-selected="false"> Cerrados </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link btn-primary" id="ctc-tab" data-bs-toggle="tab" data-bs-target="#ctc-tab-pane" type="button" role="tab" aria-controls="ctc-tab-pane" aria-selected="false"> Control de ticket y cotizaciones </button>
            </li>
        </ul>
        <br>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="me-tab-pane" role="tabpanel" aria-labelledby="me-tab" tabindex="0">
                <!--Todos Los Ticket -->
                @include('ticket.navbar.me')
                <!-- /Todos Los Ticket -->
            </div>
            <div class="tab-pane fade" id="all-tab-pane" role="tabpanel" aria-labelledby="all-tab" tabindex="2">
                <!--Todos Los Ticket -->
                @include('ticket.navbar.allTicket')
                <!-- /Todos Los Ticket -->
            </div>
            <div class="tab-pane fade" id="assigned-tab-pane" role="tabpanel" aria-labelledby="assigned-tab" tabindex="2">
                <!--Todos Los Ticket -->
                @include('ticket.navbar.assignedTicket')
                <!-- /Todos Los Ticket -->
            </div>
            <div class="tab-pane fade" id="last-tab-pane" role="tabpanel" aria-labelledby="last-tab" tabindex="1">
                <!--Ultimos Cerrados -->
                @include('ticket.navbar.lastTicket')
                <!--Ultimos Cerrados -->
            </div>
            <div class="tab-pane fade" id="ctc-tab-pane" role="tabpanel" aria-labelledby="last-tab" tabindex="1">
                <!--CONTROL DE TICKET Y COTIZACIONES -->
                @include('ticket.navbar.ctc')
                <!--CONTROL DE TICKET Y COTIZACIONES -->
            </div>
        </div>
    </div>
</section>
<!-- Modal Tareas Pendientes-->
<div class="modal fade" id="TicketPending" tabindex="-1" aria-labelledby="controlTicketLabel" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="controlTicketLabel">Tareas Pendientes</h5>
                <p></b></p>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="card">
                        <div class="card-body">
                            <div class="col-md-12 overflow-auto">
                                <table id="" class="table table-hover table-ligth table-bordered mt-4 display" style="width:100%" data-page-length="25" data-order="[[ 1, &quot;dec&quot; ]]">
                                    <thead>
                                        <tr>
                                            <th scope="col">ID</th>
                                            <th scope="col">Fecha</th>
                                            <th scope="col">Tipo Tarea</th>
                                            <th scope="col">Asset - Cliente - OEM</th>
                                            <th scope="col">Repuesto</th>
                                            <th scope="col">Instalado</th>
                                            <th scope="col">Horas</th>
                                            <th scope="col">Cotización</th>
                                            <th scope="col">Enviada</th>
                                            <th scope="col">N° O/C</th>
                                            <th scope="col">Factura</th>
                                            <th scope="col">Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($statusTicketPending as $statusTicketPending)
                                        <tr>
                                            <td>{{ $statusTicketPending-> id}}</td>
                                            <td>{{ $statusTicketPending-> created_at}}</td>
                                            <td>{{ $statusTicketPending-> tipoTarea}}</td>
                                            <td>{{ $statusTicketPending-> asset}}</td>
                                            <td>{{ $statusTicketPending-> recursos}}</td>
                                            <td>{{ $statusTicketPending-> recursos}}</td>
                                            <td>{{ $statusTicketPending-> duracionEstimada}}</td>
                                            <td>{{ $statusTicketPending-> ticketPadre}}</td>
                                            <!--Colocar una nueva celda que se llame cotización-->
                                            <td>{{ $statusTicketPending-> ticketPadre}}</td>
                                            <!--Colocar una nueva celda que se llame cotización enviada-->
                                            <td>{{ $statusTicketPending-> ticketPadre}}</td>
                                            <!--Colocar una nueva celda que se llame OC-->
                                            <td>{{ $statusTicketPending-> ticketPadre}}</td>
                                            <!--Colocar una nueva celda que se llame FACTURA-->
                                            <td>

                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">

            </div>
        </div>
    </div>
</div>

<!-- Modal Equipos fuera de Servicio-->
<div class="modal fade" id="outService" tabindex="-1" aria-labelledby="controlTicketLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="controlTicketLabel">Equipos Fueras de Servicio</h5>
                <p></b></p>
            </div>
            <div class="modal-body">
                @foreach ($statusOutService as $statusOutService)
                <div class="card-body">
                    <div class="card card-danger card-outline  collapsed-card">
                        <div class="card-header">
                            <h5 class="card-title">{{ $statusOutService-> asset}} {{ $statusOutService-> serial}}</h5>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i>
                                </button>
                            </div>
                            <p class="card-text">ID: {{ $statusOutService-> id}}</p>
                            <p class="card-text">Equipo: {{ $statusOutService-> asset}}</p>
                            <p class="card-text">Fecha Programada: {{ $statusOutService-> cliente}}</p>
                            <p class="card-text">Estatus Equipo: {{ $statusOutService-> statusEquipo}}</p>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <b>Descripción Tarea:</b>
                                <p>{{ $statusOutService-> sucursal}}</p>
                                <p>{{ $statusOutService-> meses}}</p>
                                <p>{{ $statusOutService-> ubicacion}}</p>
                            </div>
                        </div>
                        <div class="card-footer text-muted">
                            <div class="card-tools">
                                <a href="{{ route('assets.show', $statusOutService->id ) }}" class="btn btn-primary btn-sm" data-bs-toggle="tooltip" data-bs-placement="top" title="Ver"><i class="far fa-eye"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            <div class="modal-footer">

            </div>
        </div>
    </div>
</div>

<!-- Modal control Ticket-->
<div class="modal fade" id="controlTicket" tabindex="-1" aria-labelledby="controlTicketLabel" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="controlTicketLabel">Ticket para su Revisión</h5>
                <p></b></p>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="card">
                        <div class="card-body">
                            <div class="col-md-12 overflow-auto">
                                <table id="" class="table table-hover table-ligth table-bordered mt-4 display" style="width:100%" data-page-length="25" data-order="[[ 1, &quot;dec&quot; ]]">
                                    <thead>
                                        <tr>
                                            <th scope="col">ID</th>
                                            <th scope="col">Fecha</th>
                                            <th scope="col">Tipo Tarea</th>
                                            <th scope="col">Asset - Cliente - OEM</th>
                                            <th scope="col">Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($statusTicketRevision as $statusTicketRevision)
                                        <tr>
                                            <td>{{ $statusTicketRevision-> id}}</td>
                                            <td>{{ $statusTicketRevision-> created_at}}</td>
                                            <td>{{ $statusTicketRevision-> tipoTarea}}</td>
                                            <td>{{ $statusTicketRevision-> asset}}</td>
                                            <td>
                                                <div class="btn-group" role="group">
                                                    <a href="{{ route('ticket.show', $statusTicketRevision->id ) }}" class="btn btn-outline-primary btn-md" title="Ver Ticket"><i class="far fa-eye"></i></a>
                                                </div>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">

            </div>
        </div>
    </div>
</div>

<!-- Modal ticket Abiertos-->
<div class="modal fade" id="ticketOpen" tabindex="-1" aria-labelledby="controlTicketLabel" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="controlTicketLabel">Control Ticket Abiertos</h5>
                <p></b></p>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="card">
                        <div class="card-body">
                            <div class="col-md-12 overflow-auto">
                                <table id="" class="table table-hover table-ligth table-bordered mt-4 display" style="width:100%" data-page-length="25" data-order="[[ 1, &quot;dec&quot; ]]">
                                    <thead>
                                        <tr>
                                            <th scope="col">Ticket</th>
                                            <th scope="col">Tipo Tarea</th>
                                            <th scope="col">Asset - Cliente - OEM</th>
                                            <th scope="col">Fecha Creacion</th>
                                            <th scope="col">Fecha Asistencia</th>
                                            <th scope="col">Dias de Atraso</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($ticketOpen as $ticketOpen)
                                        <tr>
                                            <td>{{ $ticketOpen-> id}}</td>
                                            <td>{{ $ticketOpen-> tipoTarea}}</td>
                                            <td>{{ $ticketOpen-> asset}}</td>
                                            <td>{{ $ticketOpen-> created_at}}</td>
                                            <td>{{ $ticketOpen-> fechaProgramada}}</td>
                                            <td>{{ $atraso = Carbon\Carbon::parse($ticketOpen['fechaProgramada'])->diffInDays(Carbon\Carbon::now()) }} dias </td>

                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">

            </div>
        </div>
    </div>
</div>



@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="{{asset('vendor/select2-bootstrap4-theme/select2-bootstrap4.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" href="https://cdn.jsdelivr.net/npm/bs-stepper/dist/css/bs-stepper.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 src="https://cdn.jsdelivr.net/npm/bs-stepper/dist/js/bs-stepper.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 src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

@if(session('delete') == 'ok')
<script>
    Swal.fire(
        '¡Eliminado!',
        'El registro se elimino con éxito.',
        'success'
    )
</script>
@endif
@if(session('En Proceso') == 'ok')
<script>
    Swal.fire(
        'Ticket Iniciado',
        'El ticket se inicio correctamente.',
        'success'
    )
</script>
@endif

<script>
    $(document).ready(function() {
        $('table.display').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: [
                'excel', 'pdf', 'print'
            ]
        });
        $('#selectAsset').select2({
            dropdownParent: $('#creatTicket'),
            placeholder: "Selecciona un Asset",
            allowClear: true,
            theme: "classic",
            width: '100%'
        });
        $('#searchTicket').autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "{{route('search.tickets')}}",
                    dateType: 'json',
                    data: {
                        term: request.term
                    },
                    success: function(data) {
                        response(data)
                    }
                });
            }
        });
    });
</script>

@stop