{% extends '_base.html' %}
{% load static %}

    {% block title %}<title>نمایندگان فروش اتصالات توپی برزیل در سراسر ایران</title>{% endblock %}

    {% block meta %}

    <meta name="description" content="فهرست نمایندگان رسمی فروش اتصالات توپی برزیل به تفکیک استان و شهر. نزدیک‌ترین نمایندگی اتصالات لوله توپی را روی نقشه پیدا کنید و مستقیم تماس بگیرید.">
    <meta property="og:type" content="website">
    <meta property="og:title" content="نمایندگان فروش اتصالات توپی برزیل در سراسر ایران">
    <meta property="og:description" content="فهرست نمایندگان رسمی فروش اتصالات توپی برزیل به تفکیک استان و شهر. نزدیک‌ترین نمایندگی اتصالات لوله توپی را روی نقشه پیدا کنید و مستقیم تماس بگیرید.">
    <meta property="og:image" content="{{ request.scheme }}://{{ request.get_host }}{% static 'img/cover.png' %}">

        <script type="application/ld+json">
    { "@context": "https://schema.org", "@type": "BreadcrumbList",
      "itemListElement": [
        { "@type": "ListItem", "position": 1, "name": "خانه", "item": "{{ request.scheme }}://{{ request.get_host }}/" },
        { "@type": "ListItem", "position": 2, "name": "لیست نمایندگان" }
      ] }
    </script>

