@extends('layouts.landing')

@section('title', 'Elearning Course Certification')

@section('content')
<style>
    .btn-round-sm {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        padding: 7px 0px;
        display: inline-block;
        line-height: 35px!important;
        text-align: center;
    }
    .btn-round-sm:hover {
        width: 55px;
        height: 55px;
        padding: 10px 0px;
        transition: .3s;
    }
    .active-border {
        border-left: 2px solid #007bff;
    }
    .btn-line {
        border-bottom: 4px solid;
        width: 80px;
    }
    .btn-line-1 {
        border-bottom: 4px solid #eee;
        width: 80px;
    }
    .line {
        opacity: 0;
    }
    .choices>.dropdown-menu {
        width: 100% !important;
    }
    .hide-input {
        visibility: hidden;
        display: none;
    }
    /* img {
        max-width: 150px;
    } */
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row ">
    <div class="col">
        <a href="{{route('elearn.show', $course->id)}}" class="text-color mb-4"><i class="feather-arrow-left mr-2"></i> Back</a>
    </div>
</div>
<div class="row ">
    <div class="col">
        <h3>Course Certificate</h3>
    </div>
</div>
<div class="row ">
    <div class="col-12 col-lg-5 col-xl-5">
        <div class="card w-100 shadow-xss rounded-xxl border-0 mt-4 ps-4 pt-4 pe-4 pb-3 mb-3">
            <div class="card-body p-0">
                <h5>Certification for {{$course->title}}</h5>
                <p class="text-muted">Add a Certification for this course</p>
                <div class="row">
                    <div class="col-12">
                        <form class="tab-content pb-4" action="{{route('elearn.store-certificate')}}" method="POST" enctype="multipart/form-data" id="wizardSteps">
                            @csrf
                            <input type="hidden" name="user_id" value="{{Auth::user()->id}}">
                            <input type="hidden" name="type" value="course">
                            <input type="hidden" name="reference_id" value="{{$course->id}}">
                            <input type="hidden" name="is_active" value="0">
                            <div class="tab-pane fade show active" id="wizardStepOne" role="tabpanel" aria-labelledby="wizardTabOne">
                                <div class="">
                                    <div class="row ">
                                        <div class="col">
                                            <h6 class="fw-600">Step 1 of 2</h6>
                                            <div class="nav d-flex">
                                                <a class="btn-line pt-2" data-toggle="wizard" href="#wizardStepOne">
                                                    <span class="line">-</span>
                                                </a>
                                                <a class="btn-line-1 pt-2 ml-2" data-toggle="wizard" href="#wizardStepTwo">
                                                    <span class="line">-</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mt-2 pt-2 mb-3">
                                        <div class="form-group">
                                            <label class="form-label mb-1">
                                                Certificate Header
                                            </label>
                                            <input type="text" name="header" class="form-control" id="cert-header" placeholder="{{domain($_SERVER['HTTP_HOST'])->company_name}} ECLE">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label mb-1">
                                                Certificate Title
                                            </label>
                                            <input type="text" name="title" class="form-control" id="cert-title" placeholder="Certificate of Achievement">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label mb-1">
                                                Certificate Subtitle
                                            </label>
                                            <input type="text" name="subtitle" class="form-control" id="cert-subtitle" placeholder="Awarded To">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label mb-1">
                                                Description
                                            </label>
                                            <textarea name="description" rows="5" class="form-control" id="cert-description" placeholder="Enter Description"></textarea>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label mb-1">
                                                Certificate Logo
                                            </label>
                                            <small class="form-text text-muted">
                                                Upload a logo for this certificate
                                            </small>
                                            <label for="new_actual-btn" style="cursor: pointer" class="w-100 custom-upload p-4 w-full text-center rounded-lg border cursor-pointer">
                                                <i class="mdi mdi-cloud-upload icon-size"></i>
                                                <input type="file" name="logo_image_path" id="new_actual-btn" accept="image/jpeg,image/png" onchange="loadLogo(event)" class="hide-input"><br>
                                                <h6 class="text-lg" id="new-file-chosen">Select image <br>
                                                    <small class="text-muted">(590 x 300px recommended)</small>
                                                </h6>
                                            </label>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label mb-1">
                                                Signature Name
                                            </label>
                                            <input type="text" name="signature_name" class="form-control" id="cert-signature-name" placeholder="Socilaite Team">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label mb-1">
                                                Signature Title
                                            </label>
                                            <input type="text" name="signature_title" class="form-control" id="cert-signature-title" placeholder="Head of Marketing">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label mb-1">
                                                Signature image
                                            </label>
                                            <small class="form-text text-muted">
                                                Upload a signature image for this certificate
                                            </small>
                                            <label for="actual-btn" style="cursor: pointer" class="w-100 custom-upload p-4 w-full text-center rounded-lg border cursor-pointer">
                                                <i class="mdi mdi-cloud-upload icon-size"></i>
                                                <input type="file" name="signature_path" id="actual-btn" accept="image/jpeg,image/png" onchange="loadSignature(event)" class="hide-input"><br>
                                                <h6 class="text-lg" id="file-chosen">Select image <br>
                                                    <small class="text-muted">(590 x 300px recommended)</small>
                                                </h6>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="nav row  pt-5 border-top-xs">
                                        <div class="col-auto">
                                            <button class="btn btn-white d-none" type="reset">Cancel</button>
                                        </div>
                                        <div class="col text-center">
                                            <h6 class="text-muted mb-0">Step 1 of 2</h6>
                                        </div>
                                        <div class="col-auto">
                                            <a class="btn custom-btn" data-toggle="wizard" href="#wizardStepTwo">Next <i class="mdi mdi-arrow-right"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="wizardStepTwo" role="tabpanel" aria-labelledby="wizardTabTwo">
                                <div class="">
                                    <div class="row ">
                                        <div class="col">
                                            <h6 class="fw-600">Step 2 of 2</h6>
                                            <div class="nav d-flex">
                                                <a class="btn-line pt-2" data-toggle="wizard" href="#wizardStepOne">
                                                    <span class="line">-</span>
                                                </a>
                                                <a class="btn-line pt-2 ml-2" data-toggle="wizard" href="#wizardStepTwo">
                                                    <span class="line">-</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mt-2 pt-2 mb-3">
                                        <div class="form-group">
                                            <label class="form-label mb-1">
                                                Use Background image or color
                                            </label>
                                            <select id="select-bg" class="form-select w-100" data-choices='{"searchEnabled": true}' onchange="showDiv('bg-image', 'bg-color', this)">
                                                <option value="">Select background to use</option>
                                                <option value="bg">Background image</option>
                                                <option value="color">Background color</option>
                                            </select>
                                        </div>
                                        <div class="form-group" id="bg-color" style="display: none">
                                            <label class="form-label mb-1">
                                                Background Color
                                            </label>
                                            <input type="color" name="background_color" class="form-control" id="cert-background-color" value="#fff7cc">
                                        </div>
                                        <div class="form-group" id="bg-image" style="display: none">
                                            <label class="form-label mb-1">
                                                Background Image image
                                            </label>
                                            <small class="form-text text-muted">
                                                Upload a background image for this certificate
                                            </small>
                                            <label for="imgInp" style="cursor: pointer" class="w-100 custom-upload p-4 w-full text-center rounded-lg border cursor-pointer">
                                                <i class="mdi mdi-cloud-upload icon-size"></i>
                                                <input type="file" name="custom_background_image_path" id="imgInp" accept="image/jpeg,image/png" onchange="loadBg(event)" class="hide-input"><br>
                                                <h6 class="text-lg" id="bg-file-chosen">Select image <br>
                                                    <small class="text-muted">(650 x 730px recommended)</small>
                                                </h6>
                                            </label>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label mb-1">
                                                Primary Text Color
                                            </label>
                                            <input type="color" name="primary_text_color" class="form-control" id="cert-primary-color" value="#222222">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label mb-1">
                                                Secondary Text Color
                                            </label>
                                            <input type="color" name="secondary_text_color" class="form-control" id="cert-secondary-color" value="#222222">
                                        </div>
                                    </div>
                                    <div class="nav row  pt-5 border-top-xs">
                                        <div class="col-auto">
                                            <a class="btn custom-btn" data-toggle="wizard" href="#wizardStepOne"><i class="mdi mdi-arrow-left"></i> Back</a>
                                        </div>
                                        <div class="col text-center">
                                            <h6 class="text-muted mb-0">Step 2 of 2</h6>
                                        </div>
                                        <div class="col-auto">
                                            <button type="submit" name="submit" onclick="this.classList.toggle('button--loading')" class="button_load btn custom-btn">
                                                <span class="button__text"><i class="mdi mdi-check"></i> Create certifcate</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-7 col-xl-7">
        <div class="card shadow-xss rounded-xxl border-0 mt-4 ps-4 pt-4 pe-4 pb-3 mb-3">
            <div class="card-header">
                <div class="row ">
                    <div class="col">
                        <h5>Certifiate Preview</h5>
                    </div>

                </div>
            </div>

            <div class="card-body">
                <div id="cert-background" style="background: #fff7cc; height: 732px" class="text-center bg_output">
                    <div class="pt-4">
                        @if(tenantSetting($_SERVER['HTTP_HOST'])->logo_path !== null)
                            <img id="new_output" src="{{tenantSetting($_SERVER['HTTP_HOST'])->logo_path}}" alt="{{domain($_SERVER['HTTP_HOST'])->company_name}}" style="width: 200px">
                        @else
                            <img id="new_output" src="{{asset('assets/images/tribearc_socialite-logo.png')}}" alt="{{config('app.name')}}" style="width: 200px">
                        @endif
                    </div>
                    <div class="mt-3" style="color: #222">
                        <h5 class="font-weight-bold cert-secondary-color" id="display-cert-header">{{domain($_SERVER['HTTP_HOST'])->company_name}} ECLE</h5>
                    </div>

                    <div class="mt-3" style="color: #222">
                        <h2 class="cert-title cert-primary-color" id="display-cert-title"> Certificate Of Achievement </h2>
                    </div>

                    <div class="mt-3" style="color: #222">
                        <h5 class="cert cert-secondary-color" id="display-cert-subtitle">Awarded To </h5>
                    </div>

                    <div class="mt-3" style="font-family:Times New Roman; color: #222">
                        <h2 class="cert-award cert-primary-color">Firstname Lastname</h2>
                    </div>

                    <div class="mt-3" style="padding: 0px 100px 0px 100px; font-size: 21px; color: #222">
                        <h5 class="cert cert-secondary-color" id="display-cert-description">for completing "How to make money online" workshop</h5>
                    </div>

                    <div class="mt-3">
                        <h6 class="cert cert-secondary-color" style="font-weight:400; color: #222" >22nd of June, 2022</h6>
                    </div>
                    <div class="row" style="margin-top: 50px;">
                        <div class="col-md-6 text-center">
                            <img src="{{asset('assets/images/download4.png')}}" id="output" style="width: 120px; border-bottom:1px solid black; padding:0px 10px 0px 10px;" alt="Signature">
                            <div class="mt-2 cert-primary-color" style="font-family:Times New Roman; color: #222">
                                <h5 class="font-weight-bold" id="display-signature-name">{{domain($_SERVER['HTTP_HOST'])->company_name}} Team</h5>
                            </div>
                            <div style="font-size: 14px; color: #222">
                                <p class="cert-secondary-color" style="" id="display-signature-title">Head of Marketing </p>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $('#cert-background-color').on('input',
        function() {
            document.getElementById("cert-background").style.backgroundImage = "";
            document.getElementById("cert-background").style.backgroundColor = $(this).val();
        }
    );

    $('#cert-primary-color').on('input',
        function() {
            var x = document.querySelectorAll(".cert-primary-color");
            var i;
            for (i = 0; i < x.length; i++) {
                x[i].style.color = $("#cert-primary-color").val();
            }
        }
    );

    $('#cert-secondary-color').on('input',
        function() {
            var x = document.querySelectorAll(".cert-secondary-color");
            var i;
            for (i = 0; i < x.length; i++) {
                x[i].style.color = $("#cert-secondary-color").val();
            }

        }
    );

    imgInp.onchange = evt => {
        const [file] = imgInp.files
        if (file) {
            var path = URL.createObjectURL(file);
            document.getElementById("cert-background").style.backgroundColor = "";
            document.getElementById("cert-background").style.backgroundImage = 'url('+path+')';

            document.getElementById("cert-background").style.backgroundPosition = 'center';
            document.getElementById("cert-background").style.backgroundRepeat = 'no-repeat';
            document.getElementById("cert-background").style.backgroundSize = 'cover';

        }
    }

    function showDiv(bg, color, element) {
        document.getElementById(bg).style.display = element.value == 'bg' ? 'block' : 'none';
        document.getElementById(color).style.display = element.value == 'color' ? 'block' : 'none';
    }


    $("#cert-title").keyup(function () {
        toggleField();
    });

    $("#cert-header").keyup(function () {
        toggleField0();
    });

    $("#cert-subtitle").keyup(function () {
        toggleField1();
    });

    $("#cert-description").keyup(function () {
        toggleField2();
    });

    $("#cert-signature-name").keyup(function () {
        toggleField3();
    });

    $("#cert-signature-title").keyup(function () {
        toggleField4();
    });

    function toggleField() {
        document.getElementById('display-cert-title').innerHTML = $("#cert-title").val();
    }

    function toggleField0() {
        document.getElementById('display-cert-header').innerHTML = $("#cert-header").val();
    }

    function toggleField1() {
        document.getElementById('display-cert-subtitle').innerHTML = $("#cert-subtitle").val();
    }

    function toggleField2() {
        document.getElementById('display-cert-description').innerHTML = $("#cert-description").val();
    }

    function toggleField3() {
        document.getElementById('display-signature-name').innerHTML = $("#cert-signature-name").val();
    }

    function toggleField4() {
        document.getElementById('display-signature-title').innerHTML = $("#cert-signature-title").val();
    }


    var loadLogo = function(event) {
        var new_output = document.getElementById('new_output');
        var file_size = document.getElementById('new_actual-btn');
        var fsize = file_size.files[0].size;
        file = Math.round((fsize / 1024));
        new_output.src = URL.createObjectURL(event.target.files[0]);
        new_output.onload = function() {
            URL.revokeObjectURL(new_output.src)
        }
    };

    var loadSignature = function(event) {
        var output = document.getElementById('output');
        var file_size = document.getElementById('actual-btn');
        var fsize = file_size.files[0].size;
        file = Math.round((fsize / 1024));
        output.src = URL.createObjectURL(event.target.files[0]);
        output.onload = function() {
            URL.revokeObjectURL(output.src)
        }
    };

    // var loadBg = function(event) {
    //     var output = document.getElementById('cert-background').style;
    //     var file_size = document.getElementById('bg-image-btn');
    //     var fsize = file_size.files[0].size;
    //     file = Math.round((fsize / 1024));
    //     output.src = URL.createObjectURL(event.target.files[0]);
    //     alert(output.src);
    //     output.onload = function() {
    //         URL.revokeObjectURL(output.src)
    //         document.getElementById("cert-background").style.backgroundColor = "";
    //         document.getElementById("cert-background").style.backgroundImage = 'url('+output.src+')';

    //         document.getElementById("cert-background").style.backgroundPosition = 'center';
    //         document.getElementById("cert-background").style.backgroundRepeat = 'no-repeat';
    //         document.getElementById("cert-background").style.backgroundSize = 'cover';
    //     }
    // };

    const actualBtn = document.getElementById('actual-btn');
    const newActualBtn = document.getElementById('new_actual-btn');
    const bgBtn = document.getElementById('imgInp');

    const fileChosen = document.getElementById('file-chosen');
    const newFileChosen = document.getElementById('new-file-chosen');
    const bgFileChosen = document.getElementById('bg-file-chosen');

    actualBtn.addEventListener('change', function(){
        fileChosen.textContent = this.files[0].name
    });
    newActualBtn.addEventListener('change', function(){
        newFileChosen.textContent = this.files[0].name
    });
    bgBtn.addEventListener('change', function(){
        bgFileChosen.textContent = this.files[0].name
    });

</script>
@endsection