@extends('admin.layout')

@section('content')
<div class="max-w-4xl mx-auto p-8 bg-white rounded-2xl shadow-lg border border-gray-100">

    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
            <i class="fa-solid fa-images text-blue-600"></i>
            {{ $slider->exists ? 'Edit Slider' : 'Tambah Slider' }}
        </h1>

        <a href="{{ route('admin.slider.index') }}"
            class="text-gray-500 hover:text-blue-600">
            <i class="fa-solid fa-arrow-left"></i>
            Kembali
        </a>
    </div>

    <form method="POST"
        action="{{ $slider->exists ? route('admin.slider.update',$slider->id) : route('admin.slider.store') }}"
        enctype="multipart/form-data">

        @csrf

        @if($slider->exists)
            @method('PUT')
        @endif

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

            <div>

                <label class="font-semibold block mb-2">
                    Judul
                </label>

                <input
                    type="text"
                    name="judul"
                    value="{{ old('judul',$slider->judul) }}"
                    class="w-full border rounded-xl p-3">

            </div>

            <div>

                <label class="font-semibold block mb-2">
                    Urutan
                </label>

                <input
                    type="number"
                    name="urutan"
                    value="{{ old('urutan',$slider->urutan ?? 1) }}"
                    class="w-full border rounded-xl p-3">

            </div>

        </div>

        <div class="mt-5">

            <label class="font-semibold block mb-2">
                Sub Judul
            </label>

            <textarea
                name="subjudul"
                rows="3"
                class="w-full border rounded-xl p-3">{{ old('subjudul',$slider->subjudul) }}</textarea>

        </div>

        <div class="grid grid-cols-2 gap-6 mt-5">

            <div>

                <label class="font-semibold block mb-2">
                    Tulisan Tombol
                </label>

                <input
                    type="text"
                    name="button_text"
                    value="{{ old('button_text',$slider->button_text) }}"
                    class="w-full border rounded-xl p-3">

            </div>

            <div>

                <label class="font-semibold block mb-2">
                    Link Tujuan
                </label>

                <input
                    type="text"
                    name="button_link"
                    value="{{ old('button_link',$slider->button_link) }}"
                    placeholder="https://... atau /artikel/slug"
                    class="w-full border rounded-xl p-3">

            </div>

        </div>

        <div class="grid grid-cols-2 gap-6 mt-5">

            <div>

                <label class="font-semibold block mb-2">
                    Target Link
                </label>

                <select
                    name="button_target"
                    class="w-full border rounded-xl p-3">

                    <option value="_self"
                        {{ old('button_target',$slider->button_target)=='_self'?'selected':'' }}>
                        Halaman yang sama
                    </option>

                    <option value="_blank"
                        {{ old('button_target',$slider->button_target)=='_blank'?'selected':'' }}>
                        Tab Baru
                    </option>

                </select>

            </div>

            <div>

                <label class="font-semibold block mb-2">
                    Status
                </label>

                <select
                    name="status"
                    class="w-full border rounded-xl p-3">

                    <option value="1"
                        {{ old('status',$slider->status)==1?'selected':'' }}>
                        Aktif
                    </option>

                    <option value="0"
                        {{ old('status',$slider->status)==0?'selected':'' }}>
                        Non Aktif
                    </option>

                </select>

            </div>

        </div>

        <div class="mt-5">

            <label class="font-semibold block mb-2">
                Gambar Slider
            </label>

            <input
                type="file"
                name="gambar"
                class="w-full border rounded-xl p-3">

            @if($slider->gambar)

                <img
                    src="{{ asset('storage/'.$slider->gambar) }}"
                    class="mt-4 rounded-xl h-48">

            @endif

        </div>

        <div class="flex justify-end mt-8">

            <button
                class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-xl">

                <i class="fa fa-save"></i>

                Simpan

            </button>

        </div>

    </form>

</div>
@endsection