@extends('layout')

@section('content')
<header class="header position-relative">
    <img class="position-absolute top-0 end-0 d-block me-2 mt-2" src="{{ asset('statics/images/logo-a.png') }}" alt="logo" height="50"/>
    <img class="animate__animated d-none anim-start animate__faster" data-animation-in="animate__bounceInDown" src="{{ asset('statics/images/logo-asa.png') }}" style="max-height:100px;">
</header>
<main class="main p-4">
    <div id="container" class="container">
        <div class="row justify-content-center">
            <div id="content" class="col-md-4 animate__animated d-none anim-start" data-animation-in="animate__zoomInDown">
                <div id="step">
                    <div data-step="1" class="animate__animated content-step">
                        <div class="mb-3">
                            <label for="input-name" class="text-white">Insert your name</label>
                            <input id="input-name" type="text" class="form-control form-control-lg rounded-pill" placeholder="Tulis nama lengkap anda" value="">
                        </div> 
                        <div class="d-flex justify-content-end">
                            <button type="button" data-step-index="2" class="btn btn-warning btn-lg rounded-pill shadow fw-bold">
                                Next <i class="fa fa-fw fa-arrow-right"></i>
                            </button>
                        </div>
                    </div>
                    <div data-step="2" class="animate__animated content-step">
                        <label for="object-sign" class="text-white">Insert your sign</label>
                        <div class="position-relative w-100 bg-white rounded-4 border-0">
                            <div id="canvas-sign-container" class="w-100 rounded-4 mb-3 indie-flower-regular">
                                <canvas id="canvas-sign"></canvas>
                            </div>
                            <div class="position-absolute bottom-0 end-0 me-2 mb-2" style="z-index:1000;">
                                <button id="btn-clear" type="button" class="btn shadow btn-light shadow">
                                    <i class="fa fa-eraser"></i>
                                </button>
                            </div>
                        </div>
                        <textarea id="object-sign" class="d-none"></textarea>
                        <div class="d-flex justify-content-between">
                            <button type="button" data-step-index="1" class="btn btn-light btn-lg rounded-pill shadow fw-bold">
                                <i class="fa fa-fw fa-arrow-left"></i> Prev 
                            </button>
                            <button type="submit" class="btn btn-warning btn-lg rounded-pill shadow fw-bold">
                                <i class="fa fa-fw fa-save"></i> Submit
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

@push('js')
<script src="https://cdn.jsdelivr.net/npm/fabric@5.3.0/dist/fabric.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
    let el = $(`.anim-start`);
    setTimeout(() => {
        $(`#page-loader`).fadeOut(500, ()=>{
            el.removeClass('d-none');
            el.each((event, element)=>{
                $(element).addClass($(element).data('animationIn'));
            });
        });
    }, 2000);
});
$(()=>{
    'use strict'

    const canvas = new fabric.Canvas('canvas-sign',{
        width: $(`#container`).width(),
        height: $(`#container`).width()
    });
    canvas.isDrawingMode = true;
    fabric.PencilBrush.prototype.globalCompositeOperation = "source-over";
    canvas.freeDrawingBrush.width = 5;
    canvas.on('path:created', function(options) {
        let pathObjects = canvas.getObjects().filter(function(object) {
            return object instanceof fabric.Path;
        });
        let pathObjectsJSON = pathObjects.map(function(pathObject) {
            return pathObject.toJSON(['path']);
        });
        $(`#object-sign`).text(JSON.stringify(pathObjectsJSON));
    });
    canvas.on('canvas:cleared', function(e) {
        $(`#object-sign`).text(null);
    });

    $(`#btn-clear`).click((e)=>{
        e.preventDefault();
        canvas.clear();
    });

    let btnFirstStep = $(`[data-step-index="1"]`), 
        btnSecondStep = $(`[data-step-index="2"]`),
        containerFirstStep = $(`[data-step="1"]`),
        containerSecondStep = $(`[data-step="2"]`),
        btnSubmit = $(`[type="submit"]`);

    function showFirst(){
        containerSecondStep.addClass('animate__bounceOutRight').fadeOut(500, function(){
            containerSecondStep.removeClass('animate__bounceOutRight');
            containerFirstStep.addClass('animate__bounceInLeft').fadeIn(1000, function(){
                containerFirstStep.removeClass('animate__bounceInLeft');
            });
        });
    }
    function showSecond(){
        containerFirstStep.addClass('animate__bounceOutRight').fadeOut(500, function(){
            containerFirstStep.removeClass('animate__bounceOutRight');
            containerSecondStep.addClass('animate__bounceInLeft').fadeIn(1000, function(){
                containerFirstStep.removeClass('animate__bounceInLeft');
            });
        });
    }
    showFirst();
    btnSecondStep.click((e)=>{
        showSecond();
    });
    btnFirstStep.click((e)=>{
        showFirst();
    });
    btnSubmit.click((e)=>{
        e.preventDefault();
        let data = {
            '_method'   : 'POST',
            '_token'    : `{{ csrf_token() }}`,
            'filename'  : $(`#input-name`).val(),
            'path'      : $(`#object-sign`).val()
        };
        $.post(`{{ route('checkin') }}`, data, (response)=>{
            $(`#content`).html(`<div class="alert alert-success" role="alert">
                    <div class="text-center">
                        <h1 class="fw-bold">Success</h1>
                        <h1 class="fw-bold" style="font-size:50px;">
                            <i class="fa-regular fa-face-smile-wink"></i>
                        </h1>
                        <h2 class="fw-bold" >Thank You!</h2>
                    </div>
                </div>`);
        }, 'json');
    });
    
});
</script>
@endpush