@extends('backend.layouts.app-backend')

@section('content')

<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Edit {{ $cms_type['heading'] }}</h2>
        <ol class="breadcrumb">
            <li>
                <a href="{{route('admin.dashboard')}}">Dashboard</a>
            </li>
            <li>
                <a href="{{route('admin.cms.index',['cms_type' => $type])}}">list</a>
            </li>
            <li class="active">
                <strong>Edit {{ $cms_type['heading'] }}</strong>
            </li>
        </ol>
    </div>
</div>

<div class="wrapper wrapper-content animated fadeInRight">

    @include('layouts.message')

    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>Edit {{ $cms_type['heading'] }} from the following form.</h5>
        </div>
        <div class="ibox-content">
            <form action="{{ route('admin.cms.update',['cms_type' => $type,'cms_id' => $cms->id]) }}" method="POST" enctype="multipart/form-data" id="cmsForm" >
                
                @csrf()

                <div class="ad-details">
                    
                    <h3><strong>1. {{ $cms_type['heading'] }} Details</strong></h3>

                    <div class="form-group">
                        <label>Title</label>
                        <input name="title" type="text" class="form-control" value="{{old('title',$cms->title)}}">
                    </div>

                    <div class="form-group">

                        <label>Featured Image</label> <br>

                        <div class="fileinput @if( isset( $cms->featured_image ) ) fileinput-exists @else fileinput-new @endif" data-provides="fileinput">
                            <div class="fileinput-preview fileinput-exists thumbnail">
                                @if( isset( $cms->featured_image ) ) 
                                  <img src="{{asset('cms/'.$cms->featured_image)}}" width="200px">
                                @endif
                            </div>
                            <div>
                              <span class="btn btn-primary btn-file">
                                  <span class="fileinput-new">Select Image</span>
                                  <span class="fileinput-exists">Change</span>
                                  <input type="hidden" name="featured_image" value="{{ $cms->featured_image }}">
                                  <input id="featured_image" name="featured_image" type="file" class="form-control" accept="image/*"/>
                              </span>
                              <a href="#" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Remove</a>
                            </div>
                        </div>

                    </div>

                    <div class="form-group">
                        <label>Description</label>
                        <textarea name="description" class="form-control textarea">{!! $cms->description ?? '' !!}</textarea>
                    </div>

                    <div class="form-group">
                        <label for="inputTitle">Slider Images</label>
                        <div class="input-images-1" style="padding-top: .5rem;cursor: pointer;"></div>
                    </div>

                    <div class="form-row row pdf-container">

                         @if( isset( $cms->pdf_file ) )
                            
                            @php $decodePdfFiles = json_decode( $cms->pdf_file ); @endphp

                            @foreach( $decodePdfFiles as $pkey => $pdf )

                                <div class="pdf-wrapper row" style="margin-left:10px;">
                                    <div class="form-group">
                                        <label>Pdf Name</label> <br>
                                        <input type="text" name="pdf_file[{{ $pkey+1 }}][name]" class="form-control" value="{{ $pdf->pdf_name }}">
                                    </div>

                                    <div class="form-group">
                                        <label>
                                            Pdf File  
                                            <a href="{{ asset('cms/pdf_file/'.$pdf->pdf_file) }}" target="_blank">{{ $pdf->pdf_name ?? "view pdf" }}</a>
                                        </label>
                                        <input type="hidden" name="pdf_file[{{ $pkey+1 }}][file]" value="{{ $pdf->pdf_file }}">
                                        <input type="file" name="pdf_file[{{ $pkey+1 }}][file]" class="form-control">
                                    </div>

                                    <div class="hr-line-dashed"></div>
                                    
                                    <div class="form-group col-md-2">
                                        <a href="javascript:void(0);" class="remove-pdf btn btn-danger btn-sm" style="margin-top: 8px;">Remove</a>
                                    </div>                                
                                </div>

                            @endforeach

                            @else

                                <div class="pdf-wrapper row" style="margin-left:10px;">
                                    <div class="form-group">
                                        <label>Pdf Name</label> <br>
                                        <input type="text" name="pdf_file[1][name]" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label>Pdf File</label> <br>
                                        <input type="file" name="pdf_file[1][file]" class="form-control">
                                    </div>
                                </div>

                                <div class="hr-line-dashed"></div>

                          @endif

                    </div>
                    
                    <div class="form-group">
                        <button type="button" class="btn btn-primary add-new-pdf">Add Pdf</button>
                    </div>

                </div> 
                    
             
                <div class="ad-details">
                    
                    <h3><strong>2. Contact Info</strong></h3>
                    
                      <div class="form-row row">

                        <div class="form-group col-md-6">
                            <label>Street, Address </label>
                            <input name="street_address" type="text" class="form-control" value="{{old('street_address',$cms->street_address ?? '')}}">
                        </div>

                        <div class="form-group col-md-6">
                            <label>Province </label>
                            <select name="province_id" class="form-control">
                                <option value="">Select Province</option>
                                @foreach($provinces as $province)
                                    <option value="{{$province->id}}" {{ $cms->province_id == $province->id ? 'selected' : '' }}>{{$province->name}}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group col-md-6">
                            <label>Phone </label>
                            <input name="phone" type="text" class="form-control" value="{{old('phone',$cms->phone)}}">
                        </div>

                        <div class="form-group col-md-6">
                            <label>Email </label>
                            <input name="email_address" type="text" class="form-control" value="{{old('email_address',$cms->email_address)}}">
                        </div>

                    </div>

                </div>


                <div class="ad-details">
                    
                    <h3><strong>3. Social Links</strong></h3>
        
                    <div class="form-row row">

                        <div class="form-group col-md-6">
                            <label>Facebook Link </label>
                            <input name="facebook_url" type="text" class="form-control" value="{{old('facebook_url',$cms->facebook_url)}}">
                        </div>

                        <div class="form-group col-md-6">
                            <label>Twitter Link </label>
                            <input name="twitter_url" type="text" class="form-control" value="{{old('twitter_url',$cms->twitter_url)}}">
                        </div>

                        <div class="form-group col-md-6">
                            <label>Pinterest Link</label>
                            <input name="pinterest_url" type="text" class="form-control" value="{{old('pinterest_url',$cms->pinterest_url)}}">
                        </div>

                        <div class="form-group col-md-6">
                            <label>Instagram </label>
                            <input name="instagram_url" type="text" class="form-control" value="{{old('instagram_url',$cms->instagram_url)}}">
                        </div>

                    </div>


                </div> 


                <div class="ad-details">
                    
                    <h3><strong>4. Other</strong></h3>
        
                    <div class="form-group">
                        <label>Heading </label>
                        <input name="community_heading" type="text" class="form-control" value="{{old('community_heading',$cms->community_heading)}}">
                    </div>

                    <div class="form-group">
                        <label>Heading Description </label>
                        <textarea name="community_heading_content" class="form-control textarea" id="community_heading_content">{{old('community_heading_content',$cms->community_heading_content)}}</textarea>
                    </div>

                    <div class="form-group">
                        <label>Side Heading </label>
                        <input name="benefit_heading" type="text" class="form-control" value="{{old('benefit_heading',$cms->benefit_heading)}}">
                    </div>

                    <div class="form-group">
                        <label>Side Description </label>
                        <textarea name="benefit_content" class="form-control list" id="benefit_content">{{old('benefit_content',$cms->benefit_content)}}</textarea>
                    </div>


                </div>


                <div class="ad-details">
                    
                    <h3><strong>5. Route & Schedule Repeater</strong></h3>
        
                   
                    <div class="form-group">
                        <label>Route & Schedule Heading </label>
                        <input name="route_schedule_heading" type="text" class="form-control" value="{{old('route_schedule_heading',$cms->route_schedule_heading)}}">
                    </div>
                    
                    <!-- route_schedule_repeater  -->
                    <div class="form-row row route-container">
                        @php
                            $decodeRoutes = json_decode($cms->route_schedule_repeater);
                        @endphp
                        @if( isset( $decodeRoutes ) && count( (array) $decodeRoutes ) > 0 )

                         @foreach( $decodeRoutes as $rkey => $route )
                            
                            <div class="route-wrapper" style="margin-left:10px;">

                                 <div class="form-group">
                                    <label>Title</label> <br>
                                    <input type="text" name="route_schedule_repeater[{{ $rkey + 1 }}][title]" class="form-control" value="{{ $route->title }}">
                                </div>

                                 <div class="form-group">
                                    <label>Content</label> <br>
                                    <textarea class="form-control table" name="route_schedule_repeater[{{ $rkey + 1 }}][content]">{!! $route->content !!}</textarea>
                                </div>


                                <div class="hr-line-dashed"></div>

                                 <div class="form-group">
                                    <a href="javascript:void(0);" class="remove-route btn btn-danger btn-sm" style="margin-top: 8px;">Remove</a>
                                </div>

                            </div>

                        
                        @endforeach

                        @else
                        <div class="route-wrapper" style="margin-left:10px;">
                             <div class="form-group">
                                <label>Title</label> <br>
                                <input type="text" name="route_schedule_repeater[1][title]" class="form-control">
                            </div>

                             <div class="form-group">
                                <label>Content</label> <br>
                                <textarea class="form-control textarea" name="route_schedule_repeater[1][content]"></textarea>
                            </div>

                        </div>

                        <div class="hr-line-dashed"></div>
                        @endif
                    </div>
                    
                    <div class="form-group">
                        <button type="button" class="btn btn-primary add-new-route">Add route</button>
                    </div>


                </div>
            
                <div class="ad-details">
                    
                    <h3><strong>6. Status</strong></h3>
        
                    <div class="form-group">
                        <label>Ad Status </label>
                        <select name="status" class="form-control">
                            <option value="0" {{ $cms->status == 0 ? 'selected' : '' }}>Unpublished</option>
                            <option value="1" {{ $cms->status == 1 ? 'selected' : '' }}>Published</option>
                        </select>
                    </div>

                </div>

                <div class="form-group" style="margin-bottom: 50px;margin-left: -15px;">
                    <div class="col-sm-4">
                        <button class="btn btn-primary" type="submit" id="cmsButton">Save</button>
                    </div>
                </div>


            </form>
        </div>
    </div>
      
