@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-6">
            <h2 class="text-2xl font-semibold text-primary-color mb-4">فرم اضافه کردن بنر</h2>

            <form action="{{ route('banner.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="banner_image_file" class="text-gray-700 font-medium">آپلود عکس</label>
                    <div class="relative w-full">
                        <input
                                type="file"
                                name="banner_image_file"
                                id="banner_image_file"
                                class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
                                accept="image/*"
                                onchange="previewImage(event)"
                        >
                        <label for="banner_image_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>
                    @error('banner_image_file')
                    <p class="text-red-500 bg-red-100 rounded-md text-sm mt-1 p-4">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Redirect Link Input -->
                <div class="flex flex-col gap-2">
                    <label for="banner_redirect_link" class="text-gray-700 font-medium">آدرس سایت</label>
                    <input
                            type="text"
                            name="banner_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('banner_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('banner.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>
        </div>

    </div>

    <!-- 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');
            };
            reader.readAsDataURL(event.target.files[0]);
        }
    </script>
@endsection