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

<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/student-id-card/') }}"
                    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">
                                        <label for="horizontal_name" class="form-check-label">Alignment Type:</label>
                                        {!! Form::radio('alignment_type', 'horizontal', true, ['class' => 'form-check-input', 'id' => 'horizontal_name', 'style' => 'margin-left: 10px;']) !!}
                                        <label for="horizontal_name" class="form-check-label">Horizontal ID Card</label>
                                        <span style="margin-right: 10px;"></span>
                                        {!! Form::radio('alignment_type', 'vertical', false, ['class' => 'form-check-input', 'id' => 'vertical_name']) !!}
                                        <label for="vertical_name" class="form-check-label">Vertical ID Card</label>
                                    </div>

                                    <div class="form-check">
                                        <label for="background_image_check" class="form-check-label">Signature Type:</label>
                                        {!! Form::radio('signature_person', 'administrator', true, ['class' => 'form-check-input', 'id' => 'administrator_signature', 'style' => 'margin-left: 10px;', 'onclick' => 'toggleSignatureImage()']) !!}
                                        <label for="administrator_signature" class="form-check-label">Administrator</label>

                                        <span style="margin-right: 10px;"></span>
                                        {!! Form::radio('signature_person', 'teacher', false, ['class' => 'form-check-input', 'id' => 'teacher_signature', 'onclick' => 'toggleSignatureImage()']) !!}
                                        <label for="teacher_signature" class="form-check-label">Teacher</label>

                                        <span style="margin-right: 10px;"></span>
                                        {!! Form::radio('signature_person', 'student', false, ['class' => 'form-check-input', 'id' => 'student_signature', 'onclick' => 'toggleSignatureImage()']) !!}
                                        <label for="student_signature" class="form-check-label">Student</label>
                                    </div>

                                </div>


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

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

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

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

                            </div>

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

                                <div class="col-sm-10 d-flex align-items-center form-inline">
                                    <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;">
                                    <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;">
                                    <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="60" 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: 14%; 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(
                                'logo_image',
                                'Logo Image: <sup class="text-danger">*</sup>',
                                ['class' => 'col-sm-4 control-label'],
                                false,
                                ) !!}
                                <div class="col-sm-8">
                                    <img width="60" 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: 14%; 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="60" 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: 14%; 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/student-id-card/') }}"
                                    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 ///////////////////////////////////


        //signature image preview
        $('#signature_image').change(function(e) {
            const output = $('#signature_image_view');
            $('#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_id_card_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_id_card_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>');
            }
        });
    }


    function toggleSignatureImage() {
        var studentSignature = document.getElementById('student_signature');
        var signatureImageBlock = document.getElementById('signature_image_block');

        if (studentSignature.checked) {
            signatureImageBlock.style.display = 'none';
        } else {
            signatureImageBlock.style.display = 'block';
        }
    }

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