@extends('frontend.layouts.template-base')

@section('meta_tags')
  @include('frontend.layouts.meta-tags', ['title' => 'Add Address', 'page' => 'Address'])
@endsection

@section('content')

<section class="my-orders-main py-5">
    <div class="container-fluid px-5 ">
        <div class="row g-3">

            @include('frontend.components.add-address-tab-head')

            <div class="col-lg-8">
                <div class="border-card h-100">

                    {{-- Tab First start --}}
                    <div class="tab-content" id="My-Order-tab-first-content">

                        <div class="tab-pane fade" id="my-Orders">
                            <p>content of myOrders</p>
                        </div>

                        <div class="tab-pane fade show active" id="my-Address">
                            <div class="my-address-details">

                                <div class="tab-order-header d-flex align-items-center justify-content-between p-4 pb-2">
                                    <a href="javascript:void(0)" class="d-flex gap-2 align-items-center">
                                        <img src="{{asset('assets/images/icon/login-arrow-left.svg')}}" alt="Arrow">
                                        <h5 class="tab-order-title mb-0"><span class="fw-normal">My Address</span></h5>
                                    </a>

                                    <div>
                                        <button class="primary-green-btn d-flex align-items-center gap-2">
                                            <img src="{{ asset('assets/images/icon/plus-icon.svg') }}" alt="icon">
                                            Add New Address</button>
                                    </div>
                                </div>

                                <div class="px-4">

                                    {{-- !! If want Add Change d-none to d-block !! --}}

                                    {{-- Saved Address Empty Start --}}
                                    <div class="d-block">
                                        <div class="tab-lable">Saved Address</div>
                                        <div class="empty-card-center">
                                            <div class="tab-content-center">
                                                <div class="ops-image-container mb-2">
                                                    <img src="{{ asset('assets/images/img/ops-s.gif') }}" alt="ops-image">
                                                </div>
                                                <h6 class="tab-order-title">No Address Added</h6>
                                                <p class="tab-order-para w-50 text-center">To see the saved address here, add your work or home address</p>
                                            </div>
                                        </div>
                                    </div>
                                    {{-- Saved Address Empty End --}}

                                    {{-- Location map Start --}}
                                    <div class="d-none">
                                        <div class="tab-lable">Location Information</div>
                                        <div>
                                            <iframe
                                                src="https://www.google.com/maps?q=11.0168,76.9558&z=15&output=embed"
                                                width="100%"
                                                height="400"
                                                style="border:0; border-radius:12px;"
                                                allowfullscreen=""
                                                loading="lazy">
                                            </iframe>
                                        </div>

                                        <div class="row">
                                            <div class="col-7">
                                                <div class="tab-map-loaction p-2">
                                                    <h5 class="txt-lable my-2">Select a delivery Location</h5>
                                                    <div class="d-flex align-items-center gap-2">
                                                        <button class="warning-outline-btn w-100">Search Location</button>
                                                        <button class="warning-primary-btn w-100">Current Location</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {{-- Location map End --}}

                                    {{-- Location Information Start --}}
                                    <div class="d-none">
                                        <div class="tab-lable">Location Information</div>
                                        <div>
                                            <iframe
                                                src="https://www.google.com/maps?q=11.0168,76.9558&z=15&output=embed"
                                                width="100%"
                                                height="400"
                                                style="border:0; border-radius:12px;"
                                                allowfullscreen=""
                                                loading="lazy">
                                            </iframe>
                                        </div>

                                        <div class="row">
                                            <div class="col-7">
                                                <div class="tab-map-loaction p-2">
                                                    <h5 class="txt-lable">Xcut</h5>
                                                    <p class="txt-sub-lable mb-2">Woodland, 495/496, xcut, Coimbatore, Coimbatore, TN, India</p>
                                                    <button class="warning-primary-btn w-100">Confirm & Continue</button>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    {{-- Location Information End --}}

                                    {{-- Address Form Start --}}
                                    <div class="d-none">
                                        <div class="add-address-details-wrapper my-3">

                                            {{-- Address Header --}}
                                            <div class="add-address-details-location-card">
                                                <img src="{{ asset('assets/images/icon/map-pre.webp') }}" alt="map" class="add-address-details-map-img">

                                                <div class="add-address-details-location-info">
                                                <h6>Xcut</h6>
                                                <p>Woodland, 495/496, xcut, Coimbatore...</p>
                                                </div>

                                                <button class="add-address-details-edit-btn">Edit</button>
                                            </div>

                                            {{-- Main Card --}}
                                            <div class="add-address-details-card">
                                                <h6 class="add-address-details-title">Save Address as</h6>

                                                {{-- Save Address Tabs --}}
                                                <ul class="nav add-address-details-tabs" id="addAddressTypeTab" role="tablist">
                                                <li class="nav-item">
                                                    <button class="add-address-details-tab-btn active" data-bs-toggle="tab" data-bs-target="#addAddressHome" type="button">
                                                        <img src="{{ asset('assets/images/icon/home-tab-icon.svg') }}" alt="icon">
                                                        Home
                                                    </button>
                                                </li>
                                                <li class="nav-item">
                                                    <button class="add-address-details-tab-btn" data-bs-toggle="tab" data-bs-target="#addAddressWork" type="button">
                                                        <img src="{{ asset('assets/images/icon/work-tab-icon.svg') }}" alt="icon">
                                                        Work
                                                    </button>
                                                </li>
                                                <li class="nav-item">
                                                    <button class="add-address-details-tab-btn" data-bs-toggle="tab" data-bs-target="#addAddressOthers" type="button">
                                                        <img src="{{ asset('assets/images/icon/others-tab-icon.svg') }}" alt="icon">
                                                        Others
                                                    </button>
                                                </li>
                                                </ul>

                                                <div class="tab-content">

                                                {{-- Home --}}
                                                <div class="tab-pane fade show active" id="addAddressHome">
                                                    <div class="add-address-details-building-box">
                                                        <h6 class="add-address-details-title mt-3">Type Of Building</h6>

                                                        <ul class="nav add-address-details-tabs">
                                                            <li class="nav-item">
                                                            <button class="add-address-details-tab-btn active" data-bs-toggle="tab" data-bs-target="#homeSociety" type="button">
                                                                <img src="{{ asset('assets/images/icon/society-tab-icon.svg') }}" alt="icon">
                                                                Society
                                                            </button>
                                                            </li>
                                                            <li class="nav-item">
                                                            <button class="add-address-details-tab-btn" data-bs-toggle="tab" data-bs-target="#homeIndependenthouse" type="button">
                                                                <img src="{{ asset('assets/images/icon/home-tab-icon.svg') }}" alt="icon">
                                                                Independent house
                                                            </button>
                                                            </li>
                                                        </ul>

                                                        <div class="tab-content">
                                                            <div class="tab-pane fade show active" id="homeSociety">
                                                                <form class="add-address-details-form">

                                                                    <div class="add-address-details-floating-group">
                                                                        <input type="text" required placeholder=" ">
                                                                        <label>Flat No. / Floor <span>*</span></label>
                                                                    </div>

                                                                    <div class="add-address-details-floating-group">
                                                                        <input type="text" required placeholder=" ">
                                                                        <label>Building name <span>*</span></label>
                                                                    </div>

                                                                    <div class="add-address-details-floating-group">
                                                                        <input type="text" required placeholder=" ">
                                                                        <label>Landmark <span>*</span></label>
                                                                    </div>

                                                                    <div class="add-address-details-floating-group">
                                                                        <input type="text" required placeholder=" ">
                                                                        <label>Receiver Name <span>*</span></label>
                                                                    </div>

                                                                    <div class="add-address-details-floating-group">
                                                                        <input type="text" required placeholder=" ">
                                                                        <label>Receiver Number <span>*</span></label>
                                                                    </div>

                                                                    {{-- Button "disabled" in class form input not type  --}}
                                                                    <button class="warning-primary-btn w-100">Save Address</button>

                                                                </form>


                                                            </div>

                                                            <div class="tab-pane fade" id="homeIndependenthouse">
                                                                <form class="add-address-details-form">

                                                                    <div class="add-address-details-floating-group">
                                                                        <input type="text" required placeholder=" ">
                                                                        <label>Complete Address <span>*</span></label>
                                                                    </div>

                                                                    <div class="add-address-details-floating-group">
                                                                        <input type="text" required placeholder=" ">
                                                                        <label>Building name <span>*</span></label>
                                                                    </div>

                                                                    <div class="add-address-details-floating-group">
                                                                        <input type="text" required placeholder=" ">
                                                                        <label>Landmark <span>*</span></label>
                                                                    </div>

                                                                    <div class="add-address-details-floating-group">
                                                                        <input type="text" required placeholder=" ">
                                                                        <label>Save as ‘Friend’s Name’</label>
                                                                    </div>

                                                                    <div class="add-address-details-floating-group">
                                                                        <input type="text" required placeholder=" ">
                                                                        <label>Receiver Name <span>*</span></label>
                                                                    </div>

                                                                    <div class="add-address-details-floating-group">
                                                                        <input type="text" required placeholder=" ">
                                                                        <label>Receiver Number <span>*</span></label>
                                                                    </div>

                                                                    {{-- Button "disabled" in class form input not type  --}}
                                                                    <button class="warning-primary-btn w-100">Save Address</button>

                                                                </form>
                                                            </div>

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

                                                {{-- Work --}}
                                                <div class="tab-pane fade" id="addAddressWork">
                                                    <form class="add-address-details-form">

                                                        <div class="add-address-details-floating-group">
                                                            <input type="text" required placeholder=" ">
                                                            <label>Company name / Floor <span>*</span></label>
                                                        </div>

                                                        <div class="add-address-details-floating-group">
                                                            <input type="text" required placeholder=" ">
                                                            <label>Building name <span>*</span></label>
                                                        </div>

                                                        <div class="add-address-details-floating-group">
                                                            <input type="text" required placeholder=" ">
                                                            <label>Landmark <span>*</span></label>
                                                        </div>

                                                        <div class="add-address-details-floating-group">
                                                            <input type="text" required placeholder=" ">
                                                            <label>Receiver Name <span>*</span></label>
                                                        </div>

                                                        <div class="add-address-details-floating-group">
                                                            <input type="text" required placeholder=" ">
                                                            <label>Receiver Number <span>*</span></label>
                                                        </div>

                                                        {{-- Button "disabled" in class form input not type  --}}
                                                        <button class="warning-primary-btn w-100">Save Address</button>

                                                    </form>
                                                </div>

                                                {{-- Others --}}
                                                <div class="tab-pane fade" id="addAddressOthers">
                                                    <div class="add-address-details-building-box">
                                                    <h6 class="add-address-details-title mt-3">Type Of Building</h6>

                                                    <ul class="nav add-address-details-tabs">
                                                        <li class="nav-item">
                                                        <button class="add-address-details-tab-btn" data-bs-toggle="tab" data-bs-target="#otherSociety" type="button">
                                                            <img src="{{ asset('assets/images/icon/society-tab-icon.svg') }}" alt="icon">
                                                            Society
                                                        </button>
                                                        </li>
                                                        <li class="nav-item">
                                                        <button class="add-address-details-tab-btn active" data-bs-toggle="tab" data-bs-target="#otherIndependentHouse" type="button">
                                                            <img src="{{ asset('assets/images/icon/home-tab-icon.svg') }}" alt="icon">
                                                            Independent house
                                                        </button>
                                                        </li>
                                                    </ul>

                                                    <div class="tab-content">
                                                        <div class="tab-pane fade" id="otherSociety">
                                                            <form class="add-address-details-form">

                                                                <div class="add-address-details-floating-group">
                                                                    <input type="text" required placeholder=" ">
                                                                    <label>Flat No. / Floor <span>*</span></label>
                                                                </div>

                                                                <div class="add-address-details-floating-group">
                                                                    <input type="text" required placeholder=" ">
                                                                    <label>Building name <span>*</span></label>
                                                                </div>

                                                                <div class="add-address-details-floating-group">
                                                                    <input type="text" required placeholder=" ">
                                                                    <label>Landmark <span>*</span></label>
                                                                </div>

                                                                <div class="add-address-details-floating-group">
                                                                    <input type="text" required placeholder=" ">
                                                                    <label>Receiver Name <span>*</span></label>
                                                                </div>

                                                                <div class="add-address-details-floating-group">
                                                                    <input type="text" required placeholder=" ">
                                                                    <label>Receiver Number <span>*</span></label>
                                                                </div>

                                                                {{-- Button "disabled" in class form input not type  --}}
                                                                <button class="warning-primary-btn w-100">Save Address</button>

                                                            </form>
                                                        </div>

                                                        <div class="tab-pane fade show active" id="otherIndependentHouse">
                                                            <form class="add-address-details-form">

                                                                <div class="add-address-details-floating-group">
                                                                    <input type="text" required placeholder=" ">
                                                                    <label>Complete Address <span>*</span></label>
                                                                </div>

                                                                <div class="add-address-details-floating-group">
                                                                    <input type="text" required placeholder=" ">
                                                                    <label>Building name <span>*</span></label>
                                                                </div>

                                                                <div class="add-address-details-floating-group">
                                                                    <input type="text" required placeholder=" ">
                                                                    <label>Landmark <span>*</span></label>
                                                                </div>

                                                                <div class="add-address-details-floating-group">
                                                                    <input type="text" required placeholder=" ">
                                                                    <label>Save as ‘Friend’s Name’</label>
                                                                </div>

                                                                <div class="add-address-details-floating-group">
                                                                    <input type="text" required placeholder=" ">
                                                                    <label>Receiver Name <span>*</span></label>
                                                                </div>

                                                                <div class="add-address-details-floating-group">
                                                                    <input type="text" required placeholder=" ">
                                                                    <label>Receiver Number <span>*</span></label>
                                                                </div>

                                                                {{-- Button "disabled" in class form input not type  --}}
                                                                <button class="warning-primary-btn w-100">Save Address</button>

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

                                                </div>
                                            </div>
                                            </div>
                                    </div>
                                    {{-- Address Form end --}}

                                    {{-- Location Information Start --}}
                                    <div class="d-none">
                                        <div class="saved-address-card mt-2">
                                            <div class="saved-address-header">
                                                <span class="d-flex align-items-center gap-2">
                                                    <img src="{{ asset('assets/images/icon/address-house.svg') }}" alt="icon">
                                                    Home
                                                </span>
                                            </div>

                                            <div class="saved-address-body">
                                                <div>
                                                    <h6>Nisho</h6>
                                                    <p>
                                                        Cloudi5 Technologies, Hero, SF 173, Sathy Rd,
                                                        Sivasakthi Colony, Ganapathy, Coimbatore,
                                                        Tamil Nadu 641006, India
                                                    </p>
                                                </div>

                                                <div class="custom-dropdown">

                                                    <button class="dropdown-toggle-btn" onclick="toggleDropdown(this)">
                                                        <img src="{{ asset('assets/images/icon/ellipsis-vertical.svg') }}" alt="icon">
                                                    </button>

                                                    <div class="custom-dropdown-menu">

                                                        <button class="dropdown-list">
                                                            <i class="bi bi-pencil-square"></i>
                                                            Edit
                                                        </button>

                                                        <button class="dropdown-list delete">
                                                            <i class="bi bi-trash3"></i>
                                                            Delete
                                                        </button>

                                                    </div>

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

                                        <div class="saved-address-card mt-2">
                                            <div class="saved-address-header">
                                                <span class="d-flex align-items-center gap-2">
                                                    <img src="{{ asset('assets/images/icon/address-business.svg') }}" alt="icon">
                                                    Work
                                                </span>
                                            </div>

                                            <div class="saved-address-body">
                                                <div>
                                                    <h6>Nisho</h6>
                                                    <p>
                                                        Cloudi5 Technologies, Hero, SF 173, Sathy Rd,
                                                        Sivasakthi Colony, Ganapathy, Coimbatore,
                                                        Tamil Nadu 641006, India
                                                    </p>
                                                </div>

                                                <div class="custom-dropdown">

                                                    <button class="dropdown-toggle-btn" onclick="toggleDropdown(this)">
                                                        <img src="{{ asset('assets/images/icon/ellipsis-vertical.svg') }}" alt="icon">
                                                    </button>

                                                    <div class="custom-dropdown-menu">

                                                        <button class="dropdown-list">
                                                            <i class="bi bi-pencil-square"></i>
                                                            Edit
                                                        </button>

                                                        <button class="dropdown-list delete">
                                                            <i class="bi bi-trash3"></i>
                                                            Delete
                                                        </button>

                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {{-- Location Information End --}}
                                </div>


                            </div>
                        </div>

                        <div class="tab-pane fade" id="need-Help">
                            <p>content of Need Help?</p>
                        </div>

                    </div>
                    {{-- Tab First end --}}

                    {{-- Tab Second Start --}}
                    <div class="tab-content" id="My-Order-tab-content">

                        <div class="tab-pane fade" id="MyWishlist">
                            <p>Content for MyWishlist</p>
                        </div>

                        <div class="tab-pane fade" id="NotificationsPreferences">
                            <p>Content for NotificationsPreferences</p>
                        </div>

                        <div class="tab-pane fade" id="MyRewards">
                            <p>Content for MyRewards</p>
                        </div>

                        <div class="tab-pane fade" id="InviteFriends">
                            <p>Content for InviteFriends</p>
                        </div>

                        <div class="tab-pane fade" id="PrivacyandPolicy">
                            <p>Content for PrivacyandPolicy</p>
                        </div>

                        <div class="tab-pane fade" id="TermsandConditions">
                            <p>Content for TermsandConditions</p>
                        </div>

                        <div class="tab-pane fade" id="ReturnPolicy">
                            <p>Content for ReturnPolicy</p>
                        </div>

                    </div>
                    {{-- Tab Second End --}}
                </div>
            </div>
        </div>
    </div>
