@extends('front.user.layout')
@section('title', 'Addresses')
@section('content')
    <div class="cartSec">
        <div class="container-fluid">
            <div class="main-padingbdy">
                <div class="contentBox">
                    <div class="contentHeader justify-content-sm-between justify-content-center flex-wrap">
                        <h2>addresses</h2>
                        <a class="btn saveBtn m-0" href="#" data-toggle="modal" data-target="#addNewsAddressModal">Add
                            Address</a>
                    </div>
                    <div class="contentList adresMain">

                        <div class="row">
                            @forelse($addresses as $address)
{{--                                @dd($address)--}}
                                <div class="col-md-6">
                                    <div class="adrsContent">
                                        <h2>{{$address->title ?? ''}}</h2>
                                        <div class="adrsBox">
                                            <ul>
                                                <li>Name: {{$address->first_name . ' ' .$address->last_name}}</li>
                                                <li>
                                                    <a href="javascript:void(0)" class="editAddress"
                                                       data-id="{{$address->id}}"><i class="far fa-edit"></i></a>
                                                    <a href="javascript:void(0)" class="removeAddress"
                                                       data-id="{{$address->id}}"><i class="fas fa-trash"></i></a>
                                                </li>
                                            </ul>
                                            <br>
                                            <label>Address: {{$address->address_number ?? ''}}  {{$address->address ?? ''}}</label>
                                            <br>
                                            <br>
                                            <label>Country: {{$address->country ?? ''}}</label>
                                            <br>
                                            <br>
                                            <label>City: {{$address->city ?? ''}}</label>
                                            <br>
                                            <br>
                                            <label>Street: {{$address->street ?? ''}}</label>
                                            <br>
                                            <br>
                                            <label>State: {{$address->state ?? ''}}</label>
                                            <br>
                                            <br>
                                            <label>Zip Code: {{$address->zip_code ?? ''}}</label>
                                            <br>
                                            <br>
                                            <label>Order Receiving Date: {{$address->order_days ?? ''}}</label>
                                            <br>
                                            <br>
                                            <label>Shipping Method: {{$address->shipping_billing ?? ''}}</label>
                                            <br>
                                            <br>
                                            <label>Phone: <a
                                                        href="javascript:void(0)">{{$address->phone_no}}</a></label>
                                        </div>
                                    </div>
                                </div>
                            @empty
                            @endforelse

