@section('styles')
    <link href="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.css" rel="stylesheet">
    <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.3/mapbox-gl-geocoder.css"
        type="text/css">
@endsection
<div class="row">
    <div class="col-xl-8">
        <div class="card">
            <div class="card-body checkout-tab">

                <form action="#">
                    <div class="step-arrow-nav mt-n3 mx-n3 mb-3">

                        <ul class="nav nav-pills nav-justified custom-nav" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link fs-15 p-3 active" id="pills-bill-info-tab" data-bs-toggle="pill"
                                    data-bs-target="#pills-bill-info" type="button" role="tab"
                                    aria-controls="pills-bill-info" aria-selected="true">
                                    <i
                                        class="ri-user-2-line fs-16 p-2 bg-primary-subtle text-primary rounded-circle align-middle me-2"></i>
                                    Información personal
                                </button>
                            </li>



                        </ul>
                    </div>

                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="pills-bill-info" role="tabpanel"
                            aria-labelledby="pills-bill-info-tab">
                            <div>

                                <h5 class="mb-1">Información de Facturación</h5>
                                <p class="text-muted mb-4">Por favor, rellene toda la información a continuación</p>
                            </div>

                            <div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="mb-3">
                                            <label for="billinginfo-firstName" class="form-label">Nombre
                                                completo</label>
                                            <input type="text" class="form-control" wire:model="name"
                                                id="billinginfo-firstName" placeholder="Enter first name"
                                                value="">
                                        </div>
                                    </div>

                                    <div class="col-sm-6">
                                        <div class="mb-3">
                                            <label for="billinginfo-lastName" class="form-label">Usuario</label>
                                            <input type="text" class="form-control" wire:model="username"
                                                id="billinginfo-lastName" placeholder="Enter last name" value="">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">


                                    <div class="col-sm-12">
                                        <div class="mb-3">
                                            <label for="billinginfo-phone" class="form-label">Teléfono</label>
                                            <input type="text" wire:model="telefono" class="form-control"
                                                id="billinginfo-phone" placeholder="Enter phone no.">
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label for="billinginfo-address" class="form-label">Dirección</label>
                                    <textarea class="form-control" wire:model="address" id="billinginfo-address" placeholder="Enter address" rows="3"></textarea>
                                </div>


                                <div class="d-flex align-items-start gap-3 mt-3">
                                    <button type="button" class="btn btn-primary btn-label right ms-auto nexttab"
                                        wire:click="checkout()">
                                        <i class="ri-truck-line label-icon align-middle fs-16 ms-2"></i>Completar el
                                        pedido
                                    </button>
                                </div>
                            </div>
                        </div>
                        <!-- end tab pane -->

                        <!-- end tab pane -->
                    </div>
                    <!-- end tab content -->
                </form>
            </div>
            <!-- end card body -->
        </div>
        <!-- end card -->
    </div>
    <!-- end col -->
    @php
        $carts = \App\Models\Cart::getCart();
        $total = \App\Models\Cart::getTotal();
    @endphp
    <div class="col-xl-4">
        <div class="card">
            <div class="card-header">
                <div class="d-flex">
                    <div class="flex-grow-1">
                        <h5 class="card-title mb-0">Resumen de Pedidos</h5>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive table-card">
                    <table class="table table-borderless align-middle mb-0">
                        <thead class="table-light text-muted">
                            <tr>
                                <th style="width: 90px;" scope="col">Producto</th>
                                <th scope="col">Información del Producto</th>
                                <th scope="col" class="text-end">Precio
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($carts as $cart)
                                <tr>
                                    <td>
                                        <div class="avatar-md bg-light rounded p-1">
                                            <img src="/media/producto/{{ $cart->associatedModel->image->path }}"
                                                alt="" class="img-fluid d-block">
                                        </div>
                                    </td>
                                    <td>
                                        <h5 class="fs-14"><a href="apps-ecommerce-product-details.html"
                                                class="text-body">{{ $cart->name }}</a></h5>
                                        <p class="text-muted mb-0">{{ money($cart->price) }} x {{ $cart->quantity }}</p>
                                    </td>
                                    <td class="text-end">{{ money($cart->price * $cart->quantity) }}</td>
                                </tr>
                            @endforeach
                            <tr>
                                <td class="fw-semibold" colspan="2">
                                    <label for="">Método de pago</label>
                                    <select wire:model.live="metodoPago" id="" class="form-select">
                                        <option value="">Seleccione</option>
                                        <option value="Bolivares">Bolivares</option>
                                        <option value="Divisas">Divisas</option>
                                    </select>
                                </td>

                            </tr>
                            <tr>
                                <td class="fw-semibold" colspan="2">Sub Total :</td>
                                <td class="fw-semibold text-end">{{ money($total) }}</td>
                            </tr>

                            <tr>
                                <td colspan="2">Tasa del dólar: </td>
                                <td class="text-end">{{ moneyBS(tasa()) }}</td>
                            </tr>
                            <tr class="table-active">
                                <th colspan="2">Total (USD) :</th>
                                <td class="text-end">
                                    <span class="fw-semibold">
                                        {{ money($total) }}
                                    </span>
                                </td>
                            </tr>
                            <tr class="table-active">
                                <th colspan="2">Total (BS) :</th>
                                <td class="text-end">
                                    <span class="fw-semibold">
                                        {{ moneyBS($total * tasa()) }}
                                    </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                </div>
            </div>
            <!-- end card body -->
        </div>
        <!-- end card -->
    </div>
    <!-- end col -->
</div>
<!-- end row -->
@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
        integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.js"></script>
    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.3/mapbox-gl-geocoder.min.js"></script>
    <script type="text/javascript">
        navigator.geolocation.getCurrentPosition(function(position) {
            let latitude = position.coords.latitude;
            let longitude = position.coords.longitude;


            $.ajax({
                url: 'https://nominatim.openstreetmap.org/reverse?lat=' + latitude + '&lon=' + longitude +
                    '&zoom=40&addressdetails=1&format=json',
                type: 'GET',
                async: true,
                dataType: 'json',
                success: function(response) {
                    var content = response.address;

                    var city = response.address.city;
                    var country = response.address.country;
                    var county = response.address.county;
                    var municipality = response.address.municipality;
                    var road = response.address.road;
                    var postcode = response.address.postcode;
                    var state = response.address.state;
                    var office = response.display_name;
                    $('#city').val(city)
                    $('#country').val(country)
                    $('#county').val(county)
                    $('#municipality').val(municipality)
                    $('#road').val(road)
                    $('#postcode').val(postcode)
                    $('#state').val(state)
                    $('#office').val(office)
                    @this.set('city', city);
                    @this.set('country', country);
                    @this.set('county', county);
                    @this.set('municipality', municipality);
                    @this.set('road', road);
                    @this.set('postcode', postcode);
                    @this.set('state', state);
                    @this.set('office', office);
                    @this.set('latitud', latitude);
                    @this.set('longitud', longitude);
                    @this.set('address', office);
                },
                error: function(error) {
                    //console.log(error);
                }
            });
        });
    </script>
@endsection