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

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

@push('styles')
<link href="{{ asset('assets/vendors/summernote/summernote-lite.min.css') }}" rel="stylesheet">
@endpush

@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">Créer une opération Média</h1>
    </div>
</div>

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

        <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') }}</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') }}</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') }}</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">

                        @livewire('back.sales.mediadropdown')

                        {{-- 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" id="field_frequency" class="kt-input" autocomplete="off"
                                value="{{ old('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 <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', 0) }}">
                            </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', 0) }}">
                            </div>
                            @error('amount') <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') }}">
                        Confirmer la création
                    </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);

    // Reçoit la présentation du média depuis le composant Livewire
    window.addEventListener('media-presentation-changed', function(e) {
        setTimeout(function() {
            $('#sn_presentation').summernote('code', e.detail.presentation || '');
        }, 100);
    });
});
</script>
@endpush