@extends('backend.layouts.master')

<!-- UPDATES

8-27-18 dms. Remove Banner Image from being required entry

-->
@section('title')
Add Page
@endsection

@section('content')
<section>
    <!-- Sidebar -->
    @include('backend/includes/sidebar')

    <!-- body content start-->
    <div class="body-content" >

        <!-- Header -->
        @include('backend/includes/header')

        <!-- page head start-->
        <div class="page-head">
            <h3>Add Page</h3>
        </div>
        <!-- page head end-->

        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-md-12 col-xs-12">
                    @if(count($errors) > 0)
                        <div class="row">
                        <div class="alert alert-block alert-danger fade in">
                            <button data-dismiss="alert" class="close close-sm" type="button">
                                <i class="fa fa-times"></i>
                            </button>
                            <ul>
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    @endif
                    <section class="panel">
                        <header class="panel-heading">
                            Add Page Form
                        </header>
                        <div class="panel-body">
                            <form id="category_form" class="cmxform form-horizontal tasi-form" action="{{ route('save_page') }}" method="post" enctype="multipart/form-data">
                                <input type="hidden" name="_token" value="{{ Session::token() }}">
                                <div class="form-group">
                                    <label for="pn" class="col-lg-2 col-sm-2 control-label">Page Name *</label>
                                    <div class="col-lg-10">
                                        <input type="text" class="form-control required" id="pn" name="page_name" maxlength="255">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="sl" class="col-lg-2 col-sm-2 control-label">Slug *</label>
                                    <div class="col-lg-10">
                                        <input type="text" class="form-control required" id="sl" name="slug" onkeyup="this.value=this.value.replace(/[^a-z^0-9^-]/g,'');" onblur="check_slug(this.value)" maxlength="255">
                                        <small style="color: grey;">Only Lower case characters and - is allowed</small>
                                        <small style="color: red; display: none;" class="slug_exist"><br>This slug is already taken</small>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-lg-2 col-sm-2 control-label">Select Template *</label>
                                    <div class="col-lg-10">
                                        <div class="col-lg-4">
                                            @foreach($templates as $template)
                                            <div class="radio-custom radio-success">
                                                <input type="radio" value="{{ $template->id }}" name="template_id" id="tem{{ $template->id }}" onclick="get_template_img(this.value)" checked>
                                                <label for="tem{{ $template->id }}">{{ $template->name }}</label>
                                            </div>
                                            @endforeach
                                        </div>
                                        <div class="col-lg-8">
                                            <div id="img"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="mti" class="col-lg-2 col-sm-2 control-label">Meta Title *</label>
                                    <div class="col-lg-10">
                                        <input type="text" class="form-control required" id="mti" name="meta_title" maxlength="255">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="mt" class="col-lg-2 col-sm-2 control-label">Meta Description</label>
                                    <div class="col-lg-10">
                                        <textarea class="form-control" id="mt" maxlength="255" name="meta_description"></textarea>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="mk" class="col-lg-2 col-sm-2 control-label">Meta Keywords</label>
                                    <div class="col-lg-10">
                                        <input type="text" class="form-control" maxlength="255" id="mk" name="meta_keywords">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-lg-2 col-sm-2 control-label">
                                        Book Image
                                        <br><small>Min. <b>116 x 150</b> dimension</small>
                                    </label>
                                    <div class="col-lg-10">
                                        <input class="file file-0" type="file" name="book_image">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-lg-2 col-sm-2 control-label">
                                        Banner Image *
                                        <br><small>Min. <b>1300 x 280</b> dimension</small>
                                    </label>
                                        <input class="file file-0" type="file" name="banner_image">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-lg-2 col-sm-2 control-label">Page Content</label>
                                    <div class="col-lg-10">
                                        <textarea name="page_content" class="summernote required" maxlength="255"></textarea>
                                    </div>
                                </div>

                                <div id="book_binding" style="display: none;">
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-2 control-label">Template Fields</label>
                                        <div class="col-lg-10">
                                            <section class="isolate-tabs">
                                                <ul class="nav nav-tabs">
                                                    <li class="active">
                                                        <a data-toggle="tab" href="#h-c">Hard Cover</a>
                                                    </li>
                                                    <li class="">
                                                        <a data-toggle="tab" href="#s-c">Soft Cover</a>
                                                    </li>
                                                    <li class="">
                                                        <a data-toggle="tab" href="#s-b">Spiral Book</a>
                                                    </li>
                                                    <li class="">
                                                        <a data-toggle="tab" href="#s-s">Saddle Stitch</a>
                                                    </li>
                                                    <li class="">
                                                        <a data-toggle="tab" href="#l-f">Lay-Flat</a>
                                                    </li>
                                                </ul>
                                                <div class="panel-body">
                                                    <div class="tab-content">
                                                        <div id="h-c" class="tab-pane active">
                                                            <textarea name="dynamic_fields[]" class="summernote"></textarea>
                                                        </div>
                                                        <div id="s-c" class="tab-pane">
                                                            <textarea name="dynamic_fields[]" class="summernote"></textarea>
                                                        </div>
                                                        <div id="s-b" class="tab-pane">
                                                            <textarea name="dynamic_fields[]" class="summernote"></textarea>
                                                        </div>
                                                        <div id="s-s" class="tab-pane">
                                                            <textarea name="dynamic_fields[]" class="summernote"></textarea>
                                                        </div>
                                                        <div id="l-f" class="tab-pane">
                                                            <textarea name="dynamic_fields[]" class="summernote"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            </section>
                                        </div>
                                    </div>
                                </div>

                                <div id="yearbook" style="display: none;">
                                    <div class="form-group">
                                        <label for="pn" class="col-lg-2 col-sm-2 control-label">Template Fields</label>
                                        <div class="col-lg-10">
                                            <div class="col-lg-12">
                                                <label><b>Which Option Will You Chose?</b></label>
                                                @for($a = 0; $a < 3; $a++)
                                                <div class="col-lg-12">
                                                    <div class="col-lg-12">
                                                        <input type="text" name="yearbook[title][]" class="form-control" placeholder="Option {{$a+1}} Title" maxlength="255">
                                                    </div>
                                                    <div class="col-lg-12">
                                                        <!-- <input type="text" name="" class="form-control"> -->
                                                        <textarea name="yearbook[desc][]" placeholder="Optoin {{$a+1}} Description" class="form-control" maxlength="255"></textarea><br>
                                                    </div>
                                                </div>
                                                @endfor
                                            </div>

                                            <div class="col-lg-12">
                                                <br><br>
                                                <label><b>The UBuildAbook Advantage</b></label>
                                                <textarea name="yearbook[advantage]" maxlength="255" class="summernote"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- <div id="yearbook_fusion" style="display: none;">
                                    <div class="form-group">
                                        <label for="pn" class="col-lg-2 col-sm-2 control-label">Template Fields</label>
                                        <div class="col-lg-10">
                                            <textarea name="yearbook_fusion" class="summernote required"></textarea>
                                        </div>
                                    </div>
                                </div> -->

                                <div id="webinar_request" style="display: none;">
                                    <div class="form-group">
                                        <label for="pn" class="col-lg-2 col-sm-2 control-label">Template Fields</label>
                                        <div class="col-lg-10">
                                            <section class="isolate-tabs">
                                                <ul class="nav nav-tabs">
                                                    <li class="active">
                                                        <a data-toggle="tab" href="#wrf">WEBINAR REQUEST FORM</a>
                                                    </li>
                                                    <li class="">
                                                        <a data-toggle="tab" href="#yfov">VIDEOS</a>
                                                    </li>
                                                    <li class="">
                                                        <a data-toggle="tab" href="#wtlm">WANT TO LEARN MORE?</a>
                                                    </li>
                                                </ul>
                                                <div class="panel-body">
                                                    <div class="tab-content">
                                                        <div id="wrf" class="tab-pane active">
                                                            <textarea name="webinar[]" maxlength="255" class="summernote"></textarea>
                                                        </div>
                                                        <div id="yfov" class="tab-pane">
                                                            <textarea name="webinar[]" maxlength="255" class="summernote"></textarea>
                                                        </div>
                                                        <div id="wtlm" class="tab-pane">
                                                            <textarea name="webinar[]" maxlength="255" class="summernote"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            </section>
                                        </div>
                                    </div>
                                </div>

                                <div id="yearbook_fusion_video" style="display: none;">
                                    <div class="form-group">
                                        <label for="pn" class="col-lg-2 col-sm-2 control-label">Template Fields</label>
                                        <div class="col-lg-10">
                                            <textarea name="yearbook_fusion_video" maxlength="255" class="summernote required"></textarea>
                                        </div>
                                    </div>
                                </div>

                                <div id="yearbook_photobook_software" style="display: none;">
                                    <div class="form-group">
                                        <label for="pn" class="col-lg-2 col-sm-2 control-label">Template Fields</label>
                                        <div class="col-lg-10">
                                            <section class="isolate-tabs">
                                                <ul class="nav nav-tabs">
                                                    <li class="active">
                                                        <a data-toggle="tab" href="#pys">PHOTOBOOK YEARBOOK SW</a>
                                                    </li>
                                                    <li class="">
                                                        <a data-toggle="tab" href="#fsp">FREE SW POINTS</a>
                                                    </li>
                                                    <li class="">
                                                        <a data-toggle="tab" href="#bys">BUILD YOUR YEARBOOK, SIMPLY</a>
                                                    </li>
                                                    <li class="">
                                                        <a data-toggle="tab" href="#pu">PC USERS</a>
                                                    </li>
                                                    <li class="">
                                                        <a data-toggle="tab" href="#mu">MAC USERS</a>
                                                    </li>
                                                </ul>
                                                <div class="panel-body">
                                                    <div class="tab-content">
                                                        <div id="pys" class="tab-pane active">
                                                            <textarea name="y_photobook_software[]" class="summernote"></textarea>
                                                        </div>
                                                        <div id="fsp" class="tab-pane">
                                                            <textarea name="y_photobook_software[]" class="summernote"></textarea>
                                                        </div>
                                                        <div id="bys" class="tab-pane">
                                                            <textarea name="y_photobook_software[]" class="summernote"></textarea>
                                                        </div>
                                                        <div id="pu" class="tab-pane">
                                                            <textarea name="y_photobook_software[]" class="summernote"></textarea>
                                                        </div>
                                                        <div id="mu" class="tab-pane">
                                                            <textarea name="y_photobook_software[]" class="summernote"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            </section>
                                        </div>
                                    </div>
                                </div>
                                

                                <div class="form-group">
                                    <label class="col-lg-2 col-sm-2 control-label">Status</label>
                                    <div class="col-lg-10">
                                        <div class="radio-custom radio-success">
                                            <input type="checkbox" name="status" class="js-switch-small-green" checked />
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-lg-offset-2 col-lg-10">
                                        <button type="submit" class="btn btn-primary submit">Save</button>
                                        <a href="{{ route('pages') }}" class="btn btn-default">Cancel</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </section>
                </div>
            </div>
        </div>
        <!--body wrapper end-->

        <!-- Footer -->
        @include('backend/includes/footer')
    </div>
    <!-- body content end-->
