@extends('layouts.dashboardnew')

@section('content')

<div class="row g-4">
    <div class="col-12">

        {{-- Indicador de progreso --}}
        <div class="d-flex justify-content-center align-items-center gap-2 mb-4 flex-wrap">
            <div class="d-flex align-items-center gap-2 text-info">
                <span class="badge rounded-circle bg-info d-inline-flex align-items-center justify-content-center fw-bold" style="width:32px;height:32px;">1</span>
                <span class="fw-semibold d-none d-sm-inline">Datos de envío</span>
            </div>
            <span class="border-top border-2" style="width:50px;"></span>
            <div class="d-flex align-items-center gap-2 text-secondary">
                <span class="badge rounded-circle bg-secondary-subtle text-secondary d-inline-flex align-items-center justify-content-center fw-bold" style="width:32px;height:32px;">2</span>
                <span class="fw-semibold d-none d-sm-inline">Método de pago</span>
            </div>
        </div>

        @if(session('error'))
            <div class="alert alert-danger rounded-4">{{ session('error') }}</div>
        @endif
        
        
            <div class="row g-4">

                {{-- ============ COLUMNA IZQUIERDA: PASO 1 ============ --}}
                <div class="col-lg-7">
                    
                    <form method="POST" action="{{ route('carrito-pago-paso1') }}">
                       {{ csrf_field() }}


                    <div class="mb-4">
                        <h2 class="fw-bold mb-1">Datos de envío</h2>
                        <p class="text-muted mb-0">Completa la información para procesar tu pedido</p>
                    </div>

                    {{-- Información de Contacto --}}
                    <div class="card border-0 shadow-sm rounded-4 mb-4">
                        <div class="card-body p-4">
                            <h6 class="card-title d-flex align-items-center gap-2 mb-3 text-uppercase fw-bold">
                                <span class="badge bg-info-subtle text-info-emphasis rounded-3 p-2 fs-6">
                                    <i class="fa-regular fa-circle-user"></i>
                                </span>
                                Información de Contacto
                            </h6>

                            <div class="form-check form-switch bg-info-subtle border border-info-subtle rounded-3 px-5 py-2 mb-3">
                                <input type="checkbox" role="switch" class="form-check-input rellenar" id="rellenarChk" checked onclick="rellenardatos()">
                                <label class="form-check-label fw-medium text-info-emphasis" for="rellenarChk">
                                    Usar datos de mi perfil
                                </label>
                            </div>

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label small fw-semibold">Celular <span class="text-danger">*</span></label>
                                    <input type="text" name="telefono" class="form-control telefono @error('telefono') is-invalid @enderror" value="{{ old('telefono', $datosPaso1['telefono'] ?? '') }}" required>
                                    @error('telefono')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small fw-semibold">Correo electrónico <span class="text-danger">*</span></label>
                                    <input type="email" name="correo" class="form-control correo @error('correo') is-invalid @enderror" value="{{ old('correo', $datosPaso1['correo'] ?? '') }}" required>
                                    @error('correo')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Dirección de Envío --}}
                    <div class="card border-0 shadow-sm rounded-4 mb-4">
                        <div class="card-body p-4">
                            <h6 class="card-title d-flex align-items-center gap-2 mb-3 text-uppercase fw-bold">
                                <span class="badge bg-info-subtle text-info-emphasis rounded-3 p-2 fs-6">
                                    <i class="fa-solid fa-location-dot"></i>
                                </span>
                                Dirección de Envío
                            </h6>

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label small fw-semibold">Nombre <span class="text-danger">*</span></label>
                                    <input type="text" name="nombre" class="form-control nombre" value="{{ old('nombre', $datosPaso1['nombre'] ?? '') }}" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small fw-semibold">Apellido <span class="text-danger">*</span></label>
                                    <input type="text" name="apellido" class="form-control apellido" value="{{ old('apellido', $datosPaso1['apellido'] ?? '') }}" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small fw-semibold">País <span class="text-danger">*</span></label>
                                    <select class="form-select pais" name="pais" required>
                                        <option value="" disabled {{ empty($datosPaso1['pais']) ? 'selected' : '' }}>Seleccione una opción</option>
                                        @foreach($paises as $pais)
                                            <option value="{{$pais->id}}" {{ (old('pais', $datosPaso1['pais'] ?? '') == $pais->id) ? 'selected' : '' }}>{{$pais->nombre}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small fw-semibold">Dirección <span class="text-muted fw-normal">(opcional)</span></label>
                                    <input type="text" name="direccion" class="form-control direccion" value="{{ old('direccion', $datosPaso1['direccion'] ?? '') }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small fw-semibold">Departamento / Estado <span class="text-muted fw-normal">(opcional)</span></label>
                                    <input type="text" name="estado" class="form-control departamento" value="{{ old('estado', $datosPaso1['estado'] ?? '') }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small fw-semibold">Ciudad <span class="text-muted fw-normal">(opcional)</span></label>
                                    <input type="text" name="ciudad" class="form-control ciudad" value="{{ old('ciudad', $datosPaso1['ciudad'] ?? '') }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small fw-semibold">Código postal <span class="text-muted fw-normal">(opcional)</span></label>
                                    <input type="text" name="codigo" class="form-control codigo" value="{{ old('codigo', $datosPaso1['codigo'] ?? '') }}">
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Zona de Envío --}}
                    @if($departamento->isNotEmpty())
                    <div class="card border-0 shadow-sm rounded-4 mb-4">
                        <div class="card-body p-4">
                            <h6 class="card-title d-flex align-items-center gap-2 mb-3 text-uppercase fw-bold">
                                <span class="badge bg-info-subtle text-info-emphasis rounded-3 p-2 fs-6">
                                    <i class="fa-solid fa-truck-fast"></i>
                                </span>
                                Zona de Envío
                            </h6>

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label small fw-semibold">Departamento / Estado <span class="text-danger">*</span></label>
                                    <select class="form-select" name="departamento" id="departamento" onchange="buscarCapital()" required>
                                        <option value="" disabled {{ empty($datosPaso1['departamento']) ? 'selected' : '' }}>Seleccione una opción</option>
                                        @foreach($departamento as $depa)
                                            <option value="{{$depa->id}}" {{ (($datosPaso1['departamento'] ?? '') == $depa->id) ? 'selected' : '' }}>{{$depa->nombre}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small fw-semibold">Ciudad / Municipio <span class="text-danger">*</span></label>
                                    <select class="form-select" name="capital" id="capital" onchange="almacenardatos()" required>
                                        <option value="" disabled selected>Seleccione una opción</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif

                    {{-- Nota --}}
                    <div class="card border-0 shadow-sm rounded-4 mb-4">
                        <div class="card-body p-4">
                            <h6 class="card-title d-flex align-items-center gap-2 mb-3 text-uppercase fw-bold">
                                <span class="badge bg-info-subtle text-info-emphasis rounded-3 p-2 fs-6">
                                    <i class="fa-solid fa-note-sticky"></i>
                                </span>
                                Nota adicional
                            </h6>
                            <textarea class="form-control" name="envio" rows="4" placeholder="Indicaciones para la entrega, referencias, horarios, etc.">{{ old('envio', $datosPaso1['envio'] ?? '') }}</textarea>
                        </div>
                    </div>

                    {{-- Navegación --}}
                    <div class="d-flex flex-column flex-md-row justify-content-between gap-2 mt-3">
                        <a href="{{ route('tienda-index') }}" class="btn btn-outline-secondary">
                            <i class="fa-solid fa-arrow-left me-1"></i> Seguir comprando
                        </a>
                        <button type="submit" class="btn btn-info text-white px-4 fw-semibold">
                            Siguiente: Método de pago <i class="fa-solid fa-arrow-right ms-1"></i>
                        </button>
                    </div>
                    
                    </form>
                </div>

                {{-- ============ COLUMNA DERECHA: RESUMEN ============ --}}
                <div class="col-lg-5">
                    @include('carrito.resumen')
                </div>

            </div>
        
    </div>
</div>

@endsection

@push('script')
<script type="text/javascript">

    /* ===== Búsqueda de capitales según departamento ===== */
    function buscarCapital(){
        $('#capital').empty();
        var depa = $('#departamento').val();
        var capitalGuardado = '{{ $datosPaso1["capital"] ?? "" }}';

        $.get('{{request()->root()}}/tienda/envio/'+depa, function (response) {
            var capitales = JSON.parse(response);

            $('#capital').append($('<option>', { value: "", text: "Seleccione una opción" }));

            capitales.forEach(item => {
                $('#capital').append($('<option>', {
                    value: item.id,
                    text: item.nombre,
                    selected: (capitalGuardado == item.id)
                }));
            });
        });
    }

    /* ===== Actualiza costo de envío en el resumen al cambiar la capital ===== */
    function almacenardatos(){
        var capi = $('#capital').val();
        @foreach($capital as $capit)
            if('{{$capit->id}}' == capi){
                var total = parseFloat(parseFloat('{{$capit->costo}}') + parseFloat('{{$datos['montoGeneral']}}')).toFixed(2);
                @if($moneda->mostrar_a_d)
                    $('.costo').text('{{$moneda->simbolo}} {{$capit->costo}}');
                    $('.total').text('{{$moneda->simbolo}} ' + total);
                @else
                    $('.costo').text('{{$capit->costo}} {{$moneda->simbolo}}');
                    $('.total').text(total + ' {{$moneda->simbolo}}');
                @endif
            }
        @endforeach
    }

    /* ===== Si hay departamento ya elegido (al volver atrás), recarga capitales ===== */
    $(document).ready(function () {
        @if(!empty($datosPaso1['departamento']))
            buscarCapital();
        @endif

        // Si NO hay datos guardados en sesión, autocompleta del perfil
        @if(empty($datosPaso1))
            $('.nombre').val('{{Auth::user()->usercampo->firstname}}');
            $('.apellido').val('{{Auth::user()->usercampo->lastname}}');
            $('.correo').val('{{Auth::user()->user_email}}');
            $('.direccion').val('{{Auth::user()->usercampo->direccion}}');
            $('.departamento').val('{{Auth::user()->usercampo->estado}}');
            $('.ciudad').val('{{Auth::user()->usercampo->ciudad}}');
            $('.codigo').val('{{Auth::user()->usercampo->codigo}}');
            $('.telefono').val('{{Auth::user()->usercampo->phone}}');
            $(".pais option[value='{{Auth::user()->usercampo->idpais}}']").attr("selected", true);
        @endif
    });

    function rellenardatos(){
        if($('.rellenar').prop('checked')) {
            $('.nombre').val('{{Auth::user()->usercampo->firstname}}');
            $('.apellido').val('{{Auth::user()->usercampo->lastname}}');
            $('.correo').val('{{Auth::user()->user_email}}');
            $('.direccion').val('{{Auth::user()->usercampo->direccion}}');
            $('.departamento').val('{{Auth::user()->usercampo->estado}}');
            $('.ciudad').val('{{Auth::user()->usercampo->ciudad}}');
            $('.codigo').val('{{Auth::user()->usercampo->codigo}}');
            $('.telefono').val('{{Auth::user()->usercampo->phone}}');
            $(".pais option[value='{{Auth::user()->usercampo->idpais}}']").attr("selected", true);
        } else {
            $('.nombre, .apellido, .correo, .direccion, .departamento, .ciudad, .codigo, .telefono').val('');
            $('.pais').val('');
        }
    }

</script>
@endpush