@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Banner Oluştur' => '/root/banners',
        ],
    ]) !!}
@endsection
@section('content')
    <div class="container-app md:px-20 pb-5 relative">
        <div class="flex justify-end">
            <button id="addBanner" class="button-3">
                <i class="fa-solid fa-plus"></i>
                Banner Ekle
            </button>
        </div>
        <div id="formArea" class="hidden">
            <form action="{{ route('root.bannerStore') }}" method="post" class="grid grid-cols-2 gap-4 mt-6"
                onsubmit="showLoading()">
                @csrf
                <div class="flex flex-col gap-2 col-span-2">
                    <label for="" class="text-gray-300 text-sm font-medium">Banner İçeriğini Giriniz</label>
                    <textarea class="input-2 resize-none" rows="3" type="text" name="title" id="title">{{ old('title') }}</textarea>
                </div>
                <div class="flex flex-col gap-2">
                    <label for="" class="text-gray-300 text-sm font-medium">Başlangıç Tarihi Giriniz</label>
                    <input class="input-2" type="date" name="start_date" id="start_date" value="{{ date('Y-m-d') }}">
                </div>
                <div class="flex flex-col gap-2">
                    <label for="" class="text-gray-300 text-sm font-medium">Bitiş Tarihi Giriniz</label>
                    <input class="input-2" type="date" name="end_date" id="end_date"
                        value="{{ now()->addDays(1)->format('Y-m-d') }}">
                </div>
                <div class="flex flex-col gap-2">
                    <label for="roles[]" class="text-gray-300 text-sm font-medium">
                        Rol Seçiniz
                    </label>
                    <select name="roles[]" multiple class="input-2">
                        @foreach ($roles as $role)
                            <option value="{{ $role->id }}">{{ $role->title }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="flex justify-end col-span-2">
                    <button type="submit" class="button-3">
                        <i class="fa-solid fa-save"></i>
                        Kaydet
                    </button>
                </div>
            </form>
        </div>
        <div class="grid gap-4">
            <div class="mt-6 space-y-4">
                @foreach ($banners as $banner)
                    <div id="accordion-color" data-accordion="collapse" data-active-classes="bg-gray-800 text-white">
                        <h2 id="accordion-color-heading-{{ $loop->index }}">
                            <button type="button"
                                class="flex items-center justify-between w-full p-5 font-medium rtl:text-right border rounded-xl focus:ring-2 focus:ring-blue-800 border-gray-700 text-gray-400 hover:bg-gray-800 gap-3"
                                data-accordion-target="#accordion-color-body-{{ $loop->index }}" aria-expanded="true"
                                aria-controls="accordion-color-body-1">
                                <span class="">{{ $banner->title }}</span>
                                <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="M9 5 5 1 1 5" />
                                </svg>
                            </button>
                        </h2>
                        <div id="accordion-color-body-{{ $loop->index }}" class="hidden"
                            aria-labelledby="accordion-color-heading-{{ $loop->index }}">
                            <div class="p-5 mx-4 border border-b-0 border-gray-700 rounded-b-xl bg-theme_secondary_black">
                                <form id="deleteForm{{ $banner->id }}" onsubmit="showLoading()"
                                    action="{{ route('root.bannerDelete', ['banner' => $banner]) }}" method="post">
                                    @csrf
                                    @method('DELETE')

                                </form>
                                <form id="editBannerForm{{ $banner->id }}" class="grid grid-cols-2 gap-4"
                                    onsubmit="showLoading()"
                                    action="{{ route('root.bannerUpdate', ['banner' => $banner]) }}" method="post">
                                    @csrf
                                    <div class="flex flex-col gap-2 col-span-2">
                                        <label for="" class="text-gray-300 text-sm font-medium">Banner
                                            İçeriği</label>
                                        <textarea class="input-2 resize-none" rows="3" name="title" id="title">{{ $banner->title }}</textarea>
                                    </div>
                                    <div class="flex flex-col gap-2">
                                        <label for="" class="text-gray-300 text-sm font-medium">Başlangıç
                                            Tarihi</label>
                                        <input class="input-2" type="date" name="start_date"
                                            value="{{ $banner->start_date }}" id="start_date">
                                    </div>
                                    <div class="flex flex-col gap-2">
                                        <label for="" class="text-gray-300 text-sm font-medium">Bitiş Tarihi</label>
                                        <input class="input-2" type="date" name="end_date"
                                            value="{{ $banner->end_date }}" id="end_date">
                                    </div>
                                    <div class="flex flex-col gap-2">
                                        <label for="roles[]" class="text-gray-300 text-sm font-medium">
                                            Roller
                                        </label>
                                        <select name="roles[]" multiple class="input-2">
                                            @foreach ($roles as $role)
                                                <option
                                                    {{ in_array($role->id, json_decode($banner->roles) ?? []) ? 'selected' : '' }}
                                                    value="{{ $role->id }}">{{ $role->title }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="flex gap-2 justify-end col-span-2">
                                        <button class="button-3 bg-red-700" form="deleteForm{{ $banner->id }}"
                                            type="submit">
                                            Sil
                                        </button>
                                        <button class="button-3" form="editBannerForm{{ $banner->id }}"
                                            type="submit">
                                            Kaydet
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="">
                {{ $banners->onEachSide(8)->links() }}
            </div>
        </div>
    </div>
    @if (session('error'))
        <x-toast color="red-700">
            <x-slot name="message">
                {{ session('error') }}
            </x-slot>
            <x-slot name="icon">
                <i class="fa-solid fa-exclamation"></i>
            </x-slot>
        </x-toast>
    @endif
    @if (session('success'))
        <x-toast color="green-700">
            <x-slot name="message">
                {{ session('success') }}
            </x-slot>
            <x-slot name="icon">
                <i class="fa-solid fa-check"></i>
            </x-slot>
        </x-toast>
    @endif
    @if ($errors->any())
        @include('components.error-modal-second')
    @endif
    @endsection @section('javascript')
    <script>
        $(document).ready(function() {
            // Accordion click event
            $('[data-accordion-target]').on('click', function() {
                var target = $(this).data('accordion-target');
                var isExpanded = $(this).attr('aria-expanded') === 'true';

                // Toggle accordion body visibility
                $(target).slideToggle(isExpanded);
                $(this).attr('aria-expanded', !isExpanded);
            });
        });

        $('#addBanner').click(function() {
            $('#formArea').slideToggle();
        });
    </script>
@endsection