@extends('back.layout.app')
@section('title', config('app.name') . ' - Consultation Plan Média')

@php $breadcrumb = 'plan-media.manage'; @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">Consultation d'une proposition de plan Média</h1>
    </div>
</div>

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

    @include('back.modules.sales.plan_media.partials.proposal_header')

    @if(!$planMediaProposal->checkAllPeriodsSet())
    @php
        $periodsSet = $planMediaProposal->operations->filter(fn($op) => !is_null($op->pivot->period))->count();
        $totalOps   = $planMediaProposal->operations->count();
    @endphp
    <div class="kt-alert kt-alert-light kt-alert-warning flex items-center gap-3">
        <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>
        <span class="text-sm">
            @if($totalOps === 0)
                Aucune opération ajoutée à cette proposition.
            @else
                {{ $periodsSet }}/{{ $totalOps }} périodes définies — l'URL du plan média ne sera disponible que lorsque toutes les périodes seront renseignées.
            @endif
        </span>
    </div>
    @endif

    {{-- Tabs --}}
    <div>
        <div class="kt-tabs kt-tabs-line" data-kt-tabs="true">
            <button class="kt-tab-toggle active py-3 font-medium" data-kt-tab-toggle="#tab_plans_selectionnes">
                Opérations Médias sélectionnés
            </button>
            <button class="kt-tab-toggle py-3 font-medium" data-kt-tab-toggle="#tab_planning_client">
                Planning sélection Client
            </button>
        </div>

        <div id="tab_plans_selectionnes" class="pt-5">
            @include('back.modules.sales.plan_media.partials.tab_operations')
        </div>

        <div id="tab_planning_client" class="hidden pt-5">
            @include('back.modules.sales.plan_media.partials.tab_planning')
        </div>
    </div>

</div>

@include('back.modules.sales.plan_media.partials.modal_technical_costs')
@include('back.modules.sales.plan_media.partials.modal_add_operations')
@include('back.modules.sales.plan_media.partials.modal_send_plan')

@endsection