@extends('back.layout.app')
@section('title', config('app.name') . ' - Paramétrage des périodes')

@php $breadcrumb = 'plan-media.index'; @endphp

@section('content')

<div class="kt-container-fixed">
    <div class="flex items-center gap-3 pb-7.5">
        <a href="{{ route('admin.plan-media.manage') }}" class="kt-btn kt-btn-sm kt-btn-icon kt-btn-ghost">
            <i class="ki-outline ki-arrow-left"></i>
        </a>
        <h1 class="text-xl font-medium leading-none text-mono">Paramétrage des périodes</h1>
    </div>
</div>

<div class="kt-container-fixed flex flex-col gap-5">

    {{-- Header proposition --}}
    <div class="kt-card">
        <div class="kt-card-content py-5">
            <div class="flex flex-wrap items-center justify-between gap-6">

                <div class="flex flex-col gap-1">
                    <span class="text-xs text-secondary-foreground">{{ $proposal->created_at }}</span>
                    <h2 class="text-lg font-semibold text-mono">{{ $proposal->customer->name }}</h2>
                    @php
                        $periodsCount    = $proposal->operationsWithPeriod()->count();
                        $operationsCount = $proposal->operations()->count();
                    @endphp
                    @if($operationsCount > 0 && $periodsCount === $operationsCount)
                        <span class="text-xs text-secondary-foreground">URL du plan média disponible</span>
                    @else
                        <span class="text-xs text-secondary-foreground">URL non disponible</span>
                        @if($operationsCount === 0)
                            <span class="text-xs text-destructive">Aucune opération</span>
                        @else
                            <span class="text-xs text-destructive">{{ $periodsCount }}/{{ $operationsCount }} périodes définies</span>
                        @endif
                    @endif
                </div>

                <div class="flex items-center gap-8">
                    <div class="flex flex-col items-center gap-1">
                        <span class="text-2xl font-semibold text-mono">{{ $proposal->operations->count() }}</span>
                        <span class="text-xs text-secondary-foreground">Total Offres</span>
                    </div>
                    <div class="flex flex-col items-center gap-1">
                        <span class="text-2xl font-semibold text-mono">{{ $proposal->countSelectedPeriods() }}</span>
                        <span class="text-xs text-secondary-foreground">Périodes sélectionnées</span>
                    </div>
                </div>

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

    {{-- Formulaire périodes --}}
    <div class="kt-card">
        <div class="kt-card-header">
            <div class="kt-card-heading">
                <h3 class="kt-card-title">Périodes disponibles</h3>
            </div>
        </div>
        <div class="kt-card-content pb-6">

            <div class="kt-alert kt-alert-light kt-alert-primary mb-3" id="alert_periods">
                <div class="kt-alert-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info" aria-hidden="true">
                        <circle cx="12" cy="12" r="10"></circle>
                        <path d="M12 16v-4"></path>
                        <path d="M12 8h.01"></path>
                    </svg>
                </div>
                <div class="kt-alert-title">Définissez les périodes disponibles pour chaque plan média.</div>
            </div>

            <form method="POST" action="{{ route('admin.plan-media.proposal.periods.update', $proposal) }}">
                @csrf @method('PUT')

                <div class="flex flex-col">

                    @foreach($proposal->operations as $operation)
                    @if(!$loop->first)
                    <div class="border-t border-input border-dashed my-5"></div>
                    @endif
                    <div class="py-2" data-operation-block>

                        {{-- En-tête opération --}}
                        <div class="flex items-center justify-between flex-wrap gap-4 mb-7">
                            <div class="flex items-center gap-2">
                                <span class="font-semibold text-mono">{{ $operation->media?->name ?? '—' }}</span>
                                @if($operation->media?->type)
                                    <span class="kt-badge kt-badge-success kt-badge-sm">{{ $operation->media->type->name }}</span>
                                @endif
                            </div>

                            {{-- Sélecteurs début / fin --}}
                            <div class="flex items-center gap-2">
                                <select class="kt-input py-1 kt-select-sm" data-dt-start data-block="{{ $loop->index }}">
                                    @foreach($period as $date)
                                        <option value="{{ $date->format('Y-m') }}">
                                            {{ ucfirst($date->locale('fr')->shortMonthName) }} {{ $date->year }}
                                        </option>
                                    @endforeach
                                </select>
                                <span class="text-xs text-secondary-foreground">→</span>
                                <select class="kt-input py-1 kt-select-sm" data-dt-end data-block="{{ $loop->index }}">
                                    @foreach($period as $date)
                                        <option value="{{ $date->format('Y-m') }}" {{ $loop->last ? 'selected' : '' }}>
                                            {{ ucfirst($date->locale('fr')->shortMonthName) }} {{ $date->year }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- Grille des mois --}}
                        @php
                            $savedPeriod = !empty($operation->pivot->period)
                                ? array_values(json_decode($operation->pivot->period, true))
                                : [];
                            $savedMonths = array_column($savedPeriod, 'month');
                        @endphp
                        <div class="grid grid-cols-6 gap-3" data-block="{{ $loop->index }}">
                            @foreach($period as $key => $date)
                            @php
                                $isChecked  = in_array($date->format('Y-m'), $savedMonths);
                                $monthIndex = array_search($date->format('Y-m'), $savedMonths);
                                $textValue  = $monthIndex !== false ? ($savedPeriod[$monthIndex]['text'] ?? '') : '';
                            @endphp
                            <div class="flex flex-col gap-1.5">
                                <label class="flex items-center gap-2 cursor-pointer">
                                    <input type="checkbox"
                                        class="kt-checkbox kt-checkbox-sm period-checkbox"
                                        data-block="{{ $loop->parent->index }}"
                                        data-value="{{ $date->format('Y-m') }}"
                                        name="plan_period[{{ $operation->id }}][{{ $key }}][month]"
                                        value="{{ $date->format('Y-m') }}"
                                        @checked($isChecked)>
                                    <span class="text-xs font-medium">
                                        {{ ucfirst($date->locale('fr')->shortMonthName) }} {{ $date->year }}
                                    </span>
                                </label>
                                <input type="text"
                                    class="kt-input py-1 kt-input-sm period-text {{ $isChecked ? '' : 'hidden' }}"
                                    name="plan_period[{{ $operation->id }}][{{ $key }}][text]"
                                    autocomplete="off"
                                    value="{{ $textValue }}">
                            </div>
                            @endforeach
                        </div>

                    </div>
                    @endforeach

                </div>

                <div class="flex justify-center mt-10">
                    <button type="submit" class="kt-btn kt-btn-primary px-12">
                        Enregistrer les périodes
                    </button>
                </div>

            </form>

        </div>
    </div>

