@extends('layouts/eims_layout')
@section('title', '| ' . $pageTitle)
@section('content')



<style>
    .submitCloseBtn {
        margin-left: 118%;
    }
</style>


<div class="row add-data-form">
    <div class="col-md-12">
        <div class="col-md-2"></div>


        <div class="col-md-8 fullbody">
            <div class="viewTitle" style="border-bottom: 1px solid white;">
                <a href="{{ url('eims/setting/documents/transcript') }}"
                    class="btn btn-info pull-right addViewBtn"><i class="glyphicon glyphicon-th-list viewIcon">
                    </i>{{ $pageTitle }} List</a>
            </div>
            <div class="panel panel-default panel-border">
                <div class="panel-heading">
                    <div class="panel-title">Add {{ $pageTitle }}</div>
                </div>

                <div class="panel-body">

                    {!! Form::open([
                    'url' => '',
                    'enctype' => 'multipart/form-data',
                    'role' => 'form',
                    'class' => 'form-horizontal form-groups',
                    'id' => 'addDesignAdmitCardForm',
                    ]) !!}

                    <div class="row">

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

                            <div class="row">

                                <div class="visible_fields" style="margin-left: 2%;">

                                    <div style="margin-left: 0.5%;">
                                        <label for="visible_field">Visible Field</label>
                                    </div>

                                    <div class="col-sm-6">
                                        <input type="checkbox" name="is_visible_watermark" value="1" class="form-check-input" id="watermark">
                                        <label for="watermark" class="form-check-label">Is Water Mark?</label>
                                    </div>

                                    <div class="col-sm-6">
                                        <input type="checkbox" name="is_visible_logo" value="1" class="form-check-input" id="is_visible_logo">
                                        <label for="logo" class="form-check-label">Is Logo?</label>
                                    </div>

                                    <div class="col-sm-6">
                                        <input type="checkbox" name="is_visible_background" value="1" class="form-check-input" id="background">
                                        <label for="background" class="form-check-label">Is Background?</label>
                                    </div>





                                    <div class="col-sm-6">
                                        <input type="checkbox" name="is_visible_verified_signature_image" value="1" class="form-check-input" id="is_visible_verified_signature_image">
                                        <label for="is_visible_verified_signature_image" class="form-check-label">Is Verified Sign?</label>
                                    </div>

                                    <div class="col-sm-12">
                                        <input type="checkbox" name="is_visible_examination_controller_signature_image" value="1" class="form-check-input" id="is_visible_examination_controller_signature_image">
                                        <label for="is_visible_examination_controller_signature_image" class="form-check-label">Is Examination Controller Sign?</label>
                                    </div>

                                </div>

                            </div>
                        </div>

                        <div class="col-md-4" style="border-left: 1px dotted #000;">




                            <div class="form-group">
                                {!! Form::label(
                                'verified_by_signature_image',
                                'Verified by: <sup class="text-danger">*</sup>',
                                ['class' => 'col-sm-4 control-label'],
                                false,
                                ) !!}
                                <div class="col-sm-8" style="position: relative; display: inline-block;">
                                    <img width="135" height="60" src="{{ asset('images/eims/' . ('passport-size.png')) }}" id="verified_by_signature_image_view"
                                        alt="Sign Preview" onclick="document.getElementById('verified_by_signature_image').click();" style="cursor: pointer;">
                                    <i
                                        class="fa fa-camera fa-xs" id="verified_by_signature_camera_view"
                                        style="position: absolute; top: 50%; left: 32%; transform: translate(-50%, -50%); color: white; background: black; padding: 3px; border-radius: 50%; cursor: pointer;"></i>
                                    {!! Form::file('verified_by_signature_image',[
                                    'class' => 'form-control hidden',
                                    'id' => 'verified_by_signature_image',
                                    'type' => 'file',
                                    'accept' => 'image/*',
                                    'autocomplete' => 'off',
                                    ]) !!}
                                    <p id='verified_by_signature_image_error' style="max-height: 3px; font-size: small; line-height: 1; margin-bottom: 9px;"></p>
                                </div>
                            </div>


                            <div class="form-group">
                                {!! Form::label(
                                'examination_signature_image',
                                'Examination Controller: <sup class="text-danger">*</sup>',
                                ['class' => 'col-sm-4 control-label'],
                                false,
                                ) !!}
                                <div class="col-sm-8">
                                    <img width="135" height="60" src="{{ asset('images/eims/' . ('passport-size.png')) }}" id="examination_signature_image_view"
                                        alt="Sign Preview" onclick="document.getElementById('examination_signature_image').click();" style="cursor: pointer;">
                                    <i
                                        class="fa fa-camera fa-xs" id="examination_signature_camera_view"
                                        style="position: absolute; top: 50%; left: 32%; transform: translate(-50%, -50%); color: white; background: black; padding: 3px; border-radius: 50%; cursor: pointer;"></i>
                                    {!! Form::file('examination_signature_image',[
                                    'class' => 'form-control hidden',
                                    'id' => 'examination_signature_image',
                                    'type' => 'file',
                                    'accept' => 'image/*',
                                    'autocomplete' => 'off',
                                    ]) !!}
                                    <p id='examination_signature_image_error' style="max-height: 3px; font-size: small; line-height: 1; margin-bottom: 2px;"></p>
                                </div>
                            </div>

                        </div>



                        <div class="col-md-4" style="border-left: 1px dotted #000;">

                            <div class="form-group">
                                {!! Form::label(
                                'logo_image',
                                'Logo Image: <sup class="text-danger">*</sup>',
                                ['class' => 'col-sm-4 control-label'],
                                false,
                                ) !!}
                                <div class="col-sm-8">
                                    <img width="135" height="60" src="{{ asset('images/eims/' . ('passport-size.png')) }}" id="logo_image_view"
                                        alt="Logo Image Preview" onclick="document.getElementById('logo_image').click();" style="cursor: pointer;">
                                    <i
                                        class="fa fa-camera fa-xs" id="logo_camera_view"
                                        style="position: absolute; top: 50%; left: 32.5%; transform: translate(-50%, -50%); color: white; background: black; padding: 3px; border-radius: 50%; cursor: pointer;"></i>

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

                                    <p id='logo_image_error' style="max-height: 3px; font-size: small; line-height: 1; margin-bottom: 2px;"></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="135" height="60" src="{{ asset('images/eims/' . ('passport-size.png')) }}" id="background_image_view"
                                        alt="Background Image Preview" onclick="document.getElementById('background_image').click();" style="cursor: pointer;">
                                    <i
                                        class="fa fa-camera fa-xs" id="background_image_camera_view"
                                        style="position: absolute; top: 50%; left: 32.5%; transform: translate(-50%, -50%); color: white; background: black; padding: 3px; border-radius: 50%; cursor: pointer;"></i>

                                    {!! Form::file('background_image', [
                                    'class' => 'form-control hidden',
                                    'id' => 'background_image',
                                    'type' => 'file',
                                    'accept' => 'image/*',
                                    'autocomplete' => 'off',
                                    ]) !!}

                                    <p id='background_image_error' style="max-height: 3px; font-size: small; line-height: 1; margin-bottom: 2px;"></p>                                    
                                 </div>
                            </div>



                        </div>
                    </div>


                    <div class="row">
                        <div class="col-md-4"></div>
                        <div class="form-group col-md-4 text-center">
                            {!! Form::label('submit', ' ', ['class' => 'col-sm-2 control-label']) !!}
                            <div class="col-sm-12 submitCloseBtn">
                                {!! Form::submit('Submit', ['id' => 'add', 'class' => 'btn btn-info']) !!}
                                <a href="{{ url('eims/setting/documents/transcript/') }}"
                                    class="btn btn-danger closeBtn">Close</a>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <span id="success" style="color:green; font-size:20px;"></span>
                        </div>
                    </div>

                    {!! Form::close() !!}

                </div>
            </div>
            <div class="footerTitle" style="border-top:1px solid white"></div>
        </div>

        <div class="col-md-2"></div>
    </div>
