@extends('layouts.front')
@section('og:title', $document->title ?? '')
@section('og:description', $document->formCategory->name ?? '')
@section('content')

    <header class="pageMainHead d-flex position-relative bgCover w-100 text-white"
            style="background-image: url({{ asset('assets/site/images/headerBgs/e-forms-bg.jpeg') }});">
        <div class="alignHolder d-flex w-100 align-items-center">
            <div class="align w-100 position-relative">
                <div class="container">
                    <h1 class="text-white mb-2">Formulare</h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb breadcrWhite rounded-0 border-0 p-0 fontAlter mb-0">
                            <li class="breadcrumb-item"><a href="/">Principalǎ</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Formulare</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </header>

    <article class="dsSingleContent pt-7 pb-2 pt-md-10 pb-md-1 pt-lg-16 pb-lg-10 pt-xl-21 pb-xl-16">
        <div class="container position-relative">
            <div class="row">
                <div class="col-12 col-lg-8 col-xl-9 order-lg-2 mb-6">
                    <div class="pl-xl-14">
                        <header class="docHeadingHead mb-6">
                            <h2 class="h2vii fwSemiBold mb-1">{{ $document->title }}</h2>
                            <p>{{ @$document->formCategory->name }} </p>
                            <share-on-facebook :url="'{{ url()->current() }}'" :quote="'{{ $document->title }}'"></share-on-facebook>
{{--                            <div class="fzMedium">--}}
{{--                                <p>We help our clients to build their best possible economic We understand you’re saving for all different life events: retirement, a house, simply to build wealth, or all of the above. Your investment account should adjust to your life — not the other way around.</p>--}}
{{--                            </div>--}}
                        </header>
                        <h6 class="display-0 mb-5 mx-md-n5 mx-lg-0">Descarca formularul sau completeaza mai jos</h6>
                        @if ($document->upload_id)
                            <a class="btn btn-sm mb-5 btn-primary" href="{{ route('front.forms.download', ['id' => $document->upload_id]) }}">
                                <i class="fa fa-download mr-2"></i>Descarca formular
                            </a>
                            @if(auth()->check())
                                <add-form-request-upload :payload='{{$document}}'></add-form-request-upload>
                            @else
{{--                                <p>--}}
{{--                                    Trebuie sǎ fii logat ca sǎ încarci formularul completat, te rugǎm--}}
{{--                                    <a href="{{route('authPage')}}">logheazǎ-te</a>.--}}
{{--                                </p>--}}
                            @endif
                        @else
                            <a class="btn btn-sm mr-5 btn-primary disabled" href="#">
                                <i class="fa fa-download mr-2"></i>Formularul PDF nu este incarcat
                            </a>
                        @endif
                        @if(!auth()->check())
                            <p>
                                Trebuie sǎ fii logat ca sǎ depui cererea online sau sǎ încarci formularul completat,
                                te rugǎm <a href="{{route('authPage')}}">logheazǎ-te</a>.
                            </p>
                        @endif
                    </div>
                </div>
            </div>
            <div class="row ">
                <div class="col-xl-10 mx-auto">
                    <div class="row gy-8 gx-lg-8 gx-xl-12 card border-0">
                        @if(auth()->check())
                            @if (Session::has('form-success'))
                                <section class="pb-11 pb-lg-15 pt-18">
                                    <div class="container">
                                        <p class="text-center fs-sm-40 text-danger mb-1">
                                            <i class="uil uil-check-circle fs-60"></i>
                                        </p>
                                        <h2 class="fs-sm-40 text-center text-danger">
                                            Cererea ta a fost trimisa!
                                        </h2>
                                        <p class="text-center">
                                            Pentru a verifica statusul cererii, întră în contul tău secțiunea cereri trimise
                                        </p>
                                    </div>
                                </section>
                            @else
                                @if ($forms)
                                    <div class="col-md-6 text-right">
                                        <!-- This form holds the values the user has entered, as a JSON document. -->
                                        <form method="post" action="{{ route('document.store', [$document->slug]) }}"
                                              id="submissionForm">
                                            @csrf
                                            <input type="hidden" name="form_id" value="{{ $document->id }}">
                                            <input type="hidden" name="slug" value="{{ $document->slug }}">
                                            <!-- State can be used to capture a Submit vs. Save Draft button -->
                                            <input type="hidden" name="state">
                                            <!-- The JSON with all the values -->
                                            <input type="hidden" name="submissionValues" id="submissionValues" value="">
                                        </form>
                                    </div>
                                    @if ($errors->any())
                                        <div class="alert alert-danger">
                                            <p style="font-size: 16pt"><strong>Uups</strong>, a intervenit o eroare.</p>
                                            <ul class="ml-5">
                                                @foreach ($errors->all() as $error)
                                                    <li>{{ $error }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif

                                    <h6>Completeaza formular</h6>
                                    <div id="formio"></div>

                                @else
<!--<p>Formularul electronic inca nu e setat</p>-->
                                @endif
                            @endif
                        @else
{{--                            <p>--}}
{{--                                Trebuie sǎ fii logat ca sǎ depui cererea online, te rugǎm--}}
{{--                                <a href="{{route('authPage')}}">logheazǎ-te</a>.--}}
{{--                            </p>--}}
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </article>

{{--    <section class="wrapper bg-light">--}}
{{--        <div class="container mt-10">--}}
{{--            <div class="row">--}}
{{--                <div class="col-xl-10 mx-auto">--}}
{{--                    <h3><i class="uil uil-envelope-send"></i> {{ $document->title }}</h3>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </section>--}}

{{--    <section class="wrapper bg-light">--}}
{{--        <div class="container py-12">--}}
{{--            <div class="row ">--}}
{{--                <div class="col-xl-10 mx-auto">--}}
{{--                    <div class="row gy-8 gx-lg-8 gx-xl-12 card">--}}
{{--                        @if(auth()->check())--}}

{{--                            @if (Session::has('form-success'))--}}
{{--                                <section class="pb-11 pb-lg-15 pt-18">--}}
{{--                                    <div class="container">--}}
{{--                                        <p class="text-center fs-sm-40  text-center text-danger mb-1"><i--}}
{{--                                                    class="uil uil-check-circle fs-60"></i> </p>--}}
{{--                                        <h2 class="fs-sm-40 text-center text-danger">Cererea ta a fost trimisa!--}}
{{--                                        </h2>--}}
{{--                                        <p class="text-center text-center">Pentru a verifica statusul cererii, întră în--}}
{{--                                            contul tău secțiunea--}}
{{--                                            cereri trimise</p>--}}
{{--                                    </div>--}}
{{--                                </section>--}}
{{--                            @else--}}
{{--                                @if ($forms)--}}
{{--                                    <div class="col-md-6 text-right">--}}
{{--                                        <!-- This form holds the values the user has entered, as a JSON document. -->--}}
{{--                                        <form method="post" action="{{ route('document.store', [$document->slug]) }}"--}}
{{--                                              id="submissionForm">--}}
{{--                                            @csrf--}}
{{--                                            <input type="hidden" name="form_id" value="{{ $document->id }}">--}}
{{--                                            <input type="hidden" name="slug" value="{{ $document->slug }}">--}}
{{--                                            <!-- State can be used to capture a Submit vs. Save Draft button -->--}}
{{--                                            <input type="hidden" name="state">--}}

{{--                                            <!-- The JSON with all the values -->--}}
{{--                                            <input type="hidden" name="submissionValues" id="submissionValues"--}}
{{--                                                   value="">--}}
{{--                                        </form>--}}
{{--                                    </div>--}}
{{--                                    @if ($errors->any())--}}
{{--                                        <div class="alert alert-danger">--}}
{{--                                            <p style="font-size: 16pt"><strong>Oops</strong>, there was an issue with that.--}}
{{--                                            </p>--}}
{{--                                            <ul class="ml-5">--}}
{{--                                                @foreach ($errors->all() as $error)--}}
{{--                                                    <li>{{ $error }}</li>--}}
{{--                                                @endforeach--}}
{{--                                            </ul>--}}
{{--                                        </div>--}}
{{--                                    @endif--}}

{{--                                    <!-- This becomes the builder. -->--}}
{{--                                    <div id="formio"></div>--}}
{{--                                @else--}}
{{--                                    <p>Formularul inca nu e setat</p>--}}
{{--                                @endif--}}
{{--                            @endif--}}
{{--                        @else--}}
{{--                            <p>--}}
{{--                                Trebuie sǎ fii logat ca sǎ depui cererea online, te rugǎm <a href="{{route('login')}}">logheazǎ-te</a>.--}}
{{--                            </p>--}}
{{--                        @endif--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </section>--}}
@endsection

@push('scripts')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://formio.github.io/formio.js/dist/formio.full.min.css">
    <script src='https://cdn.form.io/js/formio.full.min.js'></script>
    <script lang="text/javascript">
        document.addEventListener("DOMContentLoaded", function(event) {
            Formio.createForm(document.getElementById('formio'), {!! $definition !!}).then(function(form) {
                form.submission = {
                    data: {!! $data !!},
                };

                form.on('submit', function(submission) {
                    var submitForm = document.getElementById('submissionForm');
                    submitForm.querySelector('input[name=state]').value = submission.state;
                    submitForm.querySelector('input[name=submissionValues]').value = JSON.stringify(submission.data);
                    submitForm.submit();
                });
            });
        });
    </script>
@endpush