@extends('layouts.panel')

@section('header')
    <div class="content-header-left col-md-9 col-12 mb-2">
        <div class="row breadcrumbs-top">
            <div class="col-12">
                <h2 class="content-header-title float-start mb-0">Lista impresoras</h2>
                <div class="breadcrumb-wrapper">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('menu-principal.index') }}">Menu Principal</a>
                        </li>
                        <li class="breadcrumb-item"><a href="{{ route('impresoras.index') }}">impresoras</a>
                        </li>
                        <li class="breadcrumb-item active">Lista
                        </li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="content-header-right text-md-end col-md-3 col-12 d-md-block d-none">
        <div class="mb-1 breadcrumb-right">
            <div class="dropdown">
                <button
                    class="btn-icon btn btn-primary btn-round btn-sm dropdown-toggle waves-effect waves-float waves-light"
                    type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg
                        xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="feather feather-grid">
                        <rect x="3" y="3" width="7" height="7"></rect>
                        <rect x="14" y="3" width="7" height="7"></rect>
                        <rect x="14" y="14" width="7" height="7"></rect>
                        <rect x="3" y="14" width="7" height="7"></rect>
                    </svg></button>
                <div class="dropdown-menu dropdown-menu-end"><a class="dropdown-item" href="app-todo.html"><svg
                            xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="feather feather-check-square me-1">
                            <polyline points="9 11 12 14 22 4"></polyline>
                            <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                        </svg><span class="align-middle">Todo</span></a><a class="dropdown-item" href="app-chat.html"><svg
                            xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="feather feather-message-square me-1">
                            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                        </svg><span class="align-middle">Chat</span></a><a class="dropdown-item" href="app-email.html"><svg
                            xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="feather feather-mail me-1">
                            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                            <polyline points="22,6 12,13 2,6"></polyline>
                        </svg><span class="align-middle">Email</span></a><a class="dropdown-item"
                        href="app-calendar.html"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="feather feather-calendar me-1">
                            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                            <line x1="16" y1="2" x2="16" y2="6"></line>
                            <line x1="8" y1="2" x2="8" y2="6"></line>
                            <line x1="3" y1="10" x2="21" y2="10"></line>
                        </svg><span class="align-middle">Calendar</span></a></div>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <section id="basic-datatable">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header border-bottom p-1">
                        <div class="head-label">
                            <h6 class="mb-0">Lista de impresoras</h6>
                        </div>
                        <div class="dt-action-buttons text-end">
                            
                            <div class="dt-buttons d-inline-flex">
                               


                                @can('impresoras.create')
                                    <button class="btn btn-primary btn-toggle-sidebar w-100" data-bs-toggle="modal"
                                        data-bs-target="#addEvent"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                            height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                            class="feather feather-plus me-50 font-small-4">
                                            <line x1="12" y1="5" x2="12" y2="19">
                                            </line>
                                            <line x1="5" y1="12" x2="19" y2="12">
                                            </line>
                                        </svg>
                                        <span class="align-middle">Registrar impresoras</span>
                                    </button>
                                @endcan

                            </div>


                        </div>
                    </div>
                    <div class="card-body">

                        <form id="search-form" class="mb-3">

                            <div class="input-group">

                                
                                <input type="text" name="search" id="search-input" class="form-control"
                                    placeholder="Buscar por nombre de la impresora">
                                <button type="submit" class="btn btn-primary">Buscar</button>
                            </div>
                        </form>
                        <table id="result-table" class="table table-responsive  datatables-basic dtr-column collapsed ">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>IP USUARIO</th>

                                    <th>Nombre</th>
                                  

                                    <th>Estado</th>
                                    <th>Acciones</th>
                                    <th></th>


                                </tr>
                            </thead>
                            <tbody id="result-table">

                                @foreach ($impresoras as $impresora)
                                    <tr>
                                        <td>
                                            

                                            <a href="#" class="btn btn-primary btn-sm">
                                                {{ $impresora->id }}
                                            </a>
                                        </td>

                                        
                                        <td> {{ $impresora->ip_usuario }}</td>
                                        <td> {{ $impresora->nombre }}</td>


                                        <td>
                                            <button
                                                class="btn {{ $impresora->estado == '1' ? 'btn-success' : 'btn-danger' }}">
                                                {{ $impresora->estado == '1' ? 'Habilitado' : 'Deshabilitado' }}

                                            </button>
                                        </td>

                                        <td>

                                            <form action="{{ route('impresoras.destroy', $impresora) }}" method="POST"
                                                class="desactivar">
                                                @csrf
                                                @method('DELETE')


                                                @can('impresoras.edit')
                                                    <a href="#" class="btn btn-primary dt-button create-new"
                                                        data-bs-toggle="modal" data-bs-target="#editEvent"
                                                        data-id="{{ $impresora->id }}" data-nombre="{{ $impresora->nombre }}"
                                                        data-ip="{{ $impresora->ip_usuario }}"
                                                       >
                                                        <i data-feather='edit'></i>

                                                    </a>
                                                @endcan

                                                @can('impresoras.destroy')
                                                    <button type="submit"
                                                        class="btn btn-danger {{ $impresora->estado == '2' ? 'disabled' : '' }}">
                                                        <i data-feather='trash-2'></i>
                                                    </button>
                                                @endcan



                                            </form>


                                        </td>
                                        <td class="text-center">
                                            <ul class="table-controls">
                                                <form action="{{ route('impresoras.activar', $impresora) }}" method="POST"
                                                    class="activar">
                                                    @csrf
                                                    @method('POST')
                                                    @can('impresoras.destroy')
                                                        <button type="submit"
                                                            class="btn btn-success {{ $impresora->estado == '1' ? 'disabled' : '' }}"
                                                            style="">Habilitar</button>
                                                    @endcan


                                                </form>
                                            </ul>
                                        </td>


                                    </tr>
                                @endforeach


                            </tbody>
                        </table>

                        <div class="row">

                            <div class="col-md-6 mt-1">

                                <div id="result-info" class="dataTables_info">
                                    Mostrando {{ $impresoras->firstItem() }} a {{ $impresoras->lastItem() }} de
                                    {{ $impresoras->total() }} registros
                                </div>



                            </div>


                            <div class="col-md-6 mt-1">
                                <div id="result-pagination" class="dataTables_paginate">
                                    <ul class="pagination justify-content-end">
                                        <li class="page-item {{ $impresoras->previousPageUrl() ? '' : 'disabled' }}">
                                            <a class="page-link" href="{{ $impresoras->previousPageUrl() }}">Anterior</a>
                                        </li>

                                        @if ($impresoras->currentPage() > 3)
                                            <li class="page-item">
                                                <a class="page-link" href="{{ $impresoras->url(1) }}">1</a>
                                            </li>
                                            @if ($impresoras->currentPage() > 4)
                                                <li class="page-item disabled">
                                                    <span class="page-link">...</span>
                                                </li>
                                            @endif
                                        @endif

                                        @foreach ($impresoras->getUrlRange(max($impresoras->currentPage() - 2, 1), min($impresoras->currentPage() + 2, $impresoras->lastPage())) as $page => $url)
                                            <li
                                                class="page-item {{ $page == $impresoras->currentPage() ? 'active' : '' }}">
                                                <a class="page-link" href="{{ $url }}">{{ $page }}</a>
                                            </li>
                                        @endforeach

                                        @if ($impresoras->currentPage() < $impresoras->lastPage() - 2)
                                            @if ($impresoras->currentPage() < $impresoras->lastPage() - 3)
                                                <li class="page-item disabled">
                                                    <span class="page-link">...</span>
                                                </li>
                                            @endif
                                            <li class="page-item">
                                                <a class="page-link"
                                                    href="{{ $impresoras->url($impresoras->lastPage()) }}">{{ $impresoras->lastPage() }}</a>
                                            </li>
                                        @endif

                                        <li class="page-item {{ $impresoras->nextPageUrl() ? '' : 'disabled' }}">
                                            <a class="page-link" href="{{ $impresoras->nextPageUrl() }}">Siguiente</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>


                        </div>

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

        @can('impresoras.create')
            <div class="modal fade" id="addEvent" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-centered modal-add-event">
                    <div class="modal-content">
                        <div class="modal-header bg-transparent">
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body pb-5 px-sm-5 pt-50">
                            <div class="text-center mb-2">
                                <h1 class="mb-1">Registrar Impresora</h1>
                                <p></p>
                            </div>


                            <form id="editAddForm" class="row gy-1 pt-75 formguardar"
                                action="{{ route('impresoras.store') }}" method="POST">

                                @csrf


                                <div class="col-md-12">
                                    <div class="row">

                                        <div class="col-md-12 mt-1">
                                            <label for="" class="form-label">Nombre</label>
                                            <input type="text" class="form-control" name="nombre" required>
                                        </div>

                                        <div class="col-md-12 mt-1">
                                            <label for="" class="form-label">Ip Usuario</label>
                                            <input type="text" class="form-control" name="ip_usuario" required>
                                        </div>

                                       

                                      

                                       
                                    </div>



                                </div>

                                <div class="col-12 text-center mt-2 pt-50">
                                    <button type="submit" class="btn btn-primary me-1" id="btnguardar">Guardar</button>
                                    <button type="reset" class="btn btn-danger" data-bs-dismiss="modal"
                                        aria-label="Close">
                                        Cerrar
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        @endcan
        @can('impresoras.edit')
            @include('impresoras.modal')
        @endcan



        

    </section>
    <!--/ Basic table -->