</div>
@endsection


<script src="{{ asset('js/jquery-1.11.1.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {


        //Verified By signature image preview
        $('#verified_by_signature_image').change(function(e) {
            const output = $('#verified_by_signature_image_view');
            $('#verified_by_signature_camera_view').hide();
            output.removeClass('hidden');
            output.attr('src', URL.createObjectURL(event.target.files[0]));
        });
        ////////End Image Preview ///////////////////////////////////


        //examination Controller signature image preview
        $('#examination_signature_image').change(function(e) {
            const output = $('#examination_signature_image_view');
            $('#examination_signature_camera_view').hide();
            output.removeClass('hidden');
            output.attr('src', URL.createObjectURL(event.target.files[0]));
        });
        ////////End Image Preview ///////////////////////////////////



        //logo image preview
        $('#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]));
        });
        ////////End Image Preview ///////////////////////////////////



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







        $('#addDesignAdmitCardForm').submit(function(event) {
            event.preventDefault();
            const formData = new FormData(this);
            $.ajax({

                type: 'post',
                url: '{{ route('eims_student_transcript_design_store') }}',
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                dataType: 'json',

                success: function(_response) {
                    if (_response.errors) {
                        setErrorsText(_response.errors);
                    } else {
                        Swal.fire({
                            icon: _response.responseStatus,
                            title: _response.responseTitle,
                            text: _response.responseText,
                            showConfirmButton: false,
                            timer: 1500
                        })
                        setTimeout(function() {
                            window.location.href =
                                "{{ route('eims_student_transcript_design') }}";
                        }, 1000);

                    }
                },
                error: function(_response) {
                    setErrorsText(_response.errors);

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


                }
            });
        });

        hideErrorMessage();


    });
</script>


<script>
    function hideErrorMessage() {
        $("input").keyup(function() {
            var inputValue = $(this).val();
            var inputId = $(this).attr('id');
            // console.log(inputId);

            if (inputValue) {
                $('#' + inputId + '_error').hide();
            } else {
                $('#' + inputId + '_error').show();
            }
        });

        $("select").change(function() {
            var selectedValue = $(this).val();
            var elementId = $(this).attr('id');
            console.log(elementId);
            if (selectedValue) {
                $('#' + key + '_error').hide();
            } else {
                $('#' + key + '_error').show();
            }
        });

        $("input[type='file']").change(function() {
            var elementId = $(this).attr("id");

            if ($(this).val()) {
                $("#" + elementId + "_error").empty().hide();
            } else {
                $("#" + elementId + "_error").show();
            }
        });

    }


    function setErrorsText(errors) {
        $.each(errors, function(key, value) {
            // console.log(key,value);
            // if key has institute_
            if (key.includes('institute_')) {
                // id and key slice from .
                const id = key.slice(key.indexOf('.') + 1);
                key = key.slice(0, key.indexOf('.'));
                $($(`.${key}_error`)[id]).empty().show().append(
                    '<span class="errormsg" style="color:red;">' + value + '</span>');
            } else {
                console.log(key, value);
                $('#' + key + '_error').empty().show().append(
                    '<span class="errormsg" style="color:red;">' + value + '</span>');
            }
        });
    }




    // Run the function once to set the initial state
    toggleSignatureImage();
</script>