@push('styles')
    <style>
        #assignRiderModal .modal-content,
        #assignRiderModal .modal-body {
            overflow: visible;
        }

        #assignRiderModal .ts-wrapper.dropdown-active,
        #assignRiderModal .ts-dropdown {
            z-index: 2060 !important;
        }

        #assignRiderModal .ts-wrapper {
            min-height: calc(1.4285714286em + 0.875rem + 2px);
        }

        #assignRiderModal .ts-wrapper.form-select {
            padding: 0 !important;
        }

        #assignRiderModal .ts-wrapper .ts-control {
            min-height: calc(1.4285714286em + 0.875rem + 2px);
            padding: 0.4375rem 2.25rem 0.4375rem 0.75rem !important;
            display: flex;
            align-items: center;
            border: none !important;
            background: transparent !important;
            font-size: 0.875rem;
            line-height: 1.4285714286;
            box-sizing: border-box;
            width: 100%;
        }

        #assignRiderModal .ts-wrapper .ts-control > input {
            font-size: 0.875rem !important;
            line-height: 1.4285714286 !important;
            color: var(--tblr-body-color);
            margin: 0 !important;
            padding: 0 !important;
        }

        #assignRiderModal .ts-wrapper .ts-control > input::placeholder {
            color: var(--tblr-secondary-color, #6c757d) !important;
            opacity: 1 !important;
        }

        #assignRiderModal .ts-wrapper .ts-control .item {
            font-size: 0.875rem;
            line-height: 1.4285714286;
            color: var(--tblr-body-color);
            margin: 0;
            padding: 0;
        }

        #assignRiderModal .ts-wrapper.focus {
            border-color: #83b7e8;
            box-shadow: var(--tblr-shadow-input), 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25);
        }

        #assignRiderModal .plugin-clear_button .clear-button {
            right: 2rem !important;
        }
    </style>
@endpush

@php
    $currentRider = $return->deliveryBoy;
@endphp
<div class="modal modal-blur fade" id="assignRiderModal" tabindex="-1" role="dialog" aria-hidden="true"
     data-assign-url="{{ route('admin.returns.assign-rider', $return->id) }}"
     data-search-url="{{ route('admin.delivery-boys.search') }}"
     data-zone-id="{{ $storeZoneId ?? '' }}"
     @if ($currentRider) data-current-rider-id="{{ $currentRider->id }}" data-current-rider-name="{{ $currentRider->name }}" @endif>
    <div class="modal-dialog modal-dialog-centered" role="document">
        <form id="assignRiderForm">
            @csrf
            <div class="modal-content">
                <div class="modal-status bg-primary"></div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body py-4">
                    <h3 class="mb-2">
                        <i class="ti ti-users me-1"></i>{{ __('labels.assign_rider') }}
                    </h3>
                    <p class="text-secondary mb-3">{{ __('labels.assign_rider_help_text') }}</p>

                    <div class="mb-2">
                        <label class="form-label" for="assignRiderDeliveryBoyId">{{ __('labels.delivery_boy') }}</label>
                        <select name="delivery_boy_id" id="assignRiderDeliveryBoyId"
                                class="form-select"
                                placeholder="{{ __('labels.search_available_riders') }}"></select>
                        <small class="text-muted">{{ __('labels.leave_empty_to_unassign') }}</small>
                        <div class="invalid-feedback" data-field="delivery_boy_id"></div>
                    </div>

                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="assignRiderAllZones">
                        <label class="form-check-label" for="assignRiderAllZones">{{ __('labels.all_zones') }}</label>
                    </div>

                    <div class="mb-1">
                        <label class="form-label required" for="assignRiderReason">{{ __('labels.reason') }}</label>
                        <textarea class="form-control" name="reason" id="assignRiderReason"
                                  rows="3" maxlength="1000" required></textarea>
                        <div class="invalid-feedback" data-field="reason"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ __('labels.close') }}</button>
                    <button type="submit" class="btn btn-primary" id="assignRiderSubmit">
                        <i class="ti ti-users me-1"></i>{{ __('labels.assign_rider') }}
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>