@extends('layouts.mainlayout')
@section('content')

<style>
    .border-width-4 {
  border-width: 4px !important;
}
.overflow-x-hidden {
  overflow-x: hidden;  
}
.h-100vh {
  height: 100vh;
}
.z-index-1 {
  z-index: 1;
}
.z-index-2 {
  z-index: 2;
}
.opacity-05 {
  opacity: 0.5;
}
.delay-01s {
  animation-delay: 0.2s;
}
.delay-02s {
  animation-delay: 0.4s;
}
.delay-03s {
  animation-delay: 0.6s;
}
.delay-04s {
  animation-delay: 0.8s;
}
.delay-05s {
  animation-delay: 1s;
}
    #resultados_busqueda {
        display: none;
        background: #4fbed4;
        font-size: 14px;
        list-style-type: none;
        position: absolute;
        z-index: 18;
        padding: 10px 30px;
        border-radius: 10px;
        max-height: 300px;
        overflow-y: scroll;
    }

    #resultados_busqueda li {
        cursor: pointer;
        padding: 2px;
        border-bottom: 1px solid #fdfdfd;
        color: white;
    }

    #resultados_busqueda li:hover {
        color: greenyellow;
    }
</style>
<div class="contratos">
    @if (!empty($contratos))
    <div class="swiper">
        <div class="d-flex justify-content-between">
            <div class="form-group d-flex align-items-center">
                Buscar: <input id="busqueda" placeholder="Cliente / Nombre" style="width: 290px;"
                    class="ml-3 form-control form-control-sm" type="text">
            </div>
            <p class="text-right">
                {{-- Se deshabilita el botón de múltiples pagos --}}
                <a class="btn btn-sm btn-primary" href="{{url('contratos/pago-multiple')}}">
                    <span class="icon-i-documento-2"></span>
                    Pago múltiple
                </a>
                <a class="btn btn-sm btn-secondary" href="" data-toggle="modal" data-target="#nuevocontratoModal">
                    <span class="icon-i-documento-1"></span>
                    Agregar contrato
                </a>
            </p>
        </div>
        <div id="resultados_busqueda"></div>


        <div class="swiper-wrapper">
            <!-- Slides -->

            @foreach ($contratos as $contrato)
            <div class="swiper-slide">
                <div class="box-card">
                    <!-- Menú auxiliar -->

                    <div class="in-menu-cta"></div>
                    <div class="in-menu-cta_menu">
                        <ul class="in-menu_links">
                            <li>
                                <a class="txt-azul-fuerte"
                                    href="{{route('contratos.destroy', ['contrato' => encrypt($contrato->id_contrato)])}}">
                                    Eliminar Contrato
                                </a>
                            </li>
                            <li>
                                <a class="txt-azul-fuerte"
                                    href="{{route('facturas.list', ['cliente' => encrypt($contrato->cliente)])}}">Facturas</a>
                            </li>
                            <li>
                                <a class="txt-azul-fuerte"
                                    href="{{route('contratos.edocuenta', ['cliente' =>encrypt($contrato->cliente)])}}">
                                    Estado de cuenta
                                </a>
                            </li>
                            <li>
                                <a class="txt-azul-fuerte"
                                    href="{{route('contratos.medidores', ['cliente' => encrypt($contrato->cliente)])}}">Consultar
                                    consumo</a>
                            </li>
                        </ul>
                    </div>
                    <!-- Menú auxiliar -->
                    <div class="header-box">
                        <div class="row no-gutters">
                            <div class="col-md-auto col-1"><span
                                    class="icon-i-circulo-usuario txt-azul medium-icon"></span>
                            </div>
                            <div class="col col-10 pl-3 pt-2">
                                <h6>{{$contrato->nombre}}</h6>
                            </div>
                        </div>
                    </div>
                    <div class="content-box">
                        <div class="row justify-content-between">
                            <div class="col-md-4 col-12">
                                <p class="txt-verde">Cliente: <strong>{{$contrato->cliente}}</strong></p>
                            </div>
                            <div class="col-md-4 col-12">
                                <p>Uso: <strong> {{$contrato->uso}}</strong></p>
                            </div>
                            <div class="col-md-4 col-12">
                            <a href="{{route('contratos.historial', ['cliente' => encrypt($contrato->cliente)])}}"
                                        class="btn btn-inner-link"><span class="icon-i-documento-2"></span>
                                        Historial</a>
                            </div>
                            <div class="espacio-1"></div>
                            <div class="col-md-6 col-12">
                                <h6 class="txt-azul-fuerte"> <span>Saldo: </span><span
                                        class="icon-i-dinero bigIcon"></span><strong>
                                        $ {{number_format($contrato->sld,2)}}</strong> </h6>

                            </div>
                            <div class="col-md-6 col-12">
                                <p class="txt-naranja">Vence: <strong>{{$contrato->vencido}}</strong></p>
                            </div>
                            <div class="espacio-1"></div>
                            <div class="col-md-12">
                                <p class="txt-azul-fuerte">Dirección: <strong>{{$contrato->direccion}}</strong></p>
                            </div>
                        </div>
                    </div>
                    <div class="links-box">
                        
                        <div class="alert alert-warning mx-3 animated flipInX" role="alert">
                            Para realizar el pago son necesarios los campos <strong>correo</strong> y <strong>teléfono</strong> del tarjetahabiente.
                        </div>
                        
                        <form action="{{route('contratos.pagar')}}" method="POST">
                        {{ csrf_field() }}
                            <div class="row justify-content-between">
                                <div class="col-md-6 col-12">
                                    <div class="form-group d-flex align-items-center">
                                        Correo: <input id="email_tarjetahabiente" name="email_tarjetahabiente" placeholder="correo del tarjetahabiente" style="width: 290px;"
                                        class="ml-3 form-control form-control-sm" type="email" required>
                                        <small class="text-danger">{{$errors->first('email_tarjetahabiente') }}</small>
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="form-group d-flex align-items-center">
                                        Teléfono: <input id="phone_tarjetahabiente" name="phone_tarjetahabiente" placeholder="teléfono del tarjetahabiente" style="width: 290px;"
                                        class="ml-3 form-control form-control-sm" type="number" required>
                                        <small class="text-danger">{{$errors->first('phone_tarjetahabiente') }}</small>
                                    </div>
                                </div>
                            </div>
                            <div class="row justify-content-between">
                                <div class="col-md-6 col-12">
                                </div>
                                <div class="col-md-6 col-12">
                                
                                        <input type="hidden" name="cliente" value="{{$contrato->cliente}}">
                                        <input type="hidden" name="correo" value="{{session()->get('userdata')['correo']}}">
                                        <button class="btn btn-secondary btn-block" type="submit"><span
                                                class="icon-i-tarjeta"></span>
                                            Pagar</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="espacio"></div>
                    <div class="espacio"></div>
                </div>
            </div>

            @endforeach
        </div>
        <!-- If we need pagination -->
        @if (count($contratos) <15) <div class="swiper-pagination">
    </div>
    @endif

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<p class="text-right text-sm py-2">Contratos ( {{count($contratos)}} )</p>
@else

