@extends('admin.layout.index')
@section('title', 'Slider Düzenle')
@section('content')
    <section class="content-body">
        <form action="" class="form-container" enctype="multipart/form-data" method="POST">
            @csrf
            <div class="grid grid-cols-12 gap-4">
                <div class="form-item col-span-9">
                    <label for="desktop_image"> Masaüstü Görseli </label>
                    <input type="hidden" name="desktop_image_old" value="{{ $data->desktop_image }}">
                    <input type="file" id="desktop_image" name="desktop_image">
                </div>
                <div class="col-span-3">
                    <img src="{{ site('public/upload/desktop_image/' . $data->desktop_image ) }}" class="mt-[32px] rounded-lg" alt="">
                </div>
            </div>

            <div class="grid grid-cols-12 gap-4">
                <div class="form-item col-span-9">
                    <label for="mobile_image"> Mobil Görseli </label>
                    <input type="hidden" name="mobile_image_old" value="{{ $data->mobile_image }}">
                    <input type="file" id="image" name="mobile_image">
                </div>
                <div class="col-span-3">
                    <img src="{{ site('public/upload/mobile_image/' . $data->mobile_image ) }}" class="mt-[32px] rounded-lg" alt="">
                </div>
            </div>
            <div class="form-item">
                <label for="url">Link</label>
                <input type="text" id="url" name="url" value="{{ $data->url }}">
            </div>
            <div class="form-item">
                <label for="rank">Sıra [{{ $data->rank }}]</label>
                <input type="range" id="rank" name="rank" min="0" max="200" value="{{ $data->rank }}" 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