<turbo-stream action="update" target="modal-container"><template><div class="nq-sheet-scrim"
     data-controller="area-sheet"
     data-area-sheet-current-branch-id-value=""
     data-area-sheet-has-cart-items-value="false"
     data-area-sheet-confirm-template-value="__AREA__ يخدمها فرع __BRANCH__. سلتك مجهّزة من مطبخ آخر، لذا سيتم تفريغها."
     data-area-sheet-create-address-url-value="/ar/checkout/address"
     data-area-sheet-missing-area-message-value="اختر منطقة التوصيل"
     data-action="click->area-sheet#backdrop">
  <div class="nq-sheet" role="dialog" aria-modal="true" aria-labelledby="area-gate-title">
    <span class="nq-sheet__handle" aria-hidden="true"></span>
    <header class="nq-sheet__head">
      <h3 id="area-gate-title" class="nq-sheet__title">وين نوصّل طلبك؟</h3>
      <button type="button" class="nq-sheet__close" data-action="click->area-sheet#close"
              aria-label="إغلاق">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18"/></svg>
      </button>
    </header>

    <div class="nq-sheet__body">
      <div class="h-[430px] max-h-[62vh] flex flex-col" data-area-sheet-target="mainPane">

          <a href="/ar/customers/sign_in"
             data-login-sheet-open data-login-source="sheet_gate"
             class="flex items-center gap-2 pb-2.5 px-0.5 text-brand-primary-600 text-xs font-semibold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8.5" r="3.5"/><path d="M5 20c1.5-3.5 4-5 7-5s5.5 1.5 7 5"/></svg>
            سجّل دخولك لاستخدام عنوانك المحفوظ
          </a>


        <div class=" flex-1 min-h-0 flex flex-col" data-area-sheet-target="deliveryPane">
          <div class="relative my-3 shrink-0">
            <span class="absolute start-3 top-1/2 -translate-y-1/2 text-stone-400 pointer-events-none">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.2-4.2"/></svg>
            </span>
            <input type="text"
                   class="w-full ps-9 pe-3 py-2.5 min-h-[44px] text-base border border-stone-200 rounded-lg bg-stone-50 placeholder:text-stone-400 focus:bg-white focus:border-brand-primary-400 focus:ring-0"
                   placeholder="ابحث عن منطقة…"
                   autocomplete="off"
                   data-area-sheet-target="searchInput"
                   data-action="input->area-sheet#filter">
          </div>

          <div class="flex-1 min-h-0 overflow-y-auto space-y-[7px]" data-area-sheet-target="areaList">
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="ea91c890-b7de-4377-9a57-5d7920f1bfda"
                      data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c"
                      data-area-name="عبدالله المبارك - غرب الجليب"
                      data-branch-name="الفرع الرئيسي"
                      data-search-text="abdullah al-mubarak - west jleeb عبدالله المبارك - غرب الجليب"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-sm font-semibold text-stone-800 truncate">عبدالله المبارك - غرب الجليب</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="758027d7-da12-43f9-9a13-e8499192255c"
                      data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c"
                      data-area-name="العارضية"
                      data-branch-name="الفرع الرئيسي"
                      data-search-text="ardiya العارضية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-sm font-semibold text-stone-800 truncate">العارضية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="39af2a1a-2c55-4678-92ba-fcd438b2fb72"
                      data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c"
                      data-area-name="العارضية استعمالات حكومية"
                      data-branch-name="الفرع الرئيسي"
                      data-search-text="ardiya gov. uses العارضية استعمالات حكومية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-sm font-semibold text-stone-800 truncate">العارضية استعمالات حكومية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="b1c62bae-48b2-4e4d-89a7-6ddacf7e7118"
                      data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c"
                      data-area-name="العارضية الحرفية"
                      data-branch-name="الفرع الرئيسي"
                      data-search-text="ardiya herafiya العارضية الحرفية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-sm font-semibold text-stone-800 truncate">العارضية الحرفية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="0cd71bd5-d039-44b8-a3c3-f40038513f78"
                      data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c"
                      data-area-name="العارضية مخازن"
                      data-branch-name="الفرع الرئيسي"
                      data-search-text="ardiya storage zone العارضية مخازن"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-sm font-semibold text-stone-800 truncate">العارضية مخازن</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="2f48ed94-76e8-4605-ba0a-b725c015d9ed"
                      data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c"
                      data-area-name="الفروانية"
                      data-branch-name="الفرع الرئيسي"
                      data-search-text="farwaniya الفروانية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-sm font-semibold text-stone-800 truncate">الفروانية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="83097489-9bfa-4624-8520-3cebe40fb610"
                      data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c"
                      data-area-name="الفردوس"
                      data-branch-name="الفرع الرئيسي"
                      data-search-text="ferdous الفردوس"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-sm font-semibold text-stone-800 truncate">الفردوس</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="1f2d473b-efe2-4338-8db9-e295e227bcf1"
                      data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c"
                      data-area-name="حطين"
                      data-branch-name="الفرع الرئيسي"
                      data-search-text="hateen حطين"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-sm font-semibold text-stone-800 truncate">حطين</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="2b0484be-b0b1-4e36-9024-42520b9d48cc"
                      data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c"
                      data-area-name="حولي"
                      data-branch-name="الفرع الرئيسي"
                      data-search-text="hawali حولي"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-sm font-semibold text-stone-800 truncate">حولي</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="ec19a5f2-55de-42e3-90b2-f4014cd693e6"
                      data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c"
                      data-area-name="اشبيلية"
                      data-branch-name="الفرع الرئيسي"
                      data-search-text="ishbiliya اشبيلية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-sm font-semibold text-stone-800 truncate">اشبيلية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="339a6435-24ee-4d64-9eae-1e757a8b3385"
                      data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c"
                      data-area-name="الجابرية"
                      data-branch-name="الفرع الرئيسي"
                      data-search-text="jabriya الجابرية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-sm font-semibold text-stone-800 truncate">الجابرية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="e21ff804-307a-4c58-8c08-3f6e95c4919c"
                      data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c"
                      data-area-name="جليب الشيوخ"
                      data-branch-name="الفرع الرئيسي"
                      data-search-text="jleeb shuyoukh جليب الشيوخ"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-sm font-semibold text-stone-800 truncate">جليب الشيوخ</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="654c634f-0e1f-4bab-be20-d1532d9b07ef"
                      data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c"
                      data-area-name="خيطان"
                      data-branch-name="الفرع الرئيسي"
                      data-search-text="khaitan خيطان"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-sm font-semibold text-stone-800 truncate">خيطان</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="a00f2ba3-be22-4442-95a9-15dc1aac604f"
                      data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c"
                      data-area-name="العمرية"
                      data-branch-name="الفرع الرئيسي"
                      data-search-text="omariya العمرية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-sm font-semibold text-stone-800 truncate">العمرية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="c99d6cad-c6ed-4507-bcb4-b11ccc18d019"
                      data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c"
                      data-area-name="قرطبة"
                      data-branch-name="الفرع الرئيسي"
                      data-search-text="qortuba قرطبة"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-sm font-semibold text-stone-800 truncate">قرطبة</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="ac236460-b6f8-4545-a6d7-ce52da7e271a"
                      data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c"
                      data-area-name="الرابية"
                      data-branch-name="الفرع الرئيسي"
                      data-search-text="rabiya الرابية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-sm font-semibold text-stone-800 truncate">الرابية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="4985a697-adb1-456a-94d2-4cd730c10a58"
                      data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c"
                      data-area-name="الرحاب"
                      data-branch-name="الفرع الرئيسي"
                      data-search-text="rehab الرحاب"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-sm font-semibold text-stone-800 truncate">الرحاب</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="58d26193-a513-431e-be0f-0cf336000f52"
                      data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c"
                      data-area-name="الرقعي"
                      data-branch-name="الفرع الرئيسي"
                      data-search-text="riqai الرقعي"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-sm font-semibold text-stone-800 truncate">الرقعي</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="c7f44d9f-437d-4259-afe6-53957e4af474"
                      data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c"
                      data-area-name="السلام"
                      data-branch-name="الفرع الرئيسي"
                      data-search-text="salam السلام"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-sm font-semibold text-stone-800 truncate">السلام</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="cf653393-842d-45a3-93df-1496d8a83d44"
                      data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c"
                      data-area-name="السالمية"
                      data-branch-name="الفرع الرئيسي"
                      data-search-text="salmiya السالمية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-sm font-semibold text-stone-800 truncate">السالمية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="06a77e33-2b97-45ef-9313-d2367e746e12"
                      data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c"
                      data-area-name="الصديق"
                      data-branch-name="الفرع الرئيسي"
                      data-search-text="sedeeq الصديق"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-sm font-semibold text-stone-800 truncate">الصديق</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="6b5686c0-17ef-4c21-b716-480dda8b160c"
                      data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c"
                      data-area-name="الشهداء"
                      data-branch-name="الفرع الرئيسي"
                      data-search-text="shuhada الشهداء"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-sm font-semibold text-stone-800 truncate">الشهداء</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="cd009e38-bd75-4dcd-a9af-457ca23e641e"
                      data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c"
                      data-area-name="اليرموك"
                      data-branch-name="الفرع الرئيسي"
                      data-search-text="yarmouk اليرموك"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-sm font-semibold text-stone-800 truncate">اليرموك</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="a63273aa-40bf-4bf5-a293-f676134599bc"
                      data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c"
                      data-area-name="الزهراء"
                      data-branch-name="الفرع الرئيسي"
                      data-search-text="zahra الزهراء"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-sm font-semibold text-stone-800 truncate">الزهراء</span>
              </button>
            <div class="hidden text-center py-8 text-sm text-stone-500" data-area-sheet-target="emptyState">
              لا توجد نتائج — جرّب كلمة أخرى.
            </div>
          </div>
        </div>

      </div>

    </div>
  </div>

  <div class="hidden fixed inset-0 z-[110] flex items-center justify-center p-6 bg-stone-900/40"
       data-area-sheet-target="confirm">
    <div class="bg-white rounded-xl p-5 w-full max-w-[330px] shadow-2xl" role="alertdialog" aria-modal="true">
      <h3 class="text-base font-semibold text-stone-800 mb-2">تغيير المنطقة؟</h3>
      <p class="text-sm text-stone-600 leading-relaxed mb-4" data-area-sheet-target="confirmBody"></p>
      <div class="flex flex-col gap-2">
        <button type="button"
                class="cta-shadow w-full rounded-lg bg-brand-primary-600 hover:bg-brand-primary-700 text-white text-sm font-semibold px-4 py-3 min-h-[44px] transition-colors"
                data-action="click->area-sheet#confirmChange">
          غيّر وفرّغ السلة
        </button>
        <button type="button"
                class="w-full rounded-lg border-[1.5px] border-stone-200 text-stone-700 text-sm font-semibold px-4 py-3 min-h-[44px] hover:border-stone-300 transition-colors"
                data-action="click->area-sheet#cancelChange">
          احتفظ بسلتي
        </button>
      </div>
    </div>
  </div>

  <form data-turbo="false" data-area-sheet-target="areaForm" action="/ar/areas/select" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="Yj4TWaT2KiKCpi-PIJINSuKymegogWnWE6ykSZf5bTHBn0HtjFHSqtZQ4qxYS-EX3Zfsk4wV7nZPAgbKAf36MQ" autocomplete="off" />
    <input type="hidden" name="area_id" data-area-sheet-target="areaIdInput">
    <input type="hidden" name="pending_item_id" id="pending_item_id" autocomplete="off" />
    <input type="hidden" name="pending_item_options" id="pending_item_options" autocomplete="off" />
    <input type="hidden" name="return_to" data-area-sheet-target="returnTo">
</form></div>
</template></turbo-stream>