@extends('front.layouts.master')

@section('title', 'Create Artwork')

@section('content')

    @if(!empty(Session::get('editArtwork')))
        <script>
            var EditConfig = {
                canvas: {
                    width: "{{Session::get('editArtwork')['width']}}",
                    height: "{{Session::get('editArtwork')['height']}}",
                    shape: "{{Session::get('editArtwork')['shape_id']}}",
                    template: "{{Session::get('editArtwork')['template']}}"
                },
                frame: {
                    class: "{{Session::get('editArtwork')['frame']['class']}}",
                    id: "{{Session::get('editArtwork')['frame']['id']}}"
                },
                id: "{{Session::get('editArtwork')['id']}}",
                name: "{{Session::get('editArtwork')['name']}}",
                artist: "{{Session::get('editArtwork')['artist_name']}}",
                svg: "{{asset('uploads/artworks/'.Session::get('editArtwork')['user_id'].'/'.(Session::get('editArtwork')['image']))}}"
            }
        </script>
    @endif
    <div class="artwork-steps">
        <div class="step active-step" data-step="0" data-body-class="welcome-page"
             data-page-class="page-vertical-aligned">
            <div class="login-box">
                <a href="{{url('/')}}" class="main-logo">
                    <img src="{{asset('assets/front/images/logo05.svg')}}" alt="Create with Glucojel">
                </a>
                <ul class="btn-list">
                    <li>
                        <a href="#" class="btn-blue next-step">new</a>
                    </li>
                    <li>
                        <a href="{{url('profile')}}" class="btn-blue">edit</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="step" data-step="1" data-body-class="canvas-page"
             data-page-class="page-vertical-aligned">
            <div class="canvas-block gcanvas">
                <h1>Select your canvas</h1>
                <div class="filter-block">
                    <span class="icon icon-shape"></span>
                    <strong>shape</strong>
                    <ul id="filter-bar">
                        <span class="pill"></span>
                        @foreach($shapes as $key=>$shape)
                            <li class="filter-option option-1 {{$key==0?'active':''}}"
                                data-target="{{$shape->id}}"
                                data-desctop-size="{{$shape->desktopSize}}"
                                data-mobile-size="{{$shape->mobileSize}}">
                                <span class="icon {{$shape->icon}}"></span>
                                <span>{{$shape->name}}</span>
                            </li>
                        @endforeach
                    </ul>
                </div>
                <div class="canvas-box">
                    <div class="canvas">
                        <img src="{{asset('assets/front/images/transparent.png')}}">
                    </div>
                    <div class="canvas-gallery">
                        <div class="slider">

                            @foreach($templates as $template)
                                                                @foreach($template->getVise() as $vise)