{% endblock %}

    {% block content %}

    <!-- Banner -->

    <section class="overflow-hidden mt-10 mb-5">
        <div class="container mx-auto">

            <div class="flex laptop:flex-col items-stretch min-h-[420px] mobile:min-h-[330px]">

                <!-- Image Side -->

                <div class="relative w-[45%] laptop:w-full laptop:h-[300px] mobile:h-[220px] flex-shrink-0">
                    <img
                    src="{% static 'img/representative/banner.png' %}"
                    alt="نمایندگان توپی"
                    class="w-full h-full object-cover mobile:object-contain laptop:object-contain block"
                    />
                    
                </div>

                <!-- Text Side -->

                <div
                    dir="rtl"
                    class="w-[55%] laptop:w-full py-[50px] pl-20 laptop:px-5 laptop:py-7 mobile:px-4 mobile:py-6 flex flex-col justify-center items-start text-right"
                >
                    <h1 class="font-YekanExtraBold text-[#6ecff6] text-[clamp(42px,5vw,70px)] leading-tight mb-6 laptop:mb-4 mobile:text-[28px]">
                        لیست نمایندگان اتصالات توپی برزیل
                    </h1>
                    <p class="font-YekanRegular text-[#c8d8ea] text-[clamp(15px,1.4vw,20px)] mobile:text-[14px] leading-[2] text-justify">
                        شبکه گسترده نمایندگان رسمی اتصالات توپی در سراسر ایران
                        برای ارئه خدمات سریع و مطمئن    
                    </p>
                </div>

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


    <!-- Map & Information -->

    <section class="py-10 mobile:py-6">
        <div class="container mx-auto px-6 mobile:px-4">

            <div class="border-2 border-[#1e3a5f] tablet:border-0 rounded-3xl p-14 desktop:p-8 laptop:p-6 tablet:p-5 mobile:p-4">

                <div class="flex flex-row-reverse gap-8 desktop:gap-6 laptop:gap-5 tablet:flex-col" dir="rtl">

                    <!-- Map -->

                    <div class="w-[45%] desktop:w-[40%] tablet:hidden flex-shrink-0 flex justify-center">
                        <iframe id="mapFrame" class="w-full h-[490px] rounded-[10px] border-4 border-[#1c5d9f]" title="map-iframe" width="600" height="450" allowFullScreen loading="lazy" ></iframe>
                    </div>

                    <!-- Content -->
                     
                    <div class="flex-1 flex flex-col gap-4 min-w-0">

                        <!-- Search -->

                        <div class="w-[95%] tablet:w-full">
                            <input
                                type="text"
                                placeholder="جستجوی نام شهر یا نمایندگی"
                                class="w-full h-[50px] mobile:h-[44px] bg-transparent border border-[#1e3a5f] rounded-xl px-5 text-right text-white font-YekanRegular text-[14px] mobile:text-[13px] placeholder-[#4a6a8f]  focus:border-[#6ecff6] focus:border-2 outline-2 transition-colors duration-200"
                                dir="rtl" 
                            />
                        </div>

                        <!-- Desktop Cards -->

                        <div class="flex flex-col gap-3 pr-1 tablet:hidden">

                            {% for representative in representatives %}
                            
                            <!-- Card -->
                             
                            <div data-src="{{ representative.coordinates }}" class="map-card w-[95%] tablet:w-full border border-[#1e3a5f] rounded-xl px-4 py-4 mobile:px-3 mobile:py-3 flex items-center hover:border-[#6ecff6] transition-colors duration-200 cursor-pointer">

                                <div class="flex-shrink-0 w-20 pl-4 border-l border-[#1e3a5f]">
                                    <p class="font-YekanExtraBold text-[#6ecff6] text-[16px] mobile:text-[14px]">
                                        {{ representative.city }}
                                    </p>
                                </div>

                                <div class="flex-1 flex flex-col gap-1 pr-4 text-right">
                                    <h4 class="font-YekanExtraBold text-white text-[14px] mobile:text-[13px]">
                                        {{ representative.name }}
                                    </h4>
                                    <p class="font-YekanRegular text-[#a0b4c8] text-[11px] mobile:text-[10px]">
                                        {{ representative.address }}
                                    </p>
                                    <p class="font-YekanRegular text-[#a0b4c8] text-[11px] mobile:text-[10px]">
                                        {{ representative.phone_number }}
                                    </p>
                                </div>

                            </div>

                            {% endfor %}
                        </div>

                        <!-- Mobile -->

                        <div class="hidden flex-col gap-3 pr-1 tablet:flex">

                            {% for representative in representatives %}

                            <!-- Card -->

                            <a target="_blank" href="{{ representative.coordinates }}"  class="map-card w-[95%] tablet:w-full border border-[#1e3a5f] rounded-xl px-4 py-4 mobile:px-3 mobile:py-3 flex items-center hover:border-[#6ecff6] transition-colors duration-200 cursor-pointer">

                                <div class="flex-shrink-0 w-20 pl-4 border-l border-[#1e3a5f]">
                                    <p class="font-YekanExtraBold text-[#6ecff6] text-[16px] mobile:text-[18px]">
                                        {{ representative.city }}
                                    </p>
                                </div>

                                <div class="flex-1 flex flex-col gap-1 pr-4 text-right">
                                    <h4 class="font-YekanExtraBold text-white text-[14px] mobile:text-[13px]">
                                        {{ representative.name }}
                                    </h4>
                                    <p class="font-YekanRegular text-[#a0b4c8] text-[11px] mobile:text-[10px]">
                                        {{ representative.address }}
                                    </p>
                                    <p class="font-YekanRegular text-[#a0b4c8] text-[11px] mobile:text-[10px]">
                                        {{ representative.phone_number }}
                                    </p>
                                </div>

                            </a>

                            {% endfor %}

                        </div>

                    </div>

                </div>

            </div>

        </div>
    </section>

    
    <!-- Representation request form -->

    <section dir="rtl" class="py-8">
        <div class="container mx-auto">
            <div class="my-10 gap-4 flex flex-col">
                <h3 class="text-[#6ecff6] text-[34px] laptop:text-[28px] tablet:text-[24px] tablet:text-center font-YekanExtraBold">به شبکه رسمی نمایندگان Tupy در ایران بپیوندید</h3>
                <p class="text-[#c8d8ea] font-YekanMedium text-[24px] laptop:text-[20px] tablet:text-[14px] tablet:text-center mt-2">
                    اگر شرکت شما در زمینه تأمین، توزیع یا فروش تجهیزات تأسیساتی و صنعتی فعالیت می‌کند، لطفاً فرم زیر را تکمیل نمایید. درخواست شما توسط تیم ما بررسی شده و در صورت تأیید اولیه، با شما تماس خواهیم گرفت.
                </p>
            </div>

            <form method="post" id="repForm"
            class="border border-[#1e2c42] rounded-[22px]
                    p-11 desktop:p-9 laptop:p-8 tablet:p-6">

                    {% csrf_token %}

                <!-- information -->
                
                <div class="mb-1">
                    <div class="flex items-center gap-3 mb-6">
                    <div class="w-[34px] h-[34px] rounded-[9px] border border-[#6ecff6] flex items-center justify-center text-[#6ecff6] shrink-0">
                        <svg viewBox="0 0 24 24" fill="none" class="w-[17px] h-[17px]">
                        <rect x="4" y="9" width="16" height="11" rx="1.5" stroke="currentColor" stroke-width="1.8"/>
                        <path d="M9 9V6a3 3 0 0 1 6 0v3" stroke="currentColor" stroke-width="1.8"/>
                        </svg>
                    </div>
                    <div>
                        <h2 class="font-YekanExtraBold text-[18.5px] text-[#f4f6fa] m-0">اطلاعات شرکت</h2>
                        <span class="block font-YekanLight text-[12px] text-[#7c8ba3] mt-0.5">مشخصات سازمان و راه‌های ارتباطی</span>
                    </div>
                    </div>

                    <div class="grid grid-cols-2 gap-5 tablet:grid-cols-1 tablet:gap-4">
                    <div class="flex flex-col gap-2">
                        <label for="companyName" class="font-YekanRegular text-[13.5px] text-[#c7d1e0]">نام شرکت یا مجموعه</label>
                        <input required name="company_name" type="text" id="companyName" placeholder="مثلاً صنایع تاسیساتی البرز"
                        class="w-full bg-transparent border border-[#6ecff6] rounded-[10px] px-4 py-3.5 text-[#f4f6fa] font-YekanRegular text-sm
                                outline-none placeholder:text-[#7c8ba3] placeholder:font-YekanLight
                                hover:border-[#6ecff6] focus:border-[#6ecff6] focus:ring-4 focus:ring-[#6ecff6]/15 transition">
                    </div>

                    <div class="flex flex-col gap-2">
                        <label for="fullName" class="font-YekanRegular text-[13.5px] text-[#c7d1e0]">نام و نام خانوادگی</label>
                        <input required name="full_name" type="text" id="fullName" placeholder="نام مسئول مکاتبات"
                        class="w-full bg-transparent border border-[#6ecff6] rounded-[10px] px-4 py-3.5 text-[#f4f6fa] font-YekanRegular text-sm
                                outline-none placeholder:text-[#7c8ba3] placeholder:font-YekanLight
                                hover:border-[#6ecff6] focus:border-[#6ecff6] focus:ring-4 focus:ring-[#6ecff6]/15 transition">
                    </div>

                    <div class="flex flex-col gap-2">
                        <label for="phone" class="font-YekanRegular text-[13.5px] text-[#c7d1e0]">شماره تماس</label>
                        <input required name="phone" type="tel" id="phone" dir="ltr" placeholder="09xxxxxxxxx"
                        class="w-full text-right bg-transparent border border-[#6ecff6] rounded-[10px] px-4 py-3.5 text-[#f4f6fa] font-YekanRegular text-sm
                                outline-none placeholder:text-[#7c8ba3] placeholder:font-YekanLight
                                hover:border-[#6ecff6] focus:border-[#6ecff6] focus:ring-4 focus:ring-[#6ecff6]/15 transition">
                    </div>

                    <div class="flex flex-col gap-2">
                        <label for="email" class="font-YekanRegular text-[13.5px] text-[#c7d1e0]">ایمیل</label>
                        <input required name="email" type="email" id="email" dir="ltr" placeholder="[email protected]"
                        class="w-full text-right bg-transparent border border-[#6ecff6] rounded-[10px] px-4 py-3.5 text-[#f4f6fa] font-YekanRegular text-sm
                                outline-none placeholder:text-[#7c8ba3] placeholder:font-YekanLight
                                hover:border-[#6ecff6] focus:border-[#6ecff6] focus:ring-4 focus:ring-[#6ecff6]/15 transition">
                    </div>

                    <div class="flex flex-col gap-2">
                        <label for="province" class="font-YekanRegular text-[13.5px] text-[#c7d1e0]">استان</label>
                        <input required name="province" type="text" id="province" placeholder="مثلاً تهران"
                        class="w-full bg-transparent border border-[#6ecff6] rounded-[10px] px-4 py-3.5 text-[#f4f6fa] font-YekanRegular text-sm
                                outline-none placeholder:text-[#7c8ba3] placeholder:font-YekanLight
                                hover:border-[#6ecff6] focus:border-[#6ecff6] focus:ring-4 focus:ring-[#6ecff6]/15 transition">
                    </div>

                    <div class="flex flex-col gap-2">
                        <label for="city" class="font-YekanRegular text-[13.5px] text-[#c7d1e0]">شهر</label>
                        <input required name="city" type="text" id="city" placeholder="مثلاً کرج"
                        class="w-full bg-transparent border border-[#6ecff6] rounded-[10px] px-4 py-3.5 text-[#f4f6fa] font-YekanRegular text-sm
                                outline-none placeholder:text-[#7c8ba3] placeholder:font-YekanLight
                                hover:border-[#6ecff6] focus:border-[#6ecff6] focus:ring-4 focus:ring-[#6ecff6]/15 transition">
                    </div>
                    </div>
                </div>

                <div class="flex items-center gap-2.5 my-7" dir="ltr">
                    <div class="flex-1 h-px bg-gradient-to-r from-transparent via-[#2a3c58] to-transparent"></div>
                    <div class="w-1.5 h-1.5 rounded-full border border-[#6ecff6] shrink-0"></div>
                    <div class="flex-1 h-px bg-gradient-to-r from-transparent via-[#2a3c58] to-transparent"></div>
                </div>

                <!-- Information -->

                <div class="mb-1">
                    <div class="flex items-center gap-3 mb-6">
                    <div class="w-[34px] h-[34px] rounded-[9px] border border-[#6ecff6] flex items-center justify-center text-[#6ecff6] shrink-0">
                        <svg viewBox="0 0 24 24" fill="none" class="w-[17px] h-[17px]">
                        <circle cx="12" cy="12" r="8" stroke="currentColor" stroke-width="1.8"/>
                        <path d="M12 4a12 12 0 0 1 0 16M12 4a12 12 0 0 0 0 16M4 12h16" stroke="currentColor" stroke-width="1.6"/>
                        </svg>
                    </div>
                    <div>
                        <h2 class="font-YekanExtraBold text-[18.5px] text-[#f4f6fa] m-0">اطلاعات کسب‌وکار</h2>
                        <span class="block font-YekanLight text-[12px] text-[#7c8ba3] mt-0.5">معرفی آنلاین مجموعه شما</span>
                    </div>
                    </div>

                    <div class="grid grid-cols-2 gap-5 tablet:grid-cols-1 tablet:gap-4">
                    <div class="col-span-2 tablet:col-span-1 flex flex-col gap-2">
                        <label for="website" class="font-YekanRegular text-[13.5px] text-[#c7d1e0] flex items-center gap-1.5">
                        وبسایت <span class="font-YekanLight text-[11px] text-[#7c8ba3]">(اختیاری)</span>
                        </label>
                        <input name="website" type="url" id="website" dir="ltr" placeholder="https://example.com"
                        class="w-full text-right bg-transparent border border-[#6ecff6] rounded-[10px] px-4 py-3.5 text-[#f4f6fa] font-YekanRegular text-sm
                                outline-none placeholder:text-[#7c8ba3] placeholder:font-YekanLight
                                hover:border-[#6ecff6] focus:border-[#6ecff6] focus:ring-4 focus:ring-[#6ecff6]/15 transition">
                    </div>
                    </div>
                </div>

                <div class="flex items-center gap-2.5 my-7" dir="ltr">
                    <div class="flex-1 h-px bg-gradient-to-r from-transparent via-[#2a3c58] to-transparent"></div>
                    <div class="w-1.5 h-1.5 rounded-full border border-[#6ecff6] shrink-0"></div>
                    <div class="flex-1 h-px bg-gradient-to-r from-transparent via-[#2a3c58] to-transparent"></div>
                </div>

                <!-- Experience and market -->

                <div class="mb-1">
                    <div class="flex items-center gap-3 mb-6">
                    <div class="w-[34px] h-[34px] rounded-[9px] border border-[#6ecff6] flex items-center justify-center text-[#6ecff6] shrink-0">
                        <svg viewBox="0 0 24 24" fill="none" class="w-[17px] h-[17px]">
                        <path d="M4 20V10M10 20V4M16 20V13M22 20H2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
                        </svg>
                    </div>
                    <div>
                        <h2 class="font-YekanExtraBold text-[18.5px] text-[#f4f6fa] m-0">تجربه و بازار</h2>
                        <span class="block font-YekanLight text-[12px] text-[#7c8ba3] mt-0.5">سابقه فعالیت و گستره پوشش شما</span>
                    </div>
                    </div>

                    <div class="grid grid-cols-2 gap-5 tablet:grid-cols-1 tablet:gap-4">
                    <div class="flex flex-col gap-2">
                        <label for="years" class="font-YekanRegular text-[13.5px] text-[#c7d1e0]">چند سال سابقه فعالیت در صنعت تاسیسات دارید؟</label>
                        <input required name="years" type="number" min="0" id="years" placeholder="مثلاً 5"
                        class="w-full bg-transparent border border-[#6ecff6] rounded-[10px] px-4 py-3.5 text-[#f4f6fa] font-YekanRegular text-sm
                                outline-none placeholder:text-[#7c8ba3] placeholder:font-YekanLight
                                hover:border-[#6ecff6] focus:border-[#6ecff6] focus:ring-4 focus:ring-[#6ecff6]/15 transition">
                    </div>

                    <div class="flex flex-col gap-2">
                        <label for="brands" class="font-YekanRegular text-[13.5px] text-[#c7d1e0]">در حال حاضر با چه برندهایی همکاری می‌کنید؟</label>
                        <input required name="brands" type="text" id="brands" placeholder="نام برند یا برندها"
                        class="w-full bg-transparent border border-[#6ecff6] rounded-[10px] px-4 py-3.5 text-[#f4f6fa] font-YekanRegular text-sm
                                outline-none placeholder:text-[#7c8ba3] placeholder:font-YekanLight
                                hover:border-[#6ecff6] focus:border-[#6ecff6] focus:ring-4 focus:ring-[#6ecff6]/15 transition">
                    </div>

                    <div class="col-span-2 tablet:col-span-1 flex flex-col gap-2">
                        <label for="coverage" class="font-YekanRegular text-[13.5px] text-[#c7d1e0]">استان‌ها یا شهرهای تحت پوشش شما کدام‌اند؟</label>
                        <input required name="coverage" type="text" id="coverage" placeholder="مثلاً تهران، البرز، قزوین"
                        class="w-full bg-transparent border border-[#6ecff6] rounded-[10px] px-4 py-3.5 text-[#f4f6fa] font-YekanRegular text-sm
                                outline-none placeholder:text-[#7c8ba3] placeholder:font-YekanLight
                                hover:border-[#6ecff6] focus:border-[#6ecff6] focus:ring-4 focus:ring-[#6ecff6]/15 transition">
                    </div>
                    </div>
                </div>

                <div class="flex items-center gap-2.5 my-7" dir="ltr">
                    <div class="flex-1 h-px bg-gradient-to-r from-transparent via-[#2a3c58] to-transparent"></div>
                    <div class="w-1.5 h-1.5 rounded-full border border-[#6ecff6] shrink-0"></div>
                    <div class="flex-1 h-px bg-gradient-to-r from-transparent via-[#2a3c58] to-transparent"></div>
                </div>

                <!-- Capabilities -->

                <div class="mb-1">
                    <div class="flex items-center gap-3 mb-6">
                    <div class="w-[34px] h-[34px] rounded-[9px] border border-[#6ecff6] flex items-center justify-center text-[#6ecff6] shrink-0">
                        <svg viewBox="0 0 24 24" fill="none" class="w-[17px] h-[17px]">
                        <path d="M3 9l9-6 9 6-9 6-9-6z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
                        <path d="M3 9v6l9 6 9-6V9" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <div>
                        <h2 class="font-YekanExtraBold text-[18.5px] text-[#f4f6fa] m-0">توانمندی</h2>
                        <span class="block font-YekanLight text-[12px] text-[#7c8ba3] mt-0.5">امکانات لجستیکی موجود</span>
                    </div>
                    </div>

                    <div class="flex items-center gap-4 flex-wrap">
                    <label class="font-YekanRegular text-sm text-[#c7d1e0] me-1">آیا دارای انبار هستید؟</label>
                    <div class="inline-flex border border-[#1c5d9f] rounded-full p-1 gap-1">
                        <input name="warehouse" value="yes" type="radio" name="warehouse" id="wh-yes" class="hidden peer/yes" checked>
                        <label for="wh-yes"
                        class="px-6 py-2 rounded-full border border-transparent font-YekanRegular text-[13.5px] text-[#7c8ba3] cursor-pointer transition
                                peer-checked/yes:border-[#1c5d9f] peer-checked/yes:text-[#f4f6fa] peer-checked/yes:font-YekanDemiBold">بله</label>

                        <input name="warehouse" value="no" type="radio" name="warehouse" id="wh-no" class="hidden peer/no">
                        <label for="wh-no"
                        class="px-6 py-2 rounded-full border border-transparent font-YekanRegular text-[13.5px] text-[#7c8ba3] cursor-pointer transition
                                peer-checked/no:border-[#1c5d9f] peer-checked/no:text-[#f4f6fa] peer-checked/no:font-YekanDemiBold">خیر</label>
                    </div>
                    </div>
                </div>

                <!-- submit -->

                <div class="mt-10 flex flex-col items-center gap-3.5">
                    <button type="submit"
                    class="w-full bg-transparent border-2 border-[#1c5d9f] rounded-[10px] text-[#f4f6fa]
                            font-YekanRegular text-base py-4 flex items-center justify-center gap-2.5
                            hover:bg-[#1c5d9f]/10 active:bg-[#1c5d9f]/20 transition group">
                    ارسال درخواست نمایندگی
                        <svg viewBox="0 0 24 24" fill="none" class="w-[18px] h-[18px] transition group-hover:-translate-x-1">
                            <path d="M19 12H5M12 19l-7-7 7-7" stroke="#f4f6fa" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </button>
                    <p class="font-YekanLight text-xs text-[#7c8ba3] text-center m-0">
                    اطلاعات شما محرمانه باقی می‌ماند و صرفاً برای بررسی درخواست نمایندگی استفاده می‌شود.
                    </p>
                </div>

            </form>

        </div>

        {% if messages %}
            {% for message in messages %}
                {% if message.tags == 'success' %}
                    <script>
                        window.successMessage = "{{ message|escapejs }}";
                    </script>
                {% endif %}
            {% endfor %}
        {% endif %}

    </section>

    {% endblock %}


    <br><br><br>


    {% block js %}

    <script src="{% static 'js/representative.js' %}"></script>

    {% endblock %}