@extends('dashboard.layouts.app')

<style>
    .section-title {
        font-size: 1.8rem;
        font-weight: 600;
        color: #023e8a;
        margin-bottom: 1rem;
        text-align: center;
    }

    .form-section {
        padding: 2rem;
    }

    .form-container {
        width: 100%;
        background-color: #f8f9fa;
        padding: 2rem;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 600;
        color: #333;
    }

    .form-input {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid #ccc;
        border-radius: 8px;
        font-size: 1rem;
    }

    .form-input:focus {
        border-color: #0077b6;
        outline: none;
        box-shadow: 0 0 6px rgba(0, 119, 182, 0.3);
    }

    .form-button {
        background-color: #0077b6;
        color: #fff;
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 8px;
        font-size: 1rem;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .form-button:hover {
        background-color: #023e8a;
    }
</style>

@section('content')
    <section class="form-section" data-aos="fade-up">
        <h2 class="section-title">إضافة متجر جديد</h2>

        <form action="#" method="POST" enctype="multipart/form-data" class="form-container">
            @csrf

            <div class="form-group">
                <label for="name" class="form-label">اسم المتجر</label>
                <input type="text" id="name" name="name" class="form-input" required>
            </div>

            <div class="form-group">
                <label for="description" class="form-label">وصف المتجر</label>
                <textarea id="description" name="description" class="form-input" rows="4" required></textarea>
            </div>

            <div class="form-group">
                <label for="image" class="form-label">تحميل صور المتجر والمنتجات</label>
                <input type="file" id="image" name="image" class="form-input" accept="image/*" required>
            </div>

            <div class="form-group">
                <label for="video" class="form-label">تحميل فيديو المتجر</label>
                <input type="file" id="video" name="video" class="form-input" accept="video/*">
            </div>

            <div class="form-group">
                <button type="submit" class="form-button">حفظ</button>
            </div>
        </form>
    </section>
@endsection