</div>

  @if( isset( $cms->sliders ) )
        @php   
            $images = [];
            $decodeSliders = json_decode( $cms->sliders ); 
        @endphp

        @foreach( $decodeSliders as $slider )
            @php 
                $images[] = [
                    'id' =>  $slider,
                    'src' => asset('cms/sliders/'.$slider)
                ];
            @endphp
        @endforeach
    @endif
@endsection

@section('header-style')
<link href="{{ asset('backend/jasny-bootstrap/css/jasny-bootstrap.css')}}" rel="stylesheet" />
<link href="{{ asset('frontend/css/image-uploader.css') }}" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

@stop
@section('footer-scripts')
<script type="text/javascript" src="{{ asset('backend/jasny-bootstrap/js/jasny-bootstrap.js') }}"></script>
<script type="text/javascript" src="{{ asset('backend/tinymce/tinymce.min.js') }}"></script>

<script type="text/javascript">
    var myarray = [];
    @if(isset($images))
    @foreach($images as $data)
        myarray.push([{
                    id: "{{$data['id']}}",
                    src: "{{$data['src']}}"
                }
            ]);
    @endforeach
    @endif
    tinymce.init({
        selector: ".textarea",
        menubar:false,
        plugins: [
        'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table contextmenu'
        ],
        toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link'
    });

     tinymce.init({
        selector: ".table",
        plugins: 'table',
        menubar: false,
        toolbar: 'table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol'
    });

      tinymce.init({
        selector: ".list",
        menubar:false,
        plugins: [
        'lists',
        ],
        toolbar: 'bullist'
    });

