@extends('app')
@php
    $seoKey = 'orders';
    $isCategoryRoute = request()->routeIs('product.category');
@endphp
@section('content')
    <main>
        <section class="intro">
            <div class="container">
                <div class="intro__wrapper">
                    <h1 class="secondary-title">
                        @if(isset($selectedSubcategory))
                            {{ $selectedSubcategory->title }}
                        @elseif(isset($selectedCategory))
                            {{ $selectedCategory->title }}
                        @else
                            Заказы на строительные и ремонтные работы
                        @endif
                        в {{ $declinedCity ?? 'Москве' }}
                    </h1>
                    <div class="breadcrumbs breadcrumbs-reverse">
                        <div class="breadcrumbs__inner">
                            <ul class="breadcrumbs__list mobile-overflow">
                                <li class="breadcrumbs__list-item">
                                    <a href="{{route('showHomePage')}}">Главная</a>
                                </li>
                                <li class="breadcrumbs__list-item">
                                    <a href="{{route('showOrdersCatalogPage')}}">Заказы</a>
                                </li>
                                @if(isset($selectedCategory))
                                    <li class="breadcrumbs__list-item">
                                        <a href="{{ route('showOrdersCatalogPage', ['category' => $selectedCategory->slug]) }}">
                                            {{ $selectedCategory->title }}
                                        </a>
                                    </li>
                                @endif
                                @if(isset($selectedSubcategory))
                                    <li class="breadcrumbs__list-item">
                                        <a href="{{ route('showOrdersCatalogPage', ['category' => $selectedCategory->slug, 'subcategory' => $selectedSubcategory->slug]) }}">
                                            {{ $selectedSubcategory->title }}
                                        </a>
                                    </li>
                                @endif
                            </ul>
                        </div>
                    </div>
                </div>
            <div class="create_zakaz create_zakaz_mobile" style="cursor: pointer;max-width: 140px;margin: 0 auto;">Создать заказ</div>
            </div>
        </section>
        <section class="catalog">
            <div class="container">
                <div class="catalog__inner">
                    <button class="acide__btn">Фильтр</button>
                    <aside class="catalog__inner-aside aside-filter">
                        <div class="tabs-container">
                            <div id="filter-1" class="tabs-content aside-filter__tabs-content tabs-content--active">
                                <form action="{{ route('showOrdersCatalogPage') }}" method="GET"
                                      class="aside-filter__form" id="orders-filter-form">
                                    <ul class="aside-filter__list">
                                        <!-- Фильтр по городам -->
                                        <li class="aside-filter__item">
                                            <p class="aside-filter__title">Город</p>
                                            <div class="aside-filter__content">
                                                <div class="catalog__drop drop">
                                                    <div class="drop-select-catalog drop-select drop-select1">
                                                        @if(isset($selectedCity) && $selectedCity)
                                                            <span>{{$selectedCity->title}}</span>
                                                        @else
                                                            <span>Москва</span>
                                                        @endif
                                                    </div>
                                                    <ul class="drop-list drop-list1" style="display: none">
                                                        <div class="search">
                                                            <i class="uil uil-search">
                                                                <svg width="17px" height="17px" viewBox="0 0 32 32"
                                                                     fill="#c6c3c3" stroke="#c6c3c3">
                                                                    <g>
                                                                        <path
                                                                            d="M269.46,1163.45 C263.17,1163.45 258.071,1158.44 258.071,1152.25 C258.071,1146.06 263.17,1141.04 269.46,1141.04 C275.75,1141.04 280.85,1146.06 280.85,1152.25 C280.85,1158.44 275.75,1163.45 269.46,1163.45 L269.46,1163.45 Z M287.688,1169.25 L279.429,1161.12 C281.591,1158.77 282.92,1155.67 282.92,1152.25 C282.92,1144.93 276.894,1139 269.46,1139 C262.026,1139 256,1144.93 256,1152.25 C256,1159.56 262.026,1165.49 269.46,1165.49 C272.672,1165.49 275.618,1164.38 277.932,1162.53 L286.224,1170.69 C286.629,1171.09 287.284,1171.09 287.688,1170.69 C288.093,1170.3 288.093,1169.65 287.688,1169.25 L287.688,1169.25 Z"></path>
                                                                    </g>
                                                                </svg>
                                                            </i>
                                                            <input id="cityFilterInput" spellcheck="false" type="text"
                                                                   placeholder="Введите город"
                                                                   value="{{ $selectedCity ? $selectedCity->title : 'Москва' }}"
                                                                   oninput="searchСityOrders(this.value)">
                                                        </div>
                                                        <!-- Список городов -->
                                                    </ul>
                                                </div>
                                                <input type="hidden" name="city" id="selected-city"
                                                       value="{{ $selectedCity ? $selectedCity->slug : '' }}">
                                            </div>
                                        </li>
                                                                                <!-- Фильтр по категориям и подкатегориям -->
                                        <li class="aside-filter__item">
                                            <p class="aside-filter__title">Категория</p>
                                            <div class="aside-filter__content">
                                                <div class="aside-filter__box">
                                                    @php
                                                        function renderOrderCategoryTree($categories, $selectedCategory, $selectedSubcategory, $level = 0) {
                                                            foreach($categories as $cat) {
                                                                $isSelected = isset($selectedCategory) && $selectedCategory->slug === $cat->slug && !$selectedSubcategory;
                                                                $isParentOfSelected = isset($selectedCategory) && $selectedCategory->slug === $cat->slug && $selectedSubcategory;
                                                                echo '<label class="checkbox__item" style="margin-left:'.($level*20).'px;'.($isParentOfSelected ? 'font-weight:bold;' : '').'">';
                                                                echo '<input type="radio" name="category" value="'.$cat->slug.'" class="checkbox__input custom-radio" '.($isSelected || $isParentOfSelected ? 'checked' : '').'>';
                                                                echo '<span class="fake"></span>';
                                                                echo '<span class="checkbox__name">'.$cat->title.'</span>';
                                                                echo '</label>';
                                                                if($cat->categories->count() && $level < 1) {
                                                                    $show = $isParentOfSelected || $isSelected;
                                                                    echo '<div class="subcategory spec_check" style="display:'.($show ? 'block' : 'none').';">';
                                                                    foreach($cat->categories as $child) {
                                                                        $isChildSelected = isset($selectedCategory) && isset($selectedSubcategory) && $selectedCategory->slug === $cat->slug && $selectedSubcategory->slug === $child->slug;
                                                                        echo '<label class="checkbox__item" style="margin-left:'.(($level+1)*8).'px;">';
                                                                        echo '<input type="radio" name="subcategory" value="'.$child->slug.'" class="checkbox__input custom-radio" data-parent="'.$cat->slug.'" '.($isChildSelected ? 'checked' : '').'>';
                                                                        echo '<span class="fake"></span>';
                                                                        echo '<span class="checkbox__name">'.$child->title.'</span>';
                                                                        echo '</label>';
                                                                    }
                                                                    echo '</div>';
                                                                }
                                                            }
                                                        }
                                                        renderOrderCategoryTree($categories, $selectedCategory ?? null, $selectedSubcategory ?? null);
                                                    @endphp
                                                </div>
                                            </div>
                                        </li>
                                        <!-- Фильтр по бюджету -->
                                        <li class="aside-filter__item">
                                            <p class="aside-filter__title">Бюджет</p>
                                            <div class="aside-filter__content">
                                                <div class="aside-filter__box">
                                                    <label style="font-size: 14px">Мин. бюджет
                                                        <input type="text" name="min_budget" id="min_budget"
                                                               class="input-main settings__input"
                                                               placeholder="Минимальный бюджет"
                                                               value="{{ request('min_budget') }}">
                                                    </label>
                                                    <label style="font-size: 14px">Макс. бюджет
                                                        <input type="text" name="max_budget" id="max_budget"
                                                               class="input-main settings__input"
                                                               placeholder="Максимальный бюджет"
                                                               value="{{ request('max_budget') }}">
                                                    </label>
                                                </div>
                                            </div>
                                        </li>
                                        <!-- Фильтр по субподряду -->
                                        <li class="aside-filter__item">
                                            <p class="aside-filter__title">Субподряд</p>
                                            <div class="aside-filter__content">
                                                <div class="aside-filter__box">
                                                    <label class="checkbox__item">
                                                        <input type="checkbox" name="is_subcontract" value="1"
                                                               {{ request('is_subcontract') ? 'checked' : '' }} class="checkbox__input">
                                                        <span class="fake"></span>
                                                        <span
                                                            class="checkbox__name">Показать только заказы на субподряд</span>
                                                    </label>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                    <button type="submit" class="btn-main settings__btn">Применить фильтр</button>
                                </form>
                            </div>
                        </div>
                    </aside>
                    <div class="top" style="width:100%">
                        <form method="GET" id="sortForm" class="sort_order"
                              style="margin-bottom: 20px; display: flex; align-items: center; gap: 10px;">
                            @foreach(request()->except('sort', 'page') as $key => $value)
                                <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                            @endforeach
                            <span style="font-weight: bold; margin-right: 10px;">Сортировать:</span>
                            <div class="drop" style="min-width: 267px;">
                                <div class="drop-select drop-select2" tabindex="0" id="sortDropSelect" aria-label="Сортировать">
                                <span id="sortDropText">
                                    @php
                                        $sortOptions = [
                                            'created_desc' => 'В начале новые',
                                            'created_asc' => 'В начале старые',
                                            'budget_asc' => 'Сначала дешевле',
                                            'budget_desc' => 'Сначала дороже',
                                        ];
                                        $currentSort = request('sort', 'created_desc');
                                    @endphp
                                    {{ $sortOptions[$currentSort] ?? 'В начале новые' }}
                                </span>
                                    <i class="arrow"></i>
                                </div>
                                <ul class="drop-list drop-list2" id="sortDropList" style="display: none;">
                                    @foreach($sortOptions as $value => $label)
                                        <li data-value="{{ $value }}"
                                            @if($currentSort == $value) style="background:#c2c2c2" @endif>{{ $label }}</li>
                                    @endforeach
                                </ul>
                                <input type="hidden" name="sort" id="sortInput" value="{{ $currentSort }}">
                            </div>
                            <div class="create_zakaz create_zakaz_desktop" style="cursor: pointer;">Создать заказ</div>
                        </form>
                        @if(!$orders->isEmpty())
                            <div class="head_orders">
                                <div class="head_orders_item1">Заказ</div>
                                <div class="head_orders_item2">Сроки</div>
                                <div class="head_orders_item3">Бюджет</div>
                            </div>
                        @endif
                        <div class="orders__list">
                            @if($orders->isEmpty())
                                <p style="margin: 0 auto">Нет совпадений по вашему запросу.</p>
                            @endif
                            @foreach($orders as $order)
                                <div class="orders__item">
                                    <div class="orders__item-name">
                                        <div class="orders__item__header-desktop" style="display: flex; align-items: center; justify-content: start; gap: 10px; margin-bottom: 2px; flex-wrap: wrap;">
                                            <p class="orders__item__title order-title-desktop" style="margin: 0;">{{ $order->title }}</p>
                                            <span style="background: #f5f5dc; color: #7a7a00; border-radius: 6px; padding: 2px 8px; font-size: 14px; font-weight: 600; white-space: nowrap;">№ {{ $order->id }}</span>
                                            <span style="color: #888; font-size: 13px; white-space: nowrap;">Размещен: {{ $order->created_at->format('d.m.Y') }} в {{ $order->created_at->format('H:i') }}</span>
                                        </div>
                                        <div class="order-title-mobile">
                                            <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px;">
                                                <span style="background: #f5f5dc; color: #7a7a00; border-radius: 6px; padding: 2px 8px; font-size: 14px; font-weight: 600; white-space: nowrap;">№ {{ $order->id }}</span>
                                                <span style="color: #888; font-size: 13px; white-space: nowrap;">Размещен: {{ $order->created_at->format('d.m.Y') }} в {{ $order->created_at->format('H:i') }}</span>
                                            </div>
                                            <div style="font-size: 18px; font-weight: bold; margin-bottom: 4px;">{{ $order->title }}</div>
                                        </div>
                                        <div class="orders__item__content">
                                            <div
                                                class="orders__item__content__city">{{ $order->city->title ?? '' }}</div>
                                            <div class="orders__item__content__tegs">
                                                @if($order->category)
                                                    <div
                                                        class="orders__item__content__teg">{{ $order->category->title }}</div>
                                                @endif
                                                @if($order->subcategory)
                                                    <div
                                                        class="orders__item__content__teg">{{ $order->subcategory->title }}</div>
                                                @endif
                                                @if($order->is_subcontract)
                                                    <div class="orders__item__content__teg">Субподряд</div>
                                                @endif
                                            </div>
                                        </div>
                                        <style>
                                            .head_orders{
                                                display: flex;
                                                width: 100%;
                                                justify-content: center;
                                            }
                                            .head_orders_item1{
                                                margin-right: auto;
                                                color: grey;
                                                font-size: 15px;
                                                font-weight: 600;
                                            }
                                            .head_orders_item2{
                                                margin-right: 73px;
                                                color: grey;
                                                font-size: 15px;
                                                font-weight: 600;
                                            }
                                            .head_orders_item3{
                                                margin-right: 37px;
                                                color: grey;
                                                font-size: 15px;
                                                font-weight: 600;
                                            }
                                            .order-title-mobile {
                                                display: none;
                                                width: 100%;
                                            }
                                            @media (max-width: 768px) {
                                                .head_orders{
                                                    display: none;
                                                }
                                                .order-title-desktop {
                                                    display: none !important;
                                                }
                                                .orders__item__header-desktop {
                                                    display: none !important;
                                                }
                                                .order-title-mobile {
                                                    display: block;
                                                    width: 100%;
                                                }
                                            }
                                            .orders__item__documents {
                                                margin-top: 10px;
                                            }

                                            .orders__item__documents-title {
                                                font-size: 14px;
                                                color: #888;
                                                margin-bottom: 6px;
                                            }

                                            .orders__item__document-link {
                                                display: inline-flex;
                                                align-items: center;
                                                justify-content: center;
                                                padding: 7px;
                                                border: 1px solid #e0e0e0;
                                                border-radius: 6px;
                                                margin-bottom: 7px;
                                                margin-right: 7px;
                                                text-decoration: none;
                                                color: #222;
                                                background: #fafbfc;
                                                transition: background 0.15s;
                                                width: 38px;
                                                height: 38px;
                                            }

                                            .orders__item__document-link:hover {
                                                background: #f0f0f0;
                                            }

                                            .orders__item__document-icon {
                                                display: flex;
                                                align-items: center;
                                                justify-content: center;
                                            }

                                            .orders__item__document-icon img {
                                                display: block;
                                            }
                                            /* Styles for the "Show Phone" button */
                                            .btn-show-phone {
                                                background-color: #ffffff; /* White background */
                                                color: #217b00; /* Black text */
                                                border: 1px solid #217B00; /* Green border */
                                                padding: 10px 15px;
                                                border-radius: 5px;
                                                cursor: pointer;
                                                font-size: 16px;
                                                font-weight: bold;
                                                transition: background-color 0.3s, color 0.3s, border-color 0.3s;
                                                margin-top: 10px;
                                                width: 100%;
                                                text-align: left; /* Изменено с center на left */
                                            }
                                            /* Кнопка "Показать телефон" - правильное выравнивание слева */
                                            .btn-show-phone33,
                                            .btn-show-phone34 {
                                                color: #217b00 !important;
                                                background-color: #ffffff !important;
                                                font-size: 14px !important;
                                                font-weight: 500 !important;
                                                text-align: left !important;
                                                width: auto !important;
                                                max-width: none !important;
                                                min-width: 160px !important;
                                                /* padding: 10px 20px !important; */
                                                /* border: 1px solid #217B00 !important; */
                                                border-radius: 5px !important;
                                                cursor: pointer !important;
                                                display: inline-block !important;
                                                margin: 0 !important;
                                                box-sizing: border-box !important;
                                            }

                                            /* Контейнер для кнопки - выравнивание слева, не растягивает кнопку */
                                            .orders__item-contact {
                                                text-align: left !important;
                                                display: block !important;
                                                width: auto !important;
                                                max-width: 100% !important;
                                            }

                                            /* На мобильных устройствах кнопка также не должна быть на всю ширину */
                                            @media (max-width: 768px) {
                                                .orders__item-contact .btn-show-phone33,
                                                .orders__item-contact .btn-show-phone34 {
                                                    width: auto !important;
                                                    max-width: none !important;
                                                    text-align: left !important;
                                                    padding: 10px 20px !important;
                                                    display: inline-block !important;
                                                }
                                                .orders__item-contact {
                                                    width: auto !important;
                                                    text-align: left !important;
                                                }
                                            }

                                            .btn-show-phone:hover {
                                                background-color: #217B00; /* Green background on hover */
                                                color: #ffffff; /* White text on hover */
                                            }

                                            /* Styles for the phone modal overlay */
                                            .phone-modal-overlay {
                                                position: fixed;
                                                top: 0;
                                                left: 0;
                                                width: 100%;
                                                height: 100%;
                                                background-color: rgba(0, 0, 0, 0.6);
                                                display: flex;
                                                justify-content: center;
                                                align-items: center;
                                                z-index: 1000;
                                            }

                                            /* Styles for the phone modal content */
                                            .phone-modal-content {
                                                background-color: #fff;
                                                padding: 30px;
                                                border-radius: 8px;
                                                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
                                                text-align: center;
                                                position: relative;
                                                width: 90%;
                                                max-width: 400px;
                                            }

                                            .phone-modal-title {
                                                font-size: 24px;
                                                margin-bottom: 20px;
                                                color: #333;
                                            }

                                            .phone-modal-close {
                                                position: absolute;
                                                top: 15px;
                                                right: 20px;
                                                font-size: 30px;
                                                cursor: pointer;
                                                color: #888;
                                            }

                                            .phone-modal-close:hover {
                                                color: #555;
                                            }

                                            .phone-modal-body {
                                                margin-bottom: 20px;
                                            }

                                            .phone-modal-warning {
                                                font-size: 14px;
                                                color: #f44336;
                                                border-top: 1px solid #eee;
                                                padding-top: 15px;
                                                margin-top: 15px;
                                            }
                                            .block_price_and_date{
                                                display: flex;
                                                flex-direction: row;
                                                margin-bottom: auto;
                                            }
                                            @media (max-width: 768px) {
                                                .orders__item__header-desktop {
                                                    display: none !important;
                                                }
                                                .block_price_and_date {
                                                    flex-direction: row;
                                                    justify-content: space-between;
                                                    align-items: center;
                                                    width: 100%;
                                                    margin-top: 8px;
                                                    gap: 10px;
                                                }
                                                .orders__date {
                                                    margin-top: 0 !important;
                                                    text-align: left;
                                                }
                                                .orders__item-price {
                                                    margin-top: 0 !important;
                                                    text-align: right;
                                                }
                                            }
                                            .orders__item__toggle {
                                                display: inline-block;
                                                cursor: pointer;
                                                margin-right: 8px;
                                                vertical-align: middle;
                                            }
                                            .orders__item__toggle-icon {
                                                transition: transform 0.2s;
                                            }
                                            .orders__item.active .orders__item__toggle-icon {
                                                transform: rotate(180deg);
                                            }


                                        </style>
                                        <p class="orders__item__description">
                                            <span class="orders__item__toggle">
                                                <svg class="orders__item__toggle-icon" width="16" height="16" viewBox="0 0 16 16" fill="#217B00" xmlns="http://www.w3.org/2000/svg">
                                                    <polygon points="3,4 13,4 8,12"/>
                                                </svg>
                                            </span>
                                            {{ $order->description }}
                                        </p>
                                        <div class="orders__item__documents">
                                            <div class="orders__item__documents-title">Вложенные документы</div>
                                            <div style="display: flex; ">
                                            @if($order->files && $order->files->count())
                                                    @foreach($order->files as $file)
                                                        @php
                                                            $extension = strtolower(pathinfo($file->file, PATHINFO_EXTENSION));
                                                            $isImage = in_array($extension, ['jpg','jpeg','png','gif','webp']);
                                                            $isPdf = $extension === 'pdf';
                                                            $fileUrl = asset('storage/'.$file->file);
                                                        @endphp
                                                        @if($isImage || $isPdf)
                                                            <a class="orders__item__document-link"
                                                            href="{{ $fileUrl }}"
                                                            data-fancybox="order-files-{{ $order->id }}"
                                                            @if($isPdf) data-type="iframe" @endif
                                                            data-download="{{ $fileUrl }}"
                                                            data-filename="{{ basename($file->file) }}">
                                                                <span class="orders__item__document-icon">
                                                                    @if($isImage)
                                                                        <img src="{{ $fileUrl }}" alt="Документ"
                                                                            style="width:24px;height:24px;object-fit:cover;">
                                                                    @else
                                                                        <img src="{{ asset('img/pdf-icon.png') }}" alt="Документ"
                                                                            style="width:24px;height:24px;">
                                                                    @endif
                                                                </span>
                                                            </a>
                                                        @else
                                                            <a class="orders__item__document-link"
                                                            href="{{ $fileUrl }}" target="_blank"
                                                            download>
                                                                <span class="orders__item__document-icon">
                                                                    <img src="{{ asset('img/pdf-icon.png') }}" alt="Документ"
                                                                        style="width:24px;height:24px;">
                                                                </span>
                                                            </a>
                                                        @endif
                                                    @endforeach
                                            @endif
                                            </div>
                                        </div>
                                        @auth
                                            <div class="orders__item-contact">
                                                                                                    <button type="button" class="btn-show-phone33" data-phone="{{ $number }}">Показать телефон</button>
                                            </div>
                                        @endauth
                                        @guest
                                            <div class="orders__item-contact">

                                                <a href="{{route('login')}}" type="button" class="btn-show-phone34" >Показать телефон</a>
                                            </div>
                                        @endguest
                                    </div>
                                    <div class="block_price_and_date">

                                        <p class="orders__date">
                                            @if($order->date_start && $order->date_end)
                                            {{ $order->date_start->format('d.m') }}
                                            - {{ $order->date_end->format('d.m') }}
                                            @elseif($order->date_start)
                                            С {{ $order->date_start->format('d.m') }}
                                            @elseif($order->date_end)
                                            До {{ $order->date_end->format('d.m') }}
                                            @endif
                                        </p>
                                        <p class="orders__item-price">
                                            @if($order->budget)
                                            {{ number_format($order->budget, 0, '.', ' ') }} руб.
                                            @else
                                            Бюджет не указан
                                            @endif
                                        </p>

                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="pagination">
                            @if(count($orders) >= 10 && $orders->lastPage() > 1)
                                <ul class="pagination__list">
                                    {{-- Кнопка "Назад" --}}
                                    @if ($orders->currentPage() > 1)
                                        <li class="pagination__item pagination__item--prev">
                                            <a href="{{ $orders->previousPageUrl() }}" style="margin-left: 11px">Назад</a>
                                        </li>
                                    @endif

                                    {{-- Номера страниц --}}
                                    @php
                                        $currentPage = $orders->currentPage();
                                        $lastPage = $orders->lastPage();
                                        $start = max(1, $currentPage - 2);
                                        $end = min($lastPage, $currentPage + 2);
                                    @endphp
                                    @for ($i = $start; $i <= $end; $i++)
                                        <li class="pagination__item {{ $i == $currentPage ? 'pagination__item--active' : '' }}">
                                            <a href="{{ $orders->url($i) }}">{{ $i }}</a>
                                        </li>
                                    @endfor

                                    {{-- Кнопка "Далее" --}}
                                    @if ($orders->currentPage() < $orders->lastPage())
                                        <li class="pagination__item pagination__item--next">
                                            <a href="{{ $orders->nextPageUrl() }}">Далее</a>
                                        </li>
                                    @endif
                                </ul>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="info">
            <div class="container">
                <div class="info__list">
                    @if(count(explode('/', request()->path())) === 1)
                    {!! \App\Models\Setting::first()->block_under_footer_orders !!}
                    @endif
                </div>
            </div>
        </section>
    </main>
    <!-- Модалка для телефона -->
    <div id="phoneModal" class="phone-modal-overlay" style="display: none;">
        <div class="phone-modal-content">
            <h2 class="phone-modal-title">Телефон заказчика</h2>
            <span class="phone-modal-close" id="closePhoneModalBtn">&times;</span>
            <div class="phone-modal-body">
                <a  id="modalPhoneNumber" style="font-size: 2rem;color: black;font-weight: 500;"></a>
            </div>
       </div>
    </div>

    <div class="modal__wrapper3 custom">
        <div class="modal"
             style="max-width: 650px;height: auto;width: 650px;min-height: auto;max-height: calc(100vh - 100px);overflow: scroll;">
            <div class="modal__close3"><img src="https://dev2.xn--e1aoddhq.xn--p1ai/assets/img/close.svg" alt="cancel"
                                            width="20" height="20"></div>
            <div class="modal_register_zakaz">
                <form id="createOrderForm" enctype="multipart/form-data">
                    <div class="modal_register_zakaz_content">
                        <div class="modal_register_zakaz_content_title">Основная информация</div>
                        <div class="modal_register_zakaz_content_rows">
                            <div class="modal_register_zakaz_row">
                                <div class="modal_register_zakaz_row_item">
                                    <div class="modal_register_zakaz_row_item_title">
                                        <label for="order-title">Название заказа</label>
                                    </div>
                                    <div class="modal_register_zakaz_row_item_input">
                                        <input class="input-main" type="text" name="title" id="order-title" placeholder="Кратко опишите заказ">
                                    </div>
                                </div>
                            </div>
                            <div class="modal_register_zakaz_row">
                                <div class="modal_register_zakaz_row_item">
                                    <div class="modal_register_zakaz_row_item_title">
                                        <label for="order-description">Описание работ</label>
                                    </div>
                                    <div class="modal_register_zakaz_row_item_input">
                                        <textarea class="input-main" name="description" id="order-description" cols="30" rows="10"
                                                  placeholder="Подробно опишите суть и особенности заказа: объем, площадь, время работ и другое."></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="modal_register_zakaz_row">
                                <div class="modal_register_zakaz_row_item">
                                    <div class="modal_register_zakaz_row_item_title">
                                        <label for="order_category_id">Специализация</label>
                                    </div>
                                    <div class="modal_register_zakaz_row_item_input">
                                        <select name="category_id" id="order_category_id" class="input-main" required>
                                            <option value="">Выберите категорию</option>
                                            @foreach($categories as $cat)
                                                <option value="{{ $cat->id }}" data-subcategories='@json($cat->categories)'>{{ $cat->title }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="modal_register_zakaz_row" id="subcategory_row" style="display:none;">
                                <div class="modal_register_zakaz_row_item">
                                    <div class="modal_register_zakaz_row_item_title">
                                        <label for="order_subcategory_id">Подкатегория</label>
                                    </div>
                                    <div class="modal_register_zakaz_row_item_input">
                                        <select name="subcategory_id" id="order_subcategory_id" class="input-main">
                                            {{-- <option value="">Выберите подкатегорию</option> --}}
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="modal_register_zakaz_row">
                                <div class="modal_register_zakaz_row_item">
                                    <div class="modal_register_zakaz_row_item_title">
                                        Прикрепить файлы
                                    </div>
                                    <div class="modal_register_zakaz_row_item_input">
                                        <!-- Dropzone.js area -->
                                        <div id="orderFilesDropzone" class=" input-main"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal_register_zakaz_content">
                        <div class="modal_register_zakaz_content_title">Детали заказа</div>
                        <div class="modal_register_zakaz_content_rows">
                            <div class="modal_register_zakaz_row">
                                <div class="modal_register_zakaz_row_item">
                                    <div class="modal_register_zakaz_row_item_title">
                                        <label for="cityFilterInputOrder">Город</label>
                                    </div>
                                    <div class="modal_register_zakaz_row_item_input" style="position:relative;">
                                        <input type="hidden" class="input-main" name="city_id" id="selected-city-order" style="display:none;">
                                        <input type="text" class="input-main" name="city" id="cityFilterInputOrder" placeholder="Город" autocomplete="address-level2">
                                        <ul class="list_citys_profile" id="cityListOrder" style="display: none;"></ul>
                                    </div>
                                </div>
                            </div>
                            <div class="modal_register_zakaz_row">
                                <div class="modal_register_zakaz_row_item">
                                    <div class="modal_register_zakaz_row_item_title">
                                        <label for="order-address">Расположение</label>
                                    </div>
                                    <div class="modal_register_zakaz_row_item_input">
                                        <input class="input-main" type="text" name="address" id="order-address" placeholder="Укажите адрес или метро" autocomplete="street-address">
                                    </div>
                                </div>
                            </div>
                            <div class="modal_register_zakaz_row">
                                <div class="modal_register_zakaz_row_item">
                                    <div class="modal_register_zakaz_row_item_title">
                                        <label for="order-date-start">Срок выполнения</label>
                                    </div>
                                    <div class="modal_register_zakaz_row_item_input">
                                        <input class="input-main" type="date" name="date_start" id="order-date-start" placeholder="">
                                        <input class="input-main" type="date" name="date_end" id="order-date-end" placeholder="" aria-label="Дата окончания">
                                    </div>
                                </div>
                            </div>
                            <div class="modal_register_zakaz_row">
                                <div class="modal_register_zakaz_row_item">
                                    <div class="modal_register_zakaz_row_item_title">
                                        <label for="order-budget">Бюджет, р.</label>
                                    </div>
                                    <div class="modal_register_zakaz_row_item_input">
                                        <input class="input-main" type="number" name="budget" id="order-budget" placeholder="0">
                                    </div>
                                </div>
                            </div>
                            <div class="modal_register_zakaz_row">
                                <div class="modal_register_zakaz_row_item">
                                    <div class="modal_register_zakaz_row_item_title">
                                        Материалы
                                    </div>
                                    <div class="modal_register_zakaz_row_item_input">
                                        <label class="checkbox__item">
                                            <input type="checkbox" name="materials" id="order-materials" value="1" class="checkbox__input">
                                            <span class="fake"></span>
                                            <span class="checkbox__name">Требуются материалы</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="modal_register_zakaz_row">
                                <div class="modal_register_zakaz_row_item">
                                    <div class="modal_register_zakaz_row_item_title">
                                        Субподряд
                                    </div>
                                    <div class="modal_register_zakaz_row_item_input">
                                        <label class="checkbox__item">
                                            <input type="checkbox" name="is_subcontract" id="order-subcontract" value="1" class="checkbox__input">
                                            <span class="fake"></span>
                                            <span class="checkbox__name">Заказ на субподряд</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @guest
                    <div class="modal_register_zakaz_content">
                        <div class="modal_register_zakaz_content_title">Заказчик</div>
                        <div class="modal_register_zakaz_content_rows">

                            <div class="modal_register_zakaz_row">
                                <div class="modal_register_zakaz_row_item">
                                    <div class="modal_register_zakaz_row_item_title">
                                        <label for="order-mail">Электронная почта</label>
                                    </div>
                                    <div class="modal_register_zakaz_row_item_input">
                                        <input class="input-main" type="text" name="mail" id="order-mail" placeholder="E-mail" autocomplete="email">
                                    </div>
                                </div>
                            </div>
                            <div class="modal_register_zakaz_row">
                                <div class="modal_register_zakaz_row_item">
                                    <div class="modal_register_zakaz_row_item_title">
                                        <label for="orderPhone">Телефон</label>
                                    </div>
                                    <div class="modal_register_zakaz_row_item_input">
                                        <input class="input-main" type="text" id="orderPhone" name="phone" placeholder="+7 (XXX) XXX-XX-XX" autocomplete="off">
                                    </div>
                                </div>
                            </div>
                            <div class="modal_register_zakaz_row">
                                <div class="modal_register_zakaz_row_item">
                                    <div class="modal_register_zakaz_row_item_title">
                                        <label for="order-name">Имя</label>
                                    </div>
                                    <div class="modal_register_zakaz_row_item_input">
                                        <input class="input-main" type="text" name="name" id="order-name" placeholder="" autocomplete="name">
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    @endguest
                    @auth
                    @if(empty(Auth::user()->phone))
                    <div class="modal_register_zakaz_content">
                        <div class="modal_register_zakaz_content_title">Контакты</div>
                        <div class="modal_register_zakaz_content_rows">
                            <div class="modal_register_zakaz_row">
                                <div class="modal_register_zakaz_row_item">
                                    <div class="modal_register_zakaz_row_item_title">
                                        <label for="orderPhoneAuth">Телефон</label>
                                    </div>
                                    <div class="modal_register_zakaz_row_item_input">
                                        <input class="input-main" type="text" id="orderPhoneAuth" name="phone" placeholder="+7 (XXX) XXX-XX-XX" autocomplete="off">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                    @endauth
                    <button class="btn-main submit_create_zakaz" style="margin: 13px auto 0;" type="button">Разместить заказ</button>
                    <div class="login__bottom-info" style="text-align: center">
                        <p>Нажимая на кнопку, пользователь подтверждает согласие с<br><a href="https://dev2.xn--e1aoddhq.xn--p1ai/privacy-policy" target="_blank" class="colorLink">политикой обработки персональных данных</a> и <a href="https://dev2.xn--e1aoddhq.xn--p1ai/user-agreement" target="_blank" class="colorLink">пользовательским соглашением</a>.</p>
                    </div>
                </form>
            </div>
        </div>
    </div
    {{-- <script>Dropzone.autoDiscover = false;</script> --}}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css">
    <script src="/js/dropzone.min.js"></script>
    <link rel="stylesheet" href="/css/dropzone.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>
    <script>
        // Настройка Fancybox для просмотра изображений и PDF с кнопкой скачивания
        document.addEventListener('DOMContentLoaded', function() {
            function initFancybox() {
                if (typeof Fancybox === 'undefined') {
                    setTimeout(initFancybox, 50);
                    return;
                }

                // Функция для создания кнопки скачивания
                function createDownloadButton(toolbar, downloadUrl, filename) {
                    // Удаляем старую кнопку, если есть
                    const oldBtn = toolbar.querySelector('.fancybox-download-custom-btn');
                    if (oldBtn) {
                        oldBtn.remove();
                    }

                    // Создаем кнопку скачивания
                    const downloadBtn = document.createElement('button');
                    downloadBtn.className = 'fancybox__button fancybox-download-custom-btn';
                    downloadBtn.setAttribute('title', 'Скачать');
                    downloadBtn.setAttribute('aria-label', 'Скачать');
                    downloadBtn.setAttribute('type', 'button');
                    downloadBtn.style.cssText = 'display: flex !important; align-items: center; justify-content: center; padding: 8px; cursor: pointer; border: none; background: transparent; color: #fff; opacity: 0.8; transition: opacity 0.2s;';
                    downloadBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" style="width: 24px; height: 24px;"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>';

                    // Добавляем обработчик клика
                    downloadBtn.addEventListener('click', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        const link = document.createElement('a');
                        link.href = downloadUrl;
                        link.download = filename;
                        link.style.display = 'none';
                        document.body.appendChild(link);
                        link.click();
                        setTimeout(() => {
                            document.body.removeChild(link);
                        }, 100);
                    });

                    // Добавляем hover эффект
                    downloadBtn.addEventListener('mouseenter', function() {
                        this.style.opacity = '1';
                    });
                    downloadBtn.addEventListener('mouseleave', function() {
                        this.style.opacity = '0.8';
                    });

                    // Ищем место для вставки кнопки
                    const closeBtn = toolbar.querySelector('.fancybox__button--close');
                    const toolbarRight = toolbar.querySelector('.fancybox__toolbar__right');

                    if (toolbarRight) {
                        if (closeBtn && closeBtn.parentNode === toolbarRight) {
                            toolbarRight.insertBefore(downloadBtn, closeBtn);
                        } else {
                            toolbarRight.appendChild(downloadBtn);
                        }
                    } else if (closeBtn && closeBtn.parentNode) {
                        closeBtn.parentNode.insertBefore(downloadBtn, closeBtn);
                    } else {
                        toolbar.appendChild(downloadBtn);
                    }
                }

                // Инициализируем Fancybox
                Fancybox.bind('[data-fancybox]', {
                    on: {
                        reveal: (fancybox, slide) => {
                            if (slide.$trigger) {
                                const downloadUrl = slide.$trigger.dataset.download || slide.src;
                                const filename = slide.$trigger.dataset.filename || downloadUrl.split('/').pop();

                                // Пытаемся найти toolbar с несколькими попытками
                                let attempts = 0;
                                const maxAttempts = 10;

                                function tryAddButton() {
                                    const toolbar = document.querySelector('.fancybox__toolbar');
                                    if (toolbar) {
                                        createDownloadButton(toolbar, downloadUrl, filename);
                                    } else if (attempts < maxAttempts) {
                                        attempts++;
                                        setTimeout(tryAddButton, 50);
                                    }
                                }

                                setTimeout(tryAddButton, 100);
                            }
                        },
                        destroy: () => {
                            const oldBtn = document.querySelector('.fancybox-download-custom-btn');
                            if (oldBtn) {
                                oldBtn.remove();
                            }
                        }
                    }
                });
            }
            initFancybox();
        });
    </script>
    <style>
        /* Скрываем прогресс-бар загрузки (белый эллипс) */
        #orderFilesDropzone .dz-progress,
        #orderFilesDropzone .dz-preview .dz-progress {
            display: none !important;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/inputmask@5.0.9/dist/inputmask.min.js"></script>
    <script>
        // Перемещаем Dropzone.autoDiscover = false; сюда, чтобы он выполнился до инициализации Dropzone


        if (document.querySelector('.drop-select1')) {

            document.querySelector('.drop-select1').addEventListener('click', function () {
                var dropdownList1 = document.querySelector('.drop-list1');
                dropdownList1.style.display = dropdownList1.style.display === 'block' ? 'none' : 'block';
                this.classList.toggle('active');

            });
        }
        if (document.querySelector('.drop-select2')) {

            document.querySelector('.drop-select2').addEventListener('click', function () {
                var dropdownList2 = document.querySelector('.drop-list2');
                dropdownList2.style.display = dropdownList2.style.display === 'block' ? 'none' : 'block';
                this.classList.toggle('active');

            });
        }

        if (document.querySelector('.drop-list1 li')) {

            document.querySelectorAll('.drop-list1 li').forEach(function (item) {
                item.addEventListener('click', function () {
                    var text = this.textContent;
                    document.querySelector('.drop-select1 span').textContent = text;
                    document.querySelector('.drop-list1').style.display = 'none';
                    document.querySelector('.drop-select1').classList.remove('active');
                });
            });
        }
        if (document.querySelector('.drop-list2 li')) {

            document.querySelectorAll('.drop-list2 li').forEach(function (item) {
                item.addEventListener('click', function () {
                    var text = this.textContent;
                    document.querySelector('.drop-select2 span').textContent = text;
                    document.querySelector('.drop-list2').style.display = 'none';
                    document.querySelector('.drop-select2').classList.remove('active');
                });
            });
        }
    </script>

    <script>
        let myDropzone = null; // Объявляем myDropzone в более широкой области видимости

        document.addEventListener('DOMContentLoaded', function () {
            if (document.querySelector('.acide__btn')) {

                const filterButton = document.querySelector('.acide__btn');
                const asideFilter = document.querySelector('.catalog__inner-aside');

                filterButton.addEventListener('click', function () {
                    asideFilter.classList.toggle('show-mobile');
                });
            }
        });


    </script>

        <script>
        function showChildren(radio) {
            // Скрываем все .subcategory
            document.querySelectorAll('.subcategory').forEach(function (div) {
                div.style.display = 'none';
            });
            // Открываем все родительские .subcategory до выбранного radio
            let parent = radio.parentElement;
            while (parent) {
                if (parent.classList && parent.classList.contains('subcategory')) {
                    parent.style.display = 'block';
                }
                parent = parent.parentElement;
            }
            // Открываем вложенные .subcategory только у выбранного radio (если есть)
            let next = radio.closest('label').nextElementSibling;
            if (next && next.classList.contains('subcategory')) {
                next.style.display = 'block';
            }
        }

        jQuery(document).ready(function ($) {
            // Dropzone.js Configuration
            let timerRegister = null;

            $('.orders__item').on('click', function () {
                let row = !($(this).hasClass('active'));
                $('.orders__item').removeClass('active');
                if (row) {
                    $(this).addClass('active');
                }
            });

            $('.submit_create_zakaz').on('click',function(e){
                e.preventDefault();

                let form = $('#createOrderForm')[0]; // Получаем форму
                let formData = new FormData(form); // Создаем объект FormData из формы

                // Добавляем все файлы из Dropzone в FormData
                if (myDropzone && myDropzone.files) {
                    myDropzone.files.forEach(function(file) {
                        formData.append('files[]', file);
                    });
                }

                // Для чекбоксов, которые не отмечены, FormData не включает их.
                // Если они отсутствуют в запросе, Laravel по умолчанию считает их null, что для boolean полей не всегда хорошо.
                // Явно устанавливаем 0 для неотмеченных чекбоксов, чтобы валидация boolean работала корректно.
                if (!$('[name="materials"]').is(':checked')) {
                    formData.append('materials', 0);
                }
                if (!$('[name="is_subcontract"]').is(':checked')) {
                    formData.append('is_subcontract', 0);
                }

                // Добавляем CSRF-токен
                formData.append('_token', $('meta[name="csrf-token"]').attr('content'));

                $.ajax({
                    url: "{{ route('showOrderCreate') }}",
                    method: 'POST',
                    data: formData, // Отправляем FormData
                    processData: false, // Обязательно для FormData с файлами
                    contentType: false, // Обязательно для FormData с файлами
                    success: function(data){
                        let res = data; // data уже объект, если ответ JSON
                        if (typeof data === 'string') {
                            try {
                                res = JSON.parse(data);
                            } catch (e) {
                                console.error("Failed to parse JSON response:", e);
                                alert("Произошла неизвестная ошибка при обработке ответа сервера.");
                                return;
                            }
                        }

                        if (res.success) {
                            alert(res.message);
                            $('.modal__wrapper3').removeClass('active'); // Закрыть модальное окно
                            // Можно обновить страницу или список заказов
                            window.location.reload();
                        } else {
                            alert('Ошибка при создании заказа: ' + (res.message || 'Неизвестная ошибка'));
                        }
                    },
                    error: function(xhr) {
                        let errorMessage = 'Произошла ошибка.\n';
                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            errorMessage = 'Ошибка валидации:\n';
                            for (let key in xhr.responseJSON.errors) {
                                errorMessage += xhr.responseJSON.errors[key].join('\n') + '\n';
                            }
                        } else if (xhr.responseText) {
                            errorMessage += xhr.responseText;
                        } else {
                            errorMessage += 'Неизвестная ошибка.';
                        }
                        alert(errorMessage);
                    }
                });

            });


            $('.modal_register_zakaz_row_item_input [name="city"]').on('input', function () {
                let cityVal = $(this).val();
                let input = $(this)
                let container = $(input).siblings('.list_citys_profile');
                if(cityVal.length > 0){
                    clearTimeout(timerRegister);
                    timerRegister = setTimeout(() => {
                        $.ajax({
                        url: "{{ route('loadMoreCities') }}",
                        method: 'post',
                        dataType: 'html',
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content'),
                            value: cityVal,
                        },
                        success: function(data){
                            let res = JSON.parse(data);
                            console.debug(res);
                            $(container).css('display','flex').html('');
                            for (let i = 0; i < res.cities.length; i++) {
                                let city = res.cities[i];
                                $(container).append(`
                                    <li data-id="${city.id}">${city.title}</li>
                                `)
                            }
                            $(container).find('li').on('click',function(){
                                $(input).val($(this).text());
                                $(input).siblings('[name="city_id"]').val($(this).attr('data-id'));
                                $(container).css('display','none').html('');
                            });
                        }
                    });
                        // myFunction($(this));
                        clearTimeout(timerRegister);
                    }, 1000);
                    // if(timeO == null){
                    // }
                } else {
                    $(container).css('display','none').html('');
                    clearTimeout(timerRegister);
                }
                });


                let myDropzone = null;

                $('.create_zakaz, .modal__close3').on('click', function () {
                    $('.modal__wrapper3').toggleClass('active');
                    var dzElem = document.getElementById('orderFilesDropzone');
                    if ($('.modal__wrapper3').hasClass('active')) {
                        if (myDropzone === null) {
                            // Удаляем старые экземпляры Dropzone
                            if (Dropzone.instances && Dropzone.instances.length > 0) {
                                Dropzone.instances.forEach(function (dz) { dz.destroy(); });
                            }
                            // Удаляем свойство Dropzone у DOM-элемента
                            if (dzElem && dzElem.Dropzone) {
                                delete dzElem.Dropzone;
                            }
                            // Добавляем класс dropzone только при инициализации
                            dzElem.classList.add('dropzone');
                            myDropzone = new Dropzone("#orderFilesDropzone", {
                                url: "/fake-upload",
                                autoProcessQueue: false,
                                addRemoveLinks: true,
                                dictDefaultMessage: "Перетащите файлы сюда или нажмите, чтобы выбрать<br>(JPG, PNG, PDF, до 5МБ)",
                                dictRemoveFile: "Удалить файл",
                                acceptedFiles: "image/jpeg,image/png,application/pdf",
                                maxFilesize: 5,
                                uploadMultiple: true,
                                parallelUploads: 10,
                                paramName: "files",
                                headers: {
                                    'X-CSRF-TOKEN': document.querySelector('meta[name=\"csrf-token\"]').content
                                },
                                previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-image\"><img data-dz-thumbnail /></div>\n  <div class=\"dz-details\">\n    <div class=\"dz-size\"><span data-dz-size></span></div>\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n  </div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n  <div class=\"dz-success-mark\">\n    <svg width=\"54px\" height=\"54px\" viewBox=\"0 0 54 54\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns:sketch=\"http://www.bohemiancoding.com/sketch/ns\">\n      <title>Check</title>\n      <defs></defs>\n      <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" sketch:type=\"MSPage\">\n        <path d=\"M23.5,31.8431458 L17.5852419,25.9283877 C16.0248253,24.3679711 13.4910294,24.366835 11.9289322,25.9289322 C10.3700136,27.4878508 10.3665912,30.0234455 11.9283877,31.5852419 L20.4147581,40.0716123 C20.5133999,40.1702541 20.6159315,40.2626649 20.7218615,40.3488435 C22.2835669,41.8725651 24.794234,41.8626202 26.3461564,40.3106978 L43.3106978,23.3461564 C44.8771021,21.7797521 44.8758057,19.2483887 43.3137085,17.6862915 C41.7547899,16.1273729 39.2176035,16.1255422 37.6538436,17.6893022 L23.5,31.8431458 Z M27,53 C41.3594035,53 53,41.3594035 53,27 C53,12.6405965 41.3594035,1 27,1 C12.6405965,1 1,12.6405965 1,27 C1,41.3594035 12.6405965,53 27,53 Z\" id=\"Oval-2\" stroke-opacity=\"0.198794158\" stroke=\"#747474\" fill-opacity=\"0.816519475\" fill=\"#FFFFFF\" sketch:type=\"MSShapeGroup\"></path>\n      </g>\n    </svg>\n  </div>\n  <div class=\"dz-error-mark\">\n    <svg width=\"54px\" height=\"54px\" viewBox=\"0 0 54 54\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns:sketch=\"http://www.bohemiancoding.com/sketch/ns\">\n      <title>Error</title>\n      <defs></defs>\n      <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" sketch:type=\"MSPage\">\n        <g id=\"Check-+-Oval-2\" sketch:type=\"MSLayerGroup\" stroke=\"#747474\" stroke-opacity=\"0.198794158\" fill=\"#FFFFFF\" fill-opacity=\"0.816519475\">\n          <path d=\"M32.6568542,29 L38.3106978,23.3461564 C39.8771021,21.7797521 39.8758057,19.2483887 38.3137085,17.6862915 C36.7547899,16.1273729 34.2176035,16.1255422 32.6538436,17.6893022 L27,23.3431458 L21.3461564,17.6893022 C19.7823965,16.1255422 17.2452101,16.1273729 15.6862915,17.6862915 C14.1241943,19.2483887 14.1228979,21.7797521 15.6893022,23.3461564 L21.3431458,29 L15.6893022,34.6538436 C14.1228979,36.2202479 14.1241943,38.7516113 15.6862915,40.3137085 C17.2452101,41.8726271 19.7823965,41.8744578 21.3461564,40.3106978 L27,34.6568542 L32.6538436,40.3106978 C34.2176035,41.8744578 36.7547899,41.8726271 38.3137085,40.3137085 C39.8758057,38.7516113 39.8771021,36.2202479 38.3106978,34.6538436 L32.6568542,29 Z M27,53 C41.3594035,53 53,41.3594035 53,27 C53,12.6405965 41.3594035,1 27,1 C12.6405965,1 1,12.6405965 1,27 C1,41.3594035 12.6405965,53 27,53 Z\" id=\"Oval-2\" sketch:type=\"MSShapeGroup\"></path>\n        </g>\n      </g>\n    </svg>\n  </div>\n</div>"
                                // previewsContainer не указываем, чтобы использовать дефолтный (сам orderFilesDropzone)
                            });
                        }
                    } else {
                        if (myDropzone !== null) {
                            myDropzone.destroy();
                            if (dzElem && dzElem.Dropzone) {
                                delete dzElem.Dropzone;
                            }
                            dzElem.classList.remove('dropzone');
                            myDropzone = null;
                        }
                    }
                });

        });

    </script>

    <script>
        window.categoryTree = @json($categories);
    </script>

    <script>
                document.addEventListener('DOMContentLoaded', function () {
            const filterForm = document.querySelector('.aside-filter__form');
            filterForm.querySelectorAll('input[name="category"], input[name="subcategory"]').forEach(radio => {
                radio.addEventListener('change', function () {
                    if (this.name === 'subcategory') {
                        // Снять выделение со всех категорий
                        filterForm.querySelectorAll('input[name="category"]').forEach(catRadio => catRadio.checked = false);
                        // Выделить родителя по data-parent
                        const parentSlug = this.getAttribute('data-parent');
                        if (parentSlug) {
                            const parentRadio = filterForm.querySelector('input[name="category"][value="' + parentSlug + '"]');
                            if (parentRadio) parentRadio.checked = true;
                        }
                    }
                    if (this.name === 'category') {
                        // Сбросить все подкатегории при выборе новой категории
                        filterForm.querySelectorAll('input[name="subcategory"]').forEach(subRadio => subRadio.checked = false);
                    }
                    const category = filterForm.querySelector('input[name="category"]:checked');
                    const subcategory = filterForm.querySelector('input[name="subcategory"]:checked');
                    let url = '/orders';
                    if (category) {
                        url += '/' + encodeURIComponent(category.value);
                    }
                    if (subcategory) {
                        url += '/' + encodeURIComponent(subcategory.value);
                    }
                    const params = [];
                    new FormData(filterForm).forEach((value, key) => {
                        if (key !== 'category' && key !== 'subcategory' && value) params.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
                    });
                    if (params.length) url += '?' + params.join('&');
                    window.location.href = url;
                });
            });
            // Сабмит по кнопке 'Применить фильтр'
            filterForm.addEventListener('submit', function (e) {
                e.preventDefault();
                const category = filterForm.querySelector('input[name="category"]:checked');
                const subcategory = filterForm.querySelector('input[name="subcategory"]:checked');
                let url = '/orders';
                if (category) {
                    url += '/' + encodeURIComponent(category.value);
                }
                if (subcategory) {
                    url += '/' + encodeURIComponent(subcategory.value);
                }
                const params = [];
                new FormData(filterForm).forEach((value, key) => {
                    if (key !== 'category' && key !== 'subcategory' && value) params.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
                });
                if (params.length) url += '?' + params.join('&');
                window.location.href = url;
            });
        });
    </script>

    <script>
        // Кастомный дропдаун сортировки товаров
        document.addEventListener('DOMContentLoaded', function () {
            var dropSelect = document.getElementById('sortDropSelect');
            var dropList = document.getElementById('sortDropList');
            var sortInput = document.getElementById('sortInput');
            var sortText = document.getElementById('sortDropText');
            if (dropSelect && dropList && sortInput && sortText) {
                // dropSelect.addEventListener('click', function () {
                //     dropList.style.display = dropList.style.display === 'block' ? 'none' : 'block';
                //     dropSelect.classList.toggle('active');
                // });
                dropList.querySelectorAll('li').forEach(function (item) {
                    item.addEventListener('click', function () {
                        sortInput.value = this.getAttribute('data-value');
                        sortText.textContent = this.textContent;
                        dropList.style.display = 'none';
                        dropSelect.classList.remove('active');
                        document.getElementById('sortForm').submit();
                    });
                });
                // Закрытие при клике вне
                document.addEventListener('click', function (e) {
                    if (!dropSelect.contains(e.target) && !dropList.contains(e.target)) {
                        dropList.style.display = 'none';
                        dropSelect.classList.remove('active');
                    }
                });
            }
        });
    </script>

    <script>
        let timerOrders = null;

        function searchСityOrders(val) {
            if (val.length > 0) {
                clearTimeout(timerOrders);
                timerOrders = setTimeout(() => {
                    fetch("{{ route('loadMoreCities') }}", {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content
                        },
                        body: JSON.stringify({value: val})
                    })
                        .then(response => response.json())
                        .then(data => {
                            let ul = document.querySelector('.drop-list1');
                            let list = ul.getElementsByTagName('li');
                            Array.from(list).forEach(listItem => {
                                if (!listItem.classList.contains('search')) listItem.remove();
                            });
                            for (let i = 0; i < data.cities.length; i++) {
                                let city = data.cities[i];
                                let li = document.createElement("li");
                                li.textContent = city.title;
                                li.className = 'city-list__item';
                                li.setAttribute("data-slug", city.slug);
                                li.addEventListener('click', function () {
                                    document.querySelector('.drop-select1 span').textContent = city.title;
                                    document.querySelector('.drop-list1').style.display = 'none';
                                    document.querySelector('.drop-select1').classList.remove('active');
                                    document.getElementById('selected-city').value = city.slug;

                                    // --- Новый переход ---
                                    const filterForm = document.getElementById('orders-filter-form');
                                    const category = filterForm.querySelector('input[name="category"]:checked');
                                    const subcategory = filterForm.querySelector('input[name="subcategory"]:checked');
                                    let url = '/orders';
                                    if (category) {
                                        url += '/' + encodeURIComponent(category.value);
                                    }
                                    if (subcategory) {
                                        url += '/' + encodeURIComponent(subcategory.value);
                                    }
                                    // Собираем остальные параметры формы (кроме category/subcategory)
                                    const params = [];
                                    new FormData(filterForm).forEach((value, key) => {
                                        if (key !== 'category' && key !== 'subcategory' && value) params.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
                                    });
                                    if (params.length) url += '?' + params.join('&');
                                    window.location.href = url;
                                });
                                ul.append(li);
                            }
                        })
                        .catch(error => console.error('Error:', error));
                    clearTimeout(timerOrders);
                }, 500);
            } else {
                clearTimeout(timerOrders);
            }
        }

    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.orders__item__document-link').forEach(function(link) {
                // Для ссылок с Fancybox не добавляем обработчик, чтобы не мешать работе Fancybox
                if (!link.hasAttribute('data-fancybox')) {
                    link.addEventListener('click', function(e) {
                        e.stopPropagation(); // Не даём аккордеону схлопываться только для обычных ссылок
                    });
                }
            });

            // JavaScript for the phone modal
            const phoneModal = document.getElementById('phoneModal');
            const closePhoneModalBtn = document.getElementById('closePhoneModalBtn');
            const modalPhoneNumber = document.getElementById('modalPhoneNumber');

            document.querySelectorAll('.btn-show-phone33').forEach(button => {
                button.addEventListener('click', function() {
                    const phoneNumber = this.getAttribute('data-phone');
                    modalPhoneNumber.textContent = phoneNumber;
                    modalPhoneNumber.href = 'tel:' + phoneNumber;
                    phoneModal.style.display = 'flex';
                });
            });

            if (closePhoneModalBtn) {
                closePhoneModalBtn.addEventListener('click', function() {
                    phoneModal.style.display = 'none';
                });
            }

            if (phoneModal) {
                phoneModal.addEventListener('click', function(e) {
                    if (e.target === phoneModal) {
                        phoneModal.style.display = 'none';
                    }
                });
            }
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const categorySelect = document.getElementById('order_category_id');
            const subcategoryRow = document.getElementById('subcategory_row');
            const subcategorySelect = document.getElementById('order_subcategory_id');
            categorySelect.addEventListener('change', function() {
                const selectedOption = categorySelect.options[categorySelect.selectedIndex];
                let subcategories = [];
                try {
                    subcategories = JSON.parse(selectedOption.getAttribute('data-subcategories'));
                } catch (e) {}
                subcategorySelect.innerHTML = '';
                if (subcategories && subcategories.length > 0) {
                    subcategories.forEach(function(subcat) {
                        subcategorySelect.innerHTML += `<option value="${subcat.id}">${subcat.title}</option>`;
                    });
                    subcategoryRow.style.display = '';
                } else {
                    subcategoryRow.style.display = 'none';
                }
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function(){
            const phoneInputOrder = document.getElementById('orderPhone');
            const phoneInputOrderAuth = document.getElementById('orderPhoneAuth');
            if(typeof Inputmask !== 'undefined'){
                try {
                    const maskOptions = {
                        mask: '+7 (999) 999-99-99',
                        placeholder: '_',
                        showMaskOnHover: false,
                        clearIncomplete: true,
                        showMaskOnFocus: true,
                        removeMaskOnSubmit: false
                    };
                    const im = new Inputmask(maskOptions);
                    if(phoneInputOrder) im.mask(phoneInputOrder);
                    if(phoneInputOrderAuth) im.mask(phoneInputOrderAuth);
                } catch (error) {
                    console.log('InputMask initialization failed:', error);
                    // Fallback: simple manual formatting
                    phoneInputOrder.addEventListener('input', function(e) {
                        let value = e.target.value.replace(/\D/g, '');
                        if (value.length > 0) {
                            if (value.length <= 1) {
                                value = '+7';
                            } else if (value.length <= 4) {
                                value = '+7 (' + value.slice(1);
                            } else if (value.length <= 7) {
                                value = '+7 (' + value.slice(1, 4) + ') ' + value.slice(4);
                            } else if (value.length <= 9) {
                                value = '+7 (' + value.slice(1, 4) + ') ' + value.slice(4, 7) + '-' + value.slice(7);
                            } else {
                                value = '+7 (' + value.slice(1, 4) + ') ' + value.slice(4, 7) + '-' + value.slice(7, 9) + '-' + value.slice(9, 11);
                            }
                        }
                        e.target.value = value;
                    });
                }
            }
        });
    </script>
@endsection