@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/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">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-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" value="{{$editStudentIdCard->principal_name}}" class="form-control" id="principal_name" style="width: 100%;" placeholder="Enter Principal Name">
                                            </div>
                                            <div class="col-sm-3">
                                                {!! Form::checkbox('is_visible_principal_signature_image', '1', $editStudentIdCard->is_visible_principal_signature_image, ['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" value="{{$editStudentIdCard->vice_principal_name}}" class="form-control" id="vice_principal_name" placeholder="Enter Vice-Principal Name">
                                            </div>
                                            <div class="col-sm-3">
                                                {!! Form::checkbox('is_visible_vice_principal_signature_image', '1', $editStudentIdCard->is_visible_vice_principal_signature_image, ['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">
                                        {!! 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-3">
                                        {!! 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-3">
                                        {!! 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-3">
                                        {!! Form::checkbox('is_visible_class_teacher_signature_image', '1', $editStudentIdCard->is_visible_class_teacher_signature_image, ['class' => 'form-check-input', 'id' => 'is_visible_class_teacher']) !!}
                                        {!! Form::label('is_visible_class_teacher', 'Is Class Teacher?', ['class' => 'form-check-label']) !!}
                                    </div>
                                </div>
                            </div>

                            @php
                            $conditions = json_decode($editStudentIdCard->conditions, true);
                            @endphp

                            {{-- admit card rules --}}
                            <div class="row">
                                <div class="col-sm-4" style="margin-left: 2%;">
                                    {!! Form::checkbox('is_visible_condition', '1', $editStudentIdCard->is_visible_conditions, ['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', $conditions['1'] ?? '', [
                                    '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', $conditions['2'] ?? '', [
                                    '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', $conditions['3'] ?? '', [
                                    '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 class="row">
                                 <div class="col-sm-12" style="margin-top: 1%; margin-left: 5%;">
                                    <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>

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

                            <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="principal_signature_image_view"
                                        alt="Sign Preview" onclick="document.getElementById('principal_signature_image').click();" style="cursor: pointer;"> -->


                                        <img width="135" height="60" class="{{ !$editStudentIdCard->principal_signature_image ? 'hidden' : '' }}" src="{{ asset('/images/eims/setting/design_student_transfer_certificate/principal_signature_image/' . $editStudentIdCard->principal_signature_image) }}" id="principal_signature_image_view"
                                        alt="Principal Sign Preview" onclick="document.getElementById('principal_signature_image').click();" style="cursor: pointer;">


                                    <i
                                        class="fa fa-camera fa-xs" id="principal_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' => 'principal_signature_image',
                                    'type' => 'file',
                                    'accept' => 'image/*',
                                    'autocomplete' => 'off',
                                    ]) !!}
                                    <p id='principal_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_principal_signature_image_view"
                                        alt="Sign Preview" onclick="document.getElementById('vice_principal_signature_image').click();" style="cursor: pointer;">
 -->


                                    <img width="135" height="60" class="{{ !$editStudentIdCard->vice_principal_signature_image ? 'hidden' : '' }}" src="{{ asset('/images/eims/setting/design_student_transfer_certificate/vice_principal_signature_image/' . $editStudentIdCard->vice_principal_signature_image) }}" id="vice_principal_signature_image_view"
                                        alt="Vice Principal Sign Preview" onclick="document.getElementById('vice_principal_signature_image').click();" style="cursor: pointer;">



                                    <i
                                        class="fa fa-camera fa-xs" id="vice_principal_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_principal_signature_image',
                                    'type' => 'file',
                                    'accept' => 'image/*',
                                    'autocomplete' => 'off',
                                    ]) !!}
                                    <p id='vice_principal_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;"> -->


                                    <img width="135" height="60" class="{{ !$editStudentIdCard->logo_image ? 'hidden' : '' }}" src="{{ asset('/images/eims/setting/design_student_transfer_certificate/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: 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;"> -->   


                                    <img width="135" height="60" class="{{ !$editStudentIdCard->background_image ? 'hidden' : '' }}" src="{{ asset('/images/eims/setting/design_student_transfer_certificate/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: 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('Update', ['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
        $('#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 ///////////////////////////////////

        //vice-principal signature image preview
        $('#vice_principal_signature_image').change(function(e) {
            const output = $('#vice_principal_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_transfer_certificate_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_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>');
            }
        });
    }
</script>