@extends('app')
@php
    $seoKey = 'products';
    $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
                    </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>
        </section>
        <section class="catalog">
            <div class="container">
                <div class="catalog__inner">
                    <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 for="min_budget" style="font-size: 14px">Мин. бюджет
                                                        <input type="text" name="min_budget"
                                                               class="input-main settings__input"
                                                               placeholder="Минимальный бюджет"
                                                               value="{{ request('min_budget') }}">
                                                    </label>
                                                    <label for="max_budget" style="font-size: 14px">Макс. бюджет
                                                        <input type="text" name="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"
                              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
                            <label for="sort" style="font-weight: bold; margin-right: 10px;">Сортировать:</label>
                            <div class="drop" style="min-width: 267px;">
                                <div class="drop-select drop-select2" tabindex="0" id="sortDropSelect">
                                <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" style="cursor: pointer;">Создать заказ</div>
                        </form>
                        <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">
                                        <p class="orders__item__title">{{ $order->title }}</p>
                                        <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>
                                            .orders__item__documents {
                                                margin-top: 10px;
                                            }

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

                                            .orders__item__document-link {
                                                display: flex;
                                                align-items: center;
                                                gap: 8px;
                                                padding: 7px 12px;
                                                border: 1px solid #e0e0e0;
                                                border-radius: 6px;
                                                margin-bottom: 7px;
                                                text-decoration: none;
                                                color: #222;
                                                background: #fafbfc;
                                                transition: background 0.15s;
                                            }

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

                                            .orders__item__document-icon img {
                                                display: block;
                                            }

                                            .orders__item__document-name {
                                                font-size: 15px;
                                                white-space: nowrap;
                                                overflow: hidden;
                                                text-overflow: ellipsis;
                                                max-width: 220px;
                                            }
                                            /* 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: center;
                                            }

                                            .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;
                                            }
                                        </style>
                                        <p class="orders__item__description">{{ $order->description }}</p>
                                        @if($order->files && $order->files->count())
                                            <div class="orders__item__documents">
                                                <div class="orders__item__documents-title">Вложенные документы</div>
                                                @foreach($order->files as $file)
                                                    <a class="orders__item__document-link"
                                                       href="{{ asset('storage/'.$file->file) }}" target="_blank"
                                                       download>
                                            <span class="orders__item__document-icon">
                                                @if(in_array(strtolower(pathinfo($file->file, PATHINFO_EXTENSION)), ['jpg','jpeg','png','gif']))
                                                    <img src="{{ asset('storage/'.$file->file) }}" 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>
                                                        <span
                                                            class="orders__item__document-name">{{ basename($file->file) }}</span>
                                                    </a>
                                                @endforeach
                                            </div>
                                        @endif
                                    </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>
                                        @auth
                                        <div class="orders__item-contact">
                                            <button type="button" class="btn-show-phone" data-phone="{{ $order->user->phone }}">Показать телефон</button>
                                        </div>
                                        @endauth
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="pagination">
                            <ul class="pagination__list">
                                <li class="pagination__item pagination__item--prev {{ $orders->onFirstPage() ? 'pagination__item--disabled' : 'pagination__item--prev' }}">
                                    <a href="{{ $orders->previousPageUrl() }}" style="margin-left: 11px">Назад</a></li>
                                @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
                                <li class="pagination__item pagination__item--next {{ $orders->hasMorePages() ? 'pagination__item--next' : 'pagination__item--disabled' }}">
                                    <a href="{{ $orders->nextPageUrl() }}">Далее</a></li>
                            </ul>
                        </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">
                <b id="modalPhoneNumber" style="font-size: 2rem;"></b>
            </div>
            <div class="phone-modal-warning">Не переводите предоплату!</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">
                                        Название заказа
                                    </div>
                                    <div class="modal_register_zakaz_row_item_input">
                                        <input class="input-main" type="text" name="title" placeholder="Кратко опишите заказ"
                                               id="">
                                    </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">
                                        <textarea class="input-main" name="description" id="" 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">
                                        Специализация
                                    </div>
                                    <div class="modal_register_zakaz_row_item_input">
                                        <select name="category_id" id="order_category_id" class="input-main">
                                            <option value="">Выберите категорию</option>
                                            @foreach($categories as $cat)
                                                <option value="{{ $cat->id }}">{{ $cat->title }}</option>
                                            @endforeach
                                        </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="dropzone 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">
                                        Город
                                    </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="Город">
                                        <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">
                                        Расположение
                                    </div>
                                    <div class="modal_register_zakaz_row_item_input">
                                        <input class="input-main" type="text" name="address"
                                               placeholder="Укажите адрес или метро" id="">
                                    </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">
                                        <input class="input-main" type="date" name="date_start" placeholder="" id="">
                                        <input class="input-main" type="date" name="date_end" placeholder="" id="">
                                    </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">
                                        <input class="input-main" type="number" name="budget" placeholder="0" id="">
                                    </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" 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" 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">
                                        Электронная почта
                                    </div>
                                    <div class="modal_register_zakaz_row_item_input">
                                        <input class="input-main" type="text" name="mail" placeholder="E-mail" id="">
                                    </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">
                                        <input class="input-main" type="text" name="phone" placeholder="Номер телефона" id="">
                                    </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">
                                        <input class="input-main" type="text" name="name" placeholder="" id="">
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    @endguest
                    <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 src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>
    <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
    <script>
        // Перемещаем Dropzone.autoDiscover = false; сюда, чтобы он выполнился до инициализации Dropzone
        Dropzone.autoDiscover = false;

        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);
                }
                });


            $('.create_zakaz,.modal__close3').on('click', function () {
                $('.modal__wrapper3').toggleClass('active');

                if($('.modal__wrapper3').hasClass('active')){
                    // Модальное окно открывается: инициализируем Dropzone, если еще не инициализировано
                    if (myDropzone === null) {
                        const dropzoneUrl = "{{ route('showOrderCreate') }}";
                        console.log('Dropzone URL:', dropzoneUrl); // Отладочный вывод

                        if (!dropzoneUrl) {
                            alert('Dropzone URL пуст! Это вызовет ошибку.'); // Отладочный алерт
                        }

                        myDropzone = new Dropzone("#orderFilesDropzone", {
                            url: dropzoneUrl, // Dropzone ожидает URL, но мы будем отправлять данные вручную через AJAX
                            autoProcessQueue: false, // Отключаем автоматическую отправку файлов Dropzone
                            addRemoveLinks: true, // Показываем ссылки для удаления файлов
                            dictDefaultMessage: "Перетащите файлы сюда или нажмите, чтобы выбрать<br>(JPG, PNG, PDF, до 5МБ)",
                            acceptedFiles: "image/jpeg,image/png,application/pdf",
                            previewsContainer: 'input-main',
                            maxFilesize: 5, // Макс. 5MB на файл
                            uploadMultiple: true, // Позволяем загружать несколько файлов
                            parallelUploads: 10, // Максимальное количество файлов для одновременной загрузки
                            paramName: "files", // Имя параметра, под которым будут отправляться файлы (файлы[])
                            headers: {
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                            }
                        });
                    }

                } else {
                    // Модальное окно закрывается: уничтожаем экземпляр Dropzone
                    if (myDropzone !== null) {
                        myDropzone.destroy();
                        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) {
                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-phone').forEach(button => {
                button.addEventListener('click', function() {
                    const phoneNumber = this.getAttribute('data-phone');
                    modalPhoneNumber.textContent = 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>
@endsection