{{--                            <div class="col-md-12 text-right">--}}
{{--                                <a href="#" class="saveBtn">SAVE</a>--}}
{{--                            </div>--}}
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Edit Address Modal-->
    <div class="modal fade accountAccesSec" id="editAddressModal" tabindex="-1" aria-labelledby="editAddressModal"
         aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content p-5">
                <button type="button" class="close " data-dismiss="modal" aria-label="Close" id="editAddressModal">
                    <span aria-hidden="true">&times;</span>
                </button>
                <div class="row">
                    <form method="post" id="editAddressForm" action="" class="row justify-content-center formStyle">
                        <div class="col-md-12">
                            <div class="title inner">
                                <h2>Edit Address</h2>
                            </div>
                        </div>
                        @csrf
                        <div class="col-md-6">
                            <label>First Name <span>*</span></label>
                            <input type="text" id="first_name_e" name="first_name"
                                   class="form-control @error('first_name') is-invalid @enderror" placeholder=""
                                   required>
                            @error('first_name')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Last Name <span>*</span></label>
                            <input type="text" id="last_name_e" name="last_name"
                                   class="form-control @error('last_name') is-invalid @enderror" placeholder=""
                                   required>
                            @error('last_name')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Phone <span>*</span></label>
                            <div class="CNum">
                                <div class="input-group">
                                    <input type="number" id="phone_no_e" name="phone_no"
                                           class="form-control @error('phone_no') is-invalid @enderror"
                                           placeholder="50 123 4567" required>
                                    @error('phone_no')
                                    <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label>Title <span>*</span></label>
                            <input type="text" id="title_e" name="title"
                                   class="form-control @error('title') is-invalid @enderror" placeholder="" required>
                            @error('title')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Number <span>*</span></label>
                            <input type="text" id="number_e" name="address_number"
                                   class="form-control @error('address_number') is-invalid @enderror" placeholder="Address Number" required>
                            @error('address_number')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Street <span>*</span></label>
                            <input type="text" id="street_e" name="street"
                                   class="form-control @error('street') is-invalid @enderror" placeholder="" required>
                            @error('street')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-12">
                            <label>Apartment <span>*</span></label>
                            <input type="text" id="apartment_e" name="apartment"
                                   class="form-control @error('apartment') is-invalid @enderror" placeholder="" required>
                            @error('apartment')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Country <span>*</span></label>
                            <select class="form-control @error('country') is-invalid @enderror" id="country_e"
                                    name="country" required>
                                <option value="">Select</option>
                                <option value="US">USA</option>

                            </select>
                            @error('country')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>City <span>*</span></label>
                            <input type="text" id="city_e" name="city"
                                   class="form-control @error('city') is-invalid @enderror" placeholder="" required>
                            @error('city')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label>Zip Code <span>*</span></label>
                            <input type="text" id="zip_code_e" name="zip_code"
                                   class="form-control @error('zip_code') is-invalid @enderror" placeholder="" required>
                            @error('zip_code')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label>State <span>*</span></label>
                            <input type="text" id="state_e" name="state"
                                   class="form-control @error('state') is-invalid @enderror" placeholder="" required>
                            @error('state')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Order Receiving Date <span>*</span></label>
                            <input type="date" id="order_days_e" name="order_days"
                                   class="form-control @error('order_days') is-invalid @enderror" placeholder="">
                            @error('order_days')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-12 text-center mt-4">
                            <div class="text-right">
                                <button class="btnStyle" type="submit">Save</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Add New Address Modal-->
    <div class="modal fade accountAccesSec" id="addNewsAddressModal" tabindex="-1" aria-labelledby="addNewsAddressModal"
         aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content p-5">
                <button type="button" class="close " data-dismiss="modal" aria-label="Close" id="addNewsAddressModal">
                    <span aria-hidden="true">&times;</span>
                </button>
                <div class="row">
                    <form method="post" action="{{route('addCustomerAddress')}}"
                          class="row justify-content-center formStyle">
                        <div class="col-md-12">
                            <div class="title inner">
                                <h2>Add Address</h2>
                            </div>
                        </div>
                        @csrf
                        <div class="col-md-6">
                            <label>First Name <span>*</span></label>
                            <input type="text" name="first_name"
                                   class="form-control @error('first_name') is-invalid @enderror" placeholder=""
                                   value="{{old('first_name')}}" required>
                            @error('first_name')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Last Name <span>*</span></label>
                            <input type="text" name="last_name"
                                   class="form-control @error('last_name') is-invalid @enderror" placeholder=""
                                   value="{{old('last_name')}}" required>
                            @error('last_name')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Phone <span>*</span></label>
                            <input type="number" name="phone_no"
                                   class="form-control @error('phone_no') is-invalid @enderror"
                                   value="{{old('phone_no')}}" placeholder="50 123 4567" required>

                        </div>
                        <div class="col-md-6">
                            <label>Title <span>*</span></label>
                            <input type="text" name="title" class="form-control @error('title') is-invalid @enderror"
                                   placeholder="" value="{{old('title')}}" required>
                            @error('title')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Number <span>*</span></label>
                            <input type="text" name="address_number" class="form-control @error('address_number') is-invalid @enderror"
                                   placeholder="Address Number" value="{{old('address_number')}}" required>
                            @error('address_number')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Street<span>*</span></label>
                            <input type="text" name="street"
                                   class="form-control @error('street') is-invalid @enderror" placeholder="Street"
                                   value="{{old('street')}}" required>
                            @error('street')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-12">
                            <label>Apartment<span>*</span></label>
                            <input type="text" name="apartment"
                                   class="form-control @error('apartment') is-invalid @enderror" placeholder="Apartment"
                                   value="{{old('apartment')}}" required>
                            @error('apartment')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Country <span>*</span></label>
                            <select class="form-control @error('country') is-invalid @enderror" name="country" required>
                                <option value="">Select</option>
                                <option value="US">USA</option>

                            </select>
                            @error('country')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>City <span>*</span></label>
                            <input type="text" name="city" class="form-control @error('city') is-invalid @enderror"
                                   placeholder="" value="{{old('city')}}" required>
                            @error('city')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Zip Code <span>*</span></label>
                            <input type="text" name="zip_code"
                                   class="form-control @error('zip_code') is-invalid @enderror" placeholder=""
                                   value="{{old('zip_code')}}" required>
                            @error('zip_code')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label>State <span>*</span></label>
                            <input type="text" name="state" class="form-control @error('state') is-invalid @enderror"
                                   placeholder="" value="{{old('state')}}" required>
                            @error('state')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Order Receiving Date <span>*</span></label>
                            <input type="date" name="order_days" class="form-control @error('order_days') is-invalid @enderror"
                                   placeholder="" value="{{old('order_days')}}">
                            @error('order_days')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-12 text-center mt-4">
                            <div class="text-right">
                                <button class="btnStyle" type="submit">Add</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('scripts')
    <script>
        $(document).ready(function () {
            //Edit Address
            $('.editAddress').on('click', function () {
                $id = $(this).data('id');

                $.ajax({
                    url: "{{ url('getAddressDetail') }}/" + $id,
                    method: 'GET',
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (res) {
                        console.log(res);
                        $("#editAddressForm").attr('action', "updateCustomerAddress/" + res.customer_address.id)
                        $('#add_id').val(res.customer_address.id);
                        $('#first_name_e').val(res.customer_address.first_name);
                        $('#last_name_e').val(res.customer_address.last_name);
                        $('#phone_no_e').val(res.customer_address.phone_no);
                        //$("#phone_no_e").intlTelInput("setNumber", res.customer_address.phone_no);
                        $('#title_e').val(res.customer_address.title);
                        $('#street_e').val(res.customer_address.street);
                        $('#number_e').val(res.customer_address.address_number);
                        $('#apartment_e').val(res.customer_address.address);
                        $("#city_e").val(res.customer_address.city);
                        //$("#city_e").append(new Option(res.city.name, res.city.id));

                        $('#company_name_e').val(res.customer_address.company_name);
                        $('#zip_code_e').val(res.customer_address.zip_code);
                        $('#order_days_e').val(res.customer_address.order_days);
                        $('#country_e').val(res.customer_address.country);
                        // $('#country_e option[value="res.country"]').attr("selected", "selected");


                        $("#state_e").val(res.customer_address.state);
                        //$("#state_e").append(new Option(res.state.name, res.state.id));
                        $('#shipping_billing_e').val(res.customer_address.shipping_billing);

                        $('#editAddressModal').modal('show');

                    }
                })
            });

            $(".removeAddress").on('click', function () {
                var csrf_token = $('meta[name="csrf-token"]').attr('content');
                var id = $(this).attr('data-id');
                $.ajax({
                    url: "{{ url('removeAddress') }}/" + id,
                    type: 'delete',
                    data: {"_token": csrf_token, "id": id},
                    dataType: 'json',
                    success: function (resp) {
                        if (resp.status == true) {
                            toastr.success('Address Removed Succesfully')
                            location.reload();
                        } else {
                            toastr.error('Something Went Wrong');
                        }
                    }
                });
            });
        });

    </script>
    @if(Session::has('addAddressError') && Session::get('addAddressError') == true)
        <script> $("#addNewsAddressModal").modal('show'); </script>
    @endif
    @if(Session::has('editAddressError') && Session::get('editAddressError') == true)
        <script> $("#editAddressModal").modal('show'); </script>
    @endif
@endsection