@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_admit_card_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' => 'addDesignAdmitCardForm',
                        ]) !!}

                        <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-4 control-label'],
                                        false,
                                    ) !!}
                                    <div class="col-sm-8">
                                        {!! 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>

                                {{-- Conditions --}}
                                <div class="form-group ">
                                    {!! Form::label(
                                        'conditions',
                                        'Conditions: <sup class="text-danger">*</sup>',
                                        ['class' => 'col-sm-4 control-label'],
                                        false,
                                    ) !!}
                                    <div class="col-sm-8">
                                        <div id="conditions_holder">
                                            <div class="row" id="conditions_template">
                                                <div class="col-sm-10">
                                                    {!! Form::text('conditions[]', null, [
                                                        'class' => 'form-control',
                                                        'id' => 'conditions',
                                                        'type' => 'text',
                                                        'placeholder' => 'Enter admit card rules',
                                                        'rows' => 5,
                                                    ]) !!}
                                                </div>
                                                <div class="col-sm-2 text-right">
                                                    <button type="button"
                                                            class="btn btn-info btn-sm add-admit-card-rules">
                                                        <i class="fa fa-plus"></i>
                                                    </button>
                                                    <button type="button"
                                                            class="btn btn-warning btn-sm hidden remove-admit-card-rules">
                                                        <i class="fa fa-minus"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <p id='conditions_error' style="max-height:3px;"></p>
                                    </div>
                                </div>

                                {{-- Show conditions to front or back --}}
                                <div class="form-group ">
                                    {!! Form::label(
                                        'show_conditions_to_front',
                                        'Show conditions to: <sup class="text-danger">*</sup>',
                                        ['class' => 'col-sm-4 control-label'],
                                        false,
                                    ) !!}
                                    <div class="col-sm-8">
                                        <div class="checkbox-row">
                                            <div class="checkbox-inline">
                                                {!! Form::radio('show_conditions_to_front', 1, false, ['class' => 'form-check-input', 'id' => 'show_conditions_to_front_front']) !!}
                                                {!! Form::label('show_conditions_to_front_front', 'Front', ['class' => 'form-check-label']) !!}
                                            </div>
                                            <div class="checkbox-inline">
                                                {!! Form::radio('show_conditions_to_front', 0, false, ['class' => 'form-check-input', 'id' => 'show_conditions_to_front_back']) !!}
                                                {!! Form::label('show_conditions_to_front_back', 'Back', ['class' => 'form-check-label']) !!}
                                            </div>
                                        </div>

                                        <p id='show_conditions_to_front_error' style="max-height:3px;"></p>
                                    </div>
                                </div>

                                {{-- signature_of --}}
                                <div class="form-group ">
                                    {!! Form::label(
                                        'signature_of',
                                        'Signature of: <sup class="text-danger">*</sup>',
                                        ['class' => 'col-sm-4 control-label'],
                                        false,
                                    ) !!}
                                    <div class="col-sm-8">
                                        <div class="checkbox-row">
                                            @foreach($signatures as $signature)

                                                <div class="checkbox-inline">
                                                    {!! Form::radio('signature_of', $signature, null, ['class' => 'form-check-input', 'id' => "signature_of_$signature"]) !!}
                                                    {!! Form::label("signature_of_$signature", $signature, ['class' => 'form-check-label']) !!}
                                                </div>
                                            @endforeach
                                        </div>

                                        <p id='show_conditions_to_front_error' style="max-height:3px;"></p>
                                    </div>
                                </div>

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

                                <div class="row">

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


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

                                    <div class="col-sm-4">
                                        {!! Form::checkbox('is_visible_date_of_birth', '1', false, ['class' => 'form-check-input', 'id' => 'is_visible_date_of_birth']) !!}
                                        {!! Form::label('is_visible_date_of_birth', 'Date of Birth', ['class' => 'form-check-label']) !!}
                                    </div>

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

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

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

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

                                    <div class="col-sm-4">
                                        {!! 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;">

                                {{--  signature_image --}}
                                <div class="form-group text-left">
                                    <div style="position: relative; display: inline-block; cursor: pointer;"
                                         onclick="document.getElementById('signature_image').click();">
                                        <img
                                            id="signature_image_view"
                                            class="img-responsive"
                                            src="{{ asset('images/eims/passport-size.png') }}"
                                            alt="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="">Signature Image</p>
                                        <p class="error text-center alert alert-danger hidden"
                                           id="signature_image_error"></p>
                                    </div>

                                    {!! Form::file('signature_image', [
                                        'class' => 'hidden',
                                        'id' => 'signature_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="{{ url('eims/setting/examination/admit-card-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>

    <script type="text/javascript">
        $(document).ready(function () {
            $(".add-admit-card-rules").click(function () {
                const clone = $("#conditions_template").clone();
                clone.find(".add-admit-card-rules").addClass('hidden');
                clone.find(".remove-admit-card-rules").removeClass('hidden');
                $("#conditions_holder").append(`<div class="row">${clone.html()}</div>`);
            });

            $(document).on('click', '.remove-admit-card-rules', function () {
                $(this).closest('.row').remove();
            });

            //sign preview
            $('#signature_image').change(function (e) {
                const output = $('#signature_image_view');
                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]));
            });
            ////////End Image Preview ///////////////////////////////////


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

                    type: 'post',
                    url: '{{ route('eims_admit_card_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_admit_card_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>
@endsection