@extends('back.layout.app')
@section('title', config('app.name') . ' - ' . ($operation->num_bdc ? 'Edition' : 'Création') . ' BDC')

@php $breadcrumb = 'operations.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.operations.show', $operation) }}" class="kt-btn kt-btn-sm kt-btn-icon kt-btn-ghost">
            <i class="ki-outline ki-arrow-left"></i>
        </a>
        <div>
            <h1 class="text-xl font-medium leading-none text-mono">
                {{ $operation->num_bdc ? 'Edition du bon de commande — ' . $operation->num_bdc : 'Création du bon de commande' }}
            </h1>
            <span class="text-sm text-secondary-foreground">{{ $operation->name }}</span>
        </div>
    </div>
</div>

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

        {{-- ====== FORMULAIRE (2/3) ====== --}}
        <div class="xl:col-span-2">
            <form method="POST" action="{{ route('admin.operations.order.generate', $operation) }}" id="form_order">
                @csrf

                <div class="flex flex-col gap-5">

                    {{-- Objet --}}
                    <div class="kt-card p-5 flex flex-col gap-3">
                        <h3 class="text-sm font-semibold text-primary">Objet</h3>
                        <textarea id="sn_object" name="object_content" class="kt-textarea">{{ old('object_content', $operation->object_content) }}</textarea>
                    </div>

                    {{-- Apport Média --}}
                    <div class="kt-card p-5 flex flex-col gap-3">
                        <h3 class="text-sm font-semibold text-primary">Apport du Média</h3>
                        <textarea id="sn_media" name="media_contribution" class="kt-textarea">{{ old('media_contribution', $operation->media_contribution) }}</textarea>
                    </div>

                    {{-- Apport Client --}}
                    <div class="kt-card p-5 flex flex-col gap-3">
                        <h3 class="text-sm font-semibold text-primary">Apport du client</h3>
                        <textarea id="sn_partner" name="partner_contribution" class="kt-textarea">{{ old('partner_contribution', $operation->partner_contribution) }}</textarea>
                    </div>

                    {{-- Conditions de paiement --}}
                    <div class="kt-card p-5 flex flex-col gap-3">
                        <h3 class="text-sm font-semibold text-primary">Conditions de paiement</h3>
                        <textarea id="sn_billing" name="billing_condition" class="kt-textarea">{{ old('billing_condition', $operation->billing_condition) }}</textarea>
                    </div>

                    {{-- Contrat mandataire + TVA --}}
                    <div class="kt-card p-5 flex flex-col gap-5">

                        <div class="flex flex-col gap-2">
                            <h3 class="text-sm font-semibold text-primary">Contrat de mandataire</h3>
                            <div class="flex items-center gap-6">
                                <div class="flex items-center gap-2">
                                    <input type="radio" class="kt-radio" id="agency_yes" name="agency_agreement" value="1"
                                        {{ old('agency_agreement', $operation->agency_agreement) == '1' ? 'checked' : '' }}>
                                    <label class="kt-label" for="agency_yes">Oui</label>
                                </div>
                                <div class="flex items-center gap-2">
                                    <input type="radio" class="kt-radio" id="agency_no" name="agency_agreement" value="0"
                                        {{ old('agency_agreement', $operation->agency_agreement) == '0' ? 'checked' : '' }}>
                                    <label class="kt-label" for="agency_no">Non</label>
                                </div>
                            </div>
                        </div>

                        <div class="flex flex-col gap-2" x-data="{ tva: '{{ old('tva', $operation->tva) }}' }">
                            <h3 class="text-sm font-semibold text-primary">TVA</h3>
                            <div class="flex items-center gap-6">
                                <div class="flex items-center gap-2">
                                    <input type="radio" class="kt-radio" id="tva_yes" name="tva" value="1"
                                        x-model="tva"
                                        {{ old('tva', $operation->tva) == '1' ? 'checked' : '' }}>
                                    <label class="kt-label" for="tva_yes">Oui</label>
                                </div>
                                <div class="flex items-center gap-2">
                                    <input type="radio" class="kt-radio" id="tva_no" name="tva" value="0"
                                        x-model="tva"
                                        {{ old('tva', $operation->tva) == '0' ? 'checked' : '' }}>
                                    <label class="kt-label" for="tva_no">Non</label>
                                </div>
                            </div>
                            <div x-show="tva === '1'" class="flex flex-col gap-1 mt-1">
                                <label class="kt-label mb-2">Taux de TVA (%)</label>
                                <input type="text" name="tva_rate" class="kt-input w-32"
                                    value="{{ old('tva_rate', $operation->tva_rate ?? 20) }}">
                            </div>
                        </div>

                    </div>

                    {{-- Bouton submit --}}
                    <div class="flex justify-end">
                        <x-ui.loading-button type="submit" form="form_order"
                            class="kt-btn-primary w-full"
                            loadingText="{{ __('ui.states.saving') }}">
                            <i class="ki-outline ki-file text-sm"></i>
                            Générer le bon de commande PDF
                        </x-ui.loading-button>
                    </div>

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

        {{-- ====== RÉCAP (1/3) ====== --}}
        <div class="col-span-1 flex flex-col gap-5">

            <div class="kt-card p-5 flex flex-col gap-3">
                <h3 class="text-sm font-semibold text-secondary-foreground uppercase">Informations</h3>

                <div class="flex items-center justify-between my-1 gap-2">
                    <span class="text-xs text-secondary-foreground uppercase font-semibold">Client :</span>
                    <span class="kt-badge kt-badge-xs kt-badge-outline">{{ $operation->customer?->name }}</span>
                </div>
                <div class="border-t border-input border-dashed"></div>

                @if ($operation->media)
                <div class="flex items-center justify-between my-1 gap-2">
                    <span class="text-xs text-secondary-foreground uppercase font-semibold">Média :</span>
                    <span class="kt-badge kt-badge-xs kt-badge-outline kt-badge-info">{{ $operation->media->name }}</span>
                </div>
                <div class="border-t border-input border-dashed"></div>
                @endif

                <div class="flex items-center justify-between my-1 gap-2">
                    <span class="text-xs text-secondary-foreground uppercase font-semibold">Date opération :</span>
                    <span class="text-xs text-secondary-foreground">{{ $operation->publish_date }}</span>
                </div>
                <div class="border-t border-input border-dashed"></div>

                <div class="flex items-center justify-between my-1 gap-2">
                    <span class="text-xs text-secondary-foreground uppercase font-semibold">Commercial :</span>
                    <span class="kt-badge kt-badge-xs kt-badge-outline">{{ $operation->user?->firstname }}</span>
                </div>
                <div class="border-t border-input border-dashed"></div>

                <div class="flex items-center justify-between my-1 gap-2">
                    <span class="text-xs text-secondary-foreground uppercase font-semibold">Frais Média :</span>
                    <span class="text-xs font-semibold text-mono">{{ number_format($operation->costing_price ?? 0, 2, ',', ' ') }} €</span>
                </div>
                <div class="border-t border-input border-dashed"></div>

                <div class="flex items-center justify-between my-1 gap-2">
                    <span class="text-xs text-secondary-foreground uppercase font-semibold">Frais Agence :</span>
                    <span class="text-xs font-semibold text-mono">{{ number_format($operation->agency_fees ?? 0, 2, ',', ' ') }} €</span>
                </div>
                <div class="border-t border-input border-dashed"></div>

                <div class="flex items-center justify-between my-1 gap-2">
                    <span class="text-xs text-secondary-foreground uppercase font-semibold">Prix Total :</span>
                    <span class="text-xs font-semibold text-mono">{{ number_format($operation->total_price ?? 0, 2, ',', ' ') }} €</span>
                </div>
            </div>

            {{-- Critères --}}
            @if ($operation->type?->operationCriterias->isNotEmpty())
            <div class="kt-card p-5 flex flex-col gap-3">
                <h3 class="text-sm font-semibold text-secondary-foreground uppercase">Critères</h3>
                @foreach ($operation->type->operationCriterias as $criteria)
                    @php $value = $infosByCriteria[$criteria->id]->content ?? ''; @endphp
                    @if ($value)
                    <div class="flex items-start justify-between gap-2">
                        <span class="text-xs text-secondary-foreground font-semibold">{{ $criteria->name }} :</span>
                        <span class="text-xs text-secondary-foreground text-right">{{ $value }}</span>
                    </div>
                    <div class="border-t border-input border-dashed"></div>
                    @endif
                @endforeach
            </div>
            @endif

        </div>

    </div>
</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 () {
    const snConfig = {
        height: 180,
        toolbar: [
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['para', ['ul', 'ol']],
            ['custom', ['removeInlineStyles']],
            ['view', ['codeview']],
        ],
        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_object').summernote(snConfig);
    $('#sn_media').summernote(snConfig);
    $('#sn_partner').summernote(snConfig);
    $('#sn_billing').summernote(snConfig);

});
</script>
@endpush