@extends('layouts.admin')
@section('title', 'Model | Mintavia Admin')


@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.5/css/lightbox.min.css"
        integrity="sha512-xtV3HfYNbQXS/1R1jP53KbFcU9WXiSA1RFKzl5hRlJgdOJm4OxHCWYpskm6lN0xp0XtKGpAfVShpbvlFH3MDAA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <div class="row">
        <div class="col-12">
            @if (isset($message) && $message)
                @switch($message['status'])
                    @case('success')
                        <script>
                            window.onload = function() {
                                toastr.success("{{ $message['message'] }}")
                            }
                        </script>
                    @break

                    @case('error')
                        <script>
                            window.onload = function() {
                                toastr.error("{{ $message['message'] }}")
                            }
                        </script>
                    @break
                @endswitch
            @endif
            <div class="card card-primary" wire:init="loadPosts">
                <div class="card-header d-flex align-items-center">
                    <h3 class="card-title">Bike And Car List</h3>
                    <div class="ml-auto">
                        <a href="{{ route('admin.models.create') }}">
                            <button class="btn btn-sm btn-block btn-flat btn-light rounded-0 shadow "><i
                                    class="fa fa-plus"></i> </button>
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        {!! $dataTable->table() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('plugins.Toastr', true)

@section('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.5/js/lightbox.min.js"
        integrity="sha512-KbRFbjA5bwNan6DvPl1ODUolvTTZ/vckssnFhka5cG80JVa5zSlRPCr055xSgU/q6oMIGhZWLhcbgIC0fyw3RQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        // Get all elements with the class "lightboxHover"
        let lightboxElements = document.querySelectorAll('.lightboxHover');

        // Add the event listener to each element
        lightboxElements.forEach(function(element) {
            element.addEventListener('mouseover', function() {
                this.click(); // Trigger the Lightbox2 functionality on hover
            });
        });
    </script>
    {{ $dataTable->scripts() }}
@endsection