@endsection

@section('scripts')
    <script>
        import Swal from 'sweetalert2';
    </script>


    <script>
        $(document).ready(function() {

            $('.dt-button.create-new').click(function() {


                var id = $(this).data('id');
                var nombre = $(this).data('nombre');
                var ip = $(this).data('ip');
          


                $('#edit_nombre').val(nombre)
                $('#edit_ip_usuario').val(ip)
               


                $('#editEvent').modal('show');
                var actionUrl = "{{ route('impresoras.update', ':id') }}";
                actionUrl = actionUrl.replace(':id', id);
                $('#editActividad').attr('action', actionUrl);

            })
        })
    </script>

    @if (session('guardar'))
        <script>
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 6000,
                timerProgressBar: true,

            })
            Toast.fire({
                icon: 'success',
                title: 'Se Guardo Satisfactoriamente!!'
            })
        </script>
    @endif
    @if (session('actualizar'))
        <script>
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,

            })
            Toast.fire({
                icon: 'success',
                title: 'Se Actualizo Satisfactoriamente!!'
            })
        </script>
    @endif
    @if (session('desactivar'))
        <script>
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,

            })
            Toast.fire({
                icon: 'success',
                title: 'Se Deshabilito Satisfactoriamente!!'
            })
        </script>
    @endif

    @if (session('activar'))
        <script>
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,

            })
            Toast.fire({
                icon: 'success',
                title: 'Se Habilito Satisfactoriamente!!'
            })
        </script>
    @endif
    <script>
        $('.activar').submit(function(e) {
            e.preventDefault()

            Swal.fire({
                title: 'Estas seguro de Habilitar?',
                text: "¡No podrás revertir esto!",
                icon: 'info',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Si, Habilitar!',
                cancelButtonText: 'Cancelar',
            }).then((result) => {
                if (result.value) {


                    this.submit()

                }
            })

        })
    </script>
    <script>
        $('.desactivar').submit(function(e) {
            e.preventDefault()

            Swal.fire({
                title: 'Estas seguro de Deshabilitar?',
                text: "¡No podrás revertir esto!",
                icon: 'info',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Si, Deshabilitar!',
                cancelButtonText: 'Cancelar',
            }).then((result) => {
                if (result.value) {


                    this.submit()

                }
            })

        })
    </script>

    <script>
        $('.formguardar').submit(function(e) {
            e.preventDefault()

            Swal.fire({
                title: 'Estas seguro de guardar?',
                text: "¡No podrás revertir esto!",
                icon: 'info',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Si, Guardar!',
                cancelButtonText: 'Cancelar',
            }).then((result) => {
                if (result.value) {


                    this.submit()

                }
            })

        })
    </script>

    <script>
        $('.formactualizar').submit(function(e) {
            e.preventDefault()

            Swal.fire({
                title: 'Estas seguro de actualizar?',
                text: "¡No podrás revertir esto!",
                icon: 'info',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Si, Actualizar!',
                cancelButtonText: 'Cancelar',
            }).then((result) => {
                if (result.value) {


                    this.submit()

                }
            })

        })
    </script>

   
@endsection