@section('estilos')
<link rel="stylesheet" href="{{asset('assets/js/plugins/select2/css/select2.min.css')}}">
<link rel="stylesheet" href="{{asset('assets/js/plugins/flatpickr/flatpickr.min.css')}}">

<link rel="stylesheet" href="{{asset('assets/js/plugins/slick-carousel/slick.css')}}">
<link rel="stylesheet" href="{{asset('assets/js/plugins/slick-carousel/slick-theme.css')}}">
@endsection
<div>
    <div class="bg-image" style="background-image: url('{{asset('assets/media/photos/back_Mesa de trabajo.jpg')}}');">
        <div class="bg-black-50">
            <div class="content content-full text-center">
                <div class="my-3">
                    <img class="img-avatar img-avatar-thumb" src="{{asset('assets/media/avatars/avatar13.jpg')}}" alt="">
                </div>
                <h1 class="h2 text-white mb-0">{{$info->company_name}}</h1>
                <span class="text-white-75">{{$info->email}}</span>
            </div>
        </div>
    </div>

    <div class="content content-boxed">
        <div class="row">
            <div class="col-md-7 col-xl-8">
                <div class="block block-rounded mb-4">
                    <div class="block-header block-header-default">
                        <h3 class="block-title"><i class="fa fa-clipboard-list text-muted me-1"></i> Información del cliente</h3>
                        <div class="block-options">
                            <button type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle"><i class="si si-arrow-up"></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>
                                        <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>
                                        <input type="text" class="form-control form-control-alt @error('credito') is-invalid @enderror" wire:model.defer="credito">
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="mb-4">
                                    <label class="form-label">Cambiar estatus</label>
                                    <select class="form-select form-control-alt" wire:model.defer="estatus">
                                        <option>Selecciona un estatus</option>
                                        <option value="0" wire:key="{{$estatus}}">Activo</option>
                                        <option value="1" wire:key="{{$estatus}}">Suspendido</option>
                                        <option value="2" wire:key="{{$estatus}}">Baja</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-3">
                                <div class="mb-4">
                                    <label class="form-label">Plataforma</label>
                                    <select class="form-select form-control-alt" wire:model.lazy="plataforma">
                                        <option>Selecciona una plataforma</option>
                                        @foreach($plataformas as $plataforma)
                                        <option value="{{ $plataforma['id'] }}" wire:key="{{ $plataforma['id'] }}">{{$plataforma['name']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="mb-4">
                                    <label class="form-label">Categoría</label>
                                    <select class="form-select form-control-alt" wire:model.lazy="categoria">
                                        <option>Selecciona una categoria</option>
                                        @foreach($categorias as $categoria)
                                        <option value="{{ $categoria['id'] }}" wire:key="{{ $categoria['id'] }}">{{$categoria['name']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="mb-4">
                                    <label class="form-label">CIA</label>
                                    <select class="form-select form-control-alt" wire:model.lazy="cia">
                                        <option>Selecciona una CIA</option>
                                        @foreach($ciadata as $item)
                                        <option value="{{$item['id']}}" wire:key="{{ $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" wire:model.lazy="medio">
                                        <option>Seleccione</option>
                                        @foreach($alcances as $alcance)
                                        <option value="{{$alcance['id']}}" wire:key="{{ $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" wire:model.lazy="metodo">
                                        <option>Seleccione</option>
                                        @foreach($medios as $medio)
                                        <option value="{{$medio['id']}}" wire:key="{{ $medio['id'] }}">{{$medio['name']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="block-content block-content-full">
                        <div class="text-end">
                            <button type="button" class="btn btn-sm btn-primary" data-bs-dismiss="modal" wire:click="actualizarCliente">Actualizar</button>
                        </div>
                    </div>
                </div>

                <div class="block block-rounded mb-4 block-mode-hidden" wire:ignore.self>
                    <div class="block-header block-header-default">
                        <h3 class="block-title"><i class="fa fa-clock text-muted me-1"></i> Documentación vigente</h3>
                        <div class="block-options">
                            <button type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle"><i class="si si-arrow-up"></i></button>
                        </div>
                    </div>
                    <div class="block-content fs-sm">
                        <button type="button" class="btn btn-sm btn-alt-secondary mb-0 push" data-bs-toggle="modal" data-bs-target="#modal-block-document"><i class="fa fa-plus"></i> Agregar</button>
                        <table class="table table-vcenter">
                            <thead>
                            <tr>
                                <th>Nombre del archivo</th>
                                <th>Vigencia</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                                @forelse($documentos_vigencia as $documentos)
                                <tr>
                                    <td class="fw-semibold fs-sm">
                                        <span class="text-muted">{{$documentos['name_file']}}</span>
                                    </td>
                                    <td class="fw-semibold fs-sm">
                                        {{$documentos['date_file']}}
                                    </td>
                                    <td class="text-end">
                                        <td class="text-end">
                                            <a class="btn btn-link btn-sm text-muted" href="{{asset('storage/'.$documentos['url_file'])}}" target="_blank"><i class="fa fa-eye"></i></a>
                                            <button type="button" class="btn btn-link btn-sm text-danger" wire:click="eliminarArchivoVigente({{$documentos['id']}})"><i class="fa fa-trash"></i></button>
                                        </td>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td>
                                        <span>No hay documentos.</span>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="block block-rounded mb-4 block-mode-hidden">
                    <div class="block-header block-header-default">
                        <h3 class="block-title"><i class="fa fa-location-pin text-muted me-1"></i> Añadir ubicación</h3>
                        <div class="block-options">
                            <button type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle" onclick="initialize();"><i class="si si-arrow-up"></i></button>
                        </div>
                    </div>
                    <div class="block-content fs-sm">
                        <div class="row">
                            <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 <span class="text-danger">*</span></label>
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="form-floating mb-4">
                                    <input type="text" class="form-control form-control-alt" wire:model.lazy="zipcode" id="zipcode">
                                    <label for="example-text-input-floating">C.P <span class="text-danger">*</span></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 <span class="text-danger">*</span></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 <span class="text-danger">*</span></label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="block-content block-content-full text-end">
                        <button type="button" class="btn btn-sm btn-success" data-bs-dismiss="modal" wire:click="nuevaUbicacion">Añadir</button>
                    </div>
                </div>

                <div class="block block-rounded mb-4">
                    <div class="block-header block-header-default">
                        <h3 class="block-title"><i class="fa fa-hard-drive text-muted me-1"></i> Añadir perfil</h3>
                        <div class="block-options">
                            <button type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle"><i class="si si-arrow-up"></i></button>
                        </div>
                    </div>
                    <div class="block-content fs-sm">
                        <div class="row">
                            <label class="form-label">Perfil</label>
                            <div class="col-12">
                                <div class="form-floating mb-4">
                                    <input type="text" class="form-control form-control-alt @error('nombre_perfil') is-invalid @enderror" wire:model="nombre_perfil">
                                    <label for="example-text-input-floating">Nombre del perfil <span class="text-danger">*</span></label>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="mb-4">
                                    <label class="form-label">Tipo de unidad <span class="text-danger">*</span></label>
                                    <select class="form-select form-control-alt @error('tipo_unidad') is-invalid @enderror" wire:model="tipo_unidad">
                                        <option>Selecciona una opción</option>
                                        @foreach($unidades as $unidad)
                                        <option value="{{$unidad['id']}}">{{$unidad['name']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="mb-4">
                                    <label class="form-label">Plan de dispositivo <span class="text-danger">*</span></label>
                                    <select class="form-select form-control-alt @error('plan_dispositivo') is-invalid @enderror" wire:model="plan_dispositivo">
                                        <option>Selecciona una opción</option>
                                        @foreach($planes as $plan)
                                        <option value="{{$plan['id']}}">{{$plan['name']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="mb-4">
                                    <label class="form-label">Tipo de plan <span class="text-danger">*</span></label>
                                    <select class="form-select form-control-alt @error('tipo_plan') is-invalid @enderror" wire:model="tipo_plan">
                                        <option>Selecciona una opción</option>
                                        @foreach($tipos as $tipo)
                                        <option value="{{$tipo['id']}}">{{$tipo['name']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="mb-4">
                                    <label class="form-label">Plazos <span class="text-danger">*</span></label>
                                    <select class="form-select form-control-alt @error('lapse') is-invalid @enderror" wire:model="lapse">
                                        <option>Selecciona una opción</option>
                                        @foreach($plazos as $plazo)
                                        <option value="{{$plazo['id']}}">{{$plazo['name']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="mb-4">
                                    <div class="input-group">
                                        <span class="input-group-text input-group-text-alt">Costo <span class="text-danger">*</span></span>
                                        <input type="text" class="form-control form-control-alt @error('costo') is-invalid @enderror" wire:model="costo">
                                    </div>
                                </div>
                            </div>
                            <label class="form-label">Accesorios</label>
                            <div class="col-lg-12" wire:ignore>
                                <div class="mb-4">
                                    <select class="accesorios-select form-select form-control-alt" wire:model.lazy="accesorios" style="width: 100%;" multiple>
                                        @foreach($otros as $accesorio)
                                        <option value="{{$accesorio['id']}}">{{$accesorio['name']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <label class="form-label">Información fiscal del perfil</label>
                            <div class="col-12">
                                <div class="mb-4">
                                    <div class="input-group">
                                        <span class="input-group-text input-group-text-alt">Correo electrónico para facturas <span class="text-danger">*</span></span>
                                        <input type="text" class="form-control form-control-alt @error('email_perfil') is-invalid @enderror" wire:model="email_perfil">
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-floating mb-4">
                                    <input type="text" class="form-control form-control-alt @error('razon_social') is-invalid @enderror" wire:model="razon_social">
                                    <label for="example-text-input-floating">Razón social <span class="text-danger">*</span></label>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-floating mb-4">
                                    <input type="text" class="form-control form-control-alt @error('rfc') is-invalid @enderror" wire:model="rfc">
                                    <label for="example-text-input-floating">RFC <span class="text-danger">*</span></label>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-floating mb-4">
                                    <input type="text" class="form-control form-control-alt" wire:model.defer="direccion_perfil">
                                    <label for="example-text-input-floating">Dirección</label>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-floating mb-4">
                                    <input type="text" class="form-control form-control-alt" wire:model.defer="direccion_perfil2">
                                    <label for="example-text-input-floating">Dirección 2</label>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-floating mb-4">
                                    <input type="text" class="form-control form-control-alt" wire:model.defer="cp">
                                    <label for="example-text-input-floating">CP</label>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-floating mb-4">
                                    <input type="text" class="form-control form-control-alt" wire:model.defer="estado_perfil">
                                    <label for="example-text-input-floating">Estado</label>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-floating mb-4">
                                    <input type="text" class="form-control form-control-alt" wire:model.defer="pais_perfil">
                                    <label for="example-text-input-floating">Pais</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="block-content block-content-full text-end">
                        <button type="button" class="btn btn-sm btn-success" wire:click="nuevoPerfil">Añadir</button>
                    </div>
                </div>
            </div>

            <div class="col-md-5 col-xl-4">

                <div class="block block-rounded block-mode-hidden">
                    <div class="block-header block-header-default">
                        <h3 class="block-title"><i class="fa fa-calendar text-muted me-1"></i> Fechas de contacto</h3>
                        <div class="block-options">
                            <button type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle"><i class="si si-arrow-up"></i></button>
                        </div>
                    </div>
                    <div class="block-content">
                        <button type="button" class="btn btn-sm btn-alt-secondary push" data-bs-toggle="modal" data-bs-target="#modal-block-fecha"><i class="fa fa-plus"></i> Agregar</button>
                        <ul class="timeline timeline-alt">
                            @forelse($fechas as $fecha)
                            <li class="timeline-event">
                                <div class="timeline-event-icon bg-secondary">
                                    <i class="fa fa-calendar"></i>
                                </div>
                                <div class="timeline-event-block block">
                                    <div class="block-header block-header-default">
                                        <h3 class="block-title">{{$fecha['datetime_contact']}}</h3>
                                    </div>
                                    <div class="block-content">
                                        <div class="fw-semibold">{{$fecha['contact_name']}}</div>
                                        <div class="fw-normal text-muted"><em>{{$fecha['status']}}</em></div>
                                    </div>
                                </div>
                            </li>
                            @empty
                            <span class="text-center text-muted fs-md">No hay programada ninguna fecha para contacto.</span>
                            @endforelse
                        </ul>
                    </div>
                </div>

                <div class="block block-rounded block-mode-hidden">
                    <div class="block-header block-header-default">
                        <h3 class="block-title"><i class="fa fa-dollar-sign text-muted me-1"></i> Lista de precios</h3>
                        <div class="block-options">
                            <button type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle"><i class="si si-arrow-up"></i></button>
                        </div>
                    </div>
                    <div class="block-content">
                        <button type="button" class="btn btn-sm btn-alt-secondary push" data-bs-toggle="modal" data-bs-target="#modal-block-prices"><i class="fa fa-plus"></i> Agregar</button>
                        <table class="table table-bordered table-vcenter">
                            <thead>
                                <tr>
                                    <th>Descripción</th>
                                    <th class="d-none d-sm-table-cell" style="width: 15%;">Precio</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($precios as $precio)
                                <tr>
                                    <td class="fw-semibold fs-sm">
                                        {{$precio['description']}}
                                    </td>
                                    <td class="d-none d-sm-table-cell">
                                        <span class="fs-xs fw-semibold text-success">${{number_format($precio['price'], 2)}}</span>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td class="fw-semibold fs-sm">
                                        <span class="text-center text-muted fs-md">No hay ningún precio regsitrado.</span>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="block block-rounded block-mode-hidden">
                    <div class="block-header block-header-default">
                        <h3 class="block-title">
                            <i class="fa fa-user text-muted me-1"></i> Contactos ({{sizeof($clientes)}})
                        </h3>
                        <div class="block-options">
                            <button type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle"><i class="si si-arrow-up"></i></button>
                        </div>
                    </div>
                    <div class="block-content">
                        <button type="button" class="btn btn-sm btn-alt-secondary mb-0 push" data-bs-toggle="modal" data-bs-target="#modal-block-contact"><i class="fa fa-plus"></i> Agregar</button>
                        <ul class="nav-items fs-sm">
                            @foreach($clientes as $cliente)
                            <li>
                                <span class="d-flex py-2">
                                    <div class="flex-shrink-0 me-3 ms-2 overlay-container overlay-bottom">
                                        <img class="img-avatar img-avatar48" src="{{asset('assets/media/avatars/avatar5.jpg')}}" alt="">
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="fw-semibold">{{$cliente['name']}}</div>
                                        <div class="fw-normal text-muted">Permisos: <em>{{$cliente['type']}}</em></div>
                                        <div class="fw-normal text-muted">Puesto: <em>{{$cliente['position']}}</em></div>
                                        <button type="button" class="btn btn-sm btn-link text-danger" wire:click="eliminarContacto({{$cliente['id']}})">Eliminar</button><br>
                                        <a href="tel:{{$cliente['telephone']}}" class="text-primary"><i class="fa fa-fw fa-phone"></i>{{$cliente['telephone']}}</a><br>
                                        <a href="mailto:{{$cliente['email']}}" class="text-primary"><i class="fa fa-fw fa-message"></i>{{$cliente['email']}}</a>
                                    </div>
                                </span>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                </div>

                <div class="block block-rounded">
                    <div class="block-header block-header-default">
                        <h3 class="block-title">
                            <i class="fa fa-location-pin text-muted me-1"></i> Ubicaciones
                        </h3>
                    </div>
                    <div class="block-content">
                        <ul class="nav-items fs-sm">
                            @foreach($ubicaciones as $ubicacion)
                            <li>
                                <span class="d-flex py-2">
                                    <div class="flex-grow-1">
                                        <div class="row">
                                            <div class="col-8">
                                                <div class="fw-semibold">{{$ubicacion['name']}}</div>
                                                <em class="text-muted fs-xs">C.P ({{$ubicacion['zipcode']}})</em><br>
                                                <a class="fw-normal" href="https://maps.google.com/maps?q={{$ubicacion['latitude']}},{{$ubicacion['longitude']}}" target="_blank">Ver ubicación</a>
                                            </div>
                                            <div class="col-4">
                                                <button type="button" class="btn btn-sm btn-link text-danger" wire:click="eliminarUbicacion({{$ubicacion['id']}})">Eliminar</button>
                                            </div>
                                        </div>
                                    </div>
                                </span>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                </div>

                <div class="block block-rounded">
                    <div class="block-header block-header-default">
                        <h3 class="block-title">
                            <i class="fa fa-clipboard-list text-muted me-1"></i> Documentación legal
                        </h3>
                    </div>
                    <div class="block-content py-0">
                        <div wire:loading wire:target="file_upload" class="mt-2">
                            <div class="spinner-border spinner-border-sm text-primary" role="status">
                            </div>
                            <span class="text-muted fs-xs">Subiendo archivo, espere por favor...</span>
                        </div>
                        <table class="table table-vcenter">
                            <tbody>
                                <tr>
                                    <td class="fw-semibold fs-xs">
                                        <span class="text-muted">INE Responsable</span>
                                    </td>
                                    @if(isset($ine_exists))
                                    <td class="text-end">
                                        <a class="btn btn-link btn-sm text-muted" href="{{asset('storage'.$ine_exists->url_file)}}" target="_blank"><i class="fa fa-eye"></i></a>
                                        <button type="button" class="btn btn-link btn-sm text-danger" wire:click="eliminarArchivo(1)"><i class="fa fa-trash"></i></button>
                                    </td>
                                    @else
                                    <td class="text-end">
                                        <div class="input-group">
                                            <input type="file" class="form-control form-control-sm" wire:model="file_upload">
                                            <button type="button" class="btn btn-success btn-sm" wire:click="subirArchivo(1)"><i class="fa fa-upload"></i></button>
                                        </div>
                                    </td>
                                    @endif
                                </tr>
                                <tr>
                                    <td class="fw-semibold fs-xs">
                                        <span class="text-muted">Constancia Situación Fiscal</span>
                                    </td>
                                    @if(isset($csf_exists))
                                    <td class="text-end">
                                        <a class="btn btn-link btn-sm text-muted" href="{{asset('storage'.$csf_exists->url_file)}}" target="_blank"><i class="fa fa-eye"></i></a>
                                        <button type="button" class="btn btn-link btn-sm text-danger" wire:click="eliminarArchivo(2)"><i class="fa fa-trash"></i></button>
                                    </td>
                                    @else
                                    <td class="text-end">
                                        <div class="input-group">
                                            <input type="file" class="form-control form-control-sm" wire:model="file_upload">
                                            <button type="button" class="btn btn-success btn-sm" wire:click="subirArchivo(2)"><i class="fa fa-upload"></i></button>
                                        </div>
                                    </td>
                                    @endif
                                </tr>
                                <tr>
                                    <td class="fw-semibold fs-xs">
                                        <span class="text-muted">Acta Constitutiva</span>
                                    </td>
                                    @if(isset($act_exists))
                                    <td class="text-end">
                                        <a class="btn btn-link btn-sm text-muted" href="{{asset('storage'.$act_exists->url_file)}}" target="_blank"><i class="fa fa-eye"></i></a>
                                        <button type="button" class="btn btn-link btn-sm text-danger" wire:click="eliminarArchivo(3)"><i class="fa fa-trash"></i></button>
                                    </td>
                                    @else
                                    <td class="text-end">
                                        <div class="input-group">
                                            <input type="file" class="form-control form-control-sm" wire:model="file_upload">
                                            <button type="button" class="btn btn-success btn-sm" wire:click="subirArchivo(3)"><i class="fa fa-upload"></i></button>
                                        </div>
                                    </td>
                                    @endif
                                </tr>
                                <tr>
                                    <td class="fw-semibold fs-xs">
                                        <span class="text-muted">Comprobante de domicilio</span>
                                    </td>
                                    @if(isset($com_exists))
                                    <td class="text-end">
                                        <a class="btn btn-link btn-sm text-muted" href="{{asset('storage'.$com_exists->url_file)}}" target="_blank"><i class="fa fa-eye"></i></a>
                                        <button type="button" class="btn btn-link btn-sm text-danger" wire:click="eliminarArchivo(4)"><i class="fa fa-trash"></i></button>
                                    </td>
                                    @else
                                    <td class="text-end">
                                        <div class="input-group">
                                            <input type="file" class="form-control form-control-sm" wire:model="file_upload">
                                            <button type="button" class="btn btn-success btn-sm" wire:click="subirArchivo(4)"><i class="fa fa-upload"></i></button>
                                        </div>
                                    </td>
                                    @endif
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <hr>

            <div class="col-md-12 col-xl-12">
                <h3 class="py-2">Perfiles</h3>
                <div class="row">
                    @forelse($perfiles as $perfil)
                    <div class="col-sm-6 col-xl-6">
                        <div class="block block-rounded mb-4">
                            <div class="block-content block-content-full fs-sm">
                                <div class="row">
                                    <div class="col-8 mb-4">
                                        <h5 class="mb-0">{{$perfil['name']}} <button type="button" class="btn btn-sm btn-link text-muted mb-0 push" data-bs-toggle="modal" data-bs-target="#modal-block-fiscal" wire:click="abrirModalFiscal({{$perfil['id']}})"><i class="fa fa-edit"></i> Editar</button></h5>
                                        <small class="text-muted">Correo para facturas: <em class="text-primary">{{$perfil['email']}}</em></small>
                                        <small class="text-muted">Razón social: <em class="text-primary">{{$perfil['social_reason']}}</em></small>
                                        <small class="text-muted">RFC: <em class="text-primary">{{$perfil['rfc']}}</em></small>
                                    </div>
                                    <div class="col-4">
                                        <div class="text-end">
                                            @if($perfil['asset'] == null)<button class="btn btn-sm btn-link text-danger" wire:click="suspenderPerfil({{$perfil['id']}})"><i class="fa fa-trash"></i> Suspender</button>@endif
                                            <button class="btn btn-sm btn-link" wire:click="duplicarPerfil({{$perfil['id']}})"><i class="fa fa-copy"></i> Duplicar</button>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="mb-4">
                                            <label class="form-label">Tipo de unidad</label>
                                            <select class="form-select form-control-alt" wire:model.defer="id_perfil_unidad.{{$perfil['id']}}">
                                                <option disabled>Tipo de unidad</option>
                                                @foreach($unidades as $unidad)
                                                <option value="{{ $unidad['id'] }}" wire:key="{{ $unidad['id'] }}">{{$unidad['name']}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="mb-4">
                                            <label class="form-label">Plan de dispositivo</label>
                                            <select class="form-select form-control-alt" wire:model.defer="id_perfil_plan.{{$perfil['id']}}">
                                                <option disabled>Selecciona una opción</option>
                                                @foreach($planes as $plan)
                                                <option value="{{ $plan['id'] }}" wire:key="{{ $plan['id'] }}">{{$plan['name']}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="mb-4">
                                            <label class="form-label">Tipo de plan</label>
                                            <select class="form-select form-control-alt" wire:model.defer="id_perfil_tipo.{{$perfil['id']}}">
                                                <option disabled>Selecciona una opción</option>
                                                @foreach($tipos as $tipo)
                                                <option value="{{$tipo['id']}}" wire:key="{{ $tipo['id'] }}">{{$tipo['name']}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="mb-4">
                                            <label class="form-label">Plazos</label>
                                            <select class="form-select form-control-alt" wire:model.defer="id_perfil_plazo.{{$perfil['id']}}">
                                                <option disabled>Selecciona una opción</option>
                                                @foreach($plazos as $plazo)
                                                <option value="{{$plazo['id']}}" wire:key="{{ $plazo['id'] }}">{{$plazo['name']}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="mb-4">
                                            <div class="input-group">
                                                <span class="input-group-text input-group-text-alt">Costo</span>
                                                <input type="text" class="form-control form-control-alt" wire:model.defer="id_perfil_precio.{{$perfil['id']}}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label">Accesorios</label>
                                        <div class="col-lg-12">
                                            @foreach($accesorios[$perfil['id']] as $comp)
                                                <p class="mb-0">{{$comp->name}} <button class="btn btn-sm text-danger" wire:click="eliminarAccesorioPerfil({{$comp->id}}, {{$perfil['id']}})"><i class="fa fa-trash"></i></button></p>
                                            @endforeach
                                        </div>
                                        <button type="button" class="btn btn-sm mb-0 push" data-bs-toggle="modal" data-bs-target="#modal-block-accesorio" wire:click="abrirModalAccesorio({{$perfil['id']}})"><i class="fa fa-plus"></i> Agregar</button>
                                    </div>
                                </div>
                                <div class="col-md-3 ms-auto">
                                    <div class="text-end">
                                        <button class="btn btn-sm btn-primary" wire:click="actualizarPerfilPrincipal({{$perfil['id']}})">Actualizar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="col-12">
                        <div class="text-center mb-4">
                            <span>Este cliente no cuenta con ningún perfil.</span>
                        </div>
                    </div>
                    @endforelse
                </div>
            </div>

            <hr>

            <div class="col-md-12 col-xl-12">
                <h3 class="py-2 pb-0 mb-3">Unidades</h3>

                <div class="row justify-content-between pb-3">
                    <div class="col-sm-12 col-lg-12">
                        <div class="input-group mb-2">
                            <input type="text" wire:model="search_asset" class="form-control form-control-lg" placeholder="Buscar por nombre, vin, placa, marca, imei, etc...">
                        </div>
                    </div>
                </div>

                <div class="row">
                    @forelse($assets as $key => $asset)
                    <div class="col-sm-4 col-xl-4">
                        <div class="block block-rounded mb-4">
                            <div class="block-content block-content-full fs-sm">
                                <div class="row">
                                    <div class="col-8">
                                        <h5 class="mb-0">{{$asset['vin']}}</h5>
                                    </div>
                                    <div class="col-4">
                                        <div class="text-end">
                                            @if($asset['status'] == 0)<p class="badge bg-success mb-2">Activo</p>
                                            @elseif($asset['status'] == 1)<p class="badge bg-warning mb-2">Inactivo</p>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <p class="fs-xs mb-3 text-muted">{{$asset['brand']}} {{$asset['model']}} {{$asset['year']}} ({{$asset['color']}}) <span class="fs-xs text-muted">({{$asset['plate']}})</span></p>
                                    </div>
                                    <hr>
                                    <div class="col-12 mb-4">
                                        <label class="form-label"><i class="fa fa-hard-drive"></i> Dispositivos instalados</label>
                                        @foreach($unity_imeis as $imeis)
                                            @foreach($imeis as $imei)
                                                @if($imei['id_unity'] == $asset['id_unity'])
                                                <p class="fs-xs mb-0 text-muted">IMEI instalado: <a type="button" href="#" class="text-primary fw-bold me-1 push" data-bs-toggle="modal" data-bs-target="#modal-block-histo"  wire:click="abrirHistorial({{$imei['id']}})"><i class="fa fa-eye"></i> {{$imei['imei']}} ({{$imei['name']}})</a></p>
                                                @endif
                                            @endforeach
                                        @endforeach

                                    </div>
                                    {{-- <a class="fs-xs mb-2 text-info" href="#"><i class="fa fa-circle-info"></i> Historial de dispositivos</a> --}}
                                    <hr>
                                    <div class="col-12">
                                        <div class="mb-4">
                                            <label class="form-label"><i class="fa fa-arrows-rotate"></i> Cambiar perfil</label>
                                            <select class="form-select form-control-alt" wire:model.defer="id_perfil">
                                                <option disabled>Selecciona un perfil</option>
                                                @foreach($perfiles as $perfil)
                                                <option value="{{$perfil['id']}}">{{$perfil['name']}}</option>
                                                @endforeach
                                            </select>
                                            <p class="fs-xs mb-0 text-muted">Perfil actual: <em class="text-primary fw-semibold">{{$asset['profile_name']}}</em> | Costo: <span class="fs-xs text-success text-success fw-semibold">${{number_format($asset['price'], 2)}}</span></p>
                                        </div>
                                    </div>
                                    <div class="col-md-6 ms-auto t">
                                        <div class="text-end">
                                            <button class="btn btn-sm btn-primary" wire:click="actualizarAsset({{$asset['id']}})">Actualizar</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {{-- <div class="block-content block-content-full text-end pt-0">
                                <button type="button" class="btn btn-sm btn-primary" data-bs-dismiss="modal" wire:click="actualizarCliente">Actualizar</button>
                            </div> --}}
                            {{-- <div class="block block-rounded mb-4 block-mode-hidden">
                                <div class="block-header block-header-default">
                                    <h3 class="block-title">Unidades</h3>
                                    <div class="block-options">
                                        <button type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle"><i class="si si-arrow-up"></i></button>
                                    </div>
                                </div>
                                <div class="block-content fs-sm">
                                    <div class="row justify-content-between">
                                        <div class="col-8">
                                            <div class="fw-semibold">APS-28 (9831) APS-28</div>
                                            <div class="fw-normal text-muted"><span class="badge bg-success">$299.00</span> Mensual Arrendamiento</div>
                                            <div class="fw-normal text-muted">Modelo: <em class="fw-bolder">Queclink GV200</em></div>
                                            <div class="fw-normal text-muted">IMEI: <em class="fw-bolder">861074023804670 G</em></div>
                                            <div class="fw-normal text-muted">Fechas: <em class="fw-bolder">18-09-2015 -</em></div>
                                        </div>
                                        <div class="col-4">
                                            <div class="mb-4">
                                                <label class="form-label">Cambiar perfil</label>
                                                <select class="form-select form-control-alt mb-2" wire:model.defer="plataforma">
                                                    <option>Selecciona una plataforma</option>
                                                    <option value="Avocado" selected>Avocado</option>
                                                    <option value="Gurtam">Gurtam</option>
                                                    <option value="Ceiba">Ceiba</option>
                                                </select>
                                                <button type="button" class="btn btn-sm btn-success" data-bs-dismiss="modal" wire:click="nuevoCliente">Actualizar</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div> --}}
                        </div>
                    </div>
                    @empty
                    <div class="col-12">
                        <div class="text-center mb-4">
                            <span>No se encuentra ninguna unidad.</span>
                        </div>
                    </div>
                    @endforelse
                    {{-- {{ $clientes->links() }} --}}
                </div>
            </div>
        </div>
    </div>

    <div wire:ignore.self class="modal" id="modal-block-contact" tabindex="-1" role="dialog" aria-labelledby="modal-block-contact" 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 contacto</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">
                            <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="permiso_contacto" wire:model.defer="permiso_contacto">
                                            <label for="example-text-input-floating">Permisos</label>
                                        </div>
                                    </div>
                                </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">Crear</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div wire:ignore.self class="modal" id="modal-block-fecha" tabindex="-1" role="dialog" aria-labelledby="modal-block-fecha" 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">Nueva fecha de contacto</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-6">
                                <div class="mb-4">
                                    <label class="form-label">¿Quién se contactó o se va a contactar?</label>
                                    <select class="form-select form-control-alt" wire:model.defer="id_contacto_fecha">
                                        <option>Seleccione un contacto</option>
                                        @foreach($clientes as $cliente)
                                        <option value="{{$cliente['id']}}">{{$cliente['name']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="mb-4">
                                    <label for="example-flatpickr-datetime-24">Fecha y hora de evento</label>
                                    <input type="text" class="js-flatpickr form-control form-control-alt" wire:model="contacto_fecha" data-enable-time="true" data-time_24hr="true">
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating mb-4">
                                    <input type="text" class="form-control form-control-alt" wire:model.defer="contacto_descripcion">
                                    <label for="example-text-input-floating">Notas de/para la reunión</label>
                                </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="nuevaFecha">Crear</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div wire:ignore.self class="modal" id="modal-block-fiscal" tabindex="-1" role="dialog" aria-labelledby="modal-block-fiscal" 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">Editar información del perfil</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="pb-2">
                                <div wire:loading class="mt-2">
                                    <div class="spinner-border spinner-border-sm text-primary" role="status">
                                    </div>
                                    <span class="text-muted fs-xs">Cargando información, espere por favor...</span>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="form-floating mb-4">
                                    <input type="text" class="form-control form-control-alt" wire:model.defer="perfil_name">
                                    <label for="example-text-input-floating">Nombre del perfil <span class="text-danger">*</span></label>
                                </div>
                            </div>

                            <label class="form-label">Información fiscal del perfil</label>
                            <div class="col-12">
                                <div class="mb-4">
                                    <div class="input-group">
                                        <span class="input-group-text input-group-text-alt">Correo electrónico para facturas <span class="text-danger">*</span></span>
                                        <input type="text" class="form-control form-control-alt" wire:model.defer="perfil_email">
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-floating mb-4">
                                    <input type="text" class="form-control form-control-alt" wire:model.defer="perfil_social_reason">
                                    <label for="example-text-input-floating">Razón social <span class="text-danger">*</span></label>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-floating mb-4">
                                    <input type="text" class="form-control form-control-alt" wire:model.defer="perfil_rfc">
                                    <label for="example-text-input-floating">RFC <span class="text-danger">*</span></label>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-floating mb-4">
                                    <input type="text" class="form-control form-control-alt" wire:model.defer="perfil_address">
                                    <label for="example-text-input-floating">Dirección</label>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-floating mb-4">
                                    <input type="text" class="form-control form-control-alt" wire:model.defer="perfil_address2">
                                    <label for="example-text-input-floating">Dirección 2</label>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-floating mb-4">
                                    <input type="text" class="form-control form-control-alt" wire:model.defer="perfil_cp">
                                    <label for="example-text-input-floating">CP</label>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-floating mb-4">
                                    <input type="text" class="form-control form-control-alt" wire:model.defer="perfil_city">
                                    <label for="example-text-input-floating">Estado</label>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-floating mb-4">
                                    <input type="text" class="form-control form-control-alt" wire:model.defer="perfil_country">
                                    <label for="example-text-input-floating">Pais</label>
                                </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-primary" data-bs-dismiss="modal" wire:click="actualizarPerfil">Actualizar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div wire:ignore.self class="modal" id="modal-block-document" tabindex="-1" role="dialog" aria-labelledby="modal-block-document" 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">Crear documento con vigencia</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">
                            <label class="form-label">Información del documento</label>
                            <div class="col-8">
                                <div class="form-floating mb-4">
                                    <input type="text" class="form-control form-control-alt" wire:model.defer="file_name">
                                    <label for="example-text-input-floating">Nombre</label>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-floating mb-4">
                                    <input type="date" class="form-control form-control-alt" wire:model.defer="file_date">
                                    <label for="example-text-input-floating">Fecha de vigencia</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Seleccione un archivo</label>
                                <div class="input-group mb-4">
                                    <input type="file" class="form-control" wire:model="file_upload">
                                </div>
                            </div>

                            <div wire:loading wire:target="file_upload" class="mt-2">
                                <div class="spinner-border spinner-border-sm text-primary" role="status">
                                </div>
                                <span class="text-muted fs-xs">Subiendo archivo, espere por favor...</span>
                            </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="crearDocumento">Crear</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div wire:ignore.self class="modal" id="modal-block-accesorio" tabindex="-1" role="dialog" aria-labelledby="modal-block-accesorio" aria-hidden="true">
        <div class="modal-dialog modal-sm" 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">Añadir accesorio</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="mb-4">
                            <label class="form-label">Agregar accesorio</label>
                            <select class="form-select form-control-alt" wire:model.defer="id_accesorio_add">
                                <option>Seleccione</option>
                                @foreach($otros as $accesorio)
                                <option value="{{$accesorio['id']}}">{{$accesorio['name']}}</option>
                                @endforeach
                            </select>
                        </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-primary" data-bs-dismiss="modal" wire:click="aumentarAccesorio">Añadir</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div wire:ignore.self class="modal" id="modal-block-histo" tabindex="-1" role="dialog" aria-labelledby="modal-block-histo" aria-hidden="true">
        <div class="modal-dialog modal-xl" 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">Historial de movimientos</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 wire:loading class="py-3 text-center">
                                <div class="spinner-border spinner-border-sm text-primary" role="status">
                                </div>
                                <span class="text-muted">Cargando información...</span>
                            </div>

                            <div class="content">
                                <ul class="timeline timeline-alt timeline-centered">
                                    @forelse($historial as $hist)
                                    <li class="timeline-event">
                                        <div class="timeline-event-icon bg-secondary">
                                            <i class="fa fa-calendar"></i>
                                        </div>
                                        <div class="timeline-event-block block">
                                            <div class="block-header block-header-default">
                                                <h3 class="block-title">REGISTRO</h3>
                                                <div class="block-options">
                                                    <div class="timeline-event-time block-options-item fs-sm fw-semibold">
                                                        {{date("j F Y, g:i a", strtotime($hist['created_at']))}}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="block-content text-left">
                                                <p class="h4 text-muted mb-0">{{$hist['reason']}}</p>
                                                <span>Responsable: {{$hist['name']}}</span>
                                            </div>
                                        </div>
                                    </li>
                                    @empty
                                    <span class="text-muted">No hay actividad registrada.</span>
                                    @endforelse
                                </ul>
                            </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">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div wire:ignore.self class="modal" id="modal-block-prices" tabindex="-1" role="dialog" aria-labelledby="modal-block-fecha" 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 precio</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-8">
                                <div class="form-floating mb-4">
                                    <input type="text" class="form-control form-control-alt @error('price_description') is-invalid @enderror" wire:model.defer="price_description">
                                    <label for="example-text-input-floating">Descripción del precio <span class="text-danger">*</span></label>
                                </div>
                            </div>

                            <div class="col-4">
                                <div class="form-floating mb-4">
                                    <input type="text" class="form-control form-control-alt @error('price_price') is-invalid @enderror" wire:model.defer="price_price">
                                    <label for="example-text-input-floating">Precio <span class="text-danger">*</span></label>
                                </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="nuevoPrecio">Crear</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/flatpickr/flatpickr.min.js')}}"></script>
<script src="{{asset('assets/js/plugins/select2/js/select2.full.min.js')}}"></script>
<script src="{{asset('assets/js/plugins/slick-carousel/slick.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(['js-flatpickr', 'jq-maxlength', 'jq-select2']);</script>
<script>One.helpersOnLoad(['jq-slick']);</script>
<script>

    document.addEventListener('DOMContentLoaded', function () {
        $(document).ready(function() {
            $('.accesorios-select').select2();
            $('.accesorios-select').on('change', function (e) {
                var data = $('.accesorios-select').select2("val");
                @this.set('accesorios', data);
            });
        });
    });

    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('modalPricesOpenAgain', event => {
        $('#modal-block-prices').modal('show');
    });
</script>
@endsection