</script>
<script src="{{ asset('frontend/js/image-uploader.js') }}"></script>
<script type="text/javascript">



$("#cmsButton").on('click',function(e){

    e.preventDefault();

    $("span.uk-text-danger").remove();

    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('input[name="_token"]').val()
      }
    });

    var form = document.forms.namedItem("cmsForm"); // high importance!, here you need change "yourformname" with the name of your form
    var formData = new FormData(form); // high importance!
    formData.append("description", tinymce.get('description').getContent());
    var self     = $(this);

    $.ajax({
        url: "{{route('admin.cms.form.validation',$type)}}",
        processData: false,
        contentType: false,
        cache: false,
        method: 'POST',
        data: formData,
        beforeSend: function(){
            self.text('Saving..');
            self.attr('disabled','disabled');
        },
        success: function(data){
           $("#cmsForm").submit();
        },
        error: function(jqXhr, json, errorThrown){
            
            self.text('Save');

            self.removeAttr('disabled');

            var errors = jqXhr.responseJSON;

            $.each(errors['errors'], function (index, value) {
                
                if(index == 'province_id' ){
                    $('#cmsForm select[name='+index+']').after('<span class="uk-form-label uk-text-danger">'+value+'</span>');
                }
                else{
                    $('#cmsForm input[name='+index+']').after('<span class="uk-form-label uk-text-danger">'+value+'</span>');
                }
            });

            $("html, body").animate({
                scrollTop: 0
            }, 900);  

        }
    });
});

