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






<style>





</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/transfer-certificate') }}"
                    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-7">

                            <div class="row">

                                <div class="col-sm-12">

                                    <div class="form-check" style="margin-bottom:1%;">
                                        <div class="row justify-content-center align-items-center">
                                            <label for="principal_name" class="col-sm-3 col-form-label label-move">Principal Name:</label>
                                            <div class="col-sm-6">
                                                <input type="text" name="principal_name" class="form-control" id="principal_name" style="width: 100%;" placeholder="Enter Principal Name">
                                            </div>
                                            <div class="col-sm-3">
                                                <input type="checkbox" name="is_visible_principal_signature_image" value="1" class="form-check-input" id="principal_signature">
                                                <label for="principal_signature" class="form-check-label">Is Visible?</label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-check" style="margin-bottom:1%;">
                                        <div class="row justify-content-center align-items-center">
                                            <label for="vice_principal_name" class="col-sm-3 col-form-label label-move">Vice-Principal Name:</label>
                                            <div class="col-sm-6">
                                                <input type="text" name="vice_principal_name" class="form-control" id="vice_principal_name" placeholder="Enter Vice-Principal Name">
                                            </div>
                                            <div class="col-sm-3">
                                                <input type="checkbox" name="is_visible_vice_principal_signature_image" value="1" class="form-check-input" id="vice_principal_signature">
                                                <label for="vice_principal_signature" class="form-check-label">Is Visible?</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>



                                <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-3">
                                        <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-3">
                                        <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-3">
                                        <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-3">
                                        <input type="checkbox" name="is_visible_class_teacher_signature_image" value="1" class="form-check-input" id="is_visible_class_teacher">
                                        <label for="is_visible_class_teacher_signature_image" class="form-check-label">Is Class Teacher?</label>
                                    </div>

                                    
                                </div>



                            </div>

                            {{-- admit card rules --}}
                            <div class="row">
                                <div class="col-sm-4" style="margin-left: 2%;">
                                    {!! Form::checkbox('is_visible_condition', '1', false, ['class' => 'form-check-input', 'id' => 'condition',]) !!}
                                    {!! Form::label('condition', 'Is Reason Apply?', ['class' => 'form-check-label']) !!}
                                </div>

                                <div class="col-sm-10 d-flex align-items-center form-inline" style="margin-left: 4%;">
                                    <label for="condition_1" style="margin-right: 10px;">1.</label>
                                    {!! Form::text('condition_1', $value = null, [
                                    'class' => 'form-control',
                                    'id' => 'condition_1',
                                    'type' => 'text',
                                    'placeholder' => 'Enter Condition',
                                    'style' => 'width: 90%;',
                                    'maxlength' => '98',
                                    ]) !!}
                                    <p id='condition_error_1' style="max-height:3px;"></p>
                                </div>

                                <div class="col-sm-10 d-flex align-items-center form-inline" style="margin-top: 10px; margin-left: 4%;">
                                    <label for="condition_2" style="margin-right: 10px; white-space: nowrap;">2.</label>
                                    {!! Form::text('condition_2', $value = null, [
                                    'class' => 'form-control',
                                    'id' => 'condition_2',
                                    'type' => 'text',
                                    'placeholder' => 'Enter Condition',
                                    'style' => 'width: 90%;',
                                    'maxlength' => '98',
                                    ]) !!}
                                    <p id='condition_error_2' style="max-height:3px;"></p>
                                </div>

                                <div class="col-sm-10 d-flex align-items-center form-inline" style="margin-top: 10px; margin-left: 4%;">
                                    <label for="condition_3" style="margin-right: 10px; white-space: nowrap;">3.</label>
                                    {!! Form::text('condition_3', $value = null, [
                                    'class' => 'form-control',
                                    'id' => 'condition_3',
                                    'type' => 'text',
                                    'placeholder' => 'Enter Condition',
                                    'style' => 'width: 90%;',
                                    'maxlength' => '98',
                                    ]) !!}
                                    <p id='condition_error_3' style="max-height:3px;"></p>
                                </div>

                            </div>

                        </div>

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


                            <!-- <div class="form-group" id="signature_image_block">
                                {!! Form::label(
                                'administrator_signature',
                                'Signature Image: <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="signature_image_view"
                                        alt="Sign Preview" onclick="document.getElementById('signature_image').click();" style="cursor: pointer;">
                                    <i
                                        class="fa fa-camera fa-xs" id="signature_camera_view"
                                        style="position: absolute; top: 50%; left: 26%; transform: translate(-50%, -50%); color: white; background: black; padding: 3px; border-radius: 50%; cursor: pointer;"></i>
                                    {!! Form::file('signature_image',[
                                    'class' => 'form-control hidden',
                                    'id' => 'signature_image',
                                    'type' => 'file',
                                    'accept' => 'image/*',
                                    'autocomplete' => 'off',
                                    ]) !!}
                                    <p id='signature_image_error' style="max-height:3px;"></p>
                                </div>
                            </div> -->


                            <div class="form-group">
                                {!! Form::label(
                                'principal_signature_image',
                                'Principal Signature Image: <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="principle_signature_image_view"
                                        alt="Sign Preview" onclick="document.getElementById('principle_signature_image').click();" style="cursor: pointer;">
                                    <i
                                        class="fa fa-camera fa-xs" id="principle_signature_camera_view"
                                        style="position: absolute; top: 50%; left: 26%; transform: translate(-50%, -50%); color: white; background: black; padding: 3px; border-radius: 50%; cursor: pointer;"></i>
                                    {!! Form::file('principal_signature_image',[
                                    'class' => 'form-control hidden',
                                    'id' => 'principle_signature_image',
                                    'type' => 'file',
                                    'accept' => 'image/*',
                                    'autocomplete' => 'off',
                                    ]) !!}
                                    <p id='principle_signature_error' style="max-height:3px;"></p>
                                </div>
                            </div>


                            <div class="form-group">
                                {!! Form::label(
                                'vice_principal_signature_image',
                                'Vice Principal Signature Image: <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="vice_principle_signature_image_view"
                                        alt="Sign Preview" onclick="document.getElementById('vice_principle_signature_image').click();" style="cursor: pointer;">
                                    <i
                                        class="fa fa-camera fa-xs" id="vice_principle_signature_camera_view"
                                        style="position: absolute; top: 50%; left: 26%; transform: translate(-50%, -50%); color: white; background: black; padding: 3px; border-radius: 50%; cursor: pointer;"></i>
                                    {!! Form::file('vice_principal_signature_image',[
                                    'class' => 'form-control hidden',
                                    'id' => 'vice_principle_signature_image',
                                    'type' => 'file',
                                    'accept' => 'image/*',
                                    'autocomplete' => 'off',
                                    ]) !!}
                                    <p id='vice_principle_signature_error' style="max-height:3px;"></p>
                                </div>
                            </div>


                            <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: 27%; 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;"></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: 26%; 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 class="error text-center alert alert-danger hidden"
                                        id="background_image_error"></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">
                                {!! Form::submit('Submit', ['id' => 'add', 'class' => 'btn btn-info']) !!}
                                <a href="{{ url('eims/setting/documents/transfer-certificate/') }}"
                                    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() {

        //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 ///////////////////////////////////


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




        //vice principal signature image preview
        $('#vice_principle_signature_image').change(function(e) {
            const output = $('#vice_principle_signature_image_view');
            $('#vice_principle_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 ///////////////////////////////////



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

                type: 'post',
                url: '{{ route('eims_student_transfer_certificate_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_transfer_certificate_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>