@extends('back.layout.app')
@section('title', config('app.name') . ' - Modifier une opération Média')

@push('styles')
<link href="{{ asset('assets/vendors/summernote/summernote-lite.min.css') }}" rel="stylesheet">
<style>
    .note-editable ul { list-style: disc !important; padding-left: 1.5rem !important; margin: 0.5rem 0 !important; }
    .note-editable ol { list-style: decimal !important; padding-left: 1.5rem !important; margin: 0.5rem 0 !important; }
    .note-editable li { display: list-item !important; }
</style>
@endpush

@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.index') }}" 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">
            {{ $planMediaOperation->media?->name ?? '—' }}
        </h1>
    </div>
</div>

<div class="kt-container-fixed">
    <form method="POST" action="{{ route('admin.plan-media.operations.update', $planMediaOperation) }}">
        @csrf @method('PUT')

        <div class="grid grid-cols-1 xl:grid-cols-3 gap-5 lg:gap-7.5">

            {{-- ====== COLONNE GAUCHE (2/3) ====== --}}
            <div class="xl:col-span-2 flex flex-col gap-5">

                <div class="kt-card">
                    <div class="kt-card-content pb-5 flex flex-col gap-5">

                        <div class="flex flex-col gap-1">
                            <label class="kt-label mb-2 font-semibold">Visibilité <span class="text-destructive">*</span></label>
                            <textarea id="sn_visibility" name="visibility" class="w-full"
                                required>{{ old('visibility', $planMediaOperation->visibility) }}</textarea>
                            @error('visibility') <span class="text-xs text-destructive mt-1 block">{{ $message }}</span> @enderror
                        </div>

                        <div class="flex flex-col gap-1">
                            <label class="kt-label mb-2 font-semibold">Présentation du média</label>
                            <textarea id="sn_presentation" name="presentation" class="w-full">{{ old('presentation', $planMediaOperation->media?->presentation) }}</textarea>
                            @error('presentation') <span class="text-xs text-destructive mt-1 block">{{ $message }}</span> @enderror
                        </div>

                        <div class="flex flex-col gap-1">
                            <label class="kt-label mb-2 font-semibold">Apport du partenaire / Description</label>
                            <textarea id="sn_description" name="description" class="w-full">{{ old('description', $planMediaOperation->description) }}</textarea>
                            @error('description') <span class="text-xs text-destructive mt-1 block">{{ $message }}</span> @enderror
                        </div>

                    </div>
                </div>

            </div>

            {{-- ====== COLONNE DROITE (1/3) ====== --}}
            <div class="col-span-1 flex flex-col gap-5">

                <div class="kt-card">
                    <div class="kt-card-content pb-5 flex flex-col gap-4">

                        {{-- Type de média (readonly) --}}
                        <div class="flex flex-col gap-1">
                            <label class="kt-label mb-2">Type de média</label>
                            <input type="text" class="kt-input bg-muted"
                                value="{{ $planMediaOperation->media?->type?->name ?? '—' }}" readonly tabindex="-1">
                        </div>

                        {{-- Média (readonly) --}}
                        <div class="flex flex-col gap-1">
                            <label class="kt-label mb-2">Média</label>
                            <input type="text" class="kt-input bg-muted"
                                value="{{ $planMediaOperation->media?->name ?? '—' }}" readonly tabindex="-1">
                        </div>

                        {{-- Périodicité --}}
                        <div class="flex flex-col gap-1">
                            <label class="kt-label mb-2">Périodicité <span class="text-destructive">*</span></label>
                            <input type="text" name="frequency" class="kt-input" autocomplete="off"
                                value="{{ old('frequency', $planMediaOperation->frequency) }}" required>
                            @error('frequency') <span class="text-xs text-destructive">{{ $message }}</span> @enderror
                        </div>

                        {{-- Frais techniques --}}
                        <div class="flex flex-col gap-1">
                            <label class="kt-label mb-2">Frais techniques par opération <span class="text-destructive">*</span></label>
                            <div class="kt-input-group">
                                <span class="kt-input-addon kt-input-addon-icon"><i class="ki-outline ki-euro"></i></span>
                                <input type="number" step="0.01" name="technical_cost" class="kt-input" required
                                    value="{{ old('technical_cost', $planMediaOperation->technical_cost) }}">
                            </div>
                            @error('technical_cost') <span class="text-xs text-destructive">{{ $message }}</span> @enderror
                        </div>

                        {{-- Dotation --}}
                        <div class="flex flex-col gap-1">
                            <label class="kt-label mb-2">Montant Dotation <span class="text-destructive">*</span></label>
                            <div class="kt-input-group">
                                <span class="kt-input-addon kt-input-addon-icon"><i class="ki-outline ki-euro"></i></span>
                                <input type="number" step="0.01" name="amount" class="kt-input" required
                                    value="{{ old('amount', $planMediaOperation->amount) }}">
                            </div>
                            @error('amount') <span class="text-xs text-destructive">{{ $message }}</span> @enderror
                        </div>

                        {{-- Nombre de lecteurs --}}
                        <div class="flex flex-col gap-1">
                            <label class="kt-label mb-2">
                                Nombre de lecteurs
                                @if($planMediaOperation->media?->readers?->updated_at)
                                @php
                                    $readersDate = $planMediaOperation->media->readers->updated_at;
                                    try {
                                        $readersDate = \Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $readersDate)->format('d/m/Y');
                                    } catch (\Throwable) {
                                        try { $readersDate = \Carbon\Carbon::createFromFormat('d/m/Y', $readersDate)->format('d/m/Y'); } catch (\Throwable) {}
                                    }
                                @endphp
                                <span class="text-xs font-normal text-primary ml-1">
                                    Maj : {{ $readersDate }}
                                </span>
                                @endif
                            </label>
                            <input type="text" name="readers_content" class="kt-input" autocomplete="off"
                                value="{{ old('readers_content', $planMediaOperation->media?->readers?->content) }}">
                            @error('readers_content') <span class="text-xs text-destructive">{{ $message }}</span> @enderror
                        </div>

                    </div>
                </div>

                {{-- Actions --}}
                <div class="flex flex-col gap-2">
                    <x-ui.loading-button type="submit" class="kt-btn-primary w-full justify-center"
                        loadingText="{{ __('ui.states.saving') }}">
                        {{ __('ui.actions.save') }}
                    </x-ui.loading-button>
                    <a href="{{ route('admin.plan-media.index') }}"
                        class="kt-btn kt-btn-ghost kt-btn-destructive w-full justify-center">
                        Annuler
                    </a>
                </div>

            </div>
        </div>

    </form>
