@extends('admin.layouts.app')
@section('title', __('admins'))

@section('content')
@if ($errors->any())
    <div class="rounded-md flex items-center px-5 py-4 mb-2 bg-theme-31 text-theme-6"> <i data-feather="alert-octagon" class="w-6 h-6 mr-2"></i>
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

@if(session()->has('message'))
    <div class="rounded-md flex items-center px-5 py-4 mb-2 bg-theme-18 text-theme-9"> <i data-feather="alert-triangle" class="w-6 h-6 mr-2"></i> {{ session()->get('message') }} </div>
@endif


    <div class="grid grid-cols-12 gap-6 mt-5">
        <div class="intro-y col-span-12 box p-5">
            <a href="{{ route('admin.banner.create') }}"
                class="button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-1 text-white"> <i data-feather="plus"
                    class="w-4 h-4 mr-2"></i> {{ __('Add') }} </a>
            <div class="overflow-x-auto">
                <table class="table mb-2 mt-4 ">
                    <thead>
                        <tr class="bg-gray-100 rounded">
                            <th class="order-b-2 whitespace-no-wrap">#</th>
                            <th class="order-b-2 whitespace-no-wrap">Image</th>
                            <th class="order-b-2 whitespace-no-wrap">Title</th>
                            <th class="order-b-2 whitespace-no-wrap">SubTitle</th>
                            <th class="order-b-2 whitespace-no-wrap">link</th>
                            <th class="order-b-2 whitespace-no-wrap">{{ __('Action') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($banners as $banner)
                            <tr class="hover:bg-gray-200">
                                <th scope="row">{{ $banner->id }}</th>
                                <td class="border-b">
                                    <img src="{{ asset('/storage/app/public/banners/' . $banner->photo) }}" style="width:80px" />
                                </td>
                              
                                <td class="border-b">
                                    <div class="font-medium whitespace-no-wrap">
                                        {{ $banner->title }}
                                    </div>
                                </td>
                                <td class="border-b">
                                    <div class="font-medium whitespace-no-wrap">
                                        {{ $banner->subtitle }}
                                    </div>
                                </td>
                                <td class="border-b">
                                    <div class="font-medium whitespace-no-wrap">
                                        {{ $banner->link }}
                                    </div>
                                </td>

                                <td class="border-b">
                                    <div class="flex sm:justify-center items-center">
                                        <a class="flex items-center mr-3"
                                            href="{{ route('admin.banner.edit', $banner->id) }}"> <i
                                                data-feather="check-square" class="w-4 h-4 mr-1"></i> {{ __('Edit') }}
                                        </a>

                                        <a class="flex items-center text-theme-6" href="#" onclick="event.preventDefault();document.getElementById('delete-form-{{$banner->id}}').submit();" > <i data-feather="trash-2" class="w-4 h-4 mr-1"></i> {{__('Delete')}} </a>
                                        <form id="delete-form-{{$banner->id}}" action="{{ route('admin.banner.destroy', $banner->id) }}" method="POST" class="d-none"> @csrf @method('DELETE') </form>

                                        
                                        {{-- <a class="flex items-center text-theme-6" href="#"
                                            onclick="deleteSlider({{ $banner->id }})"> <i data-feather="trash-2"
                                                class="w-4 h-4 mr-1"></i> {{ __('Delete') }} </a>
                                        <form action="{{ route('admin.banner.destroy', $banner->id) }}" method="POST"
                                            id="del-banner-{{ $banner->id }}" style="display:none;">
                                            @csrf
                                            @method('DELETE')
                                        </form> --}}
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>

                {{-- {{ $banners->links() }} --}}
            </div>
        </div>
    </div>




@endsection



@section('javascript')
    <script>
        function deleteSlider(id) {

            swal({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.value) {
                    document.getElementById('del-banner-' + id).submit();
                    swal(
                        'Deleted!',
                        'banner has been deleted.',
                        'success'
                    )
                }
            })
        }
    </script>
@endsection