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

@if(((($workingLocationUi['pending'] ?? false) && request()->routeIs('admin.dashboard')) || ($workingLocationUi['requires_specific_location'] ?? false)))
<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">
                         {{ ($workingLocationUi['requires_specific_location'] ?? false) ? 'Select a Specific Working Location' : 'Select Your Working Location' }}
                    </h4>

                    <p class="text-muted mb-0">
                         {{ ($workingLocationUi['requires_specific_location'] ?? false) ? 'This page requires a specific working location before you can continue.' : 'Choose the location you want to work from.' }}
                        <br>
                         {{ ($workingLocationUi['requires_specific_location'] ?? false) ? 'After selection, the page will reload using the existing Working Location context.' : '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">
		           
				   @unless($workingLocationUi['requires_specific_location'] ?? false)
                   
				   <button class="btn working-location-btn working-location-all js-working-location"
                            type="button"
                            data-mode="all">

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

                            <span>
                                <strong>All Locations</strong>
                                <small>View and manage all assigned locations</small>
                            </span>
                        </span>

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

                    </button>
					@endunless

                    @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