@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_student_testimonial_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">Edit {{ $pageTitle }}</div>
                    </div>

                    <div class="panel-body">

                        {!! Form::open([
                            'url' => '',
                            'enctype' => 'multipart/form-data',
                            'role' => 'form',
                            'class' => 'form-horizontal form-groups',
                            'id' => 'addMarkSheetDesignForm',
                        ]) !!}

                        {{Form::hidden('id', $studentTestimonialDesign->id)}}

                        <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', $studentTestimonialDesign->name, [
                                            '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', $studentTestimonialDesign->principal_name, [
                                            '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', $studentTestimonialDesign->is_visible_principal_signature_image, ['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>

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

                                <div class="row">

                                    <div class="col-sm-3">
                                        {!! Form::checkbox('is_visible_watermark', '1', $studentTestimonialDesign->is_visible_watermark, ['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', $studentTestimonialDesign->is_visible_logo_image, ['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', $studentTestimonialDesign->is_visible_background_image, ['class' => 'form-check-input', 'id' => 'is_visible_background_image']) !!}
                                        {!! Form::label('is_visible_background_image', 'Background Image', ['class' => 'form-check-label']) !!}
                                    </div>
                                </div>

                                {{-- status --}}
                                <div class="form-group">
                                    {!! Form::label('status', 'Status:', ['class' => 'col-sm-3 control-label']) !!}
                                    <div class="col-sm-9">
                                        @foreach($activeStatus as $key => $value)
                                            <div class="form-check" style="display: inline-block;margin-right: 10px;">
                                                {!! Form::radio('status', $key, $studentTestimonialDesign->status == $key, [
                                                    'class' => 'form-check-input',
                                                    'id' => 'status_' . $key,
                                                ]) !!}
                                                {!! Form::label('status_' . $key, $value, ['class' => 'form-check-label']) !!}
                                            </div>
                                        @endforeach
                                        <p id='status_error' style="max-height:3px;"></p>
                                    </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="{{ file_exists(base_path() . "/public/images/eims/setting/student_testimonial_design/principal_signature_image/$studentTestimonialDesign->principal_signature_image") ? asset("images/eims/setting/student_testimonial_design/principal_signature_image/$studentTestimonialDesign->principal_signature_image") : 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="">{{$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/jpeg, image/png, image/jpg',
                                    ]) !!}
                                </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="{{ file_exists(base_path() . "/public/images/eims/setting/student_testimonial_design/logo_image/$studentTestimonialDesign->logo_image") ? asset("images/eims/setting/student_testimonial_design/logo_image/$studentTestimonialDesign->logo_image") : 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/jpeg, image/png, image/jpg',
                                    ]) !!}
                                </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="{{ file_exists(base_path() . "/public/images/eims/setting/student_testimonial_design/background_image/$studentTestimonialDesign->background_image") ? asset("images/eims/setting/student_testimonial_design/background_image/$studentTestimonialDesign->background_image") : asset('images/eims/passport-size.png') }}"
                                            alt="Background Image"
                                            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/jpeg, image/png, image/jpg',
                                        ]) !!}
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group col-md-12 text-center">

                                {!! Form::submit('Update', ['id' => 'add', 'class' => 'btn btn-info']) !!}
                                <a href="{{ route('eims_student_testimonial_design') }}"
                                   class="btn btn-danger closeBtn">Close</a>
                            </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 () {

            //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]));
            });

            // 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_student_testimonial_design_update') }}',
                    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_student_testimonial_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