@extends('template.main-template')

@section('content')
    <section class="sub-bnr"
        style="background: url({{ asset('template/images/banners/cart-hero.png') }}); background-position: fixed !important;"
        data-stellar-background-ratio="0.5">
        <div class="position-center-center">
            <div class="container">
                <h4 class="title-area">Confirm Shipping</h4>

                <ol class="breadcrumb">
                    <li><a href="{{ URL::to('/') }}">Home</a></li>
                    <li><a href="{{ route('cart.index') }}">Confirm Order</a></li>
                    <li class="active">Confirm Shipping</li>
                </ol>
            </div>
        </div>
    </section>


    <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="">Where should we send your samples?</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">
                                        <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" 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="far fa-check-circle"></i>
                                        <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>
                                    </div>
                                    <div class="form-item">
                                        <label for="zipcode">Zipcode <span class="danger">*</span></label>
                                        <input type="text" name="zipcode" onblur="confirm_address.findCep(this)" id="zipcode" required>
                                    </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>
                                        </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>
                                        </div>
                                        <div class="form-item">
                                            <label for="state">State <span class="danger">*</span></label>
                                            <input type="text" name="state" id="state" required>
                                        </div>
                                    </div>
                                    <div class="form-item">
                                        <label for="primaryPhone">Phone <span class="danger">*</span></label>
                                        <input type="text" name="primaryPhone" id="primaryPhone" required>
                                    </div>
                                    <div class="form-item">
                                        <label for="secondaryPhone">Phone <small>(OPTIONAL)</small></label>
                                        <input type="text" name="secondaryPhone" id="secondaryPhone">
                                    </div>
                                    <button class="btn btn-block" id="create_address">Insert a new Address</button>
                                </div>
                                <button disabled class="btn" style="margin-top: 20px;" id="next-step-pay">Request
                                    Sample</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/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('javascript')
    <script src="{{ asset('shop/js/confirm-address.js') }}"></script>
    <script src="{{ asset('shop/js/storage.js') }}"></script>
    <script>
        confirm_address.init()
    </script>
@endpush