@extends('layouts/eims_layout')
@section('title', '| ' . $data['pageTitle'])
@section('content')
@include('successMsg')
<div class="row">
    <div class="col-md-12">
        <div class="" style="">
            <div class="">
                <div class="panel panel-default" style="background-color:#708090;">
                    <div class="panel-heading" style="padding-bottom:0px">
                        <div class="panel-options">
                            <a href="{{ url('eims/setting/documents/transcript/create') }}"
                                class="btn btn-info pull-right addViewBtn"><i
                                    class="glyphicon glyphicon-plus-sign addIcon"></i>Add {{ $data['pageTitle'] }}
                            </a>
                        </div>
                        <h1 align="center" style="font-family: Antiqua;letter-spacing: 2px">
                            <font color="white">{{ $data['pageTitle'] }} List</font>
                        </h1>
                    </div>
                    <div class="panel-body panelBodyView">
                        <div>
                        </div>
                        <table class="table table-striped table-bordered table-condensed first-col-dark"
                            id="datatable">
                            <thead>
                                <tr>
                                    <th width="30">SL#</th>
                                    <th class="text-center text-nowrap">Alignment Name</th>
                                    <th class="text-center text-nowrap">Water Mark</th>
                                    <th class="text-center text-nowrap">Background Image</th>
                                    <th class="text-center text-nowrap">Status</th>
                                    <th class="text-center text-nowrap">Created By</th>
                                    <th class="text-center text-nowrap">Action</th>
                                </tr>
                            </thead>
                            <tbody id="tableBodySection">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


{{-- Start Form Modal --}}

