@php
    $seoKey = 'my-project';
@endphp
@extends('app')
@section('content')
<main>
    <section class="profile">
        <div class="container">
            {{-- Используем единый компонент шапки профиля --}}
            <x-profile-header :user="$user" />
        </div>
    </section>
    <section class="setup">
        <div class="container">
            <!-- Tabs -->
            <div class="setup__wrapper">
                <div class="set">
                    <div class="setup__header">
                        <div class="setup__header-item active">
                            <div class="setup__header-circle {{ isset($hasAtLeastOneProject) && $hasAtLeastOneProject ? 'setup__header-circle--completed' : '' }}">
                                @if(isset($hasAtLeastOneProject) && $hasAtLeastOneProject)
                                    <svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M1 4.5L4.5 8L11 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                @endif
                            </div>
                            <span class="setup__header-name">Создать проект/Редактировать</span>
                        </div>
                        <div class="setup__header-item" style="">
                            <div class="setup__header-circle {{ isset($hasAtLeastOneReviewRequest) && $hasAtLeastOneReviewRequest ? 'setup__header-circle--completed' : '' }}">
                                @if(isset($hasAtLeastOneReviewRequest) && $hasAtLeastOneReviewRequest)
                                    <svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M1 4.5L4.5 8L11 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                @endif
                            </div>
                            <span class="setup__header-name">Запросить отзывы</span>
                        </div>
                    </div>
                </div>
                <div class="setup__content">
                    <div class="setup__content-item">
                        <p class="setup__content-title">
                            Загрузите фотографии проекта – это один из лучших способов привлечь внимание потенциальных
                            клиентов
                        </p>
                        <p class="setup__content-info">Проект – это фото ваших работ. Фотографии являются одним из
                            ключевых путей, по которым потенциальные заказчики могут найти вас на Ремонт.рф.</p>
                        <button class="btn-main setup__content-btn modal__btn2-noverify">Заполнить фото проекта</button>
                    </div>
                    <div class="setup__content-item">
                        <p class="setup__content-title">
                            Попросите бывших клиентов и коллег оставить отзывы о вашей работе
                        </p>
                        <p class="setup__content-info">Профессионалы с минимум тремя отзывами в 15 раз чаще получают
                            сообщения и запросы на проект.</p>
                        <button class="btn-main setup__content-btn modal__btn3" id="request-reviews-btn">Запросить отзывы</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="profile__main">
        <div class="container">
            <p class="profile__title">Проектов: {{$projects->count()}}</p>
            <div class="profile__filtres">
                <div class="profile__filtres-left">
                    <form action="{{ route('showMyProjectPage') }}" method="GET"
                          class="journal__search search-main__wrapper"
                          style="display: flex; align-items: center; gap: 10px; position: relative;">
                        <div style="position: relative; flex: 1;">
                            <!-- Кнопка с иконкой лупы -->
                            <button
                                    type="submit"
                                    class="search-icon"
                                    style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); border: none; background: none; cursor: pointer; padding: 0; z-index: 10;"
                            >
                                <img src="{{asset('assets/img/search.svg')}}" alt="Search"
                                     style="width: 16px; height: 16px;">
                            </button>

                            <!-- Поле ввода -->
                            <input
                                    class="journal__search-input search-main"
                                    type="text"
                                    name="search"
                                    placeholder="Искать"
                                    value="{{ request('search') }}"
                                    style="flex: 1; padding-left: 40px; padding-right: 40px;"
                                    id="searchInput"
                            >

                            <!-- Кнопка очистки -->
                            <button
                                    type="button"
                                    class="clear-button"
                                    id="clearSearch"
                                    style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: none; cursor: pointer; font-size: 23px; color: #aaa;"
                            >
                                &times;
                            </button>
                        </div>
                    </form>

                    <div class="reviews__drop drop">
                        <div class="drop-select">
                            <span style="color: black">Выберите опцию</span>
                        </div>
                        <ul class="drop-list">
                            <li>
                                <a href="{{ route('showMyProjectPage', ['sort' => 'newest', 'search' => request('search')]) }}"
                                   style="text-decoration: none;color: black;">
                                    В начале новые
                                </a>
                            </li>
                            <li>
                                <a href="{{ route('showMyProjectPage', ['sort' => 'oldest', 'search' => request('search')]) }}"
                                   style="text-decoration: none;color: black;">
                                    В начале старые
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
            <div class="profile__ideas">
                <div class="profile__ideas-list">
                    @if($projects)
                        @foreach($projects as $project)
                            @php
                                $coverImage = $project->images()->where('is_cover', true)->first();
                                $firstImage = $project->images()->first();
                            @endphp
                            <div class="profile__item">
                                <form class="deleteProjectForm" action="{{ route('deleteProject') }}" method="post" style="position: absolute;right: -5px;top: -4px;">
                                    @csrf
                                    <input type="hidden" name="project_id" value="{{ $project->id }}">
                                    <button class="deleteProjectButton" type="button">
                                        <span class="delete-icon" data-id="{{ $project->id }}">&times;</span>
                                    </button>
                                </form>
                                <div class="profile__item-card">
                                    @if($coverImage)
                                        <img src="{{ project_image_url($coverImage->images) }}" alt="project">
                                    @elseif($firstImage)
                                        <img src="{{ project_image_url($firstImage->images) }}" alt="project">
                                    @else
                                        <img src="{{ asset('default-images/default-image.png') }}" alt="project">
                                    @endif
                                </div>
                                <div class="profile__item-title">
                                    <a href="{{ route('showGalleryPage', ['id' => $project->id]) }}"
                                       style="color: #0a0c0d">
                                        {{ $project->title }}
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="profile__item-info">Нет сохраненных идей</div>
                    @endif
                </div>


            </div>
        </div>
    </div>
