@section('estilos')
<link rel="stylesheet" href="{{asset('assets/js/plugins/select2/css/select2.min.css')}}">
@endsection
<div>
    <div class="content">
        <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
            <div class="flex-grow-1">
                <h1 class="h3 fw-bold mb-2">
                    Clientes
                </h1>
                <h2 class="fs-base lh-base fw-medium text-muted mb-0">
                    La lista de todos los clientes desde el más reciente hasta el menos reciente.
                </h2>
            </div>
            <nav class="pt-5" aria-label="breadcrumb">
                <button type="button" class="btn btn-success push" data-bs-toggle="modal" data-bs-target="#modal-block-normal" onclick="initialize();"><i class="fa fa-plus"></i> Nuevo cliente</button>
            </nav>
        </div>
    </div>

    <div class="content">
        <div class="row">
            <div class="col-6 col-lg-3">
                <a class="block block-rounded block-link-shadow text-center">
                    <div class="block-content block-content-full">
                        <div class="fs-2 fw-semibold">{{$todos}}</div>
                    </div>
                    <div class="block-content py-2 bg-body-light">
                        <p class="fw-medium fs-sm text-muted mb-0">
                            Todos
                        </p>
                    </div>
                </a>
            </div>
            <div class="col-6 col-lg-3">
                <a class="block block-rounded block-link-shadow text-center">
                    <div class="block-content block-content-full">
                        <div class="fs-2 fw-semibold">{{$activos}}</div>
                    </div>
                    <div class="block-content py-2 bg-body-light">
                        <p class="fw-medium fs-sm text-muted mb-0">
                            Activos
                        </p>
                    </div>
                </a>
            </div>
            <div class="col-6 col-lg-3">
                <a class="block block-rounded block-link-shadow text-center">
                    <div class="block-content block-content-full">
                        <div class="fs-2 fw-semibold">{{$suspendidos}}</div>
                    </div>
                    <div class="block-content py-2 bg-body-light">
                        <p class="fw-medium fs-sm text-muted mb-0">
                            Suspendidos
                        </p>
                    </div>
                </a>
            </div>
            <div class="col-6 col-lg-3">
                <a class="block block-rounded block-link-shadow text-center">
                    <div class="block-content block-content-full">
                        <div class="fs-2 fw-semibold">{{$bajas}}</div>
                    </div>
                    <div class="block-content py-2 bg-body-light">
                        <p class="fw-medium fs-sm text-muted mb-0">
                            Bajas
                        </p>
                    </div>
                </a>
            </div>
        </div>
        <div class="row justify-content-between">
            <div class="col-sm-8 col-lg-10">
                <div class="input-group mb-2">
                    <input type="text" wire:model="search" class="form-control form-control-lg" placeholder="Buscar por nombre, placa, vin, imei, etc...">
                </div>
            </div>
            <div class="col-auto">
                <div class="dropdown">
                    <button type="button" class="btn btn-alt-secondary dropdown-toggle" id="dropdown-default-light" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-filter"></i> Filtros
                    </button>
                    <div class="dropdown-menu fs-sm" aria-labelledby="dropdown-default-light">
                        <button type="button" class="dropdown-item" wire:click="filtro(0)">Activos</button>
                        <button type="button" class="dropdown-item" wire:click="filtro(1)">Suspendidos</button>
                        <button type="button" class="dropdown-item" wire:click="filtro(2)">Bajas</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="content content-boxed pb-6">
        <div class="row">
            @forelse($clientes as $cliente)
            <div class="col-sm-6 col-xl-4">
                <div class="block block-rounded mb-4">
                    <div class="block-header block-header-default">
                        @if($cliente['hide'] == 0)
                        <span class="badge bg-success">Activo</span>
                        @elseif($cliente['hide'] == 1)
                        <span class="badge bg-warning">Suspendido</span>
                        @elseif($cliente['hide'] == 2)
                        <span class="badge bg-danger">Baja</span>
                        @endif
                    </div>
                    <div class="block-content block-content-full text-center fs-sm">
                        <img class="img-avatar img-avatar96 img-avatar-thumb" src="{{asset('assets/media/avatars/avatar12.jpg')}}" alt="">
                        <a class="text-dark" href="{{ asset('/comercial/clientes').'/'.$cliente['id'] }}"><h5 class="my-2">{{$cliente['company_name']}}</h5></a>
                        {{-- <small class="text-warning"><i class="fa fa-circle-exclamation"></i> Este cliente cuenta con más contactos.</small> --}}
                        {{-- <small class="text-muted">Jaime Eder Rodriguez Flores [Particular]</small><br />  --}}
                        <small class="text-info">{{$cliente['ubicacion']}}</small>
                    </div>
                    <div class="block-content block-content-full bg-body-light">
                        <div class="row justify-content-end">
                            <div class="col-auto">
                                <a href="{{ asset('/comercial/clientes').'/'.$cliente['id'] }}" class="btn btn-sm btn-primary">Ver más</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @empty
            <div class="col-12">
                <div class="text-center">
                    <span>No hay ningún cliente :(</span>
                </div>
            </div>
            @endforelse
            {{ $clientes->links() }}
        </div>
    </div>

    <div class="modal" id="modal-block-normal" tabindex="-1" role="dialog" aria-labelledby="modal-block-normal" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="block block-rounded block-transparent mb-0">
                    <div class="block-header block-header-default">
                        <h3 class="block-title">Nuevo cliente</h3>
                        <div class="block-options">
                        <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close">
                            <i class="fa fa-fw fa-times"></i>
                        </button>
                        </div>
                    </div>
                    <div class="block-content fs-sm">
                        <div class="row">
                            <div class="col-12">
                                <div class="mb-4">
                                    <div class="input-group">
                                      <span class="input-group-text input-group-text-alt">Empresa o persona física <span class="text-danger">*</span></span>
                                      <input type="text" class="form-control form-control-alt @error('nombre_cliente') is-invalid @enderror" wire:model.defer="nombre_cliente">
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="mb-4">
                                    <div class="input-group">
                                      <span class="input-group-text input-group-text-alt">Días naturales de crédito <span class="text-danger">*</span></span>
                                      <input type="text" class="form-control form-control-alt @error('credito') is-invalid @enderror" wire:model.defer="credito">
                                    </div>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="mb-4">
                                    <label class="form-label">Plataforma <span class="text-danger">*</span></label>
                                    <select class="form-select form-control-alt @error('plataforma') is-invalid @enderror" id="example-select" name="example-select" wire:model.defer="plataforma">
                                        <option>Selecciona una plataforma</option>
                                        @foreach($plataformas as $plataforma)
                                        <option value="{{$plataforma['id']}}">{{$plataforma['name']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="mb-4">
                                    <label class="form-label">Categoría <span class="text-danger">*</span></label>
                                    <select class="form-select form-control-alt @error('categoria') is-invalid @enderror" id="example-select" name="example-select" wire:model.defer="categoria">
                                        <option>Selecciona una categoria</option>
                                        @foreach($categorias as $categoria)
                                        <option value="{{$categoria['id']}}">{{$categoria['name']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="mb-4">
                                    <label class="form-label">CIA <span class="text-danger">*</span></label>
                                    <select class="form-select form-control-alt @error('cia') is-invalid @enderror" id="example-select" name="example-select" wire:model.defer="cia">
                                        <option>Selecciona una CIA</option>
                                        @foreach($ciadata as $item)
                                        <option value="{{$item['id']}}">{{$item['name']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="mb-4">
                                    <div class="space-y-2">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" wire:model.defer="vip">
                                            <label class="form-check-label" for="example-switch-default1">VIP</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="mb-4">
                                    <div class="input-group">
                                      <span class="input-group-text input-group-text-alt">Comentarios</span>
                                      <textarea type="text" cols="40" rows="5" class="form-control form-control-alt" wire:model.defer="comentarios"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="mb-4">
                                    <label class="form-label">¿Dónde nos vió?</label>
                                    <select class="form-select form-control-alt" id="example-select" name="example-select" wire:model.defer="gateway">
                                        <option>Seleccione</option>
                                        @foreach($alcances as $alcance)
                                        <option value="{{$alcance['id']}}">{{$alcance['name']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="mb-4">
                                    <label class="form-label">Medio de contacto</label>
                                    <select class="form-select form-control-alt" id="example-select" name="example-select" wire:model.defer="method_contact">
                                        <option>Seleccione</option>
                                        @foreach($medios as $medio)
                                        <option value="{{$medio['id']}}">{{$medio['name']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <hr>
                            <label class="form-label">Localización y detalles</label>
                            <div class="col-12 py-4">
                                <div id="map_canvas" style="width: auto; height: 500px;"></div>
                            </div>
                            <div class="col-4">
                                <div class="form-floating mb-4">
                                    <input type="text" class="form-control form-control-alt" wire:model.defer="nombre_localizacion">
                                    <label for="example-text-input-floating">Nombre de la localización</label>
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="form-floating mb-4">
                                    <input type="text" class="form-control form-control-alt" wire:model.defer="zipcode" id="zipcode">
                                    <label for="example-text-input-floating">C.P</label>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="form-floating mb-4">
                                    <input type="text" class="form-control form-control-alt" wire:model.defer="latitude" id="txtLat">
                                    <label for="example-text-input-floating">Latitud</label>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="form-floating mb-4">
                                    <input type="text" class="form-control form-control-alt" wire:model.defer="longitude" id="txtLng">
                                    <label for="example-text-input-floating">Longitud</label>
                                </div>
                            </div>
                            <hr>
                            <label class="form-label">Contactos</label>
                            <div class="col-12">
                                <div class="row">
                                    <div class="col-4">
                                        <div class="form-floating mb-4">
                                            <input type="text" class="form-control form-control-alt" id="nombre_contacto" wire:model.defer="nombre_contacto">
                                            <label for="example-text-input-floating">Nombre del contacto</label>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-floating mb-4">
                                            <input type="text" class="form-control form-control-alt" id="telefono_contacto" wire:model.defer="telefono_contacto">
                                            <label for="example-text-input-floating">Teléfono</label>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-floating mb-4">
                                            <input type="text" class="form-control form-control-alt" id="email_contacto" wire:model.defer="email_contacto">
                                            <label for="example-text-input-floating">Correo electrónico</label>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-floating mb-4">
                                            <input type="text" class="form-control form-control-alt" id="puesto_contacto" wire:model.defer="puesto_contacto">
                                            <label for="example-text-input-floating">Puesto</label>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-floating mb-4">
                                            <input type="text" class="form-control form-control-alt" id="puesto_contacto" wire:model.defer="permiso_contacto">
                                            <label for="example-text-input-floating">Tipo de permisos</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <span class="text-sm text-info"><i class="fa fa-fw fa-circle-exclamation"></i> Terminando este registro rápido, podrás continuar registrando sus perfiles y darle seguimiento.</span>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="block-content block-content-full text-end bg-body">
                        <button type="button" class="btn btn-sm btn-alt-secondary me-1" data-bs-dismiss="modal">Cancelar</button>
                        <button type="button" class="btn btn-sm btn-success" data-bs-dismiss="modal" wire:click="nuevoCliente">Continuar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@section('scripts')
<script src="{{asset('assets/js/lib/jquery.min.js')}}"></script>
<script src="{{asset('assets/js/plugins/select2/js/select2.full.min.js')}}"></script>

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA7Gv7wnsVwspZlkoD6jE4qccMIFfr0l0E"></script>

<script>One.helpersOnLoad(['jq-maxlength', 'jq-select2']);</script>
<script>
    window.addEventListener('swal', event => {
        Swal.fire({
            title: event.detail.title,
            text: event.detail.text,
            icon: event.detail.type,
            timer: event.detail.timer,
            showConfirmButton: event.detail.showConfirmButton,
        });
    });

    function initialize() {
        var map = new google.maps.Map(document.getElementById('map_canvas'), {
            zoom: 12,
            center: new google.maps.LatLng(19.4326077, -99.13320799999997),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var vMarker = new google.maps.Marker({
            position: new google.maps.LatLng(19.4326077, -99.13320799999997),
            draggable: true
        });

        var geocoder = new google.maps.Geocoder();
        var zipCode = null;

        google.maps.event.addListener(vMarker, 'dragend', function (evt) {
            $("#txtLat").val(evt.latLng.lat().toFixed(6));
            $("#txtLng").val(evt.latLng.lng().toFixed(6));
            var latlng = new google.maps.LatLng(evt.latLng.lat(), evt.latLng.lng());

            geocoder.geocode({'latLng': latlng}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[0]) {
                        for (j = 0; j < results[0].address_components.length; j++) {
                            if (results[0].address_components[j].types[0] == 'postal_code')
                                @this.set('zipcode', results[0].address_components[j].short_name, true);
                                $("#zipcode").val(results[0].address_components[j].short_name);
                        }
                    }
                } else {
                    $("#zipcode").val("No aplica");
                }
            });

            @this.set('latitude', evt.latLng.lat().toFixed(6), true);
            @this.set('longitude', evt.latLng.lat().toFixed(6), true);

            map.panTo(evt.latLng);
        });

        map.setCenter(vMarker.position);

        vMarker.setMap(map);
    }

    window.addEventListener('modalOpenAgain', event => {
        $('#modal-block-normal').modal('show');
        initialize();
    });
</script>
@endsection