@extends('layouts.admin')

@section('title','Datame — цілі по місяцях')
@section('page_title','Datame — всі цілі')

@push('head')
    <link rel="stylesheet" href="{{ asset('css/admin/datame-targets-index.css') }}">
@endpush

@section('content')

    {{-- Блок з кнопкою додавання нового місяця --}}
    <div class="admin-card dt-header-card mb-3">
        <div class="dt-header-inner">
            <div class="dt-header-text">
                <h5 class="dt-header-title mb-1">Додати нову ціль</h5>
                <p class="dt-header-subtitle mb-0">
                    Створи ціль для нового місяця або місяця, якого ще немає в списку.
                </p>
            </div>
            <div class="dt-header-actions">
                <a href="{{ route('admin.datame_targets.create') }}" class="btn dt-add-btn">
                    <i class="fa-solid fa-plus"></i>
                    <span>Додати ціль на місяць</span>
                </a>
            </div>
        </div>
    </div>

    {{-- Таблиця / картки з цілями --}}
    <div class="admin-card dt-table-card p-0">

        <div class="dt-table-header px-3 py-2 d-flex justify-content-between align-items-center">
            <div class="dt-table-title">
                Всі цілі по місяцях
            </div>
            <div class="dt-table-hint">
                Одна ціль — один місяць з денними та змінними планами.
            </div>
        </div>

        @if($targets->isEmpty())
            <div class="p-3 text-muted dt-empty-text">
                Поки що немає жодної цілі. Натисни
                <strong>«Додати ціль на місяць»</strong>, щоб створити першу.
            </div>
        @else
            {{-- DESKTOP / TABLET: таблиця --}}
            <div class="dt-desktop-wrapper d-none d-md-block">
                <div class="table-responsive dt-table-wrapper">
                    <table class="table table-sm dt-table mb-0">
                        <thead>
                        <tr>
                            <th style="min-width:160px;">Місяць</th>
                            <th class="text-right">Daily</th>
                            <th class="text-right">Night</th>
                            <th class="text-right">Day</th>
                            <th class="text-right">Evening</th>
                            <th class="text-right">Днів</th>
                            <th class="text-right">Місячна ціль</th>
                            <th class="text-right dt-actions-head">Дії</th>
                        </tr>
                        </thead>

                        <tbody>
                        @foreach($targets as $row)
                            @php
                                $date  = \Carbon\Carbon::createFromFormat('Y-m', $row->month);
                                $days  = $date->daysInMonth;
                                $total = $row->daily_target * $days;
                            @endphp

                            <tr>
                                {{-- Місяць --}}
                                <td class="align-middle">
                                    <div class="dt-month-main">
                                        <strong>{{ $date->translatedFormat('F Y') }}</strong>
                                    </div>
                                    <div class="dt-month-sub">
                                        {{ $row->month }}
                                    </div>
                                </td>

                                {{-- Daily / Night / Day / Evening --}}
                                <td class="text-right dt-num-cell">
                                    ${{ number_format($row->daily_target, 2) }}
                                </td>
                                <td class="text-right dt-num-cell">
                                    ${{ number_format($row->night_target, 2) }}
                                </td>
                                <td class="text-right dt-num-cell">
                                    ${{ number_format($row->day_target, 2) }}
                                </td>
                                <td class="text-right dt-num-cell">
                                    ${{ number_format($row->evening_target, 2) }}
                                </td>

                                {{-- К-сть днів --}}
                                <td class="text-right dt-num-cell">
                                    {{ $days }}
                                </td>

                                {{-- Місячна ціль --}}
                                <td class="text-right dt-num-cell dt-total-cell">
                                    ${{ number_format($total, 2) }}
                                </td>

                                {{-- Дії --}}
                                <td class="text-right dt-actions-cell">
                                    <div class="btn-group btn-group-sm dt-actions-group" role="group">
                                        <a href="{{ route('admin.datame_targets.edit', $row->month) }}"
                                           class="btn btn-outline-secondary dt-edit-btn">
                                            ✏ Редагувати
                                        </a>

                                        <form action="{{ route('admin.datame_targets.destroy', $row->month) }}"
                                              method="POST"
                                              onsubmit="return confirm('Видалити ціль за {{ $row->month }} ?')">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-outline-danger dt-delete-btn">
                                                🗑 Видалити
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>

                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- MOBILE: картки --}}
            <div class="dt-mobile-list d-md-none p-2">
                @foreach($targets as $row)
                    @php
                        $date  = \Carbon\Carbon::createFromFormat('Y-m', $row->month);
                        $days  = $date->daysInMonth;
                        $total = $row->daily_target * $days;
                    @endphp

                    <div class="dt-mobile-card">
                        <div class="dt-mobile-head">
                            <div>
                                <div class="dt-mobile-month-main">
                                    {{ $date->translatedFormat('F Y') }}
                                </div>
                                <div class="dt-mobile-month-sub">
                                    {{ $row->month }} · {{ $days }} днів
                                </div>
                            </div>
                            <div class="dt-mobile-total-wrap">
                                <div class="dt-mobile-total-label">Місячна ціль</div>
                                <div class="dt-mobile-total-value">
                                    ${{ number_format($total, 2) }}
                                </div>
                            </div>
                        </div>

                        <div class="dt-mobile-body">
                            <div class="dt-mobile-metric-row">
                                <span class="dt-mobile-metric-label">Daily</span>
                                <span class="dt-mobile-metric-value">
                                    ${{ number_format($row->daily_target, 2) }}
                                </span>
                            </div>
                            <div class="dt-mobile-metric-row">
                                <span class="dt-mobile-metric-label">Night</span>
                                <span class="dt-mobile-metric-value">
                                    ${{ number_format($row->night_target, 2) }}
                                </span>
                            </div>
                            <div class="dt-mobile-metric-row">
                                <span class="dt-mobile-metric-label">Day</span>
                                <span class="dt-mobile-metric-value">
                                    ${{ number_format($row->day_target, 2) }}
                                </span>
                            </div>
                            <div class="dt-mobile-metric-row">
                                <span class="dt-mobile-metric-label">Evening</span>
                                <span class="dt-mobile-metric-value">
                                    ${{ number_format($row->evening_target, 2) }}
                                </span>
                            </div>
                        </div>

                        <div class="dt-mobile-actions">
                            <a href="{{ route('admin.datame_targets.edit', $row->month) }}"
                               class="btn btn-sm btn-outline-secondary btn-block mb-1">
                                ✏ Редагувати
                            </a>

                            <form action="{{ route('admin.datame_targets.destroy', $row->month) }}"
                                  method="POST"
                                  onsubmit="return confirm('Видалити ціль за {{ $row->month }} ?')">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-sm btn-outline-danger btn-block">
                                    🗑 Видалити
                                </button>
                            </form>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif

    </div>

@endsection