</main>


<!-- Modal -->
<div class="modal__wrapper2" style="display: none">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <div class="modal">
        <div class="modal__close2"><img src="{{asset('assets/img/close.svg')}}" alt="cancel" width="20" height="20"></div>
        <div class="modal__body">
            <form action="{{route('createOrUpdateProject')}}" method="POST" class="steps__form"
                  enctype="multipart/form-data">
                @csrf
                <div class="steps">
                    <div class="form__step" style="padding-bottom: 90px;">
                        <div class="form__header">
                            <p class="form__title">Создать новый проект</p>
                            <p class="form__subtitle">Проект – это фото ваших работ. Фотографии являются одним из
                                ключевых путей, по которым потенциальные заказчики могут найти вас на Ремонт.рф.</p>
                        </div>
                        <div class="form__wrapper">
                            <div class="form__main">
                                <div class="form-group controls">
                                    <div class="form-group" style="width: 100%; outline: none;">
                                        <span class="dropdown-label-icon"></span>
                                        <span class="dropdown-icon"></span>
                                        <select class="input-main" id="project-select" name="project"
                                                style="padding: 10px;margin-bottom: 20px;">
                                            <option value="-1">Выберите проект или создайте новый</option>
                                            <option value="NewProject">Создать новый проект</option>
                                            @foreach($projects as $project)
                                                <option value="{{ $project->id }}">{{ $project->title }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <span class="coError" data-bind="project"></span>
                                </div>

                                <div class="form-group" id="new-project-name" style="display: none;">
                                    <label>Название нового проекта*</label>
                                    <input class="input-main form-group__input" type="text" placeholder="Имя проекта"
                                           name="new_project_name" required>
                                </div>
                                <div class="form-group">
                                    <label>Адрес
                                        <input class="input-main form-group__input" type="text" name="address" id="input_modal_adress"
                                               placeholder="Адрес проекта">
                                    </label>
                                </div>
                                <p>Не волнуйтесь, эта информация скрыта от пользователей. Она используется для показа
                                    вас домовладельцам из тех районов, где вы готовы брать заказы</p>
                                <div class="form-group" style="margin-top: 10px">
                                    <label class="control-label text-m" for="stylesFld">Категория</label>
                                    <div class="form-horizontal">
                                        <select id="category" name="category" class="input-main" onchange="showSubcategories()" style="padding: 10px;margin-bottom: 20px;" required>
                                            <option value="" disabled selected>Выберите категорию</option>