@extends('layouts.app')


@php
    $mainClass = 'lg:w-[80%] w-full flex flex-col bg-[#f7f7f7]'
@endphp

@section('title', 'مدیریت تبلیغات | نیکس فایل')

@section('aside-content')
    <aside class=" w-full lg:w-[20%] flex flex-col mb-4">
        <div class="bg-primary-color text-white text-left py-8">
            @include('components.header')
        </div>
        @include('components.admin-panel-sidebar')
    </aside>
@endsection

@section('content')
    <div class="container mx-auto w-[80%]">

        <div>

        </div>

        @if(session('success'))
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4 text-right my-4">
                {{ session('success') }}
            </div>
        @endif

        <div class="flex justify-between items-center bg-white shadow-custom py-2 px-4 rounded-md my-8">
            <p>
                جدول بنر ها
            </p>

            <a href="{{route('banner.create')}}"
               class=" py-2 text-white rounded-md bg-primary-color hover:text-white transition-all px-8
                text-center hover:border-white hover:cursor-pointer hover:bg-primary-color/90 logout-button">
                افزودن بنر جدید
            </a>
        </div>

        <div class="overflow-x-auto">
            <table id="bannerTable" class="min-w-full bg-white shadow-md rounded-lg overflow-hidden mb-8 text-center">
                <thead>
                <tr class="bg-primary-color text-white">
                    <th class="py-2 px-4 font-normal text-white">ID</th>
                    <th class="py-2 px-4 font-normal text-white">عملیات</th>
                    <th class="py-2 px-4 font-normal text-white">لینک</th>
                    <th class="py-2 px-4 font-normal text-white"> تصویر</th>
                </tr>
                </thead>
                <tbody class="text-gray-700">
                @foreach($banners as $banner)
                    <tr class="border-b hover:bg-gray-50 text-center">
                        <td class="py-2 px-4">{{ $banner->id }}</td>
                        <td class="py-2 px-4 inline-flex items-center gap-1 justify-center min-h-[113px]">
                            <a href="{{ route('banner.edit', $banner->id) }}"
                               class="text-red-600 hover:underline border border-primary-color inline-flex items-center
                                justify-center rounded-md p-2 gap-2 !no-underline text-sm hover:bg-primary-color hover:text-white transition-all duration-300">
                                ویرایش
                                <i class="fa-solid fa-edit"></i>
                            </a>
                            <form action="{{ route('banner.destroy', $banner->id) }}" method="POST"
                                  onsubmit="return confirm('آیا مطمئن هستید که می‌خواهید این تبلیغ را حذف کنید؟');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-red-600 hover:underline border border-primary-color inline-flex items-center
                                 justify-center rounded-md p-2 gap-2 !no-underline text-sm hover:bg-primary-color hover:text-white transition-all duration-300">
                                    حذف
                                    <i class="fa-solid fa-trash"></i>
                                </button>
                            </form>
                        </td>
                        <td>
                            <a href="{{$banner->banner_redirect_link}}"
                               style="direction: ltr; unicode-bidi: embed;"
                               class="hover:text-primary-color transition-all duration-300">{{$banner->banner_redirect_link}}</a>
                        </td>
                        <td class="py-2 px-4">
                            <a href="{{ $banner->banner_redirect_ }}" target="_blank">
                                <img
                                        src="{{asset('storage/' . $banner->banner_image_file)}}"
                                        alt="image-preview"
                                        class="w-80 rounded-lg h-24 object-cover mx-auto"
                                >
                            </a>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endsection