<div id="myModal" class="modal fade" style="margin-top:5%">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" style="clear:both"></h4>
            </div>
            <div class="modal-body">
                {!! Form::open(['url' => '', 'id' => 'form1', 'role' => 'form', 'class' => 'form-horizontal form-groups']) !!}
                {!! Form::hidden('id', null, ['id' => 'id']) !!}
                {!! Form::hidden('slno', null, [ 'id' => 'slno']) !!}

                <div class="row">
                    <div class="col-md-12">

                        <div class="col-md-7">

                            {{-- template name --}}
                            <div class="form-group">
                                {!! Form::label(
                                'template',
                                'Template: <sup class="text-danger">*</sup>',
                                ['class' => 'col-sm-4 control-label'],
                                false,
                                ) !!}
                                <div class="col-sm-8">
                                    {!! Form::text('template', $value = null, [
                                    'class' => 'form-control',
                                    'id' => 'template',
                                    'type' => 'text',
                                    'placeholder' => 'Enter template name',
                                    ]) !!}
                                    <p id='template_error' style="max-height:3px;"></p>
                                </div>
                            </div>

                            {{-- admit card rules --}}
                            <div class="form-group ">
                                {!! Form::label(
                                'admit_card_rules',
                                'Admit Card Rules: <sup class="text-danger">*</sup>',
                                ['class' => 'col-sm-4 control-label'],
                                false,
                                ) !!}
                                <div class="col-sm-8">
                                    {!! Form::textarea('admit_card_rules', $value = null, [
                                    'class' => 'form-control',
                                    'id' => 'admit_card_rules',
                                    'type' => 'text',
                                    'placeholder' => 'Enter admit card rules',
                                    'rows' => 5,
                                    ]) !!}
                                    <p id='admit_card_rules_error' style="max-height:3px;"></p>
                                </div>
                            </div>

                            {{-- show admit card rules to front or back --}}
                            <div class="form-group ">
                                {!! Form::label(
                                'show_admit_card_rules_to_front',
                                'Show Admit Card Rules: <sup class="text-danger">*</sup>',
                                ['class' => 'col-sm-4 control-label'],
                                false,
                                ) !!}
                                <div class="col-sm-8">
                                    {!! Form::select('show_admit_card_rules_to_front', [
                                    true => 'Front',
                                    false => 'Back',
                                    ],
                                    null,
                                    [
                                    'class' => 'form-control',
                                    'id' => 'show_admit_card_rules_to_front',
                                    'type' => 'text',
                                    'placeholder' => 'Select show admit card rules',
                                    ]) !!}
                                    <p id='show_admit_card_rules_to_front_error' style="max-height:3px;"></p>
                                </div>
                            </div>
                            {{-- show admit card rules to front or back --}}

                            {{-- active status --}}
                            <div class="form-group">
                                {!! Form::label(
                                'status',
                                'Status: <sup class="text-danger">*</sup>',
                                ['class' => 'col-sm-4 control-label'],
                                false,
                                ) !!}
                                <div class="col-sm-8">
                                    {!! Form::select('status', $data['activeStatus'], null,
                                    [
                                    'class' => 'form-control',
                                    'id' => 'status',
                                    'type' => 'text',
                                    'placeholder' => 'Select status',
                                    ]) !!}
                                    <p id='status_error' style="max-height:3px;"></p>
                                </div>
                            </div>

                            {{-- visible field --}}
                            {!! Form::label('', 'Visible Field:', ['class' => 'control-label']) !!}

                            <div class="row">

                                <div class="col-sm-6">
                                    {!! Form::checkbox('is_visible_exam_name', '1', false, ['class' => 'form-check-input', 'id' => 'is_visible_exam_name']) !!}
                                    {!! Form::label('is_visible_exam_name', 'Exam Name', ['class' => 'form-check-label']) !!}
                                </div>


                                <div class="col-sm-6">
                                    {!! Form::checkbox('is_visible_student_name', '1', false, ['class' => 'form-check-input', 'id' => 'is_visible_student_name']) !!}
                                    {!! Form::label('is_visible_student_name', 'Student Name', ['class' => 'form-check-label']) !!}
                                </div>

                                <div class="col-sm-6">
                                    {!! Form::checkbox('is_visible_date_of_birth', '1', false, ['class' => 'form-check-input', 'id' => 'is_visible_date_of_birth']) !!}
                                    {!! Form::label('is_visible_date_of_birth', 'Date of Birth', ['class' => 'form-check-label']) !!}
                                </div>

                                <div class="col-sm-6">
                                    {!! Form::checkbox('is_visible_gender', '1', false, ['class' => 'form-check-input', 'id' => 'is_visible_gender']) !!}
                                    {!! Form::label('is_visible_gender', 'Gender', ['class' => 'form-check-label']) !!}
                                </div>

                                <div class="col-sm-6">
                                    {!! Form::checkbox('is_visible_photo', '1', false, ['class' => 'form-check-input', 'id' => 'is_visible_photo']) !!}
                                    {!! Form::label('is_visible_photo', 'Photo', ['class' => 'form-check-label']) !!}
                                </div>

                                <div class="col-sm-6">
                                    {!! Form::checkbox('is_visible_exam_routine', '1', false, ['class' => 'form-check-input', 'id' => 'is_visible_exam_routine']) !!}
                                    {!! Form::label('is_visible_exam_routine', 'Exam Routine', ['class' => 'form-check-label']) !!}
                                </div>

                                <div class="col-sm-6">
                                    {!! Form::checkbox('is_visible_rules', '1', false, ['class' => 'form-check-input', 'id' => 'is_visible_rules']) !!}
                                    {!! Form::label('is_visible_rules', 'Admit Card Rules', ['class' => 'form-check-label']) !!}
                                </div>
                            </div>
                        </div>

                        <div class="col-md-5">
                            <div class="form-group">
                                {!! Form::label(
                                'administrator_signature',
                                'Administrator Signature: <sup class="text-danger">*</sup>',
                                ['class' => 'col-sm-4 control-label'],
                                false,
                                ) !!}
                                <div class="col-sm-8">
                                    <img width="100" height="60" id="administrator_signature_view" class="hidden"
                                        alt="Sign Preview">

                                    {!! Form::file('administrator_signature', null, [
                                    'class' => 'form-control',
                                    'id' => 'administrator_signature',
                                    'type' => 'file',
                                    'accept' => 'image/*',
                                    'autocomplete' => 'off',
                                    ]) !!}
                                    <p class="error text-center alert alert-danger hidden"
                                        id="administrator_signature_error"></p>
                                </div>
                            </div>

                            <div class="form-group">
                                {!! Form::label(
                                'background_image',
                                'Background Image: <sup class="text-danger">*</sup>',
                                ['class' => 'col-sm-4 control-label'],
                                false,
                                ) !!}
                                <div class="col-sm-8">
                                    <img width="100" height="60" id="background_image_view" class="hidden"
                                        alt="Background Image Preview">

                                    {!! Form::file('background_image', $value = null, [
                                    'class' => 'form-control',
                                    'id' => 'background_image',
                                    'type' => 'file',
                                    'accept' => 'image/*',
                                    'autocomplete' => 'off',
                                    ]) !!}
                                    <p class="error text-center alert alert-danger hidden"
                                        id="background_image_error"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {!! Form::close() !!}
                <div class="modal-footer">
                    {!! Form::button('<span id=""></span>', ['class' => 'btn actionBtn', 'id' => 'footer_action_button']) !!}
                    {!! Form::button('<span id=""></span>', [
                    'class' => 'btn actionBtn',
                    'data-dismiss' => 'modal',
                    'id' => 'footer_action_button2',
                    ]) !!}

                    {!! Form::button('<span id=""> Close</span>', [
                    'class' => 'btn btn-warning',
                    'data-dismiss' => 'modal',
                    'id' => 'footer_action_button_dismis',
                    ]) !!}
                </div>

            </div>
        </div>
    </div>
