@extends('shop.main')

@section('header')
    @include('shop.components.header')
@endsection

@section('main')
    <div class="cover-page hidden" id="shipping-modal">
        <div class="modal">
            <div class="modal-header">
                <h3 class="modal-title">Endereço Alterado!</h3>
            </div>
            <div class="modal-body">
                <div class="shipping-methods ">



                </div>
                <p>Você selecionou um endereço diferente e foi necessário realizar um novo cálculo do valor do frete</p>
                <div class="hidden" id="shippingValue" style="display: flex; align-items:center; justify-content:center; flex-direction: column;">
                    <p style="margin-top: 15px;">O novo valor do frete é de:</p>
                    <span class="new-shipping-price">R$150,09</span>
                </div>
            </div>
            <div class=""modal-footer>
                <button disabled class="btn-close-modal" style="margin-top: 10px;" id="btn-close-modal">Confirmar!</button>
            </div>
        </div>
    </div>
    <div class="cont">
        <div class="main">
            <h1 class="title-area">Confirmar Envio</h1>

            <section class="form-area">
                <h2 class="title-section">Para onde devemos enviar seu pedido?</h2>

                <form class="form-login" id="form-fields" action="">
                    <div class="form-item">
                        <label for="select_address">Escolha um endereço ou crie um novo</label>
                        <select name="select_address" id="select_address">
                            <option value="0">SELECIONE UM ENDEREÇO</option>
                            @foreach ($addresses as $address)
                                <option value="{{ $address->id }}">{{ $address->address_name }}</option>
                            @endforeach
                            <option value="NEW_ADDRESS">NOVO ENDEREÇO</option>
                        </select>
                    </div>

                    <div class="box_address hidden" id="box_address">
                        <div class="address_data_area">
                            <h3 class="name_address" id="addressName">Alison Bucker</h3>
                            <p class="addressLine"><span class="address_title">Rua:</span> <span class="address_value" id="street">Santa Luzia</span></p>
                            <p class="addressLine"><span class="address_title">Número:</span> <span class="address_value" id="number">195</span></p>
                            <p class="addressLine"><span class="address_title">Complemento:</span> <span class="address_value" id="complement">Sobrado Azul</span></p>
                            <p class="addressLine"><span class="address_title">Bairro:</span> <span class="address_value" id="neig">São Francisco</span></p>
                            <p class="addressLine"><span class="address_title">CEP:</span> <span class="address_value" id="zipcode">29175-224</span></p>
                        </div>
                        <div class="address_checked">
                            <i class="far fa-check-circle"></i>
                            <span>Endereço Selecionado</span>
                        </div>
                    </div>

                    <div class="hidden" id="new_address_area">
                        {{-- @if (!$clientData->customer_cpf)
                            <div class="form-item">
                                <label for="cpf">CPF<span class="danger">*</span></label>
                                <input type="text" name="cpf" id="userEmail">
                            </div>
                        @endif --}}
                        <div class="form-item">
                            <label for="address_name">Nome do endereço <span class="danger">*</span></label>
                            <input type="text" name="address_name" id="addressName" required>
                        </div>
                        <div class="form-item">
                            <label for="zipcode">CEP <span class="danger">*</span></label>
                            <input type="text" name="zipcode" id="zipcode" onblur="confirm_address.findCep(this)" required>
                        </div>
                        <div class="fRow">
                            <div class="form-item f3">
                                <label for="street">Rua <span class="danger">*</span></label>
                                <input type="text" name="street" id="street" required>
                            </div>
                            <div class="form-item f1">
                                <label for="number">Número <span class="danger">*</span></label>
                                <input type="text" name="number" id="number" required>
                            </div>
                        </div>
                        <div class="form-item">
                            <label for="line-2">Complemento <small>(OPCIONAL)</small></label>
                            <input type="text" name="complement" id="line-2">
                        </div>
                        <div class="form-item">
                            <label for="neighbohood">Bairro <span class="danger">*</span></label>
                            <input type="text" name="neighbohood" id="neigh" required>
                        </div>
                        <div class="fRow">
                            <div class="form-item">
                                <label for="city">Cidade <span class="danger">*</span></label>
                                <input type="text" name="city" id="city" required>
                            </div>
                            <div class="form-item">
                                <label for="state">Estado <span class="danger">*</span></label>
                                <input type="text" name="state" id="state" required>
                            </div>
                        </div>
                        <div class="form-item">
                            <label for="primaryPhone">Celular <span class="danger">*</span></label>
                            <input type="text" name="primaryPhone" id="primaryPhone" required>
                        </div>
                        <div class="form-item">
                            <label for="secondaryPhone">Celular <small>(OPCIONAL)</small></label>
                            <input type="text" name="secondaryPhone" id="secondaryPhone">
                        </div>
                        <button class="finish-button" id="create_address">Inserir novo Endereço</button>
                    </div>
                    <button disabled class="finish-button" id="next-step-pay">Prosseguir para o pagamento</button>
                </form>
            </section>
        </div>
        <div class="secondary">
            @include('shop.components.confirm-order')
        </div>
    </div>

    <div class="models">
        <div id="has-account">
            <div class="form-item">
                <label for="email">Senha <span class="danger">*</span></label>
                <input type="password" name="password" id="userPassH">
            </div>
            <input type="hidden" value="1">
        </div>

        <div id="no-account">
            <div class="form-item">
                <label for="name">Nome Completo<span class="danger">*</span></label>
                <input type="text" name="name" id="">
            </div>
            <div class="form-item">
                <label for="email">Senha <span class="danger">*</span></label>
                <input type="password" name="password" id="userPassN">
            </div>
            <input type="hidden" value="0">
        </div>
    </div>
    <div class="models shipping-methods-models">
        <div class="shipping-errors">
            O CEP de destino está temporariamente sem entrega domiciliar. A entrega será efetuada na agência indicada no Aviso de Chegada que será entregue no endereço do destinatário.
        </div>
        <label for="">
            <div class="shipping-method-item">
                <input type="radio" id="" name="shipping-price" onchange="confirm_address.selectShippingMethod(this)">
                <span id="title-price">PAC - R$ 9,50</span>
                <p id="mid">Média de 3 dias úteis após a postagem</p>
                <p id="max">Maximo de 3 dias úteis após a postagem</p>
            </div>
        </label>
    </div>
    @csrf
@endsection

@section('footer')
    @include('shop.components.footer')
@endsection
@push('css')
    <link rel="stylesheet" href="{{ asset('shop/css/shop-main.css') }}">
    <link rel="stylesheet" href="{{ asset('shop/css/finish-order.css') }}">
    <link rel="stylesheet" href="{{ asset('shop/css/confirm-shipping.css') }}">
@endpush
@push('js')
    <script src="{{ asset('shop/js/confirm-address.js') }}"></script>
    <script src="{{ asset('shop/js/storage.js') }}"></script>
    <script>
        confirm_address.init()
    </script>
@endpush