@extends('layouts.customer')
@section('content')
<div class="middle__content">
	<div class="card rounded-0 border-0">
		<div class="card-header bg-transparent">
			<div class="row align-items-center">
				<div class="col-12 col-sm-6 mb-3 mb-sm-0">
					<h4 class="mb-0">My Address</h4>
				</div>
				<div class="col-12 col-sm-6 text-sm-right">
					<a href="javascript:void(0);" class="address-modal-open btn btnprimary rounded-10 btn-sm">Add Address</a>
				</div>
			</div>
		</div>
		<div class="card-body">
			@if($addresses->count() == 0)
			<p class="text-center steps_title">It may take few minutes to set up your caring account...</p>
			<p class="mt-2 mb-4 text-center steps_sub_title"><b>Step 3 / 3:</b> Set your shipping address and we are good to go!</p>
			@endif

			@if($addresses->count() > 0)
			@foreach($addresses as $key=>$address)
			<div class="address-panel">
				<div class="address-left">
					<h5 class="showaddress-modal-open font-weight-normal" data-address_id="{{ $address->id }}">{{ $address->full_name }}</h5>
					<ul class="list-unstyled mb-0">
						<li>
							<span>Phone :</span>
							<span>{{ $address->phone_number }}</span>
						</li>
						<li>
							<span>Address :</span>
							<span>{{ $address->address }}</span>
						</li>
						<li>
							<span>Country :</span>
							<span>{{ $address->country->name ?? '' }}</span>
						</li>
					</ul>
				</div>
				<div class="address-right">
					<div class="address-right-check">
						<label class="check-container checkbox-sm">Set As Default
							<input type="checkbox" class="set_default_address" data-address_id="{{ $address->id }}" {{ ($user->address_id==$address->id) ?"checked":"" }}>
							<span class="checkmark"></span>
						</label>
					</div>
					<div class="address-right-button">
						<a href="javascript:void(0);" class="address-btn btnprimary edit_address_btn" data-address_id="{{ $address->id }}" data-edit_url="{{ route('customer.addresses.edit',$address->id) }}">
							<span class="lnr lnr-pencil"></span>
						</a>

						<form action="{{ route('customer.addresses.destroy', $address->id) }}" method="POST" class="address-btn btnwarning deleteAddressForm">
							<input type="hidden" name="address_id" value="{{ $address->id }}" class="address_id">
							<input type="hidden" name="default_address_id" value="{{ $user->address_id }}" class="default_address_id">
							<input type="hidden" name="_method" value="DELETE">
							<input type="hidden" name="_token" value="{{ csrf_token() }}">
							<button type="submit" class="button-property-none">
								<span class="lnr lnr-trash"></span>
							</button>

						</form>
					</div>
				</div>
			</div>
			@endforeach
			@else
			<div class="address-panel text-center">No address Added yet! </div>
			@endif
		</div>
	</div>
</div>

<!-- Show address Modal -->
<div class="modal fade" id="showNewAddressModal">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header border-0">
				<h5 class="modal-title text-primary">Address Details</h5>
				<button type="button" class="close p-0" data-dismiss="modal">
					<span class="lnr lnr-cross"></span>
				</button>
			</div>
			<div id="address-showform"></div>
		</div>
	</div>
</div>

<!-- Add address Modal -->
<div class="modal fade" id="addNewAddressModal">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header border-0">
				<h5 class="modal-title text-primary">Add New Address</h5>
				<button type="button" class="close p-0" data-dismiss="modal">
					<span class="lnr lnr-cross"></span>
				</button>
			</div>
			<div id="address-addform"></div>
		</div>
	</div>
</div>

<!-- Edit address Modal -->
<div class="modal fade" id="updateAddressModal">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header border-0">
				<h5 class="modal-title text-primary">Update Address</h5>
				<button type="button" class="close p-0" data-dismiss="modal">
					<span class="lnr lnr-cross"></span>
				</button>
			</div>
			<div id="address-content"></div>
		</div>
	</div>
</div>
@endsection

@section('scripts')
@parent
<script src="{{ asset('js/sweet-alert/sweetalert.min.js') }}"></script>
<script>
	$(document).ready(function() {
		$('.set_default_address').on('click', function() {
			swal({
					title: "Are you sure?",
					text: "You want to set this address as default!",
					icon: "warning",
					buttons: ["No", "Yes"],
					dangerMode: false,
				})
				.then((willDelete) => {
					if (willDelete) {
						var thisBtn = $(this);
						var address_id = $(this).data('address_id');
						$.ajax({
							url: "{{ url('customer/set-default-address') }}/" + address_id,
							type: "get",
							success: function(response) {
								if (response.success == true) {
									$(".set_default_address").attr("checked", false);
									thisBtn.attr('checked', true);
									swal("", response.message, "success");
								} else {
									swal("", response.message, "error");
								}
							},
						});
					} else {
						$(this).prop('checked', false);
					}
				});
		});

		$('.showaddress-modal-open').on('click', function() {

			$.ajax({
				url: "{{ url('customer/addresses') }}/" + $(this).data('address_id'),
				type: "get",
				headers: {
					'Cache-Control': 'no-cache, no-store, must-revalidate',
					'Pragma': 'no-cache',
					'Expires': '0'
				},
				success: function(response) {
					$('#showNewAddressModal').find("#address-showform").html(response);
					$('#showNewAddressModal').modal('show');
				},
			});
		});


		$('.address-modal-open').on('click', function() {
			$.ajax({
				url: "{{ route('customer.addresses.create') }}",
				type: "get",
				headers: {
					'Cache-Control': 'no-cache, no-store, must-revalidate',
					'Pragma': 'no-cache',
					'Expires': '0'
				},
				success: function(response) {
					$('#addNewAddressModal').find("#address-addform").html(response);
					$('#addNewAddressModal').modal('show');
				},
			});
		});

		$('.edit_address_btn').on('click', function() {
			var address_id = $(this).data('address_id');
			var url = $(this).data('edit_url');
			$.ajax({
				url: url,
				type: "get",
				headers: {
					'Cache-Control': 'no-cache, no-store, must-revalidate',
					'Pragma': 'no-cache',
					'Expires': '0'
				},
				success: function(response) {
					$('#updateAddressModal').modal('show');
					$('#updateAddressModal').find('#address-content').html(response);
				},
			});
		});

		$('.deleteAddressForm').on('submit', function(e) {
			e.preventDefault();
			var address_id = $(this).find('.address_id').val();
			var default_address_id = $(this).find('.default_address_id').val();

			if (default_address_id == address_id) {
				swal("", "This address is default so you can't delete, if you want set another as default then try to delete!", "error");
				return false;
			}

			swal({
					title: "Are you sure?",
					text: "Once deleted, you will not be able to recover this address!",
					icon: "warning",
					buttons: true,
					dangerMode: false,
				})
				.then((willDelete) => {
					if (willDelete) {
						var thisForm = $(this);
						var formdata = $(this).serialize();
						$.ajax({
							url: $(this).attr('action'),
							type: "DELETE",
							dataType: 'json',
							data: formdata,
							headers: {
								'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
							},
							success: function(response) {
								if (response.status == true) {
									thisForm.closest('.address-panel').remove();
									swal('', response.message, "success");
								} else {
									swal("", response.message, "error");
								}
							}
						});
					} else {
						swal("Your address is safe!");
					}
				});
		});
	});
</script>
@endsection