@extends('Templates.PlantillaFull', ['PaginaTitulo' => 'Clientes', 'PaginaUrl' => '/perfiles', 'Padre' => '1'])

{{-- @slot('titulo', 'Información del cliente - ' . $cliente->CLIE_NOMBRE . ' ' . $cliente->CLIE_APELLIDO) --}}

@section('Contenido')
    <div class="card">
        <div class="card-status-top bg-success"></div>
        <div class="card-body">
            <div class="row row-0">
                <div class="col-12">
                    <div class="row">
                        <div style="position: absolute; right: 1px">
                            <button data-bs-toggle="tooltip" title="Haga clic para regresar"
                                class="btn btn-transaparent float-end" style="position: relative; top: -10px; border: 0;"
                                onclick="history.back();">
                                <i class="fas fa-times fa-lg"></i>&nbsp;
                            </button>
                        </div>

                        {{-- <h3 class="col-12">Datos personales</h3> --}}
                        <div class="col-xl-2 col-md-2 col-sm-12 text-center">
                            <img src="{{ $cliente->CLIE_FOTO }}" style="height: 90px; width: 90px"
                                onerror="this.src = '/Images/defaultImage.png'">
                        </div>


                        <div class="col-12 col-md-2">
                            <div class="col-12 mb-2"><i class="fas fa-user" style="color: gray; font-size: 16px"></i>
                                &nbsp; {{ $cliente->CLIE_NOMBRE }}
                            </div>
                            <div class="col-12 mb-2"><i class="fas fa-map"
                                    style="color: gray; font-size: 16px"></i>&nbsp;
                                {{ $cliente->DEPA_NOMBRE }}, {{ $cliente->PAIS_ABREV }}
                            </div>
                            <div class="col-12"><i class="fas fa-phone" style="color: gray; font-size: 16px"></i>
                                &nbsp; {{ $cliente->CLIE_TEL }}
                            </div>
                        </div>

                        <div class="col-12 col-md-2">
                            <div class="col-12 mb-2">
                                <i class="fas fa-birthday-cake" style="color: gray; font-size: 16px"></i>&nbsp;
                                {{ calculaEdad($cliente->CLIE_FECHANAC) . ' años' }}
                            </div>
                            <div class="col-12 mb-2"><i class="fas fa-envelope"
                                    style="color: gray; font-size: 16px"></i>&nbsp;
                                {{ $cliente->USUA_LOGIN }}
                            </div>
                            <div class="col-12"><span class="col-auto"><i class="fas fa-venus-mars"
                                        style="color: gray; font-size: 16px"></i> &nbsp;
                                    {{ getSexo($cliente->CLIE_SEXO) }}
                            </div>
                        </div>

                        <div class="col-12 col-md-2">
                            <div class="col-12 mb-2"> <i class="fas fa-door-open"
                                    style="color: gray; font-size: 16px"></i> &nbsp; <b>Afiliación GoClub:</b>
                                {{ $cliente->GOCL_AFILIACION }}
                            </div>
                            <div class="col-12"><i class="fas fa-calendar" style="color: gray; font-size: 16px"></i>
                                &nbsp; <b>Último Mov.:</b> {{ $cliente->GOCL_ULTIMOMOV }}
                            </div>
                        </div>
                        <div class="col-12 col-md-4 row">
                            <x-card-data>
                                @slot('id', 'TInfo')
                                @slot('class', 'col-5')
                                @slot('color', 'bg-blue')
                                @slot('dato', $cliente->pedidosFinalizados)
                                @slot('nombre', 'Pedidos finalizados')
                            </x-card-data>
                            <x-card-data>
                                @slot('id', 'TInfo')
                                @slot('class', 'col-5')
                                @slot('color', 'bg-success')
                                @slot('dato', $cliente->GOCL_SALDO)
                                @slot('nombre', 'Puntos GoClub')
                            </x-card-data>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="card">
            <div class="ribbon ribbon-top bg-yellow">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="24" height="24"
                    viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                    stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path
                        d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z">
                    </path>
                </svg>
            </div>
            <div class="card-body">

                <div class="col-md-12">
                    <ul class="nav nav-tabs" data-bs-toggle="tabs">
                        <li class="nav-item">
                            <a href="#tabs-resumen" class="nav-link active" data-bs-toggle="tab">
                                <i class="fas fa-boxes"></i>&nbsp; Resúmen
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#tabs-cliente" class="nav-link" data-bs-toggle="tab">
                                <i class="fas fa-user"></i>&nbsp;
                                Cliente
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#tabs-usuario" class="nav-link" data-bs-toggle="tab">
                                <i class="fas fa-user"></i>&nbsp;
                                Usuario
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#tabs-tarjetas" class="nav-link" data-bs-toggle="tab">
                                <i class="fas fa-user"></i>&nbsp;
                                Tarjetas
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#tabs-direcciones" class="nav-link" data-bs-toggle="tab">
                                <i class="fas fa-user"></i>&nbsp;
                                Direcciones
                            </a>
                        </li>
                        @if ($cliente->PERF_ID == '00003' || $cliente->PERF_ID == '00006')
                            <li class="nav-item">
                                <a href="#tabs-comercios" class="nav-link" data-bs-toggle="tab">
                                    <i class="fas fa-store"></i>&nbsp;
                                    Asignar un comercio
                                </a>
                            </li>
                        @endif
                        {{-- <li class="nav-item">
                            <a href="#tabs-consultas" class="nav-link" data-bs-toggle="tab">
                                <i class="fas fa-dollar-sign"></i>&nbsp; Consultas
                            </a>
                        </li> --}}
                        {{-- <li class="nav-item">
                            <a href="#tabs-goclub" class="nav-link" data-bs-toggle="tab">
                                <i class="fas fa-map"></i>&nbsp;
                                Goclub
                            </a>
                        </li> --}}
                    </ul>
                    <div class="card-body">
                        <div class="tab-content">
                            <div class="tab-pane active show" id="tabs-resumen">
                                @if (privilegio('Ver resumen cliente'))
                                    @include('clientes.graficas')
                                @else
                                    <p>No tienes permiso</p>
                                @endif
                            </div>
                            <div class="tab-pane" id="tabs-cliente">
                                @if (privilegio('Ver información cliente'))
                                    <form id="FormCliente">
                                        @csrf
                                        <input type="hidden" id="IdCliente" name="IdCliente"
                                            value="{{ $cliente->CLIE_ID }}">
                                        @include('clientes._partials.form-cliente')
                                        <div class="col-12 mt-3" style="border-top: 1px solid #e1e1e1;
                                                    padding-top: 13px;">
                                            <button type="button" class="btn btn-success"
                                                onclick="MakeRequestData('{{ route('guardar-cliente', ['form' => 'cliente']) }}', '', 'POST', 2, '#FormCliente', '', true, true, true)"><i
                                                    class="fas fa-save"></i>&nbsp;&nbsp; Guardar cambios</button>
                                        </div>
                                    </form>
                                @else
                                    <p>No tienes permiso</p>
                                @endif
                            </div>
                            <div class="tab-pane" id="tabs-usuario">
                                @if (privilegio('Ver usuario cliente'))
                                    <form id="FormUsuario">
                                        @csrf
                                        <input type="hidden" name="IdCliente" value="{{ $cliente->CLIE_ID }}">
                                        @include('clientes._partials.form-usuario')
                                        <div class="col-12 mt-3" style="border-top: 1px solid #e1e1e1;
                                                padding-top: 13px;">
                                            <button type="button" class="btn btn-success"
                                                onclick="MakeRequestData('{{ route('guardar-cliente', ['form' => 'usuario']) }}', '', 'POST', 2, '#FormUsuario', '', true, true, true)"><i
                                                    class="fas fa-save"></i>&nbsp;&nbsp; Guardar cambios</button>
                                        </div>
                                    </form>
                                @else
                                    <p>No tienes permiso</p>
                                @endif
                            </div>
                            <div class="tab-pane" id="tabs-tarjetas">
                                @if (privilegio('Ver información cliente'))
                                    @include('clientes.cliente-tarjeta.index')
                                @else
                                    <p>No tienes permiso</p>
                                @endif
                            </div>
                            <div class="tab-pane" id="tabs-direcciones">
                                @if (privilegio('Ver información cliente'))
                                    @include('clientes.cliente-direccion.index')
                                @else
                                    <p>No tienes permiso</p>
                                @endif
                            </div>

                            @if ($cliente->PERF_ID == '00003' || $cliente->PERF_ID == '00006')
                                <div class="tab-pane" id="tabs-comercios">
                                    {{-- @if (privilegio('Ver información cliente')) --}}
                                        @include('clientes.vincular')
                                    {{-- @else
                                        <p>No tienes permiso</p>
                                    @endif --}}
                                </div>
                            @endif

                            {{-- <div class="tab-pane" id="tabs-consultas">
                                @if (privilegio('Ver consultas cliente'))
                                    @include('clientes.pedidos')
                                @else
                                    <p>No tienes permiso</p>
                                @endif
                            </div> --}}
                            {{-- <div class="tab-pane" id="tabs-goclub">
                                @if (privilegio('Ver GoClub cliente'))
                                    @include('clientes.puntos')
                                @else
                                    <p>No tienes permiso</p>
                                @endif
                            </div> --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        MakeRequestData(
            '{{ route('select-rest-info', [0, $cliente->CLIE_ID != '' ? $cliente->DEPA_ID : '0']) }}' +
            '/' +
            '{{ $cliente->PAIS_ID }}', '#Depa');

        MakeRequestData(
            '{{ route('select-rest-info', [1, $cliente->CLIE_ID != '' ? $cliente->MUNI_ID : '0']) }}' +
            '/' +
            '{{ $cliente->DEPA_ID }}', '#Muni');

        // $("#clieDociden").mask('########-#', {placeholder: "________-_"});
        // $("#clieDocfiscal").mask('####-######-###-#', {placeholder: "____-______-___-_"});

        $(".no-spaces").on({
            keydown: function(e) {
                if (e.which === 32)
                    return false;
            },
            change: function() {
                this.value = this.value.replace(/\s/g, "");
            }
        });
    </script>
@endsection