@extends('admin.layout.index')
@section('title', 'Slider Ekle')
@section('content')
    <section class="content-body">
        <form action="" class="form-container" enctype="multipart/form-data" method="POST">
            @csrf
            <div class="form-item">
                <label for="desktop_image">Masaüstü Görseli</label>
                <input type="file" id="desktop_image" name="desktop_image">
            </div>
            <div class="form-item">
                <label for="mobile_image">Mobil Görseli</label>
                <input type="file" id="mobile_image" name="mobile_image">
            </div>
            <div class="form-item">
                <label for="url">Link</label>
                <input type="text" id="url" name="url">
            </div>
            <div class="form-item">
                <label for="rank">Sıra [1]</label>
                <input type="range" id="rank" name="rank" min="0" max="200" value="0" step="1">
            </div>
            <div class="flex items-center justify-end gap-2">
                <button class="border border-gray-300 bg-gray-50 hover:bg-gray-200 px-4 py-2 rounded-md" type="reset"> Sıfırla</button>
                <button class="border border-green-300 bg-green-50 hover:bg-green-200 px-4 py-2 rounded-md"> Kaydet</button>
            </div>
        </form>
    </section>
    <script>
        document.querySelector('input[type="range"]').addEventListener('input', event => {
            document.querySelector('label[for="rank"]').innerHTML = 'Sıra [' + event.target.value + ']';
        })
    </script>
@endsection