@extends('base.layouts.master')
@section('style')
    <!-- BEGIN PAGE LEVEL PLUGINS -->
    <link href="/base/assets/plugins/datatables/datatables.min.css" rel="stylesheet" type="text/css" />
    <link href="/base/assets/plugins/datatables/plugins/bootstrap/datatables.bootstrap-rtl.css" rel="stylesheet" type="text/css" />
    <!-- END PAGE LEVEL PLUGINS -->
@endsection

@section('content')

    <!-- BEGIN PAGE TITLE-->
    <h3 class="page-title">  @lang('menu.ContentCategory.title')
        <small>@lang('menu.ContentCategory.index') ...</small>
    </h3>
    <!-- END PAGE TITLE-->

    <div class="row">
        <div class="col-md-12">
            <!-- BEGIN EXAMPLE TABLE PORTLET-->
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption font-dark">
                        <i class="icon-settings font-dark"></i>
                        <span class="caption-subject bold uppercase">@lang('menu.ContentCategory.index')</span>
                    </div>
                    <div class="tools"> </div>
                </div>
                <div class="portlet-body">
                    @if(count($errors))
                        <div class="alert alert-danger">
                            <ul>
                                @foreach($errors->all() as $error)
                                    <li>{{$error}}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    @include('base.layouts.partials.general.message')
                    <table class="table table-striped table-bordered table-hover" id="sample_1">
                        <thead>
                        <tr>
                            <th>  @lang('list-table.row')</th>
                            <th>  @lang('list-table.image')</th>
                            <th> @lang('list-table.title') </th>
                            <th>  @lang('list-table.category')</th>
                            <th>  @lang('list-table.action') </th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($categories as $category)
                            <tr class="record_id_{{$category->id}}" >
                                <td> {{$loop->iteration}} </td>
                                <td> <img src="/images/categories/{{$category->image_location}} " alt="{{$category->content_title}}" class="table_image" > </td>
                                <td> {{$category->category_name}} </td>
                                <td> {{$category->category_en_name}} </td>
                                <td>
                                    <a class="btn btn-circle btn-icon-only btn-default delete" data-target="#confirm" data-toggle="modal" data-url="{{route('categories.destroy' , $category->id)}}">
                                        <i class="icon-trash"></i>
                                    </a>
                                    <a href="{{route('categories.edit' , $category->id)}}" class="btn btn-circle btn-icon-only btn-default">
                                        <i class="fa fa-edit"></i>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                    {{$categories->links()}}
                </div>
            </div>
            <!-- END EXAMPLE TABLE PORTLET-->
        </div>
    </div>

    @include('base.layouts.partials.general.modal',['method' => 'delete'])
@endsection

@section('script')
    <!-- BEGIN PAGE LEVEL PLUGINS -->
    <script src="/base/assets/js/datatable.js" type="text/javascript"></script>
    {{-- <script src="/base/assets/plugins/datatables/datatables.min.js" type="text/javascript"></script> --}}
    <script src="/base/assets/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js" type="text/javascript"></script>
    <!-- END PAGE LEVEL PLUGINS -->
    <script src="/base/assets/js/table-datatables-rowreorder.min.js" type="text/javascript"></script>
    <script>
        $('#confirm').on('show.bs.modal',function(event){
            let url = $(event.relatedTarget).data('url');
            $('#confirm form').attr('action', url);
        })
    </script>

@endsection