@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">Edit {{ $pageTitle }}</div>
                </div>

                <div class="panel-body">

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


                    <input type="hidden" name="id" value="{{ $editStudentIdCard->id }}">

                    <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">
                                        {!! Form::checkbox('is_visible_watermark', '1', $editStudentIdCard->is_visible_watermark, ['class' => 'form-check-input', 'id' => 'watermark']) !!}
                                        {!! Form::label('watermark', 'Is Water Mark?', ['class' => 'form-check-label']) !!}
                                    </div>

                                    <div class="col-sm-6">
                                        {!! Form::checkbox('is_visible_logo', '1', $editStudentIdCard->is_visible_logo_image, ['class' => 'form-check-input', 'id' => 'is_visible_logo']) !!}
                                        {!! Form::label('is_visible_logo', 'Is Logo?', ['class' => 'form-check-label']) !!}
                                    </div>

                                    <div class="col-sm-6">
                                        {!! Form::checkbox('is_visible_background', '1', $editStudentIdCard->is_visible_background_image, ['class' => 'form-check-input', 'id' => 'background']) !!}
                                        {!! Form::label('background', 'Is Background?', ['class' => 'form-check-label']) !!}
                                    </div>

                                    <div class="col-sm-6">
                                        {!! Form::checkbox('is_visible_verified_by_signature_image', '1', $editStudentIdCard->is_visible_vice_principal_signature_image, ['class' => 'form-check-input', 'id' => 'is_visible_verified_signature_image']) !!}
                                        {!! Form::label('is_visible_verified_signature_image', 'Is Verified Sign?', ['class' => 'form-check-label']) !!}
                                    </div>

                                    <div class="col-sm-12">
                                        {!! Form::checkbox('is_visible_examination_controller_signature_image', '1', $editStudentIdCard->is_visible_class_teacher_signature_image, ['class' => 'form-check-input', 'id' => 'is_visible_examination_controller_signature_image']) !!}
                                        {!! Form::label('is_visible_examination_controller_signature_image', 'Is Examination Controller Sign?', ['class' => 'form-check-label']) !!}
                                    </div>

                                </div>

                            </div>

                            <div class="row">
                                <div class="col-sm-12" style="margin-top: 3%; margin-left: 1%;">
                                    <div class="form-check">
                                        <label for="horizontal_name" class="form-check-label">Status:</label>
                                        @foreach($activeStatus as $keyStatus => $status)
                                        {!! Form::radio('status', $keyStatus, $keyStatus === $editStudentIdCard->status, ['class' => 'form-check-input', 'id' => 'status'.$keyStatus, 'style' => 'margin-left: 10px;']) !!}
                                        <label for="status{{$keyStatus}}" class="form-check-label">{{$status}}</label>
                                        @endforeach
                                        <p id='status_error' class="text-danger mt-1"></p>
                                    </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="{{ !$editStudentIdCard->vice_principal_signature_image ? asset('images/eims/passport-size.png') : asset('/images/eims/setting/design_student_transcript/verified_by_signature_image/' . $editStudentIdCard->vice_principal_signature_image) }}"
                                        id="verified_by_signature_image_view" alt="Verified By 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: 0.8; margin: 3px 0px 6px 0px;"></p>
                                </div>
                            </div>

                            <div class="form-group">
                                {!! Form::label(
                                'examination_controller_signature_image',
                                'Examination Controller: <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="{{ !$editStudentIdCard->signature_image ? asset('images/eims/passport-size.png') : asset('/images/eims/setting/design_student_transcript/examination_controller_signature_image/' . $editStudentIdCard->signature_image) }}"
                                        id="examination_controller_signature_image_view" alt="Examination Controller Sign Preview" onclick="document.getElementById('examination_controller_signature_image').click();" style="cursor: pointer;">

                                    <i
                                        class="fa fa-camera fa-xs" id="examination_controller_signature_image_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_controller_signature_image',[
                                    'class' => 'form-control hidden',
                                    'id' => 'examination_controller_signature_image',
                                    'type' => 'file',
                                    'accept' => 'image/*',
                                    'autocomplete' => 'off',
                                    ]) !!}
                                    <p id='examination_controller_signature_image_error' style="max-height: 3px; font-size: small; line-height: 0.8; margin: 3px 0px 6px 0px;"></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="{{ !$editStudentIdCard->logo_image ? asset('images/eims/passport-size.png') : asset('/images/eims/setting/design_student_transcript/logo_image/' . $editStudentIdCard->logo_image) }}"
                                        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: 0.8; margin: 3px 0px 6px 0px;"></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="{{ !$editStudentIdCard->background_image ? asset('images/eims/passport-size.png') : asset('/images/eims/setting/design_student_transcript/background_image/' . $editStudentIdCard->background_image) }}"
                                        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: 0.8; margin: 3px 0px;"></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() {


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


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


        //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_controller_signature_image').change(function(e) {
            const output = $('#examination_controller_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_update') }}',
                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>');
            }
        });
    }
</script>