</section>



@endsection

@section('scripts')
  <script>
$(document).ready(function () {
  $('.select2-common').select2({
    minimumResultsForSearch: Infinity,
    width: 'style'
  });
});
</script>

{{-- Model other hiden textarea --}}
<script>
    const radios = document.querySelectorAll('input[name="reason"]');
    const otherBox = document.getElementById('otherReasonBox');

    radios.forEach(radio => {
    radio.addEventListener('change', function () {
        if (this.value === "others") {
        otherBox.classList.remove('d-none');
        } else {
        otherBox.classList.add('d-none');
        }
    });
    });
</script>

{{-- toast --}}
{{-- <script>
  const toastEl = document.getElementById('successToast');
  const toast = new bootstrap.Toast(toastEl, {
    delay: 2000
  });

  document.getElementById('submit-Request').addEventListener('click', function () {
    toast.show();
  });

</script> --}}
<script defer>
document.addEventListener('DOMContentLoaded', () => {

    const toastElement = document.getElementById('successToast');
    const submitButton = document.getElementById('submit-Request');

    if (!toastElement || !submitButton || !window.bootstrap) return;

    const toast = new bootstrap.Toast(toastElement, {
        delay: 2000,
    });

    submitButton.addEventListener('click', () => {
        toast.show();
    });

});
</script>
<script>
    function toggleDropdown(button){

    const dropdown =
    button.closest('.custom-dropdown');

    document.querySelectorAll('.custom-dropdown')
    .forEach(item => {

        if(item !== dropdown){
            item.classList.remove('active');
        }

    });

    dropdown.classList.toggle('active');
}

document.addEventListener('click', function(e){

    if(!e.target.closest('.custom-dropdown')){
        document.querySelectorAll('.custom-dropdown')
        .forEach(item => {
            item.classList.remove('active');
        });
    }

});
</script>

{{-- tab --}}
<script>
document.addEventListener('DOMContentLoaded', function () {

    const allTabs = document.querySelectorAll(
        '#My-Order-tab-first .nav-link, #My-Order-tab .nav-link'
    );

    const allPanes = document.querySelectorAll(
        '#My-Order-tab-first-content .tab-pane, #My-Order-tab-content .tab-pane'
    );

    allTabs.forEach(tab => {
        tab.addEventListener('click', function (e) {
            e.preventDefault();

            const targetId = this.getAttribute('data-bs-target');
            const targetPane = document.querySelector(targetId);

            allTabs.forEach(btn => btn.classList.remove('active'));
            allPanes.forEach(pane => pane.classList.remove('show', 'active'));

            this.classList.add('active');

            if (targetPane) {
                targetPane.classList.add('show', 'active');
            }
        });
    });

});
</script>
@endsection