@extends('layouts.app')

@section('title', 'Ajouter un produit')

@push('styles')
<style>
    .food-create-shell {
        max-width: 1040px;
        margin: 0 auto;
        padding: 0.9rem 0.85rem 1.5rem;
    }

    .food-create-hero,
    .food-create-card,
    .food-create-actions {
        border: 1px solid rgba(251, 191, 36, 0.18);
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.06);
    }

    .food-create-hero {
        border-radius: 1.5rem;
        padding: 1rem 1.1rem;
    }

    .food-create-card {
        border-radius: 1.35rem;
        padding: 1rem;
    }

    .food-create-actions {
        border-radius: 1.15rem;
        padding: 0.7rem;
    }

    .food-create-card-head {
        margin-bottom: 0.9rem;
    }

    .food-create-card-head p {
        margin-top: 0.2rem;
    }

    .food-create-field-note {
        margin-top: 0.35rem;
        font-size: 0.76rem;
        color: rgb(107 114 128);
    }

    .food-create-upload {
        min-height: 188px;
    }

    .food-create-toggle {
        border: 1px solid rgb(253 230 138);
        background: linear-gradient(135deg, rgba(255, 251, 235, 0.95), rgba(255, 247, 237, 0.95));
    }

    .food-create-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.8rem;
    }

    .food-create-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.95);
        padding: 0.45rem 0.7rem;
        font-size: 0.76rem;
        font-weight: 600;
        color: rgb(71 85 105);
    }

    .food-create-kpi {
        border: 1px solid rgb(254 215 170);
        background: linear-gradient(135deg, rgba(255, 247, 237, 0.95), rgba(255, 251, 235, 0.96));
    }

    .food-create-payment {
        border: 1px solid rgb(191 219 254);
        background: linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(248, 250, 252, 0.97));
    }

    @media (max-width: 640px) {
        .food-create-shell {
            padding: 0.75rem 0.7rem 1rem;
        }

        .food-create-hero {
            border-radius: 1.1rem;
            padding: 0.85rem 0.9rem;
        }

        .food-create-card {
            border-radius: 1rem;
            padding: 0.85rem;
        }

        .food-create-actions {
            position: sticky;
            bottom: calc(env(safe-area-inset-bottom, 0px) + 0.55rem);
            z-index: 20;
            border-radius: 1rem;
            padding: 0.55rem;
            backdrop-filter: blur(12px);
            background: rgba(255, 255, 255, 0.96);
        }

        .food-create-upload {
            min-height: 154px;
        }

        .food-create-badges {
            gap: 0.4rem;
        }

        .food-create-badge {
            padding: 0.38rem 0.62rem;
            font-size: 0.72rem;
        }
    }
</style>
@endpush

