@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="{{ route('eims_student_testimonial_design_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">Template Name</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" style="width: 65%;">
            <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-10">

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

                            @php
                                if ($companyType === 'UNV'){
                                    $principalLabel = 'Chancellor';
                                }elseif ($companyType === 'SCL'){
                                    $principalLabel = 'Headmaster';
                                }else{
                                    $principalLabel = 'Principal';
                                }
                            @endphp

                            {{-- principal_name --}}
                            <div class="form-group row">

                                {!! Form::label(
                                    'principal_name',
                                    $principalLabel .' Name: <sup class="text-danger">*</sup>',
                                    ['class' => 'col-sm-3 control-label'],
                                    false,
                                ) !!}

                                <div class="col-sm-6">
                                    {!! Form::text('principal_name', $value = null, [
                                        'class' => 'form-control',
                                        'id' => 'principal_name',
                                        'type' => 'text',
                                        'placeholder' => "Enter $principalLabel name",
                                    ]) !!}
                                    <p id='principal_name_error' style="max-height:3px;"></p>
                                </div>

                                <div class="col-sm-3">
                                    {!! Form::checkbox('is_visible_principal_signature_image', '1', false, ['class' => 'form-check-input', 'id' => 'is_visible_principal_signature_image']) !!}
                                    {!! Form::label('is_visible_principal_signature_image', "Is Visible $principalLabel Signature", ['class' => 'form-check-label']) !!}
                                </div>
                            </div>


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

                            <div class="row">

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

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

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

                        <div class="col-md-2" style="border-left: 2px dotted #dddddd; padding-left: 20px;">

                            {{--  principal_signature_image --}}
                            <div class="form-group text-left">
                                <div style="position: relative; display: inline-block; cursor: pointer;"
                                     onclick="document.getElementById('principal_signature_image').click();">
                                    <img
                                        id="principal_signature_image_view"
                                        class="img-responsive"
                                        src="{{ asset('images/eims/passport-size.png') }}"
                                        alt="Signature Image"
                                        style="height: 40px; width: 150px; "
                                    >
                                    <i
                                        class="fa fa-camera"
                                        style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; background: black; padding: 5px; border-radius: 50%; cursor: pointer;"
                                    ></i>
                                </div>
                                <div>
                                    <p class="">{{$principalLabel}} Signature Image</p>
                                    <p class="error text-center alert alert-danger hidden"
                                       id="principal_signature_image_error"></p>
                                </div>

                                {!! Form::file('principal_signature_image', [
                                    'class' => 'hidden',
                                    'id' => 'principal_signature_image',
                                    'type' => 'file',
                                    'accept' => 'image/*',
                                    'autocomplete' => 'off',
                                ]) !!}
                            </div>

                            {{-- logo_image --}}
                            <div class="form-group text-left">
                                <div style="position: relative; display: inline-block; cursor: pointer;"
                                     onclick="document.getElementById('logo_image').click();">
                                    <img
                                        id="logo_image_view"
                                        class="img-responsive"
                                        src="{{ asset('images/eims/passport-size.png') }}"
                                        alt="Logo Image"
                                        style="height: 150px; width: 150px; "
                                    >
                                    <i
                                        class="fa fa-camera"
                                        style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; background: black; padding: 5px; border-radius: 50%; cursor: pointer;"
                                    ></i>
                                </div>
                                <div>
                                    <p class="">Logo Image</p>
                                    <p class="error text-center alert alert-danger hidden"
                                       id="logo_image_error"></p>
                                </div>

                                {!! Form::file('logo_image', [
                                    'class' => 'hidden',
                                    'id' => 'logo_image',
                                    'type' => 'file',
                                    'accept' => 'image/*',
                                    'autocomplete' => 'off',
                                ]) !!}
                            </div>

                            {{--  background_image --}}
                            <div class="form-group text-left">
                                <div style="position: relative; display: inline-block; cursor: pointer;"
                                     onclick="document.getElementById('background_image').click();">
                                    <img
                                        id="background_image_view"
                                        class="img-responsive"
                                        src="{{ asset('images/eims/passport-size.png') }}"
                                        alt="Student Photo"
                                        style="height: 60px; width: 150px; "
                                    >
                                    <i
                                        class="fa fa-camera"
                                        style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; background: black; padding: 5px; border-radius: 50%; cursor: pointer;"
                                    ></i>
                                </div>
                                <div>
                                    <p class="">Background Image</p>
                                    <p class="error text-center alert alert-danger hidden"
                                       id="background_image_error"></p>
                                </div>

                                {!! Form::file('background_image',  [
                                        'class' => 'hidden',
                                        'id' => 'background_image',
                                        'type' => 'file',
                                        'accept' => 'image/*',
                                        'autocomplete' => 'off',
                                    ]) !!}
                            </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": "name",
                        className: "text-align-center"
                    },
                    {
                        "data": "status_td",
                        className: "text-align-center"
                    },
                    {
                        "data": "created_by",
                        className: "text-align-center"
                    },
                    {
                        "data": "id",
                        className: "text-align-center text-nowrap",
                        "render": function (data, type, row) {
                            let html = '';

                            html += `
                            <a href="{{route("eims_student_testimonial_design_edit")}}?id=${row.encoded_id}" class="btn btn-xs btn-info " >
                                <i class="fa fa-edit" aria-hidden="true"></i>
                            </a>`;

                            html += `
                            <a href="{{route("eims_student_testimonial_design_view")}}?id=${data}" class="btn btn-xs btn-info " target="_blank">
                                <i class="fa fa-eye" aria-hidden="true"></i>
                            </a>`;


                            html += '<a href="javascript:;" data-id=' + data +
                                ' class="btn btn-xs btn-danger delete-action"><i class="fa fa-trash" aria-hidden="true"></i></a>';


                            return html;

                        }
                    }
                ],
            });

            //principal_signature_image preview
            $('#principal_signature_image').change(function (e) {
                const output = $('#principal_signature_image_view');
                output.removeClass('hidden');
                output.attr('src', URL.createObjectURL(event.target.files[0]));
            });

            // logo_image view
            $('#logo_image').change(function (e) {
                const output = $('#logo_image_view');
                $('#logo_camera_view').hide();
                output.removeClass('hidden');
                output.attr('src', URL.createObjectURL(event.target.files[0]));
            });

            //background image preview
            $('#background_image').change(function (e) {
                const output = $('#background_image_view');
                output.removeClass('hidden');
                output.attr('src', URL.createObjectURL(event.target.files[0]));
            });


            $(document).on('click', '.edit-modal', function () {
                if (hasAccess('eims/setting/examination/design-admit-card/update')) {

                    $('.errormsg').empty();
                    $('#footer_action_button').text(" Update").addClass('glyphicon glyphicon-check');
                    //$('#footer_action_button').removeClass('glyphicon-trash');
                    $('#footer_action_button_dismis').text(" Close").addClass('glyphicon glyphicon-remove');
                    $('.actionBtn').addClass('btn-success').removeClass('btn-danger').addClass('edit');
                    $('.modal-title').text('Update Data');
                    $('.modal-header').css({
                        "background-color": "black",
                        "color": "white",
                        "padding": "10px"
                    });
                    $('.modal-dialog').css('width', '50%');
                    $('.deleteContent').hide();
                    $('.form-horizontal').show();
                    $('#id').val($(this).data('id'));
                    $('#slno').val($(this).data('slno'));
                    $('#campus_id').val($(this).data('campusid'));

                    $('#name').val(decodeURIComponent($(this).data('name')));
                    $('#principal_name').val(decodeURIComponent($(this).data('principal_name')));

                    const is_visible_principal_signature_image_value = decodeURIComponent($(this).data('is_visible_principal_signature_image'));
                    $('#is_visible_principal_signature_image').prop('checked', is_visible_principal_signature_image_value == 1);


                    const is_visible_watermark_value = decodeURIComponent($(this).data('is_visible_watermark'));
                    $('#is_visible_watermark').prop('checked', is_visible_watermark_value == 1);

                    const is_visible_logo_image_value = decodeURIComponent($(this).data('is_visible_logo_image'));
                    $('#is_visible_logo_image').prop('checked', is_visible_logo_image_value == 1);

                    const is_visible_background_image_value = decodeURIComponent($(this).data('is_visible_background_image'));
                    $('#is_visible_background_image').prop('checked', is_visible_background_image_value == 1);

                    const principal_signature_image_value = decodeURIComponent($(this).data('principal_signature_image'));
                    if (principal_signature_image_value !== null && principal_signature_image_value !== 'null' && principal_signature_image_value !== '') {
                        $('#principal_signature_image_view').attr('src',
                            `{{ asset('images/eims/setting/student_testimonial_design/principal_signature_image') }}/${principal_signature_image_value}`
                        ).removeClass('hidden');
                    }

                    const logo_image_value = decodeURIComponent($(this).data('logo_image'));
                    if (logo_image_value !== null && logo_image_value !== 'null' && logo_image_value !== '') {
                        $('#logo_image_view').attr('src',
                            `{{ asset('images/eims/setting/student_testimonial_design/logo_image') }}/${logo_image_value}`
                        ).removeClass('hidden');
                    }

                    const background_image_value = decodeURIComponent($(this).data('background_image'));
                    if (background_image_value !== null && background_image_value !== 'null' && background_image_value !== '') {
                        $('#background_image_view').attr('src',
                            `{{ asset('/images/eims/setting/student_testimonial_design/background_image') }}/${background_image_value}`
                        ).removeClass('hidden');
                    }

                    $('#status').val(decodeURIComponent($(this).data('status'))).change();
                    $('#footer_action_button2').hide();
                    $('#footer_action_button').show();
                    $('.actionBtn').removeClass('delete');
                    $('#myModal').modal('show');
                }
            });

            $('.modal-footer').on('click', '.edit', function () {
                event.preventDefault();
                const formData = new FormData(document.getElementById('form1'));

                $.ajax({
                    type: 'post',
                    url: '{{ route("eims_student_testimonial_design_update") }}',
                    data: formData,
                    async: false,
                    cache: false,
                    contentType: false,
                    processData: false,
                    dataType: 'json',


                    success: function (_response) {
                        Swal.fire({
                            icon: _response.responseStatus,
                            title: _response.responseTitle,
                            text: _response.responseText,
                            showConfirmButton: false,
                            timer: 1500
                        })
                        if (_response.responseStatus === 'success') {
                            $('#myModal').modal('hide');
                            dataTable.ajax.reload();
                        }

                    },
                    error: function (_response) {
                        const {responseStatus, responseTitle, responseText, errors} = _response.responseJSON;

                        Swal.fire({
                            icon: responseStatus,
                            title: responseTitle,
                            text: responseText,
                            showConfirmButton: true,
                        })

                        if (errors) {
                            $.each(errors, function (key, value) {
                                $('#' + key + '_error').text(value);
                            });
                        }
                    }
                });
            });

            $(document).on('click', '.delete-action', function () {
                if (hasAccess('eims/setting/examination/design-marksheet/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) {
                            $.ajax({
                                type: 'post',
                                url: '{{ Request::url() }}/delete',
                                data: {
                                    '_token': $('input[name=_token]').val(),
                                    'id': $(this).data('id')
                                },
                                success: function (_response) {
                                    const {responseStatus, responseTitle, responseText} = _response;

                                    if (responseStatus === '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,
                                        })
                                    }
                                },
                                error: function (response) {
                                    const {responseStatus, responseTitle, responseText, errors} = response.responseJSON;

                                    Swal.fire({
                                        icon: responseStatus,
                                        title: responseTitle,
                                        text: responseText,
                                        showConfirmButton: true,
                                    })
                                }
                            });


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