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

@section('content')
    @php $user = auth()->user(); @endphp
    <div class="content">

        <x-content.header title="{{ __('title.contacts') }}">
            <x-slot:headerRight>

               @can('create contacts')
                    <a
                        {{-- href="{{url('contacts/create')}}"  --}}
                        href="javascript:;"
                        data-toggle="canvas-panel"
                        data-uri="{{url('contacts')}}"
                        data-title="{{ __('title.add_new_contact') }}"
                        class="btn-secondary-base"><x-svg-icon icon="icon-plus" />{{trans('forms.lbl_add_new')}}</a>
                @endcan

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


        <div class="relative">
            <div class="selection-overlay hidden absolute top-16 left-16 right-1 bg-white/90 rounded-t-lg px-4 py-3 lg:py-2 flex items-center gap-3 z-[20]">
                <span class="text-md-semibold text-custom-grey-600"><span class="selected-count">0</span> {{ trans('forms.lbl_items_selected') }}</span>
                <x-svg-icon icon="vertical-bar" />

                @if($user->hasAnyPermission(['delete contacts']))
                    <a href="javascript:;" data-uri="{{url('contacts')}}" class="btn-delete-all text-sm-semibold text-custom-orange-500 flex items-center gap-2">
                        <x-svg-icon icon="icon-delete" /> <span class="hidden lg:inline-block">{{trans('forms.lbl_delete')}}</span>
                    </a>
                @endif
            </div>

            <table id="datatable" class="table-custom-striped w-full">
                <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.phone_title")}}</th>
                        <th scope="col" width="15%">{{trans("tables.location_title")}}</th>
                        <th scope="col">{{trans("tables.category_title")}}</th>
                        <th scope="col" width="20%">{{trans("tables.note_title")}}</th>
                        @if($user->hasAnyPermission(['edit contacts', 'delete contacts']))
                            <th scope="col">{{trans("tables.action_title")}}</th>
                        @endif

                    </tr>
                </thead>
            </table>
        </div>
    </div>

    @include('contact::categories.create_edit')
@stop

@section("filters")
    @include('contact::filters')
@stop

@section('panel-content')
    @include('contact::form', ['edit' => false])
@stop

@section('footer-script')

    <script type="text/javascript">

        PDDataTable({
            url: "{{ url('contacts') }}",
            drawCallback: function(settings, json) {
                AddReadMore();
            },
            columns:[
                @if($user->hasAnyPermission(['delete contacts']))
                    { data: 'checkboxgrid', name: 'checkboxgrid', orderable: false, searchable: false, className: "checkbox-column"},
                @endif
                { data: 'name', name: 'name'},
                { data: 'phone', name: 'phone'},
                { data: 'locations', name: 'locations.name', orderable: false},
                { data: 'category', name: 'category.name'},
                { data: 'notes', name: 'notes',className:"add-read-more show-less-content","defaultContent": ''},
                @if($user->hasAnyPermission(['edit contacts', 'delete contacts']))
                    { data: 'action', name: 'action', orderable: false, searchable : false, className: "text-right" }
                @endif
            ],
            @if($user->hasAnyPermission(['delete contacts']))
                order : [1, 'asc'],
            @else
                order : [0, 'asc'],
            @endif
            callbackFunc  : function(d){
                d.category = $('select[name="category_filter"]').val();
			},
            toolbar_design_class : 'justify-start'
        });

        $(".btn-save").on("click", function(event) {
            event.preventDefault();
			if($("#form").valid()){
	            data = $('#form').serialize();
	            PDRequest({
	                type    : $('#form').attr("method"),
	                url     : $("#form").attr("action"),
	                data    : data,
	                event   : event
	            }).then((response) => {

                    PDTable.draw();

                    Canvas.close();


	            });
			}
        });

    </script>

@stop