@section('content')
<div class="min-h-screen bg-gradient-to-br from-orange-50 via-white to-amber-50">
    <div class="food-create-shell">
        <div class="food-create-hero mb-4">
            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <div class="flex items-start gap-3">
                    <a href="{{ route('prestataire.food-products.index') }}" class="inline-flex h-11 w-11 items-center justify-center rounded-2xl border border-orange-100 bg-white text-gray-600 transition hover:bg-orange-50">
                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                        </svg>
                    </a>
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-orange-500">Cuisine</p>
                        <h1 class="mt-1 text-2xl font-bold text-slate-900 sm:text-3xl">Nouveau produit food</h1>
                        <p class="mt-1 text-sm text-slate-600">Formulaire plus compact pour gerer photo, recette, options et paiement sans gros blocs.</p>
                    </div>
                </div>

                <div class="food-create-badges">
                    <span class="food-create-badge">Photo</span>
                    <span class="food-create-badge">Recette</span>
                    <span class="food-create-badge">Supplements</span>
                    <span class="food-create-badge">Paiement</span>
                </div>
            </div>
        </div>

        @if($errors->any())
            <div class="mb-4 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 shadow-sm">
                <p class="font-semibold">Le produit n'a pas ete enregistre.</p>
                <div class="mt-1 space-y-1">
                    @foreach($errors->all() as $error)
                        <p>{{ $error }}</p>
                    @endforeach
                </div>
            </div>
        @endif

        @php
            $commissionRate = \App\Services\CommissionService::ratePercent('food', 'prestataire');
            $stripeFeePercent = (float) get_setting('stripe_fee_percent', '1.4');
            $stripeFeeFixed = (float) get_setting('stripe_fee_fixed', '0.25');
            $cashOnlyMode = function_exists('cash_only_mode') && cash_only_mode();
        @endphp

        <form action="{{ route('prestataire.food-products.store') }}" method="POST" enctype="multipart/form-data" class="space-y-4">
            @csrf

            <section class="food-create-card">
                <div class="food-create-card-head">
                    <h2 class="text-lg font-semibold text-slate-900">Produit</h2>
                    <p class="text-sm text-slate-600">Nom, categorie, prix, image et informations visibles sur la carte client.</p>
                </div>

                <div class="grid gap-4 xl:grid-cols-[minmax(0,1.45fr)_320px]">
                    <div class="space-y-4">
                        <div>
                            <label class="mb-2 block text-sm font-semibold text-gray-700">
                                Nom du produit <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="name" value="{{ old('name') }}" required
                                class="w-full rounded-xl border border-gray-300 px-4 py-3 text-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-500"
                                placeholder="Ex: Pizza margherita, Tiramisu speculoos...">
                            @error('name')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="grid gap-4 sm:grid-cols-2">
                            <div>
                                <label class="mb-2 block text-sm font-semibold text-gray-700">
                                    Categorie <span class="text-red-500">*</span>
                                </label>
                                <select name="category" required
                                    class="w-full rounded-xl border border-gray-300 px-4 py-3 text-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-500">
                                    <option value="">Choisir...</option>
                                    <option value="entree" {{ old('category') == 'entree' ? 'selected' : '' }}>Entree</option>
                                    <option value="plat" {{ old('category') == 'plat' ? 'selected' : '' }}>Plat</option>
                                    <option value="dessert" {{ old('category') == 'dessert' ? 'selected' : '' }}>Dessert</option>
                                    <option value="boisson" {{ old('category') == 'boisson' ? 'selected' : '' }}>Boisson</option>
                                    <option value="amuse_bouche" {{ old('category') == 'amuse_bouche' ? 'selected' : '' }}>Amuse-bouche</option>
                                    <option value="gateau" {{ old('category') == 'gateau' ? 'selected' : '' }}>Gateau</option>
                                    <option value="pizza" {{ old('category') == 'pizza' ? 'selected' : '' }}>Pizza</option>
                                    <option value="sandwich" {{ old('category') == 'sandwich' ? 'selected' : '' }}>Sandwich</option>
                                    <option value="salade" {{ old('category') == 'salade' ? 'selected' : '' }}>Salade</option>
                                    <option value="autre" {{ old('category') == 'autre' ? 'selected' : '' }}>Autre</option>
                                </select>
                                @error('category')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label class="mb-2 block text-sm font-semibold text-gray-700">
                                    Prix (€) <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <input type="number" name="price" id="priceInput" value="{{ old('price') }}" required step="0.01" min="0"
                                        class="w-full rounded-xl border border-gray-300 px-4 py-3 pr-11 text-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-500"
                                        placeholder="0.00">
                                    <span class="absolute right-4 top-1/2 -translate-y-1/2 text-sm font-semibold text-gray-500">EUR</span>
                                </div>
                                @error('price')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div>
                            <label class="mb-2 block text-sm font-semibold text-gray-700">Description</label>
                            <textarea name="description" rows="3"
                                class="w-full rounded-xl border border-gray-300 px-4 py-3 text-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-500"
                                placeholder="Resume court, ingredients, texture, portion...">{{ old('description') }}</textarea>
                            @error('description')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="grid gap-4 sm:grid-cols-2">
                            <div>
                                <label class="mb-2 block text-sm font-semibold text-gray-700">Temps de preparation</label>
                                <input type="number" name="preparation_time" value="{{ old('preparation_time') }}" min="1"
                                    class="w-full rounded-xl border border-gray-300 px-4 py-3 text-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-500"
                                    placeholder="15 min">
                                @error('preparation_time')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label class="mb-2 block text-sm font-semibold text-gray-700">Stock direct</label>
                                <input type="number" name="stock" value="{{ old('stock') }}" min="0"
                                    class="w-full rounded-xl border border-gray-300 px-4 py-3 text-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-500"
                                    placeholder="Vide = illimite">
                                <p class="food-create-field-note">Utilisez vide si le stock depend uniquement de votre recette et du stock cuisine.</p>
                                @error('stock')
                                    <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="space-y-4">
                        <div>
                            <label class="mb-2 block text-sm font-semibold text-gray-700">Photo du produit</label>
                            <div class="food-create-upload flex cursor-pointer flex-col items-center justify-center rounded-2xl border-2 border-dashed border-orange-200 bg-orange-50/60 px-4 text-center transition hover:border-orange-400 hover:bg-orange-50" id="imageUploadTrigger">
                                <input type="file" name="image" id="image" accept="image/*" class="hidden">
                                <div id="imagePreview" class="hidden mb-3">
                                    <img id="preview" src="" alt="Apercu" class="mx-auto max-h-40 rounded-xl object-cover">
                                </div>
                                <div id="uploadPlaceholder">
                                    <span class="mb-2 block text-3xl">📷</span>
                                    <p class="text-sm font-semibold text-slate-700">Ajouter une photo</p>
                                    <p class="mt-1 text-xs text-slate-500">JPG, PNG ou WebP, max 2 Mo</p>
                                </div>
                            </div>
                            @error('image')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="food-create-toggle rounded-2xl p-4">
                            <label class="flex items-start gap-3">
                                <input type="checkbox" name="is_available" value="1" {{ old('is_available', true) ? 'checked' : '' }}
                                    class="mt-0.5 h-5 w-5 rounded border-gray-300 text-orange-500 focus:ring-orange-500">
                                <span>
                                    <span class="block text-sm font-semibold text-slate-800">Visible a la commande</span>
                                    <span class="mt-1 block text-xs text-slate-600">Le produit apparait tout de suite dans votre menu client.</span>
                                </span>
                            </label>
                        </div>
                    </div>
                </div>
            </section>

            <section class="food-create-card">
                <div class="food-create-card-head">
                    <h2 class="text-lg font-semibold text-slate-900">Commande & disponibilite</h2>
                    <p class="text-sm text-slate-600">Reglez les delais si le produit n'est pas prepare le jour meme.</p>
                </div>

                <div class="rounded-2xl border border-amber-200 bg-amber-50/80 p-4">
                    <label class="flex items-start gap-3">
                        <input
                            type="checkbox"
                            id="isPreorderOnly"
                            name="is_preorder_only"
                            value="1"
                            {{ old('is_preorder_only') ? 'checked' : '' }}
                            class="mt-0.5 h-5 w-5 rounded border-gray-300 text-amber-500 focus:ring-amber-500"
                        >
                        <span>
                            <span class="block text-sm font-semibold text-slate-800">Produit sur commande / en gros</span>
                            <span class="mt-1 block text-xs text-slate-600">Le client devra choisir une date future selon votre delai minimum.</span>
                        </span>
                    </label>

                    <div id="preorderFields" class="mt-4 {{ old('is_preorder_only') ? '' : 'hidden' }}">
                        <label class="mb-2 block text-sm font-semibold text-gray-700">Delai minimum avant retrait ou livraison</label>
                        <select
                            name="min_preorder_days"
                            class="w-full rounded-xl border border-gray-300 px-4 py-3 text-sm focus:border-amber-500 focus:ring-2 focus:ring-amber-500"
                        >
                            <option value="">Choisir un delai</option>
                            @for($day = 1; $day <= 30; $day++)
                                <option value="{{ $day }}" {{ (string) old('min_preorder_days') === (string) $day ? 'selected' : '' }}>
                                    {{ $day }} jour{{ $day > 1 ? 's' : '' }} minimum
                                </option>
                            @endfor
                        </select>
                        @error('min_preorder_days')
                            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                        <p class="food-create-field-note">Exemple: 3 jours = commande possible a partir de J+3.</p>
                    </div>
                </div>
            </section>

            <div id="earningsPreview" class="food-create-card food-create-kpi hidden">
                <div class="food-create-card-head">
                    <h2 class="text-lg font-semibold text-slate-900">Apercu de vos gains</h2>
                    <p class="text-sm text-slate-600">Estimation rapide apres frais de paiement et commission.</p>
                </div>

                <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
                    <div class="rounded-2xl bg-white px-4 py-3 shadow-sm">
                        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Client paie</p>
                        <p class="mt-1 text-lg font-bold text-slate-900"><span id="clientPays">0.00</span>€</p>
                    </div>
                    <div class="rounded-2xl bg-white px-4 py-3 shadow-sm">
                        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Frais Stripe</p>
                        <p class="mt-1 text-lg font-bold text-purple-600">-<span id="stripeFee">0.00</span>€</p>
                        <p class="mt-1 text-[11px] text-slate-500">{{ $stripeFeePercent }}% + {{ number_format($stripeFeeFixed, 2) }}€</p>
                    </div>
                    <div class="rounded-2xl bg-white px-4 py-3 shadow-sm">
                        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Commission</p>
                        <p class="mt-1 text-lg font-bold text-orange-500">-<span id="commissionAmount">0.00</span>€</p>
                        <p class="mt-1 text-[11px] text-slate-500">TaPrestation {{ $commissionRate }}%</p>
                    </div>
                    <div class="rounded-2xl border border-orange-300 bg-white px-4 py-3 shadow-sm">
                        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Vous recevez</p>
                        <p class="mt-1 text-xl font-bold text-orange-600"><span id="youReceive">0.00</span>€</p>
                    </div>
                </div>
            </div>

            @include('prestataire.food-products.partials.inventory-builder')
            @include('prestataire.food-products.partials.options-builder')

            <section class="food-create-card food-create-payment">
                <div class="food-create-card-head">
                    <h2 class="text-lg font-semibold text-slate-900">Paiement</h2>
                    <p class="text-sm text-slate-600">Choisissez comment le client regle ce produit.</p>
                </div>

                @if($cashOnlyMode)
                    <input type="hidden" name="payment_policy" value="cash">
                    <input type="hidden" name="deposit_percent" value="0">

                    <div class="rounded-2xl border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800">
                        <p class="font-semibold">Paiement en ligne desactive</p>
                        <p class="mt-1">Ce produit sera propose uniquement en paiement en especes a la remise.</p>
                    </div>
                @else
                    <div class="space-y-4">
                        <div>
                            <label class="mb-2 block text-sm font-semibold text-gray-700">Mode de paiement accepte</label>
                            <select name="payment_policy" id="paymentPolicy"
                                class="w-full rounded-xl border border-gray-300 px-4 py-3 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500">
                                <option value="cash" {{ old('payment_policy', 'cash') == 'cash' ? 'selected' : '' }}>Paiement en especes a la remise</option>
                                <option value="deposit" {{ old('payment_policy') == 'deposit' ? 'selected' : '' }}>Acompte en ligne + solde a la remise</option>
                                <option value="full_prepay" {{ old('payment_policy') == 'full_prepay' ? 'selected' : '' }}>Prepaiement integral en ligne</option>
                            </select>
                            <p class="food-create-field-note">L'acompte ou le prepaiement securise la commande avant preparation.</p>
                            @error('payment_policy')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>

                        <div id="depositPercentField" class="{{ old('payment_policy') == 'deposit' ? '' : 'hidden' }}">
                            <label class="mb-2 block text-sm font-semibold text-gray-700">Pourcentage d'acompte (%)</label>
                            <div class="rounded-2xl border border-blue-200 bg-white px-4 py-4">
                                <div class="flex items-center gap-3">
                                    <input type="range" name="deposit_percent" id="depositRange"
                                        value="{{ old('deposit_percent', 30) }}" min="10" max="100" step="5"
                                        class="h-2 flex-1 cursor-pointer appearance-none rounded-lg bg-gray-200">
                                    <span id="depositValue" class="w-16 text-center text-lg font-bold text-blue-600">{{ old('deposit_percent', 30) }}%</span>
                                </div>
                                <p class="food-create-field-note">Le client paie cet acompte a la commande, puis le reste a la remise.</p>
                            </div>
                            @error('deposit_percent')
                                <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                @endif
            </section>

            <div class="food-create-actions">
                <div class="flex flex-col gap-3 sm:flex-row">
                    <a href="{{ route('prestataire.food-products.index') }}"
                        class="inline-flex flex-1 items-center justify-center rounded-xl border border-slate-200 bg-slate-100 px-4 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-200">
                        Annuler
                    </a>
                    <button type="submit"
                        class="inline-flex flex-1 items-center justify-center gap-2 rounded-xl bg-orange-500 px-4 py-3 text-sm font-semibold text-white transition hover:bg-orange-600">
                        <span>✓</span>
                        <span>Creer le produit</span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
