@extends('layouts.app')
@if($templateType == "document")
@section('title', trans('menu.document_creator_title'))
@else
@section('title', trans('menu.contract_creator_title'))
@endif
@section('content')
<div class="content">
    <x-content.header title="{{ __('title.'.$templateType.'creator') }}" subTitle="{{ __('title.'.$templateType.'creator_subtitle') }}" >
        <x-slot:headerRight>
            @can('create', [\Modules\DocumentCreator\Entities\DCTemplate::class, $templateType])
                <a href="{{route("settings.{$templateType}.templates.create")}}" class="btn-secondary-base"><x-svg-icon icon="icon-plus" />{{trans('forms.lbl_add_new')}}</a>
            @endcan

        </x-slot:headerRight>
    </x-content.header>

    <form id="dt-search-form" onsubmit="return false;">
        <div class="flex flex-wrap justify-between items-center gap-4">

            <div class="w-full lg:w-[320px] search-bar">
                <input type="text" id="search" class="search-input filter-search w-full"
                    name="query"
                    placeholder="{{__('forms.lbl_search_template_by_name')}} ..."
                />
                <x-svg-icon icon="icon-search" />
            </div>

            <div class="search-bar">
                <div class="tabs overflow-x-scroll no-scrollbar">
                    <button class="tabs-btn-box activeStatus min-w-[94px]" data-val="">{{__('forms.lbl_all')}}</button>
                    <button class="tabs-btn-box activeStatus active min-w-[94px]" data-val="published">{{__('forms.lbl_active')}}</button>
                    <button class="tabs-btn-box activeStatus min-w-[94px]" data-val="draft">{{__('forms.lbl_inactive')}}</button>
                </div>
            </div>
        </div>
    </form>

    <div class="relative">
        <div class="selection-overlay hidden absolute top-1 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" />

            @can('bulk_delete', [\Modules\DocumentCreator\Entities\DCTemplate::class, $templateType])
                <a href="javascript:;" data-uri="{{route("settings.{$templateType}.templates.index")}}" 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>
                    <th scope="col">
                        <input class="table-header-checkbox" type="checkbox" name="select_all" id="select-all" value="1">
                    </th>
                    <th>{{trans("tables.name_title")}}</th>
                    <th>{{trans("tables.status_title")}}</th>
                    <th>{{trans("tables.action_title")}}</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@stop

@section('footer-script')
    <script type="text/javascript">
        PDDataTable({
            url: "{{ route("settings.{$templateType}.templates.index") }}",
            searching : false,
            columns:[
                { data: 'checkboxgrid', name: 'checkboxgrid', orderable: false, searchable: false, className: "checkbox-column"},
                { data: 'name', name: 'name', className:"text-left"},
                { data: 'status', name: 'status', orderable : false},
                { data: 'action', name: 'action', orderable: false, searchable : false, className:"text-right" }
            ],
            order : [1, 'asc'],
            callbackFunc  : function(d){
                d.term = $('input[name="query"]').val();
                d.status = $('#dt-search-form .tabs-btn-box.active').attr('data-val');
			}
        });

        $('body').on('click', '.tabs-btn-box', function () {
            // Reset all tabs and contents for the second set filter
            $(".tabs-btn-box").removeClass("active");

            // Set new active state for the clicked tab in the filter set
            $(this).addClass("active");

             PDTable.draw();
        });
    </script>
@stop