$('.input-images-1').imageUploader();

var routecnt = $('.route-container').children().length;

$('.add-new-route').on('click', function() {

    routecnt++;
    var icontainer = ` <div class="route-wrapper row" style="margin-left:10px;">


                    <div class="form-group">
                        <label>Title</label> <br>
                        <input type="text" name="route_schedule_repeater[${routecnt}][title]" class="form-control">
                    </div>

                     <div class="form-group">
                        <label>Content</label> <br>
                        <textarea class="form-control table" name="route_schedule_repeater[${routecnt}][content]"></textarea>
                    </div>

                    <div class="form-group col-md-2">
                        <a href="javascript:void(0);" class="remove-route btn btn-danger btn-sm">Remove route</a>
                    </div>


                </div>`;

    $('.route-container').append(icontainer);

    $(".remove-route").on('click',function(){
       $(this).parent().parent().remove();
       $(`.route-remove-line${routecnt}`).remove();
       routecnt--;
    });

        tinymce.init({
            selector: ".table",
            plugins: 'table',
            menubar: false,
            toolbar: 'table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol'
        });
    });

$(".remove-route").on('click',function(){
    $(this).parent().parent().remove();
    $(`.route-remove-line${routecnt}`).remove();
    routecnt--;
});


var pdfcnt = $('.pdf-container').children().length;

$('.add-new-pdf').on('click', function() {

    pdfcnt++;
    var icontainer = `<div class="pdf-wrapper row" style="margin-left:10px;">
                         <div class="pdf-wrapper" style="margin-left:10px;">
                            <div class="form-group">
                                <label>Pdf Name</label> <br>
                                <input type="text" name="pdf_file[${pdfcnt}][name]" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>Pdf File</label> <br>
                                <input type="file" name="pdf_file[${pdfcnt}][file]" class="form-control">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group col-md-2">
                            <a href="javascript:void(0);" class="remove-pdf btn btn-danger btn-sm">Remove pdf</a>
                        </div>
                    </div>`;

    $('.pdf-container').append(icontainer);

    $(".remove-pdf").on('click',function(){
       $(this).parent().parent().remove();
       $(`.pdf-remove-line${pdfcnt}`).remove();
       pdfcnt--;
    });
});

$(".remove-pdf").on('click',function(){
    $(this).parent().parent().remove();
    $(`.pdf-remove-line${pdfcnt}`).remove();
    pdfcnt--;
});

</script>
@stop