@extends('layouts.app')

@section('title', 'Add 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>Add product</h1>
        <p class="setting-subtitle">Add a product that is not on the website. The bot will use this to answer questions about custom pieces, watches, and grillz. Use the description field for all options and prices (plain text).</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.store') }}" method="POST" class="marketing-settings-form" enctype="multipart/form-data">
            @csrf
            @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