@extends('layouts.master')

@section('title') @lang('translation.Add_Asset') @endsection

@section('css')
<!-- select2 css -->
<link href="{{ URL::asset('/assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />

<!-- dropzone css -->
<link href="{{ URL::asset('/assets/libs/dropzone/dropzone.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')

@component('components.breadcrumb')
@slot('li_1') Ecommerce @endslot
@slot('title') Add Page for mobile @endslot
@endcomponent

<div class="row">
    <div class="col-12">
        
    <form  class="needs-validation" id="zap_page_form" action="{{ route('zap-pages.store') }}" method="post" enctype="multipart/form-data" novalidate>
    @csrf
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Basic Information</h4>
                <p class="card-title-desc">Fill all information below</p>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="mb-3">
                                <label for="slug">Slug</label>
                                <input id="slug" name="slug" type="text" class="form-control" placeholder="Slug" required>
                                <div  id="slug_errors"  class="invalid-feedback">
                                    Required
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="image">Image</label>
                                <input type="file" name="image" class="form-control" id="image">
                            </div>
                        </div>

                        <div class="col-sm-6">
                            
                            <div class="mb-3">
                                <label for="title">Title</label>
                                <input id="title" name="title" type="text" class="form-control" placeholder="Title" required>
                                <div  id="title_errors"  class="invalid-feedback">
                                    Required
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="sub_title">Sub Title</label>
                                <input id="sub_title" name="sub_title" type="text" class="form-control" placeholder="Sub Title" required>
                                <div  id="sub_title_errors"  class="invalid-feedback">
                                    Required
                                </div>
                            </div>
                        </div>
                    </div>

            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-3">Page Content</h4>

                <textarea name="content" class="form-control" id="elm1" rows="5" placeholder="Asset Description"></textarea>
            </div>

        </div> <!-- end card-->
        

        <div class="card">
            <div class="card-body">
            <h4 class="card-title">Form Fields</h4>
            <div class="repeater" enctype="multipart/form-data">
                    <div data-repeater-list="form-fields">
                        <div data-repeater-item class="row">
                            <div class="mb-3 col-lg-2">
                                <label for="field_name">Field Name</label>
                                <input type="text" id="field_name" name="field_name" class="form-control" placeholder="Enter Your Field Name" />
                            </div>

                            <div class="mb-3 col-lg-2">
                                <label for="type"  name="field_type" >Field Type</label>
                                <!--<select class="select2 form-control select2-multiple" multiple="multiple" data-placeholder="Choose ...">
                                    <option value="text">Text</option>
                                    <option value="textarea">Textarea</option>
                                    <option value="radio">Radio</option>
                                    <option value="checkbox">Checkbox</option>
                                    <option value="select">Select</option>
                                    <option value="file">File</option>
                                    <option value="color">Color</option>
                                    <option value="date">Date</option>
                                    <option value="email">Email</option>
                                    <option value="hidden">Hidden</option>
                                    <option value="number">Number</option>
                                    <option value="range">Range</option>
                                </select> -->
                                <input type="text" id="field_type" name="field_type" class="form-control" placeholder="Enter Your Field Type" />
                            </div>

                            <div class="mb-3 col-lg-2">
                                <label for="field_title">Field Title</label>
                                <input type="text" id="field_title" name="field_title" class="form-control" placeholder="Enter Your Field Title" />
                            </div>

                            <div class="mb-3 col-lg-4">
                                <label for="place_holder">Place Holder</label>
                                <input id="place_holder" name="place_holder" type="text" class="form-control" placeholder="Place Holder" >
                            </div>

                            <div class="col-lg-2 align-self-center">
                                <div class="d-grid">
                                    <input data-repeater-delete type="button" class="btn btn-primary" value="Delete" />
                                </div>
                            </div>
                        </div>

                    </div>
                    <input data-repeater-create type="button" class="btn btn-success mt-3 mt-lg-0" value="Add" />
                </div>

            </div>
        </div>
        

        <div class="card">
            <div class="card-body">
            <h4 class="card-title">Form Button</h4>
                <div class="repeater" enctype="multipart/form-data">
                    <div data-repeater-list="form-buttons">
                        <div data-repeater-item class="row">
                            <div class="mb-3 col-lg-3">
                                <label for="type"  name="button_type" >Button Type</label>
                                <input type="text" id="button_type" name="button_type" class="form-control" placeholder="Enter Your Button Type" />
                            </div>

                            <div class="mb-3 col-lg-3">
                                <label for="button_value">Button Title</label>
                                <input type="text" id="button_value" name="button_value" class="form-control" placeholder="Enter Your Field Title" />
                            </div>

                            <div class="mb-3 col-lg-3">
                                <label for="button_submit">Button Submit</label>
                                <input id="button_submit" name="button_submit" type="text" class="form-control" placeholder="Button Submit link">
                            </div>

                            <div class="col-lg-3 align-self-center">
                                <div class="d-grid">
                                    <input data-repeater-delete type="button" class="btn btn-primary" value="Delete" />
                                </div>
                            </div>
                        </div>

                    </div>
                    <input data-repeater-create type="button" class="btn btn-success mt-3 mt-lg-0" value="Add" />
                </div>

            </div>
        </div>
        <div class="d-flex flex-wrap gap-2">
            <button type="submit" class="btn btn-primary waves-effect waves-light">Save Changes</button>
            <button type="submit" class="btn btn-secondary waves-effect waves-light">Cancel</button>
        </div>
    </form>
    </div>
</div>
<!-- end row -->

@endsection
@section('script')
    <!-- select 2 plugin -->
    <script src="{{ URL::asset('/assets/libs/select2/select2.min.js') }}"></script>

    <!-- dropzone plugin -->
    <script src="{{ URL::asset('/assets/libs/dropzone/dropzone.min.js') }}"></script>

    <!-- init js -->
    <script src="{{ URL::asset('/assets/js/pages/ecommerce-select2.init.js') }}"></script>
    <!--tinymce js-->
    <script src="{{ URL::asset('/assets/libs/tinymce/tinymce.min.js') }}"></script>

    <!-- init js -->
    <script src="{{ URL::asset('/assets/js/pages/form-editor.init.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/parsleyjs/parsleyjs.min.js') }}"></script>

    <script src="{{ URL::asset('/assets/js/pages/form-validation.init.js') }}"></script>
    
<script src="{{ URL::asset('/assets/libs/jquery-repeater/jquery-repeater.min.js') }}"></script>

<script src="{{ URL::asset('/assets/js/pages/form-repeater.int.js') }}"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        
        $( "#zap_page_form" ).submit(function( event ) {
            event.preventDefault();
            actionUrl = "{{ route('zap-pages.validate') }}";
            form = $( "#zap_page_form" );
            $.ajax({
                type: "POST",
                url: actionUrl,
                data: form.serialize(), // serializes the form's elements.
                success: function(data){ 
                    $('.needs-validation').addClass('validated');
                    form.unbind().submit(); 
                },
                error: function (data) {
                    console.log('An error occurred.');
                    response = data.responseJSON;
                    if(response.status == false){
                        $.each(response.errors, function(i, item) {
                            $('#'+i+'_errors').html(response.errors[i]);
                        });
                    }
                },
            });
        });
    });
    </script>
@endsection