</div>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {

    // Sélecteurs début/fin → coche/décoche les mois dans la plage
    document.querySelectorAll('[data-dt-start], [data-dt-end]').forEach(function(sel) {
        sel.addEventListener('change', function() {
            updateBlock(this.closest('[data-operation-block]'));
        });
    });

    function updateBlock(block) {
        if (!block) return;
        var startSel = block.querySelector('[data-dt-start]');
        var endSel   = block.querySelector('[data-dt-end]');
        if (!startSel || !endSel) return;

        var startDate = new Date(startSel.value + '-01');
        var endDate   = new Date(endSel.value   + '-01');

        block.querySelectorAll('.period-checkbox').forEach(function(cb) {
            var cbDate = new Date(cb.dataset.value + '-01');
            var inRange = cbDate >= startDate && cbDate <= endDate;
            cb.checked = inRange;
            var textInput = cb.closest('.flex.flex-col')?.querySelector('.period-text');
            if (textInput) textInput.classList.toggle('hidden', !inRange);
        });
    }

    // Coche manuelle → affiche/cache le champ texte
    document.addEventListener('change', function(e) {
        if (!e.target.classList.contains('period-checkbox')) return;
        var textInput = e.target.closest('.flex.flex-col')?.querySelector('.period-text');
        if (textInput) textInput.classList.toggle('hidden', !e.target.checked);
    });

});
</script>
@endpush