@extends('layouts.app')


@php
    $mainClass = 'lg:w-[80%] w-full flex flex-col bg-[#f7f7f7]'
@endphp

@section('title', 'اضافه کردن تبلیغات | نیکس فایل')

@section('aside-content')
    <aside class=" w-full lg:w-[20%] flex flex-col mb-4">
        <div class="bg-primary-color text-white text-left py-8">
            @include('components.header')
        </div>
        @include('components.admin-panel-sidebar')
    </aside>
@endsection

@section('content')
    <div class="container mx-auto w-[80%] flex justify-center items-center mb-12 grow">


        <div class="shadow-lg bg-white rounded-2xl mt-12 p-8 w-full max-w-md flex flex-col items-center gap-2">
            <h2 class="text-2xl font-semibold text-primary-color mb-4">فرم اضافه کردن تبلیغات</h2>

            <form action="{{ route('ad.store') }}" method="POST" enctype="multipart/form-data"
                  class="w-full flex flex-col gap-4">
                @csrf
                <!-- Image Preview -->
                <img id="image_preview" src="#" alt="Image Preview"
                     class="mt-4 rounded-xl w-full hidden max-h-[400px] max-w-full overflow-hidden object-cover object-center"/>
                <!-- Picture File Input with Preview -->
                <div class="flex flex-col gap-2">
                    <label for="picture_file" class="text-gray-700 font-medium">آپلود عکس</label>
                    <div class="relative w-full">
                        <input
                                type="file"
                                name="picture_file"
                                id="picture_file"
                                class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
                                accept="image/*"
                                onchange="previewImage(event)"
                        >
                        <label for="picture_file"
                               class="bg-primary-color text-white text-center py-2 rounded-lg w-full block cursor-pointer hover:border-red-500 transition duration-200">
                            آپلود عکس
                        </label>
                    </div>
                </div>
                @error('picture_file')
                <p class="text-red-500 bg-red-100 rounded-md text-sm mt-1 p-4">{{ $message }}</p>
                @enderror
                <!-- Redirect Link Input -->
                <div class="flex flex-col gap-2">
                    <label for="redirect_link" class="text-gray-700 font-medium">آدرس سایت</label>
                    <input
                            type="text"
                            name="redirect_link"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#eb4334] transition duration-200"
                            placeholder="لینک سایت را وارد کنید"
                    >
                </div>
                @error('redirect_link')
                <p class="text-red-500 bg-red-100 rounded-md text-sm mt-1 p-4">{{ $message }}</p>
                @enderror
                <!-- Submit Button -->
                <div class="flex justify-center gap-2 mt-2">
                    <button
                            type="submit"
                            class="hover:bg-primary-color text-primary-color bg-white border border-primary-color hover:text-white py-2 rounded-lg font-semibold transition duration-200 px-4 w-full"
                    >
                        اضافه کردن تبلیغ
                    </button>
                    <a
                            href="{{ route('ad.index') }}"
                            class="bg-secondary-color text-white py-2 rounded-lg font-semibold hover:bg-red-600 transition duration-200 text-center px-4 w-full"
                    >
                        بازگشت
                    </a>
                </div>

            </form>

            <!-- JavaScript for Image Preview -->
            <script>
                function previewImage(event) {
                    const reader = new FileReader();
                    reader.onload = function () {
                        const preview = document.getElementById('image_preview');
                        preview.src = reader.result;
                        preview.classList.remove('hidden'); // Make the preview image visible
                    };
                    reader.readAsDataURL(event.target.files[0]);
                }
            </script>

        </div>

    </div>
@endsection