@extends('layouts.mainlayout')

@section('content')
    <div class="espacio"></div>
    <div class="app-container-section app-section-white pb-2">
        <p class="txt-azul">Contratos activos ( {{ !empty($contratos) ? count($contratos) : 0 }} )</p>
    </div>

    <div class="app-container-section app-section-white corredor-cards-contratos">
        {{-- Validamos si hay contratos para el usuario --}}

        @if (!empty($contratos))
            {{-- Acciones --}}
            <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>
            <style>
                .carousel-control-prev-icon,
                .carousel-control-next-icon {
                    background-color: #b1de25;
                    border-radius: 50%;
                    width: 40px;
                    height: 40px;
                    background-size: 60% 60%;
                    background-position: center;
                    background-repeat: no-repeat;
                    filter: none;
                }

                .carousel-indicators li {
                    background-color: #b1de25;
                }

                .carousel-indicators .active {
                    background-color: #b1de25;
                }

                #contratosCarrusel .carousel-item {
                    transition-duration: 1.2s;

                }

                /* Ocultar controles móviles en desktop */
                .carousel-controls-mobile {
                    display: none;
                }

                /* Mostrar controles móviles en pantallas pequeñas */
                @media (max-width: 767.98px) {
                    .carousel-controls-mobile {
                        display: block;
                    }
                }

                .direccion-text {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 100%;
                    display: block;
                }

                .header-box h6 {
                    min-height: 3em;
                    /* 2 líneas x 1.5em line-height */
                    line-height: 1.5em;
                    white-space: normal;
                    /* permite saltos de línea */
                }
            </style>
            <div class="contratos-carrusel mb-3">
                <div id="contratosCarrusel" class="carousel slide" data-ride="carousel" data-interval="4000">
                    <ol class="carousel-indicators">
                        @foreach ($contratos as $index => $contrato)
                            <li data-target="#contratosCarrusel" data-slide-to="{{ $index }}"
                                class="{{ $index == 0 ? 'active' : '' }}"></li>
                        @endforeach
                    </ol>
                    <div class="carousel-inner">
                        @foreach ($contratos as $index => $contrato)
                            <div class="carousel-item {{ $index == 0 ? 'active' : '' }}">
                                <div class="">
                                    <div class="row">
                                        <div class="col-md-8 col-sm-10 offset-sm-1 offset-md-2">
                                            <div class="box-card m-2">
                                                <!-- 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>

                                                <!-- Cabecera -->
                                                <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>

                                                <!-- Contenido -->
                                                <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 direccion-text">Dirección:
                                                                {{ $contrato->direccion }}
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- Footer -->
                                                <div class="links-box">
                                                    <form action="{{ route('contratos.pagar') }}" method="POST">
                                                        {{ csrf_field() }}
                                                        <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>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        <div class="espacio"></div>
                        <div class="espacio"></div>
                    </div>

                    <a class="carousel-control-prev d-none d-md-flex" href="#contratosCarrusel" role="button"
                        data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Anterior</span>
                    </a>
                    <a class="carousel-control-next d-none d-md-flex" href="#contratosCarrusel" role="button"
                        data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Siguiente</span>
                    </a>
                </div>

            </div>
            <div class="carousel-controls-mobile d-md-none text-center mt-3">
                <button class="btn  mr-2" id="mobilePrev"><span class="carousel-control-prev-icon"></span></button>
                <button class="btn " id="mobileNext"><span class="carousel-control-next-icon"></span></button>
            </div>
        @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>

    <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
    @if (!empty($error))
        <div class="floatMessageContainer" style="background: red; color: white">
            <div class="floatMessageText">
                <p>
                    {{ $error }}
                </p>
            </div>
        </div>
    @endif
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#mobilePrev').click(function() {
                $('#contratosCarrusel').carousel('prev');
            });
            $('#mobileNext').click(function() {
                $('#contratosCarrusel').carousel('next');
            });
        });
    </script>
@endpush