const COMMISSION_RATE = {{ \App\Services\CommissionService::ratePercent('food', 'prestataire') }};
const STRIPE_FEE_PERCENT = {{ (float) get_setting('stripe_fee_percent', '1.4') }};
const STRIPE_FEE_FIXED = {{ (float) get_setting('stripe_fee_fixed', '0.25') }};

function updateEarningsPreview() {
    const priceInput = document.getElementById('priceInput');
    const price = parseFloat(priceInput.value) || 0;
    const preview = document.getElementById('earningsPreview');

    if (price > 0) {
        const stripeFee = Math.round(((price * STRIPE_FEE_PERCENT / 100) + STRIPE_FEE_FIXED) * 100) / 100;
        const commission = Math.round(price * (COMMISSION_RATE / 100) * 100) / 100;
        const youReceive = Math.round((price - stripeFee - commission) * 100) / 100;

        document.getElementById('clientPays').textContent = price.toFixed(2);
        document.getElementById('stripeFee').textContent = stripeFee.toFixed(2);
        document.getElementById('commissionAmount').textContent = commission.toFixed(2);
        document.getElementById('youReceive').textContent = youReceive.toFixed(2);
        preview.classList.remove('hidden');
    } else {
        preview.classList.add('hidden');
    }
}

function previewImage(input) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('preview').src = e.target.result;
            document.getElementById('imagePreview').classList.remove('hidden');
            document.getElementById('uploadPlaceholder').classList.add('hidden');
        };
        reader.readAsDataURL(input.files[0]);
    }
}

