@extends('layouts.admin')
@section('content')
    <link href="{{ URL::asset('css/dataTables.min.css') }}" media="all" rel="stylesheet" type="text/css"/>
    {{-- <link href="{{ URL::asset('plugins/export/buttons.dataTables.min.css') }}" media="all" rel="stylesheet" type="text/css"/> --}}
    <script type="text/javascript" src="{{ URL::asset('js/dataTables.min.js') }}"></script>
    <link href="{{ URL::asset('css/select2.css') }}" media="all" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="{{ URL::asset('js/select2.min.js') }}"></script>
    {{-- <script type="text/javascript" src="{{ URL::asset('plugins/export/dataTables.buttons.min.js') }}"></script>
    <script type="text/javascript" src="{{ URL::asset('plugins/export/jszip.min.js') }}"></script>
    <script type="text/javascript" src="{{ URL::asset('plugins/export/pdfmake.min.js') }}"></script>
    <script type="text/javascript" src="{{ URL::asset('plugins/export/vfs_fonts.js') }}"></script>
    <script type="text/javascript" src="{{ URL::asset('plugins/export/buttons.html5.min.js') }}"></script> --}}

    <div class="pageheader">
        <div class="media">
            <div class="media-body">
                <h4>@lang('messages.Manage Blog')</h4>
                <ul class="breadcrumb">
                    <li><a href="{{ URL::to('admin/dashboard') }}"><i class="fa fa-home"></i> @lang('messages.Home')</a>
                    </li>
                    <li>@lang('messages.Manage Blog')</li>
                </ul>

            </div>
        </div><!-- media -->
    </div><!-- pageheader -->
