{% extends 'base.html' %}
{% load static %}
{% block title %}Услуги и мастера — Sharp Cut{% endblock %}
{% block content %}
<section class="container py-4">
    <div id="sharpCutCarousel" class="carousel slide hero-carousel shadow-lg mb-4" data-bs-ride="carousel" data-bs-interval="4000">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#sharpCutCarousel" data-bs-slide-to="0" class="active" aria-current="true"></button>
            <button type="button" data-bs-target="#sharpCutCarousel" data-bs-slide-to="1"></button>
            <button type="button" data-bs-target="#sharpCutCarousel" data-bs-slide-to="2"></button>
        </div>
        <div class="carousel-inner rounded-5 overflow-hidden">
            <div class="carousel-item active">
                <img src="{% static 'img/Рисунок1.jpg' %}" class="d-block w-100 carousel-img" alt="Стрижка">
                <div class="carousel-overlay"></div>
                <div class="carousel-caption text-start">
                    <span class="badge text-bg-light mb-2">Sharp Cut</span>
                    <h1 class="display-5 fw-bold">Онлайн-запись в барбершоп</h1>
                    <p class="lead">Выберите услугу, мастера и удобное время визита.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="{% static 'img/Рисунок2.jpg' %}" class="d-block w-100 carousel-img" alt="Мастер">
                <div class="carousel-overlay"></div>
                <div class="carousel-caption text-start">
                    <span class="badge text-bg-light mb-2">Мастера</span>
                    <h2 class="display-6 fw-bold">Опытные специалисты</h2>
                    <p class="lead">На странице услуг можно посмотреть мастеров и их специализацию.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="{% static 'img/Рисунок3.jpg' %}" class="d-block w-100 carousel-img" alt="Запись">
                <div class="carousel-overlay"></div>
                <div class="carousel-caption text-start">
                    <span class="badge text-bg-light mb-2">Личный кабинет</span>
                    <h2 class="display-6 fw-bold">Контроль статуса записи</h2>
                    <p class="lead">После записи клиент видит статус визита в личном кабинете.</p>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#sharpCutCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Предыдущий</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#sharpCutCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Следующий</span>
        </button>
    </div>
    <div class="row text-center g-3 my-4">
        <div class="col-6 col-md-3 fade-up">
            <div class="stat-box p-3 bg-white rounded-4 shadow-sm">
                <div class="display-6 fw-bold">{{ clients_count|default:"5000" }}+</div>
                <div class="text-muted">Довольных клиентов</div>
            </div>
        </div>
        <div class="col-6 col-md-3 fade-up">
            <div class="stat-box p-3 bg-white rounded-4 shadow-sm">
                <div class="display-6 fw-bold">{{ years_on_market|default:"10" }}+</div>
                <div class="text-muted">Лет на рынке</div>
            </div>
        </div>
        <div class="col-6 col-md-3 fade-up">
            <div class="stat-box p-3 bg-white rounded-4 shadow-sm">
                <div class="display-6 fw-bold">{{ active_masters_count|default:"4" }}</div>
                <div class="text-muted">Профессиональных мастера</div>
            </div>
        </div>
        <div class="col-6 col-md-3 fade-up">
            <div class="stat-box p-3 bg-white rounded-4 shadow-sm">
                <div class="display-6 fw-bold">{{ positive_percent|default:"98" }}%</div>
                <div class="text-muted">Положительных отзывов</div>
            </div>
        </div>
    </div>
    <div class="my-5 fade-up">
        <h3 class="text-center fw-bold mb-4">Почему выбирают нас</h3>
        <div class="row g-3">
            <div class="col-md-3">
                <div class="feature-item p-3 bg-white rounded-4 shadow-sm text-center">
                    <i class="fas fa-user-tie fs-1 text-dark"></i>
                    <h6 class="fw-bold mt-2">Опытные мастера</h6>
                    <p class="small text-muted">Наши барьеры имеют более 5 лет опыта и регулярно повышают квалификацию</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="feature-item p-3 bg-white rounded-4 shadow-sm text-center">
                    <i class="fas fa-flask fs-1 text-dark"></i>
                    <h6 class="fw-bold mt-2">Премиум материалы</h6>
                    <p class="small text-muted">Используем только профессиональную косметику ведущих мировых брендов</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="feature-item p-3 bg-white rounded-4 shadow-sm text-center">
                    <i class="fas fa-calendar-check fs-1 text-dark"></i>
                    <h6 class="fw-bold mt-2">Удобная запись</h6>
                    <p class="small text-muted">Онлайн-бронирование в любое удобное время без звонков и ожидания</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="feature-item p-3 bg-white rounded-4 shadow-sm text-center">
                    <i class="fas fa-coffee fs-1 text-dark"></i>
                    <h6 class="fw-bold mt-2">Комфортная атмосфера</h6>
                    <p class="small text-muted">Современный интерьер, кофе и приятная музыка во время стрижки</p>
                </div>
            </div>
        </div>
    </div>
    <div class="d-flex flex-wrap align-items-center justify-content-between bg-white rounded-3 shadow-sm p-3 p-md-4 my-4 fade-up">
        <div class="filter-group d-flex flex-wrap gap-2">
            <a href="?available=" class="btn btn-outline-dark rounded-pill {% if not availability %}active{% endif %}">Все</a>
            <a href="?available=1" class="btn btn-outline-dark rounded-pill {% if availability == '1' %}active{% endif %}">Доступные</a>
        </div>
        <form method="get" class="d-flex gap-2">
            <label>
                <input class="form-control rounded-pill" type="search" name="q" value="{{ query }}" placeholder="Поиск услуги...">
            </label>
            <button class="btn btn-dark rounded-pill" type="submit">Найти</button>
        </form>
    </div>
    <h2 class="h3 fw-bold mb-3 fade-up">Услуги</h2>
    <div class="row g-4 mb-5">
        {% for service in services %}
            <div class="col-12 col-md-6 col-xl-4 fade-up">
                <article class="card card-sharp border-0 shadow-sm rounded-3 h-100">
                    <div class="card-body p-4 d-flex flex-column">
                        <div class="d-flex justify-content-between gap-2 mb-3">
                            <h3 class="h5 fw-bold mb-0">{{ service.title }}</h3>
                            {% if service.is_available %}
                                <span class="badge text-bg-success rounded-pill align-self-start">Доступна</span>
                            {% else %}
                                <span class="badge text-bg-secondary rounded-pill align-self-start">Недоступна</span>
                            {% endif %}
                        </div>
                        <p class="text-muted flex-grow-1">{{ service.description }}</p>
                        <div class="d-flex justify-content-between align-items-center border-top pt-3">
                            <div>
                                <div class="fw-bold fs-5">{{ service.price }} ₽</div>
                                <div class="text-muted small">{{ service.duration_minutes }} минут</div>
                            </div>
                            {% if service.is_available and user.is_authenticated %}
                                <a class="btn btn-outline-dark rounded-pill" href="{% url 'create_appointment' %}?service={{ service.id }}">Записаться</a>
                            {% elif service.is_available %}
                                <a class="btn btn-outline-dark rounded-pill" href="{% url 'login' %}">Войти</a>
                            {% else %}
                                <button class="btn btn-outline-secondary rounded-pill" disabled>Недоступна</button>
                            {% endif %}
                        </div>
                    </div>
                </article>
            </div>
        {% empty %}
            <div class="col-12"><div class="alert alert-info rounded-4">Услуги не найдены.</div></div>
        {% endfor %}
    </div>
    <h2 class="h3 fw-bold mb-3 fade-up">Мастера</h2>
    <div class="row g-4 mb-5">
        {% for master in masters %}
            <div class="col-12 col-md-6 col-xl-3 fade-up">
                <article class="card card-sharp border-0 shadow-sm rounded-5 h-100">
                    <div class="card-body p-4">
                        <div class="avatar-circle mb-3">{{ master.name|first }}</div>
                        <h3 class="h5 fw-bold mb-1">{{ master.name }}</h3>
                        <p class="text-muted mb-3">{{ master.specialization }}</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="small fw-semibold">Опыт: {{ master.experience_years }} лет</span>
                            {% if master.is_active %}
                                <span class="badge text-bg-success rounded-pill">Активен</span>
                            {% else %}
                                <span class="badge text-bg-secondary rounded-pill">Неактивен</span>
                            {% endif %}
                        </div>
                    </div>
                </article>
            </div>
        {% empty %}
            <div class="col-12"><div class="alert alert-info rounded-4">Мастера не добавлены.</div></div>
        {% endfor %}
    </div>
    <div class="text-center bg-white rounded-5 shadow-sm p-4 p-md-5 fade-up">
        <h3 class="fw-bold">Готовы к новому образу?</h3>
        <p class="text-muted">Запишитесь онлайн за 1 минуту и выберите удобное время</p>
        <a href="{% url 'create_appointment' %}" class="btn btn-dark rounded-pill px-5 py-2">Записаться онлайн</a>
    </div>
</section>
{% endblock %}