@extends('layouts.master')
@section('title', __('Documents'))

@push('styles')
    <style>
        #custom_toolbar {
            right: 42px;
        }
        .modal-custom-lg {
            max-width: 80%; /* Adjust as needed */
        }
        span{
            word-wrap: break-word
        }
        .private_text{
            margin-left:28px !important;
        }
    </style>
@endpush

@section('content')
    <div class="row">
        <div class="col-12">
            <div id="contentEditRecord" class="contentEditRecord"></div>
            @can('documents.create')
                @include('backend.documents.create')
            @endcan
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <div id="custom_toolbar" class="select">
                            <a data-toggle="tooltip" data-placement="top" title="Add New"
                                class="btn btn-secondary text-white showArchive btnNewRecord" id="btnNewRecord"
                                href="javascript:void(0);">{!! renderIconHtml('add') !!}{{ __('Add New') }}
                            </a>
                        </div>

                        <table class="table table-bordered" id="bstable" data-unique-id="counter" table-for="document"
                            data-toolbar="#custom_toolbar" data-toggle="bstable" data-show-export="false"
                            data-show-button-text="true" data-show-columns="true" data-show-toggle="false"
                            data-show-columns-toggle-all="false" data-ajax="getDocuments" data-side-pagination="server"
                            data-pagination="true" data-total-field="count" data-sortable="true" data-data-field="items"
                            data-filter-control="true" data-icons="icons" data-icons-prefix="bi"
                            data-show-search-clear-button="true" data-loading-template="DataTaleLoadingTemplate" data-search-on-enter-key="true">
                            <thead>
                                <tr>
                                    <th title="#" data-field="counter"
                                        data-width-unit="px">#</th>
                                    <th title="{{ __('Category') }}" data-field="category" data-filter-control="select" data-filter-data="var:category" data-formatter="categoryFormatter"
                                        data-sortable="true" data-filter-control-placeholder="Category">
                                        {{ __('Category') }}</th>
                                    <th title="{{ __('Title') }}" data-field="title" data-filter-control="input"
                                        data-sortable="true" data-filter-control-placeholder="Title">{{ __('Title') }}
                                    </th>
                                    <th title="{{ __('Type') }}" data-field="is_private" data-filter-control="select" data-filter-data="var:is_private" data-formatter="isPrivateFormatter"
                                        data-sortable="true" data-filter-control-placeholder="Type">{{ __('Type') }}</th>

                                    <th title="{{ __('Status') }}" data-field="status" data-filter-control="select" data-filter-data="var:is_status" data-formatter="statusFormatter"
                                        data-sortable="true" data-filter-control-placeholder="Status">{{ __('Status') }}</th>

                                    <th data-field="action" data-width-unit="px">{{ __('Action') }}
                                    </th>
                                </tr>
                            </thead>

                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="documentModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-custom-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLabel">{{ __('Document Details')}}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- Modal content will be injected here -->
                </div>
                <div class="modal-footer d-flex justify-content-start">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{!! renderIconHtml('cancel') !!}{{ __('Close')}}</button>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('scripts')
    <script src="{{ asset('backend/js/pages-js/documents.js') }}"></script>
@endpush