@extends('voyager::master')

@section('page_title', __('voyager::generic.viewing').' '. $dataType->getTranslatedAttribute('display_name_plural') . ' ')

@section('css')
<style>
    .table-user-wrapper .table-user-photo {
        width: 50px;
        flex: 50px 0 0;
    }

    .table-user-photo image{
        width: 50px;
        flex: 50px 0 0;
    }
</style>
@endsection

@section('page_header')
    <div class="container-fluid">
        <h1 class="page-title">
            <i class="{{ $dataType->icon }}"></i> {{ $dataType->getTranslatedAttribute('display_name_plural') }}
        </h1>

        @can('add', app($dataType->model_name))
            <a href="{{ route('voyager.'."$dataType->slug".'.create') }}" class="btn btn-success btn-add-new">
                <i class="voyager-plus"></i> <span>{{ __('voyager::generic.add_new') }}</span>
            </a>
        @endcan

        @can('delete', app($dataType->model_name))
            @include('voyager::partials.bulk-delete')
        @endcan


        @can('delete', app($dataType->model_name))
            @if($usesSoftDeletes)
                <label for="show_soft_deletes"></label>
                <input type="checkbox" @if ($showSoftDeleted) checked @endif id="show_soft_deletes" data-toggle="toggle" data-on="{{ __('voyager::bread.soft_deletes_off') }}" data-off="{{ __('voyager::bread.soft_deletes_on') }}">
            @endif
        @endcan

        @foreach(Voyager::actions() as $action)
            @if (method_exists($action, 'massAction'))
                @include('voyager::bread.partials.actions', ['action' => $action, 'data' => null])
            @endif
        @endforeach

        @include('voyager::multilingual.language-selector')

    </div>
@stop

@section('content')

    <div class="page-content browse container-fluid">
        @include('voyager::alerts')
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-bordered new-panel">

                    <div class="panel-body">
                        <div class="table-responsive">
                            <table id="dataTable" class="table table-hover dataTable no-footer" role="grid" aria-describedby="dataTable_info">
                                <thead>
                                <tr>

                                    @can('delete',app($dataType->model_name))
                                        <th tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1"
                                            aria-label=": activate to sort column ascending">
                                            <label class="checkbox">
                                                <input type="checkbox" class="select_all">
                                                {{--<svg>
                                                    <use xlink:href="{{asset("/css/baltoe-icons.svg#correct")}}"></use>
                                                </svg>--}}
                                            </label>
                                        </th>
                                    @endcan

                                    <th>{{ __('voyager::seeders.data_rows.phone') }}</th>
                                    <th>{{ __('voyager::seeders.data_rows.name') }}</th>
                                    <th>{{ __('voyager::seeders.data_rows.email') }}</th>
                                    <th>{{ __('voyager::seeders.data_rows.rating_percentage') }}</th>
                                    <th>{{ __('voyager::seeders.data_rows.orders_count') }}</th>
                                    <th>{{ __('voyager::seeders.data_rows.created_at') }}</th>
                                    <th class="disabled-sorting">{{ __('voyager::generic.actions') }}</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Single delete modal--}}
    <div class="modal modal-danger fade" tabindex="-1" id="delete_modal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="{{ __('voyager::generic.close') }}"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"><i class="voyager-trash"></i> {{ __('voyager::generic.delete_question') }} {{ $dataType->getTranslatedAttribute('display_name_singular') }}?</h4>
                </div>
                <div class="modal-footer">
                    <form action="#" id="delete_form" method="POST">
                        {{ method_field('DELETE') }}
                        {{ csrf_field() }}
                        <input type="submit" class="btn btn-danger pull-right delete-confirm" value="{{ __('voyager::generic.delete_confirm') }}">
                    </form>
                    <button type="button" class="btn btn-default pull-right" data-dismiss="modal">{{ __('voyager::generic.cancel') }}</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
@stop

@section('css')
    <link rel="stylesheet" href="{{ voyager_asset('lib/css/responsive.dataTables.min.css') }}">
@stop

@section('javascript')

    <!-- DataTables -->
    <script src="{{ asset('js/datatable-browse.js') }}" type="text/javascript"></script>

    <script type="application/javascript">
        $(document).ready(function () {
            /**
             * custom_datatable function
             * var url it's Ajax route
             * var Columns datatables columns name and received data
             * var del destroy route
             * var load_img path of loading image
             * */

            var url = "{{ route('voyager.'.$dataType->slug.'.ajax') }}";
            var columns = [
                    @can('delete',app($dataType->model_name))
                {

                    data: 'id', orderable: false, searchable: false, "render": function (id)
                    {
                        return `<input type="checkbox" name="row_id" id="checkbox_${id}" value="${id}">`;
                    }
                },
                    @endcan

                {data: 'phone', name: 'phone'},
                {data: 'name', name: 'name'},
                {data: 'email', name: 'email'},
                {data: 'rating_percentage', name: 'rating_percentage'},
                {data: 'orders_count', name: 'orders_count'},
                {data: 'created_at', name: 'created_at'},
                {data: 'action', name: 'action', orderable: false, searchable: false}
            ];
            var del = '{{ route('voyager.'.$dataType->slug.'.destroy', ['id' => '__id']) }}';


            custom_datatable(url, columns,'dataTable', del);
        });

        $(document).ready(function () {
            $('input[data-toggle="toggle"]').on('change', function () {
                if ($(this).is(':checked')) {
                    $('#dataTable').on('preXhr.dt', function ( e, settings, data ) {
                        data.show_deleted   = true;
                    } ).DataTable().ajax.reload();

                } else {
                    $('#dataTable').on('preXhr.dt', function ( e, settings, data ) {
                        data.show_deleted   = false;
                    } ).DataTable().ajax.reload();
                }
            });
        });
    </script>

    <script>
        @if ($isModelTranslatable)
        $('.side-body').multilingual();
        //Reinitialise the multilingual features when they change tab
        $('#dataTable').on('draw.dt', function(){
            $('.side-body').data('multilingual').init();
        })
        @endif
    </script>
@stop