@extends('layouts/contentLayoutMaster')

@section('title', 'Categories List')

@section('vendor-style')
{{-- Page Css files --}}
<link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/dataTables.bootstrap4.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/responsive.bootstrap4.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/buttons.bootstrap4.min.css')) }}">
@endsection

@section('page-style')
{{-- Page Css files --}}
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-validation.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('css/base/pages/app-user.css')) }}">
@endsection

@section('content')
<!-- users list start -->
<section class="app-user-list">

    <!-- list section start -->
    <div class="card">
        <div class="card-datatable table-responsive pt-0">

            <table class="user-list-table table">
                <thead class="thead-light">
                <tr>
                    <th>ID</th>
                    <th>Image</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                @foreach($slider as $s)
                <tr id="Del_{{ $s->id }}">
                    <td>{{ $s->id }}</td>
                    <td>
                        <div class="media mb-lg-3 mt-lg-2">
                            <a href="javascript:void(0);" class="mr-25">
                            <img class="rounded" src="{{ url('uploads/slider_image').'/'. $s->file }}" alt=""  height="80"
                                 width="180">
                            </a>
                        </div>
                    </td>



                    <td>

                        <div class="btn-group"><a class="btn btn-sm dropdown-toggle hide-arrow"
                                                  data-toggle="dropdown" aria-expanded="false">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="feather feather-more-vertical font-small-4">
                                    <circle cx="12" cy="12" r="1"></circle>
                                    <circle cx="12" cy="5" r="1"></circle>
                                    <circle cx="12" cy="19" r="1"></circle>
                                </svg>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right" style="">

                                <a href="javascript:;" class="dropdown-item delete-record delete_btn" delete_id="{{ $s->id }}" delete_model="slider">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                         viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                         stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                         class="feather feather-trash-2 font-small-4 mr-50">
                                        <polyline points="3 6 5 6 21 6"></polyline>
                                        <path
                                            d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                                        <line x1="10" y1="11" x2="10" y2="17"></line>
                                        <line x1="14" y1="11" x2="14" y2="17"></line>
                                    </svg>
                                    Delete</a></div>
                        </div>

                    </td>

                </tr>

                @endforeach
                </tbody>
            </table>
        </div>
        <!-- Modal to add new user starts-->

        <!-- Modal to add new user Ends-->
    </div>
    <!-- list section end -->
</section>
<!-- users list ends -->


<div
    class="toast toast-basic hide position-fixed"
    role="alert"
    aria-live="assertive"
    aria-atomic="true"
    data-delay="5000"
    style="top: 1rem; right: 1rem"
>
    <div class="toast-header">
        <img src="{{asset('images/logo/logo.png')}}" class="mr-1" alt="Toast image" height="18" width="25" />
        <strong class="mr-auto">Soal Admin</strong>
        <small class="text-muted">Just Now</small>
        <button type="button" class="ml-1 close" data-dismiss="toast" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="toast-body">Hello, world! This is a toast message. Hope you're doing well.. :)</div>
</div>

@endsection

@section('vendor-script')
{{-- Vendor js files --}}
<script src="{{ asset(mix('vendors/js/tables/datatable/jquery.dataTables.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/datatables.bootstrap4.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.responsive.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/responsive.bootstrap4.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/datatables.buttons.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/buttons.bootstrap4.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/validation/jquery.validate.min.js')) }}"></script>
@endsection

@section('page-script')

<script>


    $('.user-list-table ').DataTable({
        order: [[2, 'desc']],
        dom:
            '<"d-flex justify-content-between align-items-center header-actions mx-1 row mt-75"' +
            '<"col-lg-12 col-xl-6" l>' +
            '<"col-lg-12 col-xl-6 pl-xl-75 pl-0"<"dt-action-buttons text-xl-right text-lg-left text-md-right text-left d-flex align-items-center justify-content-lg-end align-items-center flex-sm-nowrap flex-wrap mr-1"<"mr-1"f>B>>' +
            '>t' +
            '<"d-flex justify-content-between mx-2 row mb-1"' +
            '<"col-sm-12 col-md-6"i>' +
            '<"col-sm-12 col-md-6"p>' +
            '>',
        language: {
            sLengthMenu: 'Show _MENU_',
            search: 'Search',
            searchPlaceholder: 'Search..'
        },
        buttons: [
            {
                text: 'Add New Slider',
                className: 'add_slider btn btn-primary mt-50',
                attr: {
                    'href': 'slider/create',

                },
                init: function (api, node, config) {
                    $(node).removeClass('btn-secondary');
                }
            }
        ],
    });


    $(document).on('click','.add_slider',function (){


        window.location = $(this).attr('href');

    });


</script>

@endsection