</section>
<script>
    function check_slug(slug)
    {
        $.ajax({
            type: "POST",
            url: "{{ route('check_sulg') }}",
            data: "slug="+slug+"&_token="+"{{ csrf_token() }}",
            success: function (result) {
                if (result == 1) {
                    $('.slug_exist').show();
                    $('.submit').prop('disabled', true);
                } else {
                    $('.slug_exist').hide();
                    $('.submit').prop('disabled', false);
                }
            }
        });
    }

    $(document).ready(function() {
        var template_id = $('input[name=template_id]:checked').val();
        
        if (template_id == 4) $('#book_binding').show();
        else $('#book_binding').hide();

        if (template_id == 1) $('#yearbook').show();
        else $('#yearbook').hide();

        /*if (template_id == 8) $('#yearbook_fusion').show();
        else $('#yearbook_fusion').hide();*/

        if (template_id == 9) $('#webinar_request').show();
        else $('#webinar_request').hide();

        if (template_id == 10) $('#yearbook_fusion_video').show();
            else $('#yearbook_fusion_video').hide();

        if (template_id == 11) $('#yearbook_photobook_software').show();
        else $('#yearbook_photobook_software').hide();

        var new_url = '{{ url("/admin/get_template_photo/") }}/'+template_id;
        $.ajax({
            type: "GET",
            url: new_url,
            success: function(data){
                var final = "{{ URL::asset('uploads/templates/') }}/"+data;
                $("#img").html("<img src='"+final+"' style='width: 400px;' class='img-responsive'>");
            }
        });
    });
    function get_template_img(template_id) {
        if (template_id == 4) $('#book_binding').show();
        else $('#book_binding').hide();

        if (template_id == 1) $('#yearbook').show();
        else $('#yearbook').hide();

        /*if (template_id == 8) $('#yearbook_fusion').show();
        else $('#yearbook_fusion').hide();*/

        if (template_id == 9) $('#webinar_request').show();
        else $('#webinar_request').hide();

        if (template_id == 10) $('#yearbook_fusion_video').show();
            else $('#yearbook_fusion_video').hide();

        if (template_id == 11) $('#yearbook_photobook_software').show();
        else $('#yearbook_photobook_software').hide();

        var new_url = '{{ url("/admin/get_template_photo/") }}/'+template_id;
        $.ajax({
            type: "GET",
            url: new_url,
            success: function(data){
                var final = "{{ URL::asset('uploads/templates/') }}/"+data;
                $("#img").html("<img src='"+final+"' style='width: 400px;' class='img-responsive'>");
            }
        });
    }
</script>
@endsection