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