@extends('layouts.app')
@section('title', trans('menu.contact_title'))

@section('content')
    @php $user = auth()->user(); @endphp
<div class="content">
    <x-content.header title="{{ __('faq.category') }}">
        <x-slot:headerRight>
            @can('create contacts')
                <a href="javascript:;" class="btn-create btn-secondary-base" data-toggle="modal" data-target="#modal-dialog"><x-svg-icon icon="icon-plus" />{{trans('forms.lbl_add_new')}}</a>
            @endcan

            @if($user->hasAnyPermission(['delete contacts']))
                <a href="javascript:;" data-uri="{{url('contacts/categories')}}" class="btn-delete-all btn-secondary-base"><i class="mdi mdi-delete"></i>{{trans('forms.lbl_delete')}}</a>
            @endif

            <a href="{{url('contacts')}}" class="btn-secondary-base"><i class="mdi mdi-library-books"></i>{{__("forms.lbl_back")}}</a>
        </x-slot:headerRight>
    </x-content.header>

    <table id="datatable" class="table-custom-striped w-full" style="width: 100%;">
        <thead>
            <tr>
                @if($user->hasAnyPermission(['delete contacts']))
                    <th scope="col">
                        <input class="table-header-checkbox" type="checkbox" name="select_all" id="select-all" value="1">
                    </th>
                @endif
                <th scope="col">{{trans("tables.name_title")}}</th>
                <th scope="col">{{trans("tables.action_title")}}</th>
            </tr>
        </thead>
    </table>
    @include('contact::categories.create_edit')
</div>
@stop

@section('footer-script')
    <script type="text/javascript">

        PDDataTable({
            url: "{{ url('contacts/categories') }}",
            columns:[
                @if($user->hasAnyPermission(['delete contacts']))
                    { data: 'checkboxgrid', name: 'checkboxgrid', orderable: false, searchable: false, className: "checkbox-column"},
                @endif
                { data: 'name', name: 'name'},
                { data: 'action', name: 'action', orderable: false, searchable : false, className : "text-right" }
            ]
        });
    </script>
@stop