@extends('layouts.public.app')

@section('title', 'My Address | Chemical Wholesale')

@section('content')
    <div class="pb-4 userprofile">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-3">
                    @include('public.profile.account_nav')
                </div>
                <div class="col-lg-9 add-address">
                    <div class="cw-frontpage-title bg-white my-4 d-lg-flex align-items-center justify-content-between">
                        <div class="mb-lg-0 mb-3">
                            <h4 class="fw-bold mb-0">Your Added Addresses</h4>
                            <p class="small">Manage all your Chemical Wholesale Buyer account</p>
                        </div>
                        <div>
                            <a data-bs-toggle="modal" data-bs-target="#add-address-modal" class="btn-cw add_address_main_btn"
                                id="add_address_main_btn">
                                <i class="bi bi-plus"></i>
                                Add Address</a>
                        </div>
                    </div>
                    <div class="card border-0 mb-3 pt-3">
                        <div class="card-body">
                            <div class="row">
                                @if (count($address) > 0)
                                    @foreach ($address as $a)
                                        <div class="col-lg-4">
                                            <div class="card address-card mb-4">
                                                <div class="card-header d-flex justify-content-between align-items-center">
                                                    <p class="card-header-title">{{ $a['location_name'] }}</p>
                                                    <div class="dropdown">
                                                        <a class="text-muted" href="#" role="button"
                                                            data-bs-toggle="dropdown" aria-haspopup="true"
                                                            aria-expanded="false">
                                                            <i class="bi bi-three-dots-vertical"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end">
                                                            <a href="{{ route('public.address.make_primary', $a['uuid']) }}"
                                                                class="dropdown-item p-2"> Make Primary
                                                            </a>
                                                            <a class="dropdown-item p-2 getAddressInfo"
                                                                data-id="{{ $a['uuid'] }}">
                                                                Edit
                                                            </a>
                                                            <a href="{{ route('public.delete_address', $a['uuid']) }}"
                                                                class="dropdown-item p-2 deleteAddress"> Delete
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card-body">
                                                    <div class="business-address">
                                                        <div class="">
                                                            @if ($loop->index == 0)
                                                                <span class="badge bg-success rounded-pill">Primary</span>
                                                            @endif
                                                            <div class="pt-2">
                                                                {{ $a->address_1 }}<br>
                                                                @if (!empty($a->address_2))
                                                                    {{ $a->address_2 }}<br>
                                                                @endif
                                                                @if (!empty($a->city) || !empty($a->state) || !empty($a->zipcode))
                                                                    {{ $a->city }}
                                                                    {{ $a->state ? ', ' . $a->state : '' }}{{ $a->zipcode ? ', ' . $a->zipcode : '' }}<br>
                                                                @endif
                                                                @if (!empty($a->getCountry))
                                                                    {{ $a->getCountry->name_en }}<br>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="card-footer bg-white">
                                                    <p class="mb-2 text-muted"><i
                                                            class="bi bi-envelope me-2"></i>{{ $a['email'] }}
                                                    </p>
                                                    <p class="mb-0 text-muted"><i
                                                            class="bi bi-telephone me-2"></i>{{ $a['mobile'] }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="text-center w-50">
                                        <div class="card dashed-card">
                                            <div class="card-body">
                                                <i class="bi bi-geo-alt-fill no-info-i"></i>
                                                <h5 class="no-info-title">Add Your First Address</h5>
                                                <p class="no-info-p my-3">You can add multiple addresses of your
                                                    home, warehouses and other facilities</p>
                                                <a data-bs-toggle="modal" data-bs-target="#add-address-modal"
                                                    class="btn-cw add_address_main_btn">
                                                    <i class="bi bi-plus"></i> Address
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                @endif

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

                </div>
            </div>
        </div>
    </div>
    @include('public.profile.add-address');
@endsection
@push('css')
    <link href="{{ asset('assets/dashboard/css/timepicki.css') }}" rel="stylesheet" type="text/css" />
@endpush
@push('js')
    <script src="{{ asset('assets/js/maxlength.js') }}"></script>
    <script>
        $('input[maxlength]').maxlength({
            alwaysShow: true,
            threshold: 10,
            warningClass: "maxlength",
            limitReachedClass: "maxlength-red"
        });
    </script>
    <script src="{{ asset('assets/dashboard/js/timepicki.js') }}"></script>
    <script src="{{ asset('assets/dashboard/js/sweetalert2.all.min.js') }}"></script>
    @if (session('message'))
        <script>
            alertify.success("{{ session('message') }}");
        </script>
    @endif
    <script>
        $('#operation_hours_from').timepicki({
            start_time: ["06", "00", "AM"],
            step_size_minutes: 15,
        });
        $('#operation_hours_to').timepicki({
            start_time: ["06", "00", "PM"],
            step_size_minutes: 15,
        });
    </script>
    <script>
        $(document).ready(function() {
            $('.getAddressInfo').on('click', function() {
                $('#message').html('');
                let id = $(this).attr('data-id');
                //console.log(id)
                let url = "/buyer/addresses/" + id + "/edit/";
                $.ajax({
                    url: url,
                    type: 'GET',
                    //dataType: 'json',
                    success: function(response) {
                        console.log(response);
                        var routeUrl = "/buyer/update_address/" + id;
                        console.log(routeUrl);
                        $("#location_name").val(response.location_name);
                        $("#address_1").val(response.address_1);
                        $("#address_2").val(response.address_2);
                        $("#district").val(response.district);
                        $("#city").val(response.city);
                        $("#state").val(response.state);
                        $("#country_id").val(response.country_id).trigger('change');
                        $("#zipcode").val(response.zipcode);
                        $("#direction").val(response.direction);
                        $("#contact_name").val(response.contact_person_name);
                        $("#phone").val(response.phone);
                        $("#mobile").val(response.mobile);
                        $("#email").val(response.email);
                        $("#operation_hours_from").val(response.from);
                        $("#operation_hours_to").val(response.to);
                        $("#avg_waiting_time").val(response.avg_waiting_time);

                        let materialData = response.material_handling ? response
                            .material_handling.split(",") : [];
                        materialData.map(function(mVal) {
                            $("#material_handling_" + mVal).prop('checked', true);
                        });
                        let accessibilityData = response.accessibility ? response.accessibility
                            .split(",") : [];
                        accessibilityData.map(function(aVal) {
                            $("#accessibility_" + aVal).prop('checked', true);
                        });
                        let locationData = response.about_location ? response.about_location
                            .split(",") : [];
                        locationData.map(function(lVal) {
                            $("#about_location_" + lVal).prop('checked', true);
                        });
                        $('#add-address-modal').modal('show');
                        $('#address-form').attr('action', routeUrl);
                        $('#address_modal_title').html('Edit Address');

                    },
                    error: function(xhr, status, error) {
                        alertify.error('Something went wrong, Page reloading.');
                        location.reload();
                    }
                });
            });

        });
    </script>
    <script>
        $('form:not(#searchForm)').submit(function(e) {
            var submitBtn = $(this).find('button[type="submit"]');
            submitBtn.html('<span class="spinner me-2"></span>Saving');
            setTimeout(function() {
                submitBtn.removeAttr('disabled');
                submitBtn.html('Save');
            }, 1000);
        });
    </script>
    <script>
        $('.deleteAddress').click(function(e) {
            e.preventDefault();
            Swal.fire({
                title: 'Are you sure?',
                text: 'Once deleted, you will not be able to recover this address.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#ff3030',
                confirmButtonText: 'Yes, Delete',
                customClass: {
                    confirmButton: 'rounded-pill',
                    cancelButton: 'rounded-pill',
                },
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location = $(this).attr("href");
                }
            });
        });
    </script>
@endpush