{% extends "layouts/mobile_base.twig" %}

{% set active_nav = 'shops' %}
{% set currency = currency_symbol ?? '€' %}
{% set today_date = 'now' | date('Y-m-d') %}

{% block title %}{{ shop.name ?? translations.shop ?? 'Shop' }}{% endblock %}
{% block page_title %}{{ shop.name ?? translations.shop ?? 'Shop' }}{% endblock %}
{% block page_subtitle %}<i class="bi bi-geo-alt me-1"></i>{{ shop.city ?? '' }}{% endblock %}

{% block topbar_actions %}
<div class="d-flex align-items-center gap-1">
    {# ← poprzedni dzień #}
    {% set prev_date = date | date_modify('-1 day') | date('Y-m-d') %}
    <a href="{{ ROOT }}/shops/{{ id_shop }}?date={{ prev_date }}&period={{ period }}"
       class="btn btn-sm btn-light rounded-circle p-0 d-flex align-items-center justify-content-center"
       style="width:32px;height:32px;">
        <i class="bi bi-chevron-left" style="font-size:.8rem;"></i>
    </a>

    <button type="button"
            class="btn btn-sm btn-light rounded-pill px-2"
            style="font-size:.75rem;font-weight:700;min-width:80px;"
            onclick="document.getElementById('shopDatePicker').showPicker()">
        <i class="bi bi-calendar3 me-1"></i>{{ date | date('d.m.Y') }}
    </button>
    <input type="date" id="shopDatePicker"
           value="{{ date }}"
           max="{{ today_date }}"
           style="position:absolute;opacity:0;pointer-events:none;width:0;height:0;"
           onchange="window.location.href='{{ ROOT }}/shops/{{ id_shop }}?date=' + this.value + '&period={{ period }}'">

    {% set next_date = date | date_modify('+1 day') | date('Y-m-d') %}
    {% if next_date <= today_date %}
        <a href="{{ ROOT }}/shops/{{ id_shop }}?date={{ next_date }}&period={{ period }}"
           class="btn btn-sm btn-light rounded-circle p-0 d-flex align-items-center justify-content-center"
           style="width:32px;height:32px;">
            <i class="bi bi-chevron-right" style="font-size:.8rem;"></i>
        </a>
    {% else %}
        <span class="btn btn-sm btn-light rounded-circle p-0 d-flex align-items-center justify-content-center disabled"
              style="width:32px;height:32px;opacity:.3;">
            <i class="bi bi-chevron-right" style="font-size:.8rem;"></i>
        </span>
    {% endif %}

    {% if date != today_date %}
        <a href="{{ ROOT }}/shops/{{ id_shop }}?period={{ period }}"
           class="btn btn-sm btn-primary rounded-pill px-2"
           style="font-size:.72rem;font-weight:700;">
            {{ translations.today ?? 'Today' }}
        </a>
    {% endif %}
</div>
{% endblock %}

{% block head %}
<style>
    /* ── INFO CARD ── */
    .info-card {
        background: #fff;
        border-radius: 16px;
        padding: 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
        margin-bottom: 12px;
    }
    .info-row {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 8px 0;
        border-bottom: 1px solid #f2f2f2;
        font-size: .88rem;
    }
    .info-row:last-child { border-bottom: none; }
    .info-icon { color: #435ebe; width: 20px; text-align: center; flex-shrink: 0; margin-top: 2px; }
    .info-label { font-size: .7rem; color: #6c757d; }
    .info-value { font-weight: 600; }

    /* ── SECTION TITLE ── */
    .section-title {
        font-size: .72rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: .08em;
        color: #6c757d; padding: 10px 4px 6px;
    }

    /* ── CASH HERO ── */
    .cash-hero {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        border-radius: 20px;
        color: #fff;
        padding: 18px;
        margin-bottom: 12px;
        position: relative;
        overflow: hidden;
    }
    .cash-hero::before {
        content: '';
        position: absolute;
        top: -30px; right: -30px;
        width: 140px; height: 140px;
        background: rgba(255,255,255,.05);
        border-radius: 50%;
    }
    .cash-amount {
        font-size: 2rem;
        font-weight: 900;
        letter-spacing: -.03em;
    }
    .cash-label { font-size: .72rem; opacity: .6; text-transform: uppercase; letter-spacing: .06em; }
    .cash-divider { height: 1px; background: rgba(255,255,255,.1); margin: 12px 0; }
    .cash-row { display: flex; justify-content: space-between; align-items: center; }
    .cash-pill {
        display: inline-flex; align-items: center; gap: 5px;
        padding: 4px 10px; border-radius: 20px;
        font-size: .75rem; font-weight: 700;
    }
    .cash-open   { background: rgba(52,199,89,.15);  color: #34c759; }
    .cash-closed { background: rgba(255,159,64,.15); color: #ff9f40; }

    /* ── SHIFT CARD ── */
    .shift-card {
        background: #fff;
        border-radius: 16px;
        padding: 14px 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
        margin-bottom: 10px;
    }
    .shift-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
    .shift-device { font-size: .78rem; font-weight: 700; color: #435ebe; }
    .shift-status-badge {
        font-size: .68rem; font-weight: 700;
        padding: 2px 8px; border-radius: 10px;
    }
    .badge-open   { background: #d1fae5; color: #065f46; }
    .badge-closed { background: #fef3c7; color: #92400e; }

    .shift-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .shift-cell { background: #f8f9fa; border-radius: 10px; padding: 10px 12px; }
    .shift-cell-value { font-size: .95rem; font-weight: 800; }
    .shift-cell-label { font-size: .65rem; color: #6c757d; margin-top: 1px; }
    .shift-cell.highlight { background: #eef2ff; }
    .shift-cell.highlight .shift-cell-value { color: #435ebe; }
    .shift-cell.positive { background: #f0fff4; }
    .shift-cell.positive .shift-cell-value { color: #27ae60; }
    .shift-cell.neutral  { background: #fffbf0; }
    .shift-cell.neutral .shift-cell-value  { color: #e67e22; }

    .shift-employees { margin-top: 10px; font-size: .78rem; color: #6c757d; }

    /* ── COSTS ── */
    .cost-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 9px 0;
        border-bottom: 1px solid #f2f2f2;
        font-size: .88rem;
    }
    .cost-row:last-child { border-bottom: none; }
    .cost-name { font-weight: 600; }
    .cost-date { font-size: .68rem; color: #6c757d; }
    .cost-amount { font-weight: 800; color: #435ebe; }
    .cost-total-row {
        display: flex; justify-content: space-between;
        font-size: .88rem; font-weight: 800;
        padding: 10px 0 4px;
        border-top: 2px solid #eef0f5;
        margin-top: 4px;
    }

    /* ── EMPTY ── */
    .empty-state { text-align: center; padding: 28px 20px; color: #adb5bd; font-size: .85rem; }
    .empty-state i { font-size: 2rem; display: block; margin-bottom: 8px; }

    /* month picker */
    .month-picker-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
</style>
{% endblock %}

{% block content %}

{# ──────────────── DANE KONTAKTOWE ──────────────── #}
{% if shop is not empty %}
<div class="info-card">
    {% if shop.street is defined %}
    <div class="info-row">
        <span class="info-icon"><i class="bi bi-geo-alt-fill"></i></span>
        <div>
            <div class="info-label">{{ translations.address ?? 'Address' }}</div>
            <div class="info-value">{{ shop.street }} {{ shop.street_num }}, {{ shop.zip }} {{ shop.city }}</div>
        </div>
    </div>
    {% endif %}
    {% if shop.phone is defined %}
    <div class="info-row">
        <span class="info-icon"><i class="bi bi-telephone-fill"></i></span>
        <div>
            <div class="info-label">{{ translations.phone ?? 'Phone' }}</div>
            <div class="info-value">{{ shop.phone }}</div>
        </div>
    </div>
    {% endif %}
    {% if shop.email is defined %}
    <div class="info-row">
        <span class="info-icon"><i class="bi bi-envelope-fill"></i></span>
        <div>
            <div class="info-label">{{ translations.email ?? 'Email' }}</div>
            <div class="info-value">{{ shop.email }}</div>
        </div>
    </div>
    {% endif %}
    {% if shop.opening_hours is defined %}
    <div class="info-row">
        <span class="info-icon"><i class="bi bi-clock-fill"></i></span>
        <div>
            <div class="info-label">{{ translations.opening_hours ?? 'Opening hours' }}</div>
            <div class="info-value">{{ shop.opening_hours }} – {{ shop.closing_hours }}</div>
        </div>
    </div>
    {% endif %}
    {% if shop.total_employees is defined %}
    <div class="info-row">
        <span class="info-icon"><i class="bi bi-people-fill"></i></span>
        <div>
            <div class="info-label">{{ translations.team_size ?? 'Team size' }}</div>
            <div class="info-value">{{ shop.total_employees }} {{ translations.employees ?? 'employees' }}</div>
        </div>
    </div>
    {% endif %}
</div>
{% endif %}

{# ──────────────── ZMIANY DZIENNE — PODSUMOWANIE KASY ──────────────── #}
{% set shift_data = shifts ?? {} %}
{% set summary = shift_data.summary ?? {} %}
{% set shift_list = shift_data.shifts ?? [] %}

{% if summary is not empty %}
<div class="cash-hero">
    <div class="cash-label mb-1">
        <i class="bi bi-cash-stack me-1"></i>{{ translations.cash_status ?? 'Cash status' }}
        &middot; {{ date | date('d.m.Y') }}
    </div>

    <div class="cash-row mb-1">
        <div>
            <div class="cash-amount">
                {{ summary.total_initial_cash is defined ? summary.total_initial_cash | number_format(2, '.', ' ') : '—' }}
                <span style="font-size:.9rem;opacity:.6;font-weight:600"> {{ currency }}</span>
            </div>
            <div class="cash-label">{{ translations.initial_cash ?? 'Initial cash' }}</div>
        </div>

        {% if summary.all_shifts_closed ?? false %}
            <span class="cash-pill cash-closed">
                <i class="bi bi-lock-fill"></i> {{ translations.closed ?? 'Closed' }}
            </span>
        {% else %}
            <span class="cash-pill cash-open">
                <i class="bi bi-unlock-fill"></i> {{ translations.open ?? 'Open' }}
            </span>
        {% endif %}
    </div>

    {% if summary.total_final_cash is not null and summary.total_final_cash is defined %}
    <div class="cash-divider"></div>
    <div class="cash-row">
        <div style="font-size:.82rem;opacity:.75;">{{ translations.final_cash ?? 'Final cash' }}</div>
        <div style="font-size:1.1rem;font-weight:800;">
            {{ summary.total_final_cash | number_format(2, '.', ' ') }} {{ currency }}
        </div>
    </div>
    {% endif %}

    <div class="cash-row mt-2" style="font-size:.75rem;opacity:.55;">
        <span>{{ (summary.shifts_count ?? 0) }} {{ translations.devices ?? 'devices' }}</span>
        {% if summary.all_shifts_closed ?? false %}
        <span>{{ translations.day_closed ?? 'Day closed' }}</span>
        {% else %}
        <span>{{ translations.shift_in_progress ?? 'Shift in progress' }}</span>
        {% endif %}
    </div>
</div>
{% endif %}

{# ──────────────── PER URZĄDZENIE ──────────────── #}
{% if shift_list | length > 0 %}
    <div class="section-title">
        <i class="bi bi-terminal me-1"></i>{{ translations.per_device ?? 'Per device' }}
    </div>

    {% for shift in shift_list %}
    <div class="shift-card">
        <div class="shift-header">
            <div>
                <span class="shift-device">
                    {{ translations.device ?? 'Device' }} #{{ loop.index }}
                </span>
                {% if shift.opening_time is defined %}
                    <span style="font-size:.68rem;color:#adb5bd;margin-left:6px;">
                        {{ shift.opening_time | date('H:i') }}
                        {% if shift.closing_time %}– {{ shift.closing_time | date('H:i') }}{% endif %}
                    </span>
                {% endif %}
            </div>
            {% if shift.is_closed %}
                <span class="shift-status-badge badge-closed">{{ translations.closed ?? 'Closed' }}</span>
            {% else %}
                <span class="shift-status-badge badge-open">{{ translations.open ?? 'Open' }}</span>
            {% endif %}
        </div>

        <div class="shift-grid">
            <div class="shift-cell highlight">
                <div class="shift-cell-value">{{ shift.initial_cash | number_format(2, '.', ' ') }} {{ currency }}</div>
                <div class="shift-cell-label">{{ translations.initial_cash ?? 'Initial cash' }}</div>
            </div>

            {% if shift.is_closed and shift.final_cash is defined %}
            <div class="shift-cell positive">
                <div class="shift-cell-value">{{ shift.final_cash | number_format(2, '.', ' ') }} {{ currency }}</div>
                <div class="shift-cell-label">{{ translations.final_cash ?? 'Final cash' }}</div>
            </div>
            {% else %}
            <div class="shift-cell">
                <div class="shift-cell-value" style="color:#adb5bd;">—</div>
                <div class="shift-cell-label">{{ translations.final_cash ?? 'Final cash' }}</div>
            </div>
            {% endif %}

            {% if shift.is_closed and shift.left_cash_for_next_day is defined %}
            <div class="shift-cell neutral">
                <div class="shift-cell-value">{{ shift.left_cash_for_next_day | number_format(2, '.', ' ') }} {{ currency }}</div>
                <div class="shift-cell-label">{{ translations.left_for_next_day ?? 'Left for next day' }}</div>
            </div>
            {% endif %}

            {% if shift.shift_duration is defined and shift.is_closed %}
            <div class="shift-cell">
                <div class="shift-cell-value">{{ shift.shift_duration | slice(0, 5) }}</div>
                <div class="shift-cell-label">{{ translations.shift_duration ?? 'Duration' }}</div>
            </div>
            {% endif %}
        </div>

        <div class="shift-employees">
            <i class="bi bi-person-circle me-1"></i>
            {{ translations.opened_by ?? 'Opened by' }}: <strong>{{ shift.opening_employee }}</strong>
            {% if shift.closing_employee %}
                &nbsp;&middot;&nbsp;
                {{ translations.closed_by ?? 'Closed by' }}: <strong>{{ shift.closing_employee }}</strong>
            {% endif %}
        </div>
    </div>
    {% endfor %}

{% elseif date is defined %}
    <div class="empty-state">
        <i class="bi bi-moon-stars"></i>
        {{ translations.no_shifts_for_date ?? 'No shifts recorded for this day.' }}
    </div>
{% endif %}

{# ──────────────── KOSZTY STAŁE MIESIĄCA ──────────────── #}
<div class="section-title">
    <i class="bi bi-receipt me-1"></i>{{ translations.monthly_costs ?? 'Monthly costs' }}

    {# month picker #}
    <span class="float-end d-flex align-items-center gap-1" style="font-weight:400;text-transform:none;letter-spacing:0;">
        {% set prev_period = period | date_modify('-1 month') | date('Y-m') %}
        {% set next_period = period | date_modify('+1 month') | date('Y-m') %}
        {% set cur_period  = 'now' | date('Y-m') %}

        <a href="{{ ROOT }}/shops/{{ id_shop }}?date={{ date }}&period={{ prev_period }}"
           class="btn btn-xs btn-light rounded-circle p-0 d-flex align-items-center justify-content-center"
           style="width:24px;height:24px;">
            <i class="bi bi-chevron-left" style="font-size:.65rem;"></i>
        </a>
        <span style="font-size:.75rem;font-weight:700;color:#435ebe;">{{ period }}</span>
        {% if next_period <= cur_period %}
        <a href="{{ ROOT }}/shops/{{ id_shop }}?date={{ date }}&period={{ next_period }}"
           class="btn btn-xs btn-light rounded-circle p-0 d-flex align-items-center justify-content-center"
           style="width:24px;height:24px;">
            <i class="bi bi-chevron-right" style="font-size:.65rem;"></i>
        </a>
        {% else %}
        <span style="width:24px;height:24px;opacity:.3;display:inline-flex;align-items:center;justify-content:center;">
            <i class="bi bi-chevron-right" style="font-size:.65rem;"></i>
        </span>
        {% endif %}
    </span>
</div>

{% set costs_data = costs ?? {} %}
{% set cost_items = costs_data.items ?? [] %}

<div class="info-card">
    {% if cost_items | length > 0 %}
        {% for item in cost_items %}
        <div class="cost-row">
            <div>
                <div class="cost-name">{{ item.cost_name }}</div>
                {% if item.description %}
                    <div class="cost-date">{{ item.description }}</div>
                {% endif %}
                <div class="cost-date"><i class="bi bi-calendar3 me-1"></i>{{ item.date | date('d.m.Y') }}</div>
            </div>
            <div class="cost-amount">{{ item.amount | number_format(2, '.', ' ') }} {{ currency }}</div>
        </div>
        {% endfor %}
        <div class="cost-total-row">
            <span>{{ translations.total ?? 'Total' }}</span>
            <span style="color:#435ebe;">{{ costs_data.total | number_format(2, '.', ' ') }} {{ currency }}</span>
        </div>
    {% else %}
        <div class="empty-state" style="padding:18px 0;">
            <i class="bi bi-journal-x" style="font-size:1.6rem;"></i>
            {{ translations.no_costs_for_period ?? 'No costs recorded for this period.' }}
        </div>
    {% endif %}
</div>

{% endblock %}