@extends('layouts.admin')
@section('page-css')
    <link rel="stylesheet" href="{{ asset('assets/styles/vendor/datatables.min.css') }}">
@endsection
<style>
    .cdk-textarea-autosize{
        min-height: 21px; height: 21px; display: block; width: 100%; resize: none; -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;overflow: hidden;
        box-sizing: content-box;
        word-break: break-word;
        overflow-wrap: break-word;
        word-wrap: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
        font-size: 18px;
        font-weight: bolder;
        line-height: 1.3em;
        color: #111;
        resize: none;
        border: 0;
        outline: none;
        background: transparent;
        padding: 0 4px 0 0;
    }
</style>
@section('main-content')

    <div class="breadcrumb">
        <h1>Review Templates</h1>
    </div>
    <div class="separator-breadcrumb border-top"></div>


    <section class="review-list">
        <div class="row">
            <div class="col-md-12 mb-4">
                <div class="card text-left">
                    @if(auth()->user()->hasRole(['admin']) || auth()->user()->hasPermissionTo('Can Add Review Templates'))
                        <div class="card-header text-right bg-transparent">
                            <button type="button" data-toggle="modal" data-target=".create_new_review" class="btn btn-primary btn-md m-1"><i class="i-Add text-white mr-2"></i> Add New Review Template</button>
                        </div>
                    @endif

                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="review-list" class="display table table-striped table-bordered dataTable" style="width:100%">
                                <thead>
                                <tr>
                                    <th>Template Name</th>
                                    <th>Number of Questions</th>
                                    <th>Active</th>
                                    <th>Created</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- end of row -->
    <x-admin.reviews.reviews />
@endsection

@section('bottom-js')
    <script src="{{ asset('assets/js/vendor/datatables.min.js') }}"></script>
    <!-- page script -->

    <script>
        var table = $('#review-list').DataTable({
            processing: true,
            serverSide: true,
            dom: 'f<"top"i>rt<"bottom"lp><"clear">',
            pagingType: "full_numbers",
            scrollY: '50vh',
            scrollCollapse: true,
            ajax: "{{route('admin.reviews.list')}}",
            "columnDefs": [ {
                "targets": 'no-sort',
                "orderable": false,
            }],
            fnDrawCallback: function( oSettings ) {
                $('.add_teams').on('click', function(){
                    var deptName = $(this).data('name')
                    var deptId = $(this).data('dept')
                    //$('.create_new_teams').modal('show');
                    $('.create_new_teams').on('shown.bs.modal', function (e) {
                        $('#department_id').val(deptId)
                        var url = '{{ route('admin.teams.store') }}';
                        $('#frmTeams').attr('action', url)
                        $('#action-field').val('create');
                        $('#exampleModalLabel2').text('Create New Teams');
                    });
                });


                $('.edit_dept').on('click', function(){
                    var depId = $(this).data('dept');
                    var deptName = $(this).data('name')
                    var deptTypeId = $(this).data('type')
                    //$('.edit_dept').modal('show');
                    $('.edit_dept').on('shown.bs.modal', function (e) {
                        $('#dept_typed').val(deptTypeId)
                        $('#dept_named').val(deptName)
                        var url = '{{ route('departments.update',":id") }}';
                        url = url.replace(':id', depId);
                        $('#frmDeptEdit').attr('action', url)
                        $('#dept-action-field').val('update');
                        //$('#exampleModalLabel2').text('Create New Teams');
                    });
                });
            }
        });
        $(".create_new_review").on("shown.bs.modal", function (e) {
            $('#reviewTitle').focus();
        });
    </script>
    <script src="{{asset('assets/js/form.validation.script.js')}}"></script>
@endsection