</div>

{{-- End Form Modal --}}

<script type="text/javascript">
    $(document).ready(function() {
        const dataTable = $('#datatable').DataTable({
            "sDom": "ltipr", // For removeing default Search bar //
            "processing": true,
            "serverSide": true,
            "ordering": false,

            "ajax": {

                "url": "{{ Request::url() }}",
                "type": "POST",
                '_token': $('input[name=_token]').val(),
                "beforeSend": function() {
                    $('#loadingModal').show();

                },

                "data": function(d) {
                    var inputs = {};
                    $.each($('form').serializeArray(), function() {
                        inputs[this.exam_name] = this.value;
                    });
                    d.filter = inputs;
                }
            },
            "drawCallback": function(settings) {
                $('#loadingModal').hide();
            },


            "columns": [{
                    "data": "sl"
                },
                {
                    "data": "alignment_type",
                    className: "text-align-center"
                },
                {
                    "data": "is_visible_watermark",
                    className: "text-align-center",
                    "render": function(data, type, row, meta) {
                        return data == 1 ? 'Yes' : 'No';
                    }
                },

                {
                    "data": "background_image",
                    className: "text-align-center",
                    "render": function(data, type, row, meta) {
                        return `<img src="{{ asset('/images/eims/setting/design_student_transcript/background_image') }}/${data}" alt="Background Image" width="90" height="90">`;
                    }
                },


                {
                    "data": "status",
                    className: "text-align-center"
                },
                {
                    "data": "created_by",
                    className: "text-align-center"
                },
                {
                    "data": "id",
                    className: "text-align-center text-nowrap"
                }
            ],

            "columnDefs": [{
                "targets": -1,
                "data": "id",
                "render": function(data, type, row, meta) {
                    return `
                        <a 
                        href="{{route("eims_student_transcript_design_edit")}}?row_id=${row.id}"
                        class="btn btn-xs btn-info edit-action"><i class="fa fa-edit" aria-hidden="true"></i>
                        </a>

                        <button 
                            data-row_id="${row.id}"
                            class="btn btn-xs btn-danger delete-action">
                            <i class="fa fa-trash" aria-hidden="true"></i>
                        </button>

                        `;
                }
            }]

        });



        //background image preview
        $('#background_image').change(function(e) {
            var output = document.getElementById('background_image_view');
            output.src = URL.createObjectURL(event.target.files[0]);
        });


        $(document).on('click', '.delete-action', function() {
            if (hasAccess('eims/setting/student/design-id-card/delete')) {
                Swal.fire({
                    title: 'Are you sure?',
                    text: "Once delete you won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#7e7979',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        console.log($(this));
                        $.ajax({
                            type: 'post',
                            url: '{{ Request::url() }}/delete',
                            data: {
                                    '_token': $('input[name=_token]').val(),
                                    'row_id': $(this).data('row_id'),
                                },
                                success: function(_response) {

                                if (_response.responseTitle == 'success') {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Deleted!',
                                        text: 'This data has been deleted.',
                                        showConfirmButton: false,
                                        timer: 1500
                                    })
                                    dataTable.ajax.reload();

                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Failed to delete!',
                                        text: 'This data has not been deleted.',
                                        showConfirmButton: true,
                                    })
                                }
                            }
                        });

                    }
                })
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Failed to delete!',
                    text: 'Access Denied',
                    showConfirmButton: true,
                })
            }
        });
    }); //ready function end
</script>
@endsection