@extends('layouts.admin')

@section('content')
    <style>
        .form-range {
            width: 100%;
        }
    </style>

    <div class="container">
        <h1>Add New Banner</h1>

        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        <form action="{{ route('banners.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="form-group">
                <label for="image">Banner Image</label>
                <input type="file" name="image" id="image" class="form-control" required>
            </div>

            <div class="form-group">
                <label for="url">URL</label>
                <input type="text" name="url" id="url" class="form-control" value="#" required>
            </div>

            <div class="form-group">
                <label for="group_id">Group ID</label>
                <input type="range" name="group_id" id="group_id" class="form-range" min="1" max="8" value="1" oninput="this.nextElementSibling.value = this.value">
                <output>1</output>
            </div>

            <button type="submit" class="btn btn-primary">Add Banner</button>
        </form>
    </div>
@endsection