@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="{{ route('eims_marksheet_design') }}"
                       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' => 'addMarkSheetDesignForm',
                        ]) !!}

                        <div class="row">

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

                                {{-- template name --}}
                                <div class="form-group">
                                    {!! Form::label(
                                        'name',
                                        'Template name: <sup class="text-danger">*</sup>',
                                        ['class' => 'col-sm-3 control-label'],
                                        false,
                                    ) !!}
                                    <div class="col-sm-9">
                                        {!! Form::text('name', $value = null, [
                                            'class' => 'form-control',
                                            'id' => 'name',
                                            'type' => 'text',
                                            'placeholder' => 'Enter template name',
                                        ]) !!}
                                        <p id='name_error' style="max-height:3px;"></p>
                                    </div>
                                </div>

                                @php
                                    if ($companyType === 'UNV'){
                                        $principalLabel = 'Chancellor';
                                    }elseif ($companyType === 'SCL'){
                                        $principalLabel = 'Headmaster';
                                    }else{
                                        $principalLabel = 'Principal';
                                    }
                                @endphp

                                {{-- principal_name --}}
                                <div class="form-group row">

                                    {!! Form::label(
                                        'principal_name',
                                        $principalLabel .' Name: <sup class="text-danger">*</sup>',
                                        ['class' => 'col-sm-3 control-label'],
                                        false,
                                    ) !!}

                                    <div class="col-sm-6">
                                        {!! Form::text('principal_name', $value = null, [
                                            'class' => 'form-control',
                                            'id' => 'principal_name',
                                            'type' => 'text',
                                            'placeholder' => "Enter $principalLabel name",
                                        ]) !!}
                                        <p id='principal_name_error' style="max-height:3px;"></p>
                                    </div>

                                    <div class="col-sm-3">
                                        {!! Form::checkbox('is_visible_principal_signature_image', '1', false, ['class' => 'form-check-input', 'id' => 'is_visible_principal_signature_image']) !!}
                                        {!! Form::label('is_visible_principal_signature_image', "Is Visible $principalLabel Signature", ['class' => 'form-check-label']) !!}
                                    </div>
                                </div>

                                {{-- vice_principal_name --}}
                                <div class="form-group row">
                                    {!! Form::label(
                                        'vice_principal_name',
                                        $principalLabel .' Name: <sup class="text-danger">*</sup>',
                                        ['class' => 'col-sm-3 control-label'],
                                        false,
                                    ) !!}
                                    <div class="col-sm-6">
                                        {!! Form::text('vice_principal_name', $value = null, [
                                            'class' => 'form-control',
                                            'id' => 'vice_principal_name',
                                            'type' => 'text',
                                            'placeholder' => "Enter Vice $principalLabel name",
                                        ]) !!}
                                        <p id='vice_principal_name_error' style="max-height:3px;"></p>
                                    </div>
                                    <div class="col-sm-3">
                                        {!! Form::checkbox('is_visible_vice_principal_signature_image', '1', false, ['class' => 'form-check-input', 'id' => 'is_visible_vice_principal_signature_image']) !!}
                                        {!! Form::label('is_visible_vice_principal_signature_image', "Is Visible $principalLabel Signature", ['class' => 'form-check-label']) !!}
                                    </div>
                                </div>

                                {!! Form::label('', 'Visible Field:', ['class' => 'control-label']) !!}

                                <div class="row">
                                    @if($companyType === 'SCL')
                                        <div class="col-sm-3">
                                            {!! Form::checkbox('is_visible_class_teacher_signature_image', '1', false, ['class' => 'form-check-input', 'id' => 'is_visible_class_teacher_signature_image']) !!}
                                            {!! Form::label('is_visible_class_teacher_signature_image', 'Class Teacher Signature', ['class' => 'form-check-label']) !!}
                                        </div>
                                    @endif

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

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

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

                            <div class="col-md-2" style="border-left: 2px dotted #dddddd; padding-left: 20px;">

                                {{--  principal_signature_image --}}
                                <div class="form-group text-left">
                                    <div style="position: relative; display: inline-block; cursor: pointer;"
                                         onclick="document.getElementById('principal_signature_image').click();">
                                        <img
                                            id="principal_signature_image_view"
                                            class="img-responsive"
                                            src="{{ asset('images/eims/passport-size.png') }}"
                                            alt="{{$principalLabel}} Signature Image"
                                            style="height: 40px; width: 150px; "
                                        >
                                        <i
                                            class="fa fa-camera"
                                            style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; background: black; padding: 5px; border-radius: 50%; cursor: pointer;"
                                        ></i>
                                    </div>
                                    <div>
                                        <p class="">{{$principalLabel}} Signature Image</p>
                                        <p class="error text-center alert alert-danger hidden"
                                           id="principal_signature_image_error"></p>
                                    </div>

                                    {!! Form::file('principal_signature_image', [
                                        'class' => 'hidden',
                                        'id' => 'principal_signature_image',
                                        'type' => 'file',
                                        'accept' => 'image/*',
                                        'autocomplete' => 'off',
                                    ]) !!}
                                </div>

                                {{--  vice_principal_signature_image --}}
                                <div class="form-group text-left">
                                    <div style="position: relative; display: inline-block; cursor: pointer;"
                                         onclick="document.getElementById('vice_principal_signature_image').click();">
                                        <img
                                            id="vice_principal_signature_image_view"
                                            class="img-responsive"
                                            src="{{ asset('images/eims/passport-size.png') }}"
                                            alt="Vice {{$principalLabel}} Signature Image"
                                            style="height: 40px; width: 150px; "
                                        >
                                        <i
                                            class="fa fa-camera"
                                            style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; background: black; padding: 5px; border-radius: 50%; cursor: pointer;"
                                        ></i>
                                    </div>
                                    <div>
                                        <p class="">Vice {{$principalLabel}} Signature Image</p>
                                        <p class="error text-center alert alert-danger hidden"
                                           id="vice_principal_signature_image_error"></p>
                                    </div>

                                    {!! Form::file('vice_principal_signature_image', [
                                        'class' => 'hidden',
                                        'id' => 'vice_principal_signature_image',
                                        'type' => 'file',
                                        'accept' => 'image/*',
                                        'autocomplete' => 'off',
                                    ]) !!}
                                </div>

                                {{-- logo_image --}}
                                <div class="form-group text-left">
                                    <div style="position: relative; display: inline-block; cursor: pointer;"
                                         onclick="document.getElementById('logo_image').click();">
                                        <img
                                            id="logo_image_view"
                                            class="img-responsive"
                                            src="{{ asset('images/eims/passport-size.png') }}"
                                            alt="Logo Image"
                                            style="height: 150px; width: 150px; "
                                        >
                                        <i
                                            class="fa fa-camera"
                                            style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; background: black; padding: 5px; border-radius: 50%; cursor: pointer;"
                                        ></i>
                                    </div>
                                    <div>
                                        <p class="">Logo Image</p>
                                        <p class="error text-center alert alert-danger hidden"
                                           id="logo_image_error"></p>
                                    </div>

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

                                {{--  background_image --}}
                                <div class="form-group text-left">
                                    <div style="position: relative; display: inline-block; cursor: pointer;"
                                         onclick="document.getElementById('background_image').click();">
                                        <img
                                            id="background_image_view"
                                            class="img-responsive"
                                            src="{{ asset('images/eims/passport-size.png') }}"
                                            alt="Student Photo"
                                            style="height: 60px; width: 150px; "
                                        >
                                        <i
                                            class="fa fa-camera"
                                            style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; background: black; padding: 5px; border-radius: 50%; cursor: pointer;"
                                        ></i>
                                    </div>
                                    <div>
                                        <p class="">Background Image</p>
                                        <p class="error text-center alert alert-danger hidden"
                                           id="background_image_error"></p>
                                    </div>

                                    {!! Form::file('background_image',  [
                                            'class' => 'hidden',
                                            'id' => 'background_image',
                                            'type' => 'file',
                                            'accept' => 'image/*',
                                            'autocomplete' => 'off',
                                        ]) !!}
                                </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="{{ route('eims_marksheet_design') }}"
                                       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');
            output.removeClass('hidden');
            output.attr('src', URL.createObjectURL(event.target.files[0]));
        });

        //vice_principal_signature_image preview
        $('#vice_principal_signature_image').change(function (e) {
            const output = $('#vice_principal_signature_image_view');
            output.removeClass('hidden');
            output.attr('src', URL.createObjectURL(event.target.files[0]));
        });

        // logo_image view
        $('#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]));
        });

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

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

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

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

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

                    if (errors) {
                        errors.forEach((error) => {
                            const {key, message} = error;
                            console.log(key, message);
                            $(`#${key}_error`).empty().show().append(
                                '<span class="errormsg" style="color:red;">' + message + '</span>'
                            );
                        });
                    }
                }
            });
        });
    });
</script>