@extends('layouts.app')

@section('title', 'Edit Product – Social Networks')

@section('content')
<div class="social-networks-page products-form-page">
    <p class="setting-back">
        <a href="{{ route('social-networks.products.index') }}">← Products</a>
    </p>
    <header class="setting-header">
        <h1>Edit product</h1>
        <p class="setting-subtitle">Update product details. The bot uses the description (plain text) to answer customers.</p>
    </header>

    @if ($errors->any())
        <div class="alert alert-error">
            <ul style="margin: 0; padding-left: 1.25rem;">
                @foreach ($errors->all() as $e)
                    <li>{{ $e }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <section class="setting-section setting-card products-form-card">
        <form action="{{ route('social-networks.products.update', $product) }}" method="POST" class="marketing-settings-form" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            @include('social_networks.products._form', ['product' => $product])
            <div class="marketing-settings-actions">
                <button type="submit" class="btn btn-primary">Save</button>
                <a href="{{ route('social-networks.products.index') }}" class="btn btn-secondary" style="margin-left: 0.5rem;">Cancel</a>
            </div>
        </form>
    </section>
</div>
@push('styles')
<style>
.products-form-page .setting-back { margin-bottom: 1rem; }
.products-form-page .setting-back a { color: #4b5563; text-decoration: none; }
.products-form-page .setting-back a:hover { color: #111; text-decoration: underline; }
.products-form-card { max-width: none; width: 100%; }
.setting-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.5rem; }
.marketing-settings-grid { display: flex; flex-direction: column; gap: 1rem; }
.marketing-settings-row { display: flex; flex-direction: column; gap: 0.25rem; }
.marketing-settings-label { font-weight: 600; font-size: 0.9rem; color: #374151; }
.marketing-settings-input { padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 1rem; max-width: 100%; }
.marketing-settings-hint { font-size: 0.8rem; color: #6b7280; }
.marketing-settings-actions { margin-top: 1.25rem; }
.product-media-current { margin-bottom: 0.75rem; }
.product-media-preview { display: block; border-radius: 8px; border: 1px solid #e5e7eb; background: #f9fafb; }
.product-media-preview-image { max-width: 320px; max-height: 240px; object-fit: contain; }
.product-media-preview-video { max-width: 400px; max-height: 280px; width: 100%; }
</style>
@endpush
@endsection