@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.update', ['zap_page' => $zapPage->id]) }}" 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"  value="{{ $zapPage->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" value="{{ $zapPage->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" value="{{ $zapPage->title }}" class="form-control" placeholder="Title" required>
                                <div  id="slug_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" value="{{ $zapPage->sub_title }}" 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 class="form-control" name="content" id="elm1" rows="5" placeholder="Asset Description">{{ $zapPage->content }}</textarea>
            </div>

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

        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Form Fields</h4>
                <div class="repeater">
                    <div data-repeater-list="form-fields">
                        @if(isset($zapPageFormFields[0]))
                        @foreach ($zapPageFormFields as $formField)
                            <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" value="{{ $formField->name }}"/>
                                </div>

                                <div class="mb-3 col-lg-2">
                                    <label for="type"  name="field_type" >Field Type</label>
                                    <input type="text" id="field_type" name="field_type" class="form-control" placeholder="Enter Your Field Type" value="{{ $formField->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" value="{{ $formField->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" value="{{ $formField->place_holder }}" />
                                </div>

                                <div class="col-lg-2 align-self-center">
                                    <div class="d-grid">
                                        <input type="button" data-repeater-delete  class="delete-form-field btn btn-primary"  data-id="{{ $formField->id }}"  value="Delete" />
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        @else
                            <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>
                                    <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>
                        @endif
                    </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">
                        @if(isset($zapPageFormButtons[0]))
                        @foreach ($zapPageFormButtons as $formButton)
                            <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"  value="{{ $formButton->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"  value="{{ $formButton->button_value }}" />
                                </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"  value="{{ $formButton->on_submit }}"  required>
                                    <div id="button_submit_errors" class="invalid-feedback">
                                    </div>
                                </div>
                                <div class="col-lg-3 align-self-center">
                                    <div class="d-grid">
                                        <input type="button" data-repeater-delete  class="delete-form-button btn btn-primary" data-id="{{ $formButton->id }}" value="Delete" />
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        @else
                        <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" required>
                                <div id="button_submit_errors" class="invalid-feedback">
                                </div>
                            </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>
                        @endif
                    </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(){
        $(document).on('click', '.delete-form-field', function(event) {
            event.preventDefault();
            id = $(this).attr('data-id');
            actionUrl = "/admin/zap-pages/delete-form-field/"+id;
            $.ajax({
                type: "GET",
                url: actionUrl,
                success: function(data){ 
                    $(this).parent('.row').addClass('collapse');
                },
                error: function (data) {
                    
                },
            });
        });
        $(document).on('click', '.delete-form-button', function(event) {
            event.preventDefault();
            alert(this.attr('data-id'));
        });
        // $( "#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