function toggleDepositField() {
    const policySelect = document.getElementById('paymentPolicy');
    const depositField = document.getElementById('depositPercentField');
    if (!policySelect || !depositField) {
        return;
    }

    const policy = policySelect.value;
    if (policy === 'deposit') {
        depositField.classList.remove('hidden');
    } else {
        depositField.classList.add('hidden');
    }
}

function togglePreorderFields() {
    const checkbox = document.getElementById('isPreorderOnly');
    const fields = document.getElementById('preorderFields');
    const select = fields ? fields.querySelector('select[name="min_preorder_days"]') : null;

    if (!checkbox || !fields) {
        return;
    }

    if (checkbox.checked) {
        fields.classList.remove('hidden');
    } else {
        fields.classList.add('hidden');
        if (select) {
            select.value = '';
        }
    }
}

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('priceInput')?.addEventListener('input', updateEarningsPreview);
    document.getElementById('isPreorderOnly')?.addEventListener('change', togglePreorderFields);
    document.getElementById('imageUploadTrigger')?.addEventListener('click', function() {
        document.getElementById('image')?.click();
    });
    document.getElementById('image')?.addEventListener('change', function() {
        previewImage(this);
    });
    document.getElementById('paymentPolicy')?.addEventListener('change', toggleDepositField);
    document.getElementById('depositRange')?.addEventListener('input', function() {
        document.getElementById('depositValue').textContent = this.value + '%';
    });

    updateEarningsPreview();
    toggleDepositField();
    togglePreorderFields();
});
</script>
@endpush
@endsection