<div class="row">
    <div class="col-md-12 section-header">
        <h2>
            <span class="icon-i-documento-1"></span>Registra un contrato
        </h2>
    </div>
</div>
<p>Para poder hacer uso de todos las herramientas que nuestro sistema le brinda,
    debe vincular su(s) contrato(s) a su cuenta. Para poder realizar este proceso es necesario que tenga a la
    mano un recibo
    de agua identifique el código NIA impreso en el.</p>
<div class="container col-8">

    <form action="{{route('contratos.store')}}" method="POST">
        {{ csrf_field() }}
        <div class="form-group">
            <label for="nia">Contrato</label>
            <input type="text" class="form-control form-control-sm" id="nia" name="nia" required="required"
                placeholder="NIA">

        </div>
        <button type="submit" class="btn btn-dark btn-sm">Registrar contrato</button>
    </form>
</div>
@endif
</div>
<!-- Modal -->
<div class="modal fade" id="nuevocontratoModal" tabindex="-1" role="dialog" aria-labelledby="nuevocontratoModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="nuevocontratoModalLabel">Agrega un nuevo contrato</h6>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="{{route('contratos.store')}}" method="POST">
                    {{ csrf_field() }}
                    <div class="form-group">
                        <label for="nia">Contrato</label>
                        <input type="text" class="form-control form-control-sm" id="nia" name="nia" required="required"
                            placeholder="NIA">

                    </div>
                    <button type="submit" class="btn btn-dark btn-sm">Registrar contrato</button>
                </form>
                <div class="box-desplegable">
                    <h4 class="encabezado-box-desplegable bg-azul thisclose">
                        ¿Cuál es mi NIA?
                    </h4>
                    <div class="contenido-box-desplegable" style="display: none">
                        <img style="width: 100%" src="assets/img/nia.png" alt="NIA Oficina Virtual">
                    </div>
                </div>
            </div>



        </div>
    </div>
