@extends('layouts.admin')
@section('style')
<style>
    .box-img img {
        height: 100%;
        width: 100%;
        object-fit: contain;
    }

    .box-img {
        height: 80px;
    }

    .box-img-modal img {
        height: 100%;
        width: 100%;
        object-fit: contain;
    }

    .box-img-modal {
        height: 500px;
    }
</style>
@endsection
@section('content')
<nav aria-label="breadcrumb">
    <ol class="breadcrumb  py-0">
        <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">{{ __('messages.Home') }}</a></li>
        <li class="breadcrumb-item active" aria-current="page">{{ __('messages.Banners') }}</li>
    </ol>
</nav>
    <!-- Start Content-->
    <div class="container-fluid">


        <div class="row">
            <div class="col-12">
            @if (!$data->count())
                <div class="text-center">
                    <img src="{{ asset('assets/images/empty_data.svg') }}" height="300" width="300">
                </div>
                <div class="text-center h3 text-dark">
                    {{ __("messages.There are no data") }} :(
                </div>




            @else

                <div class="card">
                    <div class="card-body">

                        <div class="card-body">

                            <div class="d-flex justify-content-end mb-3">

                                  <div class="btn-group" role="group" aria-label="Basic outlined example">





                                    <button type="button" data-bs-toggle="modal" data-bs-target="#warning-alert-modal"  data-message="{{ __('messages.Are you sure to activate?') }}" data-url="{{ route('admin.banners.active_all') }}"class="btn btn-outline-info btn-action"> <i class="mdi mdi-check-bold"></i> {{ __("messages.Activate everyone") }}</button>


                                    <button type="button" data-bs-toggle="modal" data-bs-target="#warning-alert-modal"  data-message="{{ __('messages.Are you sure to deactivate?') }}" data-url="{{ route('admin.banners.inactive_all') }}"class="btn btn-outline-info btn-action"> <i class="mdi mdi-close-thick"></i> {{ __("messages.Deactivate everyone") }}</button>


                                    <a href="{{ route('admin.banners.create') }}" class="btn btn-outline-info"><i class="mdi mdi-plus-circle"></i> {{ __("messages.Create") }}</a>
                                </div>
                            </div>
                        <div class="responsive-table-plugin">

                            <div class="table-rep-plugin">
                                <div class="table-responsive" data-pattern="priority-columns">
                                    <table id="tech-companies-1" class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>{{ __('messages.Image') }}</th>
                                                <th data-priority="3">{{ __('messages.Actions') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                                $i = 1;
                                                $skipCount = $data->perPage() * $data->currentPage() - $data->perPage();
                                            @endphp
                                            @foreach ($data as $item)
                                                <tr>
                                                    <th>{{ $skipCount + $i }}</th>
                                                    @php $i++  @endphp

                                                    <td>
                                                        <div class="box-img">
                                                            <img data-bs-toggle="modal"
                                                            data-bs-target="#modal_imgae_size_large" style="cursor: pointer" class="image-part" src="{{ asset($item->image)  }}">
                                                        </div>

                                                    </td>







                                                    <td style="white-space: nowrap; width: 1%;">
                                                        <div class="tabledit-toolbar btn-toolbar" style="text-align: left;">
                                                            <div class="btn-group btn-group-sm" style="float: none;">



                                                                @if ($item->is_active)
                                                                <button data-bs-toggle="modal" data-bs-target="#warning-alert-modal"  data-message="{{ __('messages.Are you sure to deactivate?') }}" data-url="{{ route('admin.banners.inactive' , $item->id) }}"   title="{{ __('messages.Deactivate') }}" type="button" class="tabledit-edit-button btn btn-info btn-action" style="float: none;">
                                                                    <span class="mdi mdi-close-thick"></span>
                                                                </button>
                                                                @else
                                                                <button data-bs-toggle="modal" data-bs-target="#warning-alert-modal"  data-message="{{ __('messages.Are you sure to activate?') }}" data-url="{{ route('admin.banners.active' , $item->id) }}" title="{{ __('messages.Activation') }}" type="button" class="tabledit-edit-button btn btn-info btn-action" style="float: none;">
                                                                    <span class="mdi mdi-check-bold"></span>
                                                                </button>
                                                                @endif



                                                                <button data-bs-toggle="modal" data-bs-target="#danger-alert-modal"  data-message="{{ __('messages.Are you sure to delete permanently ?') }}" data-url="{{ route('admin.banners.destroy' , $item->id) }}"   title="{{ __('messages.Delete') }}" type="button" class="tabledit-edit-button btn mx-3 btn-danger btn-action" style="float: none;">
                                                                    <span class="mdi mdi-trash-can-outline"></span>
                                                                </button>

                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>

                                            @endforeach

                                        </tbody>
                                    </table>
                                </div> <!-- end .table-responsive -->
                                {{ $data->appends(Request::except(['_token']))->links()}}
                            </div> <!-- end .table-rep-plugin-->
                        </div> <!-- end .responsive-table-plugin-->
                    </div>
                </div> <!-- end card -->
                @endif
            </div> <!-- end col -->
        </div>
        <!-- end row -->

    </div> <!-- container -->

    <div class="modal fade" id="modal_imgae_size_large" tabindex="-1" role="dialog"
    aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="border-radius: 10px !important">
            <div class="modal-header">
                {{--  <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>  --}}
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="box-img-modal">
                    <img class="image-part-modal">
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

@include('admin.inc.modal-action')
@endsection

@section('script')
<script>
    $(function(){
       $(".remove_input_filter").click(function(){

            var inp_name = $(this).data('input_name');

            $('input[name='+inp_name+']  ,  select[name='+inp_name+']').val(null)
            $("#form_filter").submit()

       })
    })
  </script>
  <script>
    $(function() {
        $(".image-part").click(function() {
            var img_src = $(this).attr("src");
            $(".image-part-modal").attr("src", img_src)

        })

    })
</script>
 <script src="{{ asset('assets/js/requests-user.js') }}"></script>
@endsection