<form action="get" id="blog">
    <div class ="row" style="padding: 0 26px;">
        <div class='col-md-6 form-group d-flex'>
            <div class='col-md-5'>
                <select id='cms_types' class='select2' name='cms_types'>
                    @if(!empty($cmsTypes))
                        <option value=''>@lang('messages.Select Blog Type')</option>
                        @foreach($cmsTypes as $cms)
                            <option value='{{$cms->id}}'>{{$cms->name}}</option>
                        @endforeach
                    @else
                        <option value=''>@lang('messages.No Cms Types')</option>
                    @endif
                </select>
            </div>
        </div>

        {{-- <div class="col-md-2 d-flex" style="align-items: flex-end;gap: 10px;">
            <button class="btn btn-primary mr5" type="submit" name="submit" id ="submit" title="@lang('messages.Search')">@lang('messages.Search')</button>
            {{-- <button type="reset" title="@lang('messages.Reset')" class="btn btn-default mr5" onclick="window.location='{{ url('admin/cms/list') }}'">@lang('messages.Reset')</button> 
        </div> --}}

        <div>
            <div class="buttons_block">
                <div class="btn-group mr5">
                @if(IzoCommonHelper::hasPermission('blog_management_add'))
                    <a class="btn btn-primary tip" href="{{ URL::to('admin/cms/create') }}"
                       title="Add New">@lang('messages.Add New')</a>
                @endif
                </div>
            </div>
        </div>
    </div>
</form>

    @if (Session::has('message'))
        <div class="admin_sucess_common">
            <div class="admin_sucess">
                <div class="alert alert-info">
                    <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span
                                class="sr-only">@lang('messages.Close')</span></button>{{ Session::get('message') }}
                </div>
            </div>
        </div>
    @endif


    <div class="content">
    @if(IzoCommonHelper::hasPermission('blog_management_list'))
        <table id="customer-table" class="table table-striped table-bordered responsive">
            <thead>
            <tr class="headings">
                <th>@lang('messages.Id')</th>
                <th>@lang('messages.Image')</th>
                <th>@lang('messages.Title')</th> 
                <th>@lang('messages.Type')</th>
                <th>@lang('messages.Created Date')</th>
                <th>@lang('messages.Updated Date')</th>
                <th>@lang('messages.Status')</th>
                <th>@lang('messages.Edit')</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td class="empty-text" colspan="12" style="background-color: #fff!important;">
                    <div class="list-empty-text text-center"> @lang('messages.No records found.') </div>
                </td>
            </tr>
            </tbody>
        </table>
        @endif
    </div>
    <script>
     $( document ).ready(function() {
            $('#cms_types').select2();

            var blah= $("#cms_types").val();
            fetchdata(blah);
        }); 

        $("#cms_types").change(function(){
        var blah= $("#cms_types").val();
        fetchdata(blah);
        });

        function fetchdata(value) {
            token = $('meta[name="csrf-token"]').attr('content');
            $('#customer-table').DataTable({
                dom: 'lfrtip',
                search: {
                    'caseInsensitive': true
                },
               "lengthMenu": [[25, 50,100], [25, 50,100]],
                processing: true,
                serverSide: true,
                responsive: true,
                autoWidth: false,
                ajax: {
                    url: '{{ URL::to('admin/cms/ajax-list') }}',
                    "order": [],
                    "columnDefs": [{
                        "targets": 'no-sort',
                        "orderable": false,
                    }],
                    type: 'GET',
                    data: function (d) {
                        d.cms_types = value;
                    },
                    headers: {
                        'X-CSRF-TOKEN': token
                    }
                },
                columns: [
                    {data: 'cms_id', name: 'cms_id'},
                    {data: 'image' , name:'image'},
                    {data: 'title', name: 'title', searchable: true},
                    {data: 'type', name: 'type', searchable: true},
                    {data: 'created_at', name: 'created_at', searchable: true},
                    {data: 'updated_at', name: 'updated_at', searchable: true},
                    {data: 'status', name: 'status', searchable: true},
                    {data: 'action', name: 'action', orderable: false},
                ],
                stateSave: true,
                 "bDestroy": true
            });
        }
        /*$(function () {
            $('#customer-table').DataTable({
                dom: 'lfrtip',
                search: {
                    'caseInsensitive': true
                },
                	buttons: [
                 {
                 extend: 'excel',
                 footer: false,
                 title:'Cms',
                 text:'Export',
                 exportOptions: {
                 columns: [0,1,2,3]
                 }
                 }
                 ], */
                /*"lengthMenu": [[25, 50, 100], [25, 50, 100]],
                processing: true,
                serverSide: true,
                responsive: true,
                autoWidth: false,
                ajax: '{!! url('admin/cms/ajax-list') !!}',
                "order": [],
                "columnDefs": [{
                    "targets": 'no-sort',
                    "orderable": false,
                }],
                columns: [
                    {data: 'cms_id', name: 'cms_id'},
                    {data: 'image' , name:'image'},
                    {data: 'title', name: 'title', searchable: true},
                    {data: 'type', name: 'type', searchable: true},
                    {data: 'created_at', name: 'created_at', searchable: true},
                    {data: 'updated_at', name: 'updated_at', searchable: true},
                    {data: 'status', name: 'status', searchable: true},
                    {data: 'action', name: 'action', orderable: false},
                ],
            });
        });*/
    </script>
    <script type="text/javascript">
        function changeStatus(cms_id) {
            var conf = confirm('Are you sure want to active/inactive this cms?');
            if (conf == true) {
                var token, url;
                token = $('meta[name="csrf-token"]').attr('content');
                url = '{{ url('admin/cms/changeStatus') }}';
                var status = $('body #cms-' + cms_id).data("status");
                $.ajax({
                    url: url,
                    headers: {'X-CSRF-TOKEN': token},
                    data: {'status': status, 'cms_id': cms_id},
                    type: 'POST',
                    datatype: 'json',
                    success: function (resp) {
                        if (resp.http_code == 400) {
                            toastr.warning(resp.message);
                        } else if (resp.http_code == 200) {
                            if (status == 0) {
                                $('#cms-' + cms_id).data('status', 1);
                                $('#cms-' + cms_id).attr('class', '');
                                $('#cms-' + cms_id).attr('class', 'glyphicon glyphicon-thumbs-down');
                            } else if (status == 1) {
                                $('#cms-' + cms_id).data('status', 0);
                                $('#cms-' + cms_id).attr('class', '');
                                $('#cms-' + cms_id).attr('class', 'glyphicon glyphicon-thumbs-up');
                            }
                            toastr.success(resp.message);
                        } else if (resp.http_code == 401) {
                            toastr.warning(resp.message);
                            var login = '{{ url('admin/login')}}';
                            $(location).attr('href', login);
                        } else if (resp.http_code == 500) {
                            toastr.warning(resp.message);
                        }
                    }
                });
            }
        }
    </script>
    <style>
        .status {
            cursor: pointer;
        }
    </style>
@endsection