</div>
@endsection
@section('alertas')
@if (session()->has('message'))
<div class="floatMessageContainer box-info-destacada verde">
    <div class="floatMessageText">
        <p>
            {{ session()->get('message') }}
        </p>
    </div>
</div>
@endif
@if (session()->has('error'))
<div class="floatMessageContainer" style="background: red; color: white">
    <div class="floatMessageText">
        <p>
            {{ session()->get('error') }}
        </p>
    </div>
</div>
@endif
@endsection

@push('scripts')
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<script>
    let contratos = null;
    let inputbusqueda = document.querySelector('#busqueda');
    let resultados_busqueda = document.querySelector('#resultados_busqueda');
    let indexB = [];
    inputbusqueda.addEventListener('keyup', ev => {
        let busqueda = ev.target.value;
        results = buscarContrato(busqueda);
        let html = "";
        if(results != null){
            resultados_busqueda.style.display = "block";
            if(results.length > 0){
                results.map(contrato => {
                html+= `
                <li>
                    <a onclick="recorreslide('${contrato.cliente}')">${contrato.nombre} | Cliente:  ${contrato.cliente}</a>
                </li>
                `;
                })
            } else{
                html += '<li>No se encontraron resultados</li>';
            }
        } else {
            resultados_busqueda.style.display = "none";
        }
        resultados_busqueda.innerHTML = html;
       
    })
    function recorreslide(cliente){
        indice = contratos.findIndex(el => el.cliente === cliente);
        irAlContrato(indice);
        results = null;
        resultados_busqueda.style.display = "none";
    }
    function buscarContrato(busqueda){
        if (busqueda === "") {
            return null;
        } else {
            results = contratos.filter((contrato) =>
                    contrato.nombre.toLowerCase().includes(busqueda.toLowerCase()) ||
                    contrato.cliente.toLowerCase().includes(busqueda.toLowerCase())
            );
            return results;
        }        
    }

    function irAlContrato(index){
        mySwiper.slideTo(index, 500, false);
        inputbusqueda.value = "";
    }

    var mySwiper = new Swiper('.swiper', {
    // loop: true,
    slidesPerView: 1,
    spaceBetween: 30,
    // If we need pagination
    pagination: {
    el: '.swiper-pagination',
    clickable: true,
    },
    // Navigation arrows
    navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
    },
    
    
    })
    document.querySelector(".swiper-wrapper").addEventListener('click', function(e) {
    var anchor = e.target.closest('a');
    if(anchor !== null) {
    $(".spinner-box").fadeIn(1000)
    }
    }, false);
        
</script>
@endpush