@props(['workingLocationUi' => []])

@if(($workingLocationUi['pending'] ?? false) && request()->routeIs('admin.dashboard'))
<div class="modal fade" id="workingLocationModal" tabindex="-1" aria-labelledby="workingLocationModalLabel" aria-hidden="true" data-required="true">
    <div class="modal-dialog modal-dialog-centered modal-md">
        <div class="modal-content working-location-modal">

            <div class="modal-header border-0 pb-0">
                <div class="w-100 text-center">
                   <!-- <div class="working-location-icon mb-3">
                        <span class="nav-link-icon">
								<span data-feather="map-pin"></span>
							</span>
                    </div>-->

                    <h4 class="modal-title fw-bold mb-2" id="workingLocationModalLabel">
                        Select Your Working Location
                    </h4>

                    <p class="text-muted mb-0">
                        Choose the location you want to work from.
                        <br>
                        Your selection will be used for all CRM activities until you switch locations.
                    </p>
                </div>
            </div>

            <div class="modal-body pt-4">

                <div class="working-location-list">


                    @foreach($workingLocationUi['locations'] as $workingLocation)

                        <button class="btn working-location-btn js-working-location"
                                type="button"
                                data-mode="location"
                                data-location-id="{{ $workingLocation->id }}">

                            <span class="working-location-left">

                                <span class="working-location-circle">
                                    <span class="nav-link-icon">
										<span data-feather="map-pin"></span>
									</span>
                                </span>

                                <span>
                                    <strong>{{ $workingLocation->name }}</strong>
                                    <small>Assigned Location</small>
                                </span>

                            </span>

                            <i class="las la-angle-right"></i>

                        </button>

                    @endforeach

                </div>

                <div class="alert alert-danger mt-3 d-none"
                     id="workingLocationError"
                     role="alert">
                </div>

            </div>

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


@endif