@php
    $currency = $currency ?? country_currency();
    $countryCode = $countryCode ?? country_code();
@endphp
<div wire:ignore.self class="modal" id="ModalEditSaleClient" role="dialog" tabindex="-1" data-keyboard="false"
    aria-modal="true" data-backdrop="static" wire:key="ModalEditSaleClientKey">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <b>Editar Cliente - Venta #{{ $sale->id ?? '' }}</b>
                </h5>
                <button type="button" class="close" wire:click="closeModal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">

                    <div class="col-12 col-md-6 form-group mb-3" x-data="{ name: @entangle('client.name') }">
                        <label>Nombre <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" x-model="name" autocomplete="off-name"
                            @blur="name = toCamelCase(name)" placeholder="Nombre del cliente">
                        @error('client.name')
                            <span class="text-danger er">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="col-12 col-md-6 form-group mb-3" x-data="{ lastname: @entangle('client.lastname') }">
                        <label>Apellido</label>
                        <input type="text" class="form-control" x-model="lastname" autocomplete="off-lastname"
                            @blur="lastname = toCamelCase(lastname)" placeholder="Apellido del cliente">
                        @error('client.lastname')
                            <span class="text-danger er">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="col-12 col-md-6 form-group mb-3">
                        <label>Teléfono <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">+{{ $selectedCountryCode['phone_code'] ?? '56' }}</span>
                            </div>
                            <input type="text" class="form-control" wire:model.live="client.phone"
                                placeholder="Teléfono" autocomplete="off">
                        </div>
                        @error('client.phone')
                            <span class="text-danger er">{{ $message }}</span>
                        @enderror
                    </div>

                    {{-- Separator --}}
                    <div class="col-12 mt-3">
                        <hr>
                        <h6 class="mb-3"><strong>Dirección de Entrega</strong></h6>
                    </div>

                    <div class="col-12 col-md-6 form-group mb-3" x-data="{ address: @entangle('clientAddress.address') }">
                        <label>Dirección <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" x-model="address" autocomplete="off-address"
                            @blur="address = toCamelCase(address)" placeholder="Ej: Av. Libertador 123">
                        @error('clientAddress.address')
                            <span class="text-danger er">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="col-12 col-md-6 form-group mb-3">
                        <label class="text-capitalize">{{ __('dictionary.commune.word', [], $countryCode) }} <span
                                class="text-danger">*</span></label>
                        <select class="form-control basic text-capitalize" wire:model.change="clientAddress.state">
                            <option value='null'>Seleccionar {{ __('dictionary.commune.word', [], $countryCode) }}
                            </option>
                            @if ($communes && count($communes) > 0)
                                @foreach ($communes as $commune)
                                    <option value="{{ $commune->name }}"
                                        {{ $clientAddress->state === $commune->name ? 'selected' : '' }}>
                                        {{ $commune->name }}
                                    </option>
                                @endforeach
                            @else
                                <option disabled>No hay comunas disponibles</option>
                            @endif
                        </select>
                        @error('clientAddress.state')
                            <span class="text-danger er">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="col-12 col-md-6 form-group mb-3" x-data="{ flat: @entangle('clientAddress.flat') }">
                        <label>Departamento / Casa</label>
                        <input type="text" class="form-control" x-model="flat" autocomplete="off-flat"
                            @blur="flat = toCamelCase(flat.trimStart().replace(/[\t\n\r\f\v]/g, '').replace(/[^\w\s,.'ÁÉÍÓÚáéíóúüñÑ-]/g, ''))"
                            placeholder="Ej: Depto 402">
                        @error('clientAddress.flat')
                            <span class="text-danger er">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="col-12 form-group mb-3">
                        <label>Comentario Dirección</label>
                        <textarea wire:model.blur='clientAddress.note' class="form-control" rows="2"
                            placeholder="Ej: Casa color azul, portón negro"></textarea>
                        @error('clientAddress.note')
                            <span class="text-danger er">{{ $message }}</span>
                        @enderror
                    </div>

                    @if ($showMotoPropia)
                        <div class="col-12 alert alert-light-danger" role="alert">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <svg xmlns="http://www.w3.org/2000/svg" data-dismiss="alert" width="24"
                                    height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                    class="feather feather-x close">
                                    <line x1="18" y1="6" x2="6" y2="18"></line>
                                    <line x1="6" y1="6" x2="18" y2="18"></line>
                                </svg>
                            </button>
                            {!! $messageMotoQD !!}
                        </div>
                    @endif

                    <div class="col-12 col-md-6">
                        {{-- Solo restaurantes pueden elegir si usar DeliFast o no --}}
                        @if ($tipoPos == 'restaurante' && $usaQD && !$obligaQD)
                            <label class="new-control new-checkbox checkbox-success">
                                <input type="checkbox" class="new-control-input" wire:model='pideQDDefecto'>
                                <span class="new-control-indicator"></span>Repartidor DeliFast
                            </label>
                        @endif

                        {{-- Selector de tipo de vehículo --}}
                        {{-- Para delifast: siempre mostrar --}}
                        {{-- Para restaurante: siempre mostrar si está configurado --}}
                        @if ($typeDeliveryDelifast == 'moto-auto' && ($tipoPos == 'delifast' || $tipoPos == 'restaurante'))
                            <div class="d-flex">
                                <div class="n-chk">
                                    <label class="new-control new-radio radio-success">
                                        <input type="radio" class="new-control-input" name="custom-type-deliverys"
                                            value="motorista" wire:model="sale.type_vehicle">
                                        <span class="new-control-indicator"></span>
                                        <span class="text-black">Motorista</span>
                                    </label>
                                </div>
                                <div class="n-chk">
                                    <label class="new-control new-radio radio-success">
                                        <input type="radio" class="new-control-input" name="custom-type-deliverys"
                                            value="automovil" wire:model="sale.type_vehicle">
                                        <span class="new-control-indicator"></span>
                                        <span class="text-black">Automóvil</span>
                                    </label>
                                </div>
                            </div>
                        @endif
                    </div>

                    <div class="col-12 col-md-6 mb-3">
                        <button class="btn btn-success btn-block" wire:click.prevent='searchAddressCustom'
                            wire:loading.attr="disabled">
                            <span wire:loading.remove wire:target="searchAddressCustom">
                                <i class="fas fa-search"></i> Buscar Dirección
                            </span>
                            <span wire:loading wire:target="searchAddressCustom">
                                <i class="fas fa-spinner fa-spin"></i> Buscando...
                            </span>
                        </button>
                    </div>
                    <div class="col-12 mb-3">
                        <h4>{{ $msgGeocodesCustom }}</h4>
                    </div>

                    {{-- Address Suggestions --}}
                    @if ($geocodesCustom && $geocodesCustom->count() > 0)
                        <div class="col-12 mb-3">
                            <ul class="list-group list-group-icons-meta">
                                @foreach ($geocodesCustom as $key => $geocode)
                                    <li class="list-group-item list-group-item-action" style="cursor: pointer;"
                                        wire:click="selectMarkerCustom({{ $key }})">
                                        <div class="media">
                                            <div class="d-flex mr-3">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                    class="feather feather-map-pin">
                                                    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                                                    <circle cx="12" cy="10" r="3"></circle>
                                                </svg>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="tx-inverse">
                                                    {{ $geocode['name_preferred'] ?? $geocode['place_formatted'] }}
                                                </h6>
                                                @if (isset($geocode['name_place']) && $geocode['name_place'])
                                                    <p class="mg-b-0">{{ $geocode['name_place'] }}</p>
                                                @endif
                                            </div>
                                        </div>
                                    </li>
                                @endforeach

                                @if ($showBadDirection)
                                    <li class="list-group-item list-group-item-action" style="cursor: pointer;"
                                        wire:click="selectMarkerCustom(-1)">
                                        <div class="media">
                                            <div class="d-flex mr-3">
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none"
                                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                                                    width="24" height="24">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                                                </svg>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="tx-inverse">
                                                    ¿No es ninguna de las direcciones?
                                                </h6>
                                                <p class="mg-b-0">Selecciona esta opción o verifica que la comuna o la
                                                    numeración de la dirección estén bien.</p>
                                            </div>
                                        </div>
                                    </li>
                                @endif

                                @if ($showBadDirectionCustom)
                                    <li class="list-group-item list-group-item-action" style="cursor: pointer;"
                                        wire:click="changePoint">
                                        <div class="media">
                                            <div class="d-flex mr-3">
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none"
                                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                                                    width="24" height="24">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z" />
                                                </svg>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="tx-inverse">
                                                    Ingresa las coordenadas de forma manual.
                                                </h6>
                                                <p class="mg-b-0">Selecciona esta opción para ingresar las coordenadas
                                                    manualmente.</p>
                                            </div>
                                        </div>
                                    </li>
                                @endif
                            </ul>
                        </div>
                    @endif

                    {{-- Map - Disponible para delifast y restaurante --}}
                    <div class="col-12 mb-3" wire:ignore id="mapContainer" style="display: none">
                        <div id="mapid" style="height: 300px; width: 100%"></div>
                    </div>

                    @if ((!$isMovedMarker && $showMap) || ($isMovedMarkerConfirm && $showMap))
                        <div class="col-12 text-center mb-3">
                            <button class="btn btn-success" wire:click.prevent='dragendMarker'
                                wire:loading.attr="disabled" wire:target='dragendMarker'>
                                <span wire:loading.remove wire:target="dragendMarker">Mover Marcador</span>
                                <span wire:loading wire:target="dragendMarker">Moviendo...</span>
                            </button>
                        </div>
                    @endif
                    @if ($isMovedMarker && !$isMovedMarkerConfirm)
                        <div class="col-12 text-center mb-3">
                            <button class="btn btn-primary" wire:click.prevent='confirmPoint'
                                wire:target='confirmPoint' wire:loading.attr="disabled">
                                <span wire:loading.remove wire:target="confirmPoint">Confirmar Punto</span>
                                <span wire:loading wire:target="confirmPoint">Confirmando...</span>
                            </button>
                        </div>
                    @endif

                    {{-- Cost Distance Info --}}
                    @if ($showCostDistance)
                        <div class="col-12">
                            <h6>
                                <strong>{{ $distance
                                    ? 'Distancia: ' .
                                        $clientAddress->kilometres .
                                        ' KM - ' .
                                        $clientAddress->duration -
                                        5 .
                                        ' A ' .
                                        $clientAddress->duration +
                                        5 .
                                        ' min aprox.'
                                    : '' }}</strong>
                            </h6>
                            <h6>
                                <strong>{{ $distance
                                    ? 'Despacho: ' .
                                        $distance->name .
                                        ' de ' .
                                        $distance->km_start .
                                        ' a ' .
                                        $distance->km_end .
                                        ' KM - Precio: $' .
                                        number_format($distance->price, 0, ',', '.')
                                    : '' }}</strong>
                            </h6>
                        </div>
                    @endif
                </div>
            </div>
            <div class="modal-footer" style="display: block;">
                <div class="row no-gutters">
                    <div class="col-12 col-md-8 text-left">
                    </div>
                    <div class="col-12 col-md-4 text-right">
                        <button type="button" wire:click.prevent='closeModal' class="btn btn-secondary"
                            wire:loading.attr="disabled">
                            Cancelar
                        </button>
                        <button type="button" wire:click.prevent='saveChanges' class="btn btn-success"
                            wire:loading.attr="disabled" wire:target="saveChanges"
                            @if (!$hasChanges) disabled @endif>
                            <span wire:loading.remove wire:target="saveChanges">Guardar</span>
                            <span wire:loading wire:target="saveChanges">Guardando...</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
    <script>
        function toCamelCase(str) {
            return str
                .split(' ')
                .map((word, index) => {
                    return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
                })
                .join(' ')
        }
    </script>
@endpush