</div>

@endsection

@push('scripts')
<script src="{{ asset('assets/vendors/summernote/jquery.min.js') }}"></script>
<script src="{{ asset('assets/vendors/summernote/summernote-lite.min.js') }}"></script>
<script>
$(document).ready(function () {
    var snConfig = {
        height: 200,
        toolbar: [
            ['style',  ['style', 'bold', 'italic', 'underline', 'clear']],
            ['para',   ['ul', 'ol', 'paragraph']],
            ['insert', ['link']],
            ['custom', ['removeInlineStyles']],
            ['view',   ['codeview']],
        ],
        styleTags: ['p', 'h1', 'h2', 'h3', 'h4'],
        buttons: {
            removeInlineStyles: function(context) {
                return $.summernote.ui.button({
                    contents: '<i class="ki-outline ki-eraser"></i>',
                    tooltip: 'Supprimer les styles inline',
                    click: function() {
                        var html = context.invoke('code');
                        context.invoke('code', html.replace(/ style="[^"]*"/gi, ''));
                    }
                }).render();
            }
        },
        callbacks: {
            onImageUpload: function() { return false; },
            onPaste: function(e) {
                var buf = e.originalEvent.clipboardData.getData('text/html');
                if (buf) {
                    document.execCommand('insertHTML', false, buf.replace(/ style="[^"]*"/gi, ''));
                    e.preventDefault();
                }
            }
        }
    };
    $('#sn_visibility').summernote(snConfig);
    $('#sn_presentation').summernote(snConfig);
    $('#sn_description').summernote(snConfig);
});
</script>
@endpush