@extends('template.main-template')

@section('content')


    <div class="container margin_30">
        <div class="page_header">
            {{-- <div class="breadcrumbs">
                <ul>
                    <li><a href="{{ URL::to('/') }}">Home</a></li>
                    <li><a href="{{ route('cart.index') }}">Cart</a></li>
                    <li>Confirm Address</li>
                </ul>
            </div> --}}

            <h1>Confirm Shipping</h1>

        </div>
    </div>


    <div class="content">
        <section class="padding-top-100 padding-bottom-50 pages-in chart-page">
            <div class="container">

                <div class="cont">
                    <div class="main">
                        <section class="form-area">
                            <h4 class="mt-5">Where should we send your order?</h4>

                            <form class="form-login" id="form-fields" action="">
                                <div class="form-item">
                                    <label for="select_address">Select an address or create a new!</label>
                                    <select name="select_address" id="select_address" class="form-control">
                                        <option value="0">SELECT ADDRESS</option>
                                        @foreach ($addresses as $address)
                                            <option value="{{ $address->id }}">{{ $address->address_name }}</option>
                                        @endforeach
                                        <option value="NEW_ADDRESS">NEW ADDRESS</option>
                                    </select>
                                </div>

                                <div class="box_address hidden" style="display: none" id="box_address">
                                    <div class="address_data_area">
                                        <h3 class="name_address" id="addressName">Alison Bucker</h3>
                                        <p class="addressLine"><span class="address_title">Address Line 1:</span> <span
                                                class="address_value" id="street">Santa Luzia</span></p>
                                        {{-- <p class="addressLine"><span class="address_title">Number:</span> <span
                                                class="address_value" id="number">195</span></p> --}}
                                        {{-- <p class="addressLine"><span class="address_title">Complement:</span> <span
                                                class="address_value" id="complement"></span></p> --}}
                                        {{-- <p class="addressLine"><span class="address_title">Neighborhood:</span> <span
                                                class="address_value" id="neig">São Francisco</span></p> --}}
                                        <p class="addressLine"><span class="address_title">Zipcode:</span> <span
                                                class="address_value" id="zipcode">29175-224</span></p>
                                        <p class="addressLine"><span class="address_title">City:</span> <span
                                                class="address_value" id="city-fill"></span></p>
                                        <p class="addressLine"><span class="address_title">State:</span> <span
                                                class="address_value" id="state-fill"></span></p>
                                    </div>
                                    <div class="address_checked">
                                        <i class="fa-solid fa-check"></i> &nbsp;
                                        <span>Selected Address</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">Name <span class="danger">*</span></label>
                                        <input type="text" name="address_name" id="addressName" required class="form-control">
                                    </div>
                                    <div class="form-item">
                                        <label for="zipcode">Zipcode <span class="danger">*</span></label>
                                        <input type="text" value="{{session()->get('zipcode')}}" name="zipcode" onblur="confirm_address.findCep(this)" id="zipcode" required class="form-control">
                                    </div>
                                    <div class="fRow">
                                        <div class="form-item f3">
                                            <label for="street">Address Line 1 <span class="danger">*</span></label>
                                            <input type="text" name="street" id="street" required class="form-control">
                                        </div>
                                        {{-- <div class="form-item f1">
                                            <label for="number">Number <span class="danger">*</span></label>
                                            <input type="text" name="number" id="number" required>
                                        </div> --}}
                                    </div>
                                    {{-- <div class="form-item">
                                        <label for="line-2">Complement <small>(OPTIONAL)</small></label>
                                        <input type="text" name="complement" id="line-2">
                                    </div>
                                    <div class="form-item">
                                        <label for="neighbohood">Neighborhood <span class="danger">*</span></label>
                                        <input type="text" name="neighbohood" id="neigh" required>
                                    </div> --}}
                                    <div class="fRow">
                                        <div class="form-item">
                                            <label for="city">City <span class="danger">*</span></label>
                                            <input type="text" name="city" id="city" required class="form-control">
                                        </div>
                                        <div class="form-item">
                                            <label for="state">State <span class="danger">*</span></label>
                                            <input type="text" name="state" id="state" required class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-item">
                                        <label for="primaryPhone">Phone <span class="danger">*</span></label>
                                        <input type="text" name="primaryPhone" id="primaryPhone" required class="form-control">
                                    </div>
                                    <div class="form-item">
                                        <label for="secondaryPhone">Phone <small>(OPTIONAL)</small></label>
                                        <input type="text" name="secondaryPhone" id="secondaryPhone" class="form-control">
                                    </div>

                                    <div style="display: flex; justify-content: flex-end;">
                                        <button class="btn btn-primary" id="create_address">Insert a new Address</button>
                                    </div>
                                </div>
                                <button disabled class="btn" style="margin-top: 20px; background-color: #3fa9c9; color: #fff;"id="next-step-pay">Proceed To Payment</button>
                            </form>
                        </section>
                    </div>
                    <div class="secondary">
                        @include('shop.components.confirm-order')
                    </div>
                </div>
                @csrf

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

    @csrf
@endsection

@push('css')
    <link rel="stylesheet" href="{{ asset('shop/css/finish-order.css') }}">
    <link rel="stylesheet" href="{{ asset('shop/css/confirm-shipping.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@endpush
@push('javascript')
    <script src="{{ asset('shop/js/confirm-address.js') }}"></script>
    <script src="{{ asset('shop/js/storage.js') }}"></script>
    <script>
        confirm_address.init()
    </script>
@endpush