@extends('layouts.admin')

@section('title','Норми на місяць')
@section('page_title','Норми на місяць')

@section('page_actions')
    <a href="{{ route('admin.monthly-targets.create') }}" class="btn mt-add-btn">
        <i class="fas fa-plus"></i>
        <span>Додати норму</span>
    </a>
@endsection


@push('head')
    {{-- Окремий адаптивний CSS --}}
    <link rel="stylesheet" href="{{ asset('css/admin/monthly-targets-index.css') }}">
@endpush

@section('content')

    {{-- ФІЛЬТРИ --}}
    <div class="admin-card mt-filters-card mb-3">

        <div class="mt-filters-header">
            <div class="mt-filters-title">
                Фільтр норм
            </div>
            <div class="mt-filters-subtitle">
                Обери кабінет та місяць для перегляду встановлених норм.
            </div>
        </div>

        <form class="form-row align-items-end mt-filters-form" method="GET">

            {{-- Кабінет --}}
            <div class="form-group col-md-4 mb-2 mt-filter-col">
                <label>Кабінет</label>
                <select name="cabinet_id"
                        class="form-control"
                        onchange="this.form.submit()">
                    <option value="">Всі</option>
                    <option value="-1" {{ request('cabinet_id')==='-1' ? 'selected' : '' }}>
                        Глобальні
                    </option>
                    @foreach($cabinets as $c)
                        <option value="{{ $c->id }}"
                            {{ (string)request('cabinet_id')===(string)$c->id ? 'selected' : '' }}>
                            {{ $c->slug }} — {{ $c->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- Місяць --}}
            <div class="form-group col-md-3 mb-2 mt-filter-col">
                <label>Місяць</label>
                <input type="month"
                       name="month"
                       value="{{ request('month') }}"
                       class="form-control"
                       onchange="this.form.submit()">
            </div>

            {{-- Кнопка фільтру --}}
            <div class="form-group col-md-2 mb-2 mt-filter-col">
                <button class="btn btn-outline-secondary btn-block mt-filter-submit">
                    <i class="fas fa-filter mr-1"></i>
                    Фільтрувати
                </button>
            </div>

            {{-- Скинути --}}
            <div class="form-group col-md-3 mb-2 text-md-right mt-filter-col mt-filter-reset-wrap">
                <a href="{{ route('admin.monthly-targets.index') }}"
                   class="btn btn-light btn-block mt-filter-reset">
                    Скинути
                </a>
            </div>

        </form>
    </div>


    {{-- ДЕСКТОПНА ТАБЛИЦЯ --}}
    <div class="admin-card p-0 mt-table-desktop">
        <div class="table-responsive table-monthly-wrapper">
            <table class="table table-sm table-bordered mb-0 table-monthly">
                <thead class="thead-light">
                <tr>
                    <th style="width:180px;">Кабінет</th>
                    <th style="width:90px;">Місяць</th>
                    <th class="text-right">New</th>
                    <th class="text-right">Young</th>
                    <th class="text-right">Old</th>
                    <th class="text-right">Spend Young</th>
                    <th class="text-right">Spend Old</th>
                    <th class="text-right" style="width:90px;">Day</th>
                    <th class="text-right" style="width:90px;">Evening</th>
                    <th class="text-right" style="width:90px;">Night</th>
                    <th style="width:130px;">Дії</th>
                </tr>
                </thead>
                <tbody>
                @forelse($targets as $t)
                    <tr>
                        <td>
                            @if($t->cabinet?->slug)
                                {{ $t->cabinet->slug }} — {{ $t->cabinet->name }}
                            @else
                                <span class="text-muted font-italic">Глобально</span>
                            @endif
                        </td>
                        <td>{{ $t->month->format('Y-m') }}</td>

                        <td class="text-right">
                            {{ number_format($t->new_connection_target,   2,'.',' ') }}
                        </td>
                        <td class="text-right">
                            {{ number_format($t->young_connection_target, 2,'.',' ') }}
                        </td>
                        <td class="text-right">
                            {{ number_format($t->old_connection_target,   2,'.',' ') }}
                        </td>
                        <td class="text-right">
                            {{ number_format($t->spend_young_target,      2,'.',' ') }}
                        </td>
                        <td class="text-right">
                            {{ number_format($t->spend_old_target,        2,'.',' ') }}
                        </td>

                        <td class="text-right">
                            {{ number_format($t->day_shift_target ?? 0,     2,'.',' ') }}
                        </td>
                        <td class="text-right">
                            {{ number_format($t->evening_shift_target ?? 0, 2,'.',' ') }}
                        </td>
                        <td class="text-right">
                            {{ number_format($t->night_shift_target ?? 0,   2,'.',' ') }}
                        </td>

                        <td class="actions-cell">
                            <div class="btn-group btn-group-sm" role="group">
                                <a class="btn btn-outline-secondary"
                                   href="{{ route('admin.monthly-targets.edit', $t) }}">
                                    Редагувати
                                </a>
                                <form method="POST"
                                      action="{{ route('admin.monthly-targets.destroy', $t) }}"
                                      onsubmit="return confirm('Видалити норму?')"
                                      style="display:inline-block;">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-outline-danger">✕</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="11" class="text-center text-muted p-4">
                            Нічого не знайдено.
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>


    {{-- МОБІЛЬНИЙ СПИСОК-КАРТКИ --}}
    <div class="mt-mobile-list">
        @forelse($targets as $t)
            <div class="admin-card mt-mobile-card">
                <div class="mt-mobile-header">
                    <div class="mt-mobile-cabinet">
                        @if($t->cabinet?->slug)
                            <span class="mt-mobile-cabinet-slug">
                                {{ $t->cabinet->slug }}
                            </span>
                            <span class="mt-mobile-cabinet-name">
                                {{ $t->cabinet->name }}
                            </span>
                        @else
                            <span class="mt-mobile-cabinet-global">
                                Глобально
                            </span>
                        @endif
                    </div>
                    <div class="mt-mobile-month">
                        {{ $t->month->format('Y-m') }}
                    </div>
                </div>

                <div class="mt-mobile-body">
                    <div class="mt-mobile-section-title">
                        Цілі по конектам
                    </div>

                    <div class="mt-mobile-row">
                        <span class="mt-mobile-label">New</span>
                        <span class="mt-mobile-value">
                            {{ number_format($t->new_connection_target, 2, '.', ' ') }}
                        </span>
                    </div>
                    <div class="mt-mobile-row">
                        <span class="mt-mobile-label">Young</span>
                        <span class="mt-mobile-value">
                            {{ number_format($t->young_connection_target, 2, '.', ' ') }}
                        </span>
                    </div>
                    <div class="mt-mobile-row">
                        <span class="mt-mobile-label">Old</span>
                        <span class="mt-mobile-value">
                            {{ number_format($t->old_connection_target, 2, '.', ' ') }}
                        </span>
                    </div>

                    <div class="mt-mobile-section-title mt-2">
                        Витрати
                    </div>

                    <div class="mt-mobile-row">
                        <span class="mt-mobile-label">Spend Young</span>
                        <span class="mt-mobile-value">
                            {{ number_format($t->spend_young_target, 2, '.', ' ') }}
                        </span>
                    </div>
                    <div class="mt-mobile-row">
                        <span class="mt-mobile-label">Spend Old</span>
                        <span class="mt-mobile-value">
                            {{ number_format($t->spend_old_target, 2, '.', ' ') }}
                        </span>
                    </div>

                    <div class="mt-mobile-section-title mt-2">
                        Зміни
                    </div>

                    <div class="mt-mobile-row">
                        <span class="mt-mobile-label">Day</span>
                        <span class="mt-mobile-value">
                            {{ number_format($t->day_shift_target ?? 0, 2, '.', ' ') }}
                        </span>
                    </div>
                    <div class="mt-mobile-row">
                        <span class="mt-mobile-label">Evening</span>
                        <span class="mt-mobile-value">
                            {{ number_format($t->evening_shift_target ?? 0, 2, '.', ' ') }}
                        </span>
                    </div>
                    <div class="mt-mobile-row">
                        <span class="mt-mobile-label">Night</span>
                        <span class="mt-mobile-value">
                            {{ number_format($t->night_shift_target ?? 0, 2, '.', ' ') }}
                        </span>
                    </div>
                </div>

                <div class="mt-mobile-actions">
                    <a class="btn btn-sm btn-outline-secondary btn-block"
                       href="{{ route('admin.monthly-targets.edit', $t) }}">
                        Редагувати
                    </a>

                    <form method="POST"
                          action="{{ route('admin.monthly-targets.destroy', $t) }}"
                          onsubmit="return confirm('Видалити норму?')">
                        @csrf
                        @method('DELETE')
                        <button class="btn btn-sm btn-outline-danger btn-block mt-1">
                            Видалити
                        </button>
                    </form>
                </div>
            </div>
        @empty
            <div class="admin-card mt-mobile-card text-center text-muted">
                Нічого не знайдено.
            </div>
        @endforelse
    </div>


    {{-- ОДНА ПАГІНАЦІЯ ДЛЯ ОБОХ ВИДІВ --}}
    @if($targets->hasPages())
        <div class="monthly-pagination p-2">
            {{ $targets->links() }}
        </div>
    @endif

@endsection