@extends('front.layouts.main')
@section('title')CV Builder @endsection

@section('content')
<main class="cv-builder-page">
    <section class="section pt-0">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="card border-0 box mb-3 p-0 mb-5">
                        <div class="row no-gutters">
                            <div class="col-10 my-auto">
                                <div class="card-body">
                                    <h3>Quick & Easy CV Builder</h3>
                                    <p>We introduce to you our CV Builder tool. You no longer have to worry about formatting your CV, as you can select from a range of professionally curated CV 
                                        templates. Simply register your account, choose a CV template and fill in the relevant information; our FREE CV Builder will generate a beautiful CV for 
                                        you to use on our site and beyond.</p>
                                    <p>Welcome to the People’s Platform!</p>
                                    {{-- <a href="template-one.php" class="btn btn-transparent">Let’s Start Building Your CV</a> --}}
                                </div>
                            </div>
                            <div class="col-2">
                                <img src="{{ asset('img/cv_builder_thumb.png') }}" class="card-img" alt="cv builder">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                @if($cvTemplates)
                    @foreach($cvTemplates as $template)
                    <div class="col-sm-6 col-lg-4">
                        <div class="card border-0 box d-flex flex-column p-0">
                            <div class="card-header border-0 p-0">
                                <div class="img-wrapper">
                                    @php $explodedTemplateName = explode('.', $template->preview_thumb_img); @endphp
                                    <img src="{{ asset('img/cv_builder') }}/{{ $template->preview_thumb_img }}" 
                                    srcser="{{ asset('img/cv_builder') }}/{{ $explodedTemplateName[0] }}@2x.{{ $explodedTemplateName[1] }} 2x" alt="{{ $template->name }}">
                                    @if(isset($userProfile) && isset($userProfile->cv_template_id) && $userProfile->cv_template_id == $template->id)
                                    <div class="default-cv-bar">
                                        <span class="material-icons">check_circle</span>
                                        Your Selected Template
                                    </div>
                                    @endif
                                </div>
                            </div>
                            <div class="card-body">
                                <h3>{{ $template->name }}</h3>
                                <p class="text-justify" style="min-height: 253px;">{{ $template->description }}</p>
                                <hr class="w-100">
                                <div class="d-flex justify-content-between align-items-center mt-auto">
                                    <a href="javascript:void(0)" id="{{ $explodedTemplateName[0] }}" class="btn btn-transparent view_cv_img">Preview Template</a>
                                    <a href="{{ route('front.cv_builder.cv_index', ['type' => str_replace(' ', '-', strtolower($template->name))]) }}" 
                                        class="btn btn-transparent view_cv_builder">Create CV</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                @endif
            </div>
        </div>
    </section>
</main>
@endsection

@push('pageModals')
    @include('front.modules.cv_builder.common.image_viewer_modal')
    @include('front.modules.cv_builder.common.mobile_restriction_modal')
@endpush

@push('pageJs')
<script>

    @if($cvTemplates)
        @foreach($cvTemplates as $template)
        @php $explodedTemplateName = explode('.', $template->preview_thumb_img); @endphp
        var {{ $explodedTemplateName[0] }}_url = "{{ route('front.cv_builder.cv_index', ['type' => str_replace(' ', '-', strtolower($template->name))]) }}";
        @endforeach
    @endif

    $('.view_cv_img').on('click', function(){

        var id = $(this).attr('id')

        $('.create_cv_img_modal').attr('href', eval(id + '_url'));
        $('.view_cv_img_modal').attr('src', '{{ asset("img/cv_builder") }}/' + $(this).attr('id') + '_full.png');
        $('#viewCvImage').modal('show');
    });

    $('document').ready(function(){
        $('.view_cv_builder').on('click', function(e) {
            e.preventDefault();

            $isDesktop = '{{ $isDesktop }}';

            if($isDesktop != 1) {
                $('#mobile-restriction-modal').modal('show');
            } else {
                window.location = $(this).attr('href');
            }
        });

        $('.create_cv_img_modal').on('click', function(e) {
            e.preventDefault();

            $isDesktop = '{{ $isDesktop }}';

            if($isDesktop != 1) {
                $('#mobile-restriction-modal').modal('show');
            } else {
                window.location = $(this).attr('href');
            }
        });
    });
</script>
@endpush