@extends('layouts.admin-layout')
@section('title', 'All About')
@section('content')
    <div class="container">
        <h2 class="mt-4 text-center">Banners Management</h2>

        {{-- Blog Banner --}}
        <div class="card mt-4">
            <div class="card-header bg-primary text-white">
                <h4 class="mb-0">Blog Banner</h4>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.blog.banners.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group">
                        <label for="heading">Heading</label>
                        <input type="text" name="heading" class="form-control" value="{{ $blogBanner->heading ?? '' }}" placeholder="Enter Heading" required>
                    </div>
                    <div class="form-group">
                        <label for="image">Banner Image</label>
                        <input type="file" name="image" class="form-control" accept="image/*" onchange="previewImage(event, 'blog')">
                    </div>
                    <div class="form-group">
                        <img id="blog_preview"
                             src="{{ isset($blogBanner) && $blogBanner->getFirstMediaUrl('banner') ? $blogBanner->getFirstMediaUrl('banner') : asset('front/images/innerbnr1.png') }}"
                             alt="Image Preview"
                             style="width: 50%; height: 50%; margin-top: 10px;">


                    </div>
                    <button type="submit" class="btn btn-success">Submit</button>
                </form>
            </div>
        </div>
        <hr>

        {{-- Shop Banner --}}
        <div class="card mt-4">
            <div class="card-header bg-primary text-white">
                <h4 class="mb-0">Shop Banner</h4>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.shop.banners.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group">
                        <label for="heading">Heading</label>
                        <input type="text" name="heading" class="form-control" value="{{ $shopBanner->heading ?? '' }}" placeholder="Enter Heading" required>
                    </div>
                    <div class="form-group">
                        <label for="image">Banner Image</label>
                        <input type="file" name="image" class="form-control" accept="image/*" onchange="previewImage(event, 'shop')">
                    </div>
                    <div class="form-group">
                        <img id="blog_preview"
                             src="{{ isset($shopBanner) && $shopBanner->getFirstMediaUrl('banner') ? $shopBanner->getFirstMediaUrl('banner') : asset('front/images/innerbnr1.png') }}"
                             alt="Image Preview"
                             style="width: 50%; height: 50%; margin-top: 10px;">
                    </div>
                    <button type="submit" class="btn btn-success">Submit</button>
                </form>
            </div>
        </div>
        <hr>

        {{-- Product Banner --}}
        <div class="card mt-4">
            <div class="card-header bg-primary text-white">
                <h4 class="mb-0">Product Banner</h4>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.product.banners.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group">
                        <label for="heading">Heading</label>
                        <input type="text" name="heading" class="form-control" value="{{ $productBanner->heading ?? '' }}" placeholder="Enter Heading" required>
                    </div>
                    <div class="form-group">
                        <label for="image">Banner Image</label>
                        <input type="file" name="image" class="form-control" accept="image/*" onchange="previewImage(event, 'product')">
                    </div>
                    <div class="form-group">
                        <img id="blog_preview"
                             src="{{ isset($productBanner) && $productBanner->getFirstMediaUrl('banner') ? $productBanner->getFirstMediaUrl('banner') : asset('front/images/innerbnr1.png') }}"
                             alt="Image Preview"
                             style="width: 50%; height: 50%; margin-top: 10px;">
                    </div>
                    <button type="submit" class="btn btn-success">Submit</button>
                </form>
            </div>
        </div>
        <hr>

        {{-- About Banner --}}
        <div class="card mt-4">
            <div class="card-header bg-primary text-white">
                <h4 class="mb-0">About Banner</h4>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.about.banners.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group">
                        <label for="heading">Heading</label>
                        <input type="text" name="heading" class="form-control" value="{{ $aboutBanner->heading ?? '' }}" placeholder="Enter Heading" required>
                    </div>
                    <div class="form-group">
                        <label for="image">Banner Image</label>
                        <input type="file" name="image" class="form-control" accept="image/*" onchange="previewImage(event, 'about')">
                    </div>
                    <div class="form-group">
                        <img id="blog_preview"
                             src="{{ isset($aboutBanner) && $aboutBanner->getFirstMediaUrl('banner') ? $aboutBanner->getFirstMediaUrl('banner') : asset('front/images/innerbnr1.png') }}"
                             alt="Image Preview"
                             style="width: 50%; height: 50%; margin-top: 10px;">
                    </div>
                    <button type="submit" class="btn btn-success">Submit</button>
                </form>
            </div>
        </div>
        <hr>

        {{-- Contact Banner --}}
        <div class="card mt-4">
            <div class="card-header bg-primary text-white">
                <h4 class="mb-0">Contact Banner</h4>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.contact.banners.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group">
                        <label for="heading">Heading</label>
                        <input type="text" name="heading" class="form-control" value="{{ $contactBanner->heading ?? '' }}" placeholder="Enter Heading" required>
                    </div>
                    <div class="form-group">
                        <label for="image">Banner Image</label>
                        <input type="file" name="image" class="form-control" accept="image/*" onchange="previewImage(event, 'contact')">
                    </div>
                    <div class="form-group">
                        <img id="blog_preview"
                             src="{{ isset($contactBanner) && $contactBanner->getFirstMediaUrl('banner') ? $contactBanner->getFirstMediaUrl('banner') : asset('front/images/innerbnr1.png') }}"
                             alt="Image Preview"
                             style="width: 50%; height: 50%; margin-top: 10px;">                    </div>
                    <button type="submit" class="btn btn-success">Submit</button>
                </form>
            </div>
        </div>
        <hr>

        {{-- Wholesale Banner --}}
{{--        <div class="card mt-4">--}}
{{--            <div class="card-header bg-primary text-white">--}}
{{--                <h4 class="mb-0">Wholesale Banner</h4>--}}
{{--            </div>--}}
{{--            <div class="card-body">--}}
{{--                <form action="{{ route('admin.wholesale.banners.store') }}" method="POST" enctype="multipart/form-data">--}}
{{--                    @csrf--}}
{{--                    <div class="form-group">--}}
{{--                        <label for="heading">Heading</label>--}}
{{--                        <input type="text" name="heading" class="form-control" value="{{ $wholesaleBanner->heading ?? '' }}" placeholder="Enter Heading" required>--}}
{{--                    </div>--}}
{{--                    <div class="form-group">--}}
{{--                        <label for="image">Banner Image</label>--}}
{{--                        <input type="file" name="image" class="form-control" accept="image/*" onchange="previewImage(event, 'wholesale')">--}}
{{--                    </div>--}}
{{--                    <div class="form-group">--}}
{{--                        <img id="blog_preview"--}}
{{--                             src="{{ isset($wholesaleBanner) && $wholesaleBanner->getFirstMediaUrl('banner') ? $wholesaleBanner->getFirstMediaUrl('banner') : asset('front/images/innerbnr1.png') }}"--}}
{{--                             alt="Image Preview"--}}
{{--                             style="width: 50%; height: 50%; margin-top: 10px;">                      </div>--}}
{{--                    <button type="submit" class="btn btn-success">Submit</button>--}}
{{--                </form>--}}
{{--            </div>--}}
{{--        </div>--}}
    </div>






    <script>
        function previewImage(event, page) {
            const preview = document.getElementById(page + '_preview');
            const file = event.target.files[0];
            const reader = new FileReader();

            reader.onload = function () {
                preview.src = reader.result;
                preview.style.display = 'block';
            };

            if (file) {
                reader.readAsDataURL(file);
            } else {
                preview.src = '#';
                preview.style.display = 'none';
            }
        }
    </script>

@endsection