@extends('layouts.web')
@section('main')
    @if ($total == 0)
        <div class="checkout-page-wrapper section-padding">
            <div class="container">    
                <form action="{{ route('guardar_direccion_pedido') }}" method="post" class="form">
                    @csrf
                    <div class="row">            
                        <span class="alert alert-info w-100 pb-3">Actualmente no cuenta con una dirección de envío. Llene el siguiente formulario para proseguir</span>
                        <div class="form-group col-6">
                            <label for="">Alias</label>
                            <input type="text" class="form-control" name="alias" id="alias" placeholder="Ejemplo:casa,oficina,trabajo...">
                        </div>
                        <div class="form-group col-6">
                            <label for="codigo_postal">Código Postal</label>
                            <input type="text" class="form-control codigo_postal" name="codigo_postal" id="codigo_postal" data-url="{{ route('codigo_postal') }}" minlength="5" maxlength="5">
                            <span class="invalid-feeback"></span>
                        </div>
                        <div class="form-group col-6">
                            <label for="estado">Estado</label>
                            <select name="estado" id="estado" class="form-control">
                                <option></option>
                            </select>
                            <span class="invalid-feeback"></span>
                        </div>
                        <div class="form-group col-6">
                            <label for="municipio">Municipio</label>
                            <select name="municipio" id="municipio" class="form-control">
                                <option></option>
                            </select>
                            <span class="invalid-feeback"></span>
                        </div>
                        <div class="form-group col-6">
                            <label for="localidad">Colonia, Localidad, Asentamiento</label>
                            <select name="localidad" id="localidad" class="form-control">
                                <option></option>
                            </select>
                            <span class="invalid-feeback"></span>
                        </div>
                        <div class="form-group col-6">
                            <label for="num_interior">Número Interior</label>
                            <input type="text" class="form-control" name="num_interior" id="num_interior">
                            <span class="invalid-feedback"></span>
                        </div>
                        <div class="form-group col-6">
                            <label for="num_exterior">Número Exterior</label>
                            <input type="text" class="form-control" name="num_exterior" id="num_exterior">
                            <span class="invalid-feedback"></span>
                        </div>
                        <div class="form-group col-6">
                            <label for="direccion">Calle o Avenida</label>
                            <input type="text" name="direccion" id="direccion" class="form-control">
                            <span class="invalid-feeback"></span>
                        </div>
                        <div class="form-group col-12">
                            <label for="referencia">Referencias</label>
                            <textarea name="referencias" id="referencias" cols="30" rows="2" class="form-control"></textarea>
                            <span class="invalid-feeback"></span>
                        </div>
                        <div class="form-group col-12 text-center">
                            <button class="btn btn-sqr submit" type="submit">Guardar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @else
        <div class="checkout-page-wrapper section-padding">
            <div class="container">    
                <form action="{{ route('confirmar_pedido') }}" method="post" class="form">
                    @csrf
                    <div class="row"> 
                        <span class="alert alert-info w-100 pb-3">Seleccion la dirección del envío</span>
                        <div class="col-12 form-group">
                            <label for="direccion">Dirección de envío</label>                                
                            @foreach ($direcciones as $item)
                            <div class="form-check">
                                <input class="form-check-input direccion_pedido" type="radio" name="direccion" id="direccion{{ $item->id }}" value="{{ $item->id }}" {{ $item->id == $direcciones->first()->id ?"checked": "" }}>
                                <label class="form-check-label" for="direccion{{ $item->id }}">
                                    {{ $item->alias }}
                                </label>
                            </div>
                            @endforeach
                        </div>
                        <div class="form-group col-3">
                            <label for="codigo_postal">Código Postal</label>
                            <input type="text" class="form-control codigo_postal" id="codigo_postal">
                            <span class="invalid-feeback"></span>
                        </div>
                        <div class="form-group col-3">
                            <label for="estado">Estado</label>
                            <input type="text" class="form-control" id="estado">
                            <span class="invalid-feeback"></span>
                        </div>
                        <div class="form-group col-3">
                            <label for="municipio">Municipio</label>
                            <input type="text" class="form-control" id="municipio">
                            <span class="invalid-feeback"></span>
                        </div>
                        <div class="form-group col-3">
                            <label for="localidad">Colonia, Localidad, Asentamiento</label>
                            <input type="text" id="localidad" class="form-control">
                            <span class="invalid-feeback"></span>
                        </div>
                        <div class="form-group col-3">
                            <label for="num_interior">Número Interior</label>
                            <input type="text" class="form-control" id="num_interior">
                            <span class="invalid-feedback"></span>
                        </div>
                        <div class="form-group col-3">
                            <label for="num_exterior">Número Exterior</label>
                            <input type="text" class="form-control" id="num_exterior">
                            <span class="invalid-feedback"></span>
                        </div>
                        <div class="form-group col-3">
                            <label for="direccion">Calle o Avenida</label>
                            <input type="text" id="direccion" class="form-control">
                            <span class="invalid-feeback"></span>
                        </div>
                        <div class="form-group col-8">
                            <label for="referencia">Referencias</label>
                            <textarea id="referencias" cols="30" rows="2" class="form-control"></textarea>
                            <span class="invalid-feeback"></span>
                        </div>
                        <div class="form-group col-12 text-right">
                            <button class="btn btn-sqr submit" type="submit">Guardar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endif
@endsection

@section('scripts')
    @parent
    <script>
        $(document).ready(function(){
            function rellenarDireccion(id_direccion){
                $.ajax({
                    url: "{{ route('rellenar_direccion') }}",
                    type: "POST",
                    data: {_token:$("meta[name='csrf-token']").attr('content'),direccion:id_direccion},
                }).done(function(response){
                    console.log(response);
                });
            }
            $(".direccion_pedido").change(function(){
                rellenarDireccion($(this).val());
            });
        });
    </script>
@endsection