@extends('main')

@section('css')
@endsection

@section('content')
<div class="content-wrapper">

    <!-- Main content -->
    <section class="content">
        @if(session('message'))
        <div class="row">
            <div class="col-12 mt-3">
                <div class="alert alert-success mt-3" role="alert">
                    {{ session('message') }}
                </div>
            </div>
        </div>
        @endif
        <div>
            Permalink : <a href="{{URL::to('emka/pricing')}}">{{URL::to('emka/pricing')}}</a>
        </div>
        <div class="row">
            <div class="col-md-4 col-sm-12">
                <div class="card mt-3">
                    <div class="card-body">
                        <div class="card mt-3">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-12">
                                        <button class="btn btn-warning float-right d-block edit-content" act="top-card" position="1"><i class="fas fa-edit"></i></button>
                                    </div>
                                    <div class="col-12 text-center">
                                        <span class="d-block" act="price">{{ $content->price_1 }}</span><br>
                                        <span class="d-block" act="sub-title">{{ $content->sub_title_1 }}</span><br>
                                        <span class="d-block" act="title">{{ $content->title_1 }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card mt-3">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-12">
                                        <button class="btn btn-warning float-right d-block edit-content" act="middle-card" position="1"><i class="fas fa-edit"></i></button>
                                    </div>
                                    <div class="col-12 text-center pricing-point">
                                        @php
                                        $point_1 = json_decode($content->point_1, true);
                                            @endphp
                                        @if(!empty($point_1))
                                        @for($i = 0; $i <= count($point_1) - 1; $i++)
                                            <span class="d-block pricing-point-list">{{ $point_1[$i] }}</span>
                                        @endfor
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card mt-3">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-12">
                                        <button class="btn btn-warning float-right d-block edit-content" act="bottom-card" position="1"><i class="fas fa-edit"></i></button>
                                    </div>
                                    <div class="col-12">
                                        <button class="d-block mx-auto btn btn-primary" link="{{ $content->btn_link_1 }}">{{ $content->btn_text_1 }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-12">
                <div class="card mt-3">
                    <div class="card-body">
                        <div class="card mt-3">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-12">
                                        <button class="btn btn-warning float-right d-block edit-content" act="top-card" position="2"><i class="fas fa-edit"></i></button>
                                    </div>
                                    <div class="col-12 text-center">
                                        <span class="d-block" act="price">{{ $content->price_2 }}</span><br>
                                        <span class="d-block" act="sub-title">{{ $content->sub_title_2 }}</span><br>
                                        <span class="d-block" act="title">{{ $content->title_2 }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card mt-3">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-12">
                                        <button class="btn btn-warning float-right d-block edit-content" act="middle-card" position="2"><i class="fas fa-edit"></i></button>
                                    </div>
                                    <div class="col-12 text-center pricing-point">
                                        @php
                                        $point_2 = json_decode($content->point_2, true);
                                            @endphp
                                        @if(!empty($point_2))
                                        @for($i = 0; $i <= count($point_2) - 1; $i++)
                                            <span class="d-block pricing-point-list">{{ $point_2[$i] }}</span>
                                        @endfor
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card mt-3">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-12">
                                        <button class="btn btn-warning float-right d-block edit-content" act="bottom-card" position="2"><i class="fas fa-edit"></i></button>
                                    </div>
                                    <div class="col-12">
                                        <button class="d-block mx-auto btn btn-primary" link="{{ $content->btn_link_2 }}">{{ $content->btn_text_2 }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-12">
                <div class="card mt-3">
                    <div class="card-body">
                        <div class="card mt-3">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-12">
                                        <button class="btn btn-warning float-right d-block edit-content" act="top-card" position="3"><i class="fas fa-edit"></i></button>
                                    </div>
                                    <div class="col-12 text-center">
                                        <span class="d-block" act="price">{{ $content->price_3 }}</span><br>
                                        <span class="d-block" act="sub-title">{{ $content->sub_title_3 }}</span><br>
                                        <span class="d-block" act="title">{{ $content->title_3 }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card mt-3">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-12">
                                        <button class="btn btn-warning float-right d-block edit-content" act="middle-card" position="3"><i class="fas fa-edit"></i></button>
                                    </div>
                                    <div class="col-12 text-center pricing-point">
                                        @php
                                        $point_3 = json_decode($content->point_3, true);
                                            @endphp
                                        @if(!empty($point_3))
                                        @for($i = 0; $i <= count($point_3) - 1; $i++)
                                            <span class="d-block pricing-point-list">{{ $point_3[$i] }}</span>
                                        @endfor
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card mt-3">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-12">
                                        <button class="btn btn-warning float-right d-block edit-content" act="bottom-card" position="3"><i class="fas fa-edit"></i></button>
                                    </div>
                                    <div class="col-12">
                                        <button class="d-block mx-auto btn btn-primary" link="{{ $content->btn_link_3 }}">{{ $content->btn_text_3 }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{--
      <div class="row">
        <div class="col-12">
            <div class="card mt-3">
                <div class="card-body">
                    <div class="row">
                      <div class="col-12">
                          <button class="btn btn-warning float-right mb-3 d-block edit-content" act="title"><i class="fas fa-edit"></i></button>
                      </div>
                      <div class="col-12 text-center">
                          <span class="d-block" act="big-title">{!! $content->section_feature_big_title !!}</span><br>
                          <span class="d-block" act="small-title">{!! $content->section_feature_small_title !!}</span><br>
                      </div>
                    </div>
                </div>
            </div>
        </div>
          <div class="col-12 mt-3">
              <button class="btn btn-primary btn-add-new-feature float-right">Add New Feature</button>
          </div>
          <div class="col-12">
              <div class="row">
                  @if(!empty($features))
                  @foreach($features as $f)
                  <div class="col-md-4 col-sm-6">
                      <div class="card mt-3">
                          <div class="card-body">
                            <div class="row">
                                <div class="col-12">
                                    <button class="btn btn-danger float-right d-block mb-3 btn-delete" feature-id="{{ $f->id }}"><i class="fas fa-trash"></i></button>
                                    <button class="btn btn-info float-right d-block mr-2 mb-3 edit-content" act="edit-image-feature" feature-id="{{ $f->id }}" img="{{ $f->image }}" img-alt="{{ \app\Http\Controllers\SiteFeatureController::checkAltMediaStatic($f->image) }}"><i class="fas fa-image"></i></button>
                                    <button class="btn btn-warning float-right mb-3 mr-2 d-block edit-content" act="edit-content-feature" feature-id="{{ $f->id }}"><i class="fas fa-edit"></i></button>
                                </div>
                                <div class="col-12 text-center">
                                    <img class="d-block mx-auto mb-3" style="width: 100px; height:100px;" src="{{ $f->image ? asset('media/' . $f->image) : asset('soft/images/feature/06.png') }}" alt="{{ \App\Http\Controllers\SiteFeatureController::checkAltMediaStatic($f->image) }}">
                                    <span class="d-block feature-title">{!! $f->title !!}</span><br>
                                    <span class="d-block feature-description">{!! $f->description !!}</span><br>
                                </div>
                            </div>  
                          </div>
                      </div>
                  </div>
                  @endforeach
                  @endif
              </div>
          </div>
      </div>
      --}}
      <!-- /.row -->
    </section>
    <!-- /.content -->
</div>
  <!-- Modal -->
  <div class="modal fade modal-data" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          
        </div>
      </div>
    </div>
  </div>
@endsection

@section('js')
<script>
const _token =  "{{ csrf_token()}}"
const url_update = "{{ route('layout.emka-pricing-update') }}"

$(document).ready(function() {

    $('body').on('click', '.edit-content' ,function() {
        let act = $(this).attr('act')

         if(act == 'top-card') {
            let position = $(this).attr('position')
            let title = $(this).parent().parent().find('[act="title"]').html()
            let sub_title = $(this).parent().parent().find('[act="sub-title"]').html()
            let price = $(this).parent().parent().find('[act="price"]').html()

            $('body').find('.modal-body').html(`
                <div class="form-group">
                <label>Price</label>
                <input type="text" class="form-control price-web" name="price" value="${price}">
                </div>
                <div class="form-group">
                <label>Sub title</label>
                <input type="text" class="form-control" name="sub_title" value="${sub_title}">
                </div>
                <div class="form-group">
                <label>Title</label>
                <input type="text" class="form-control" name="title" value="${title}">
                </div>
                <button class="float-right mt-3 btn btn-primary update-content" act="${act}" position="${position}">Save</button
            `)

            $('.modal-data').modal('show')

            numberOnly()
            priceFormat()
        } else if(act == 'bottom-card') {
            let position = $(this).attr('position')
            let text = $(this).parent().parent().find('.btn-primary').html()
            let link = $(this).parent().parent().find('.btn-primary').attr('link')

            $('body').find('.modal-body').html(`
                <div class="form-group">
                <div class="form-group">
                <label>Button Text</label>
                <input type="text" class="form-control" name="text" value="${text}">
                </div>
                <div class="form-group">
                <label>Button Link</label>
                <input type="text" class="form-control" name="link" value="${link}">
                </div>
                <button class="float-right mt-3 btn btn-primary update-content" act="${act}" position="${position}">Save</button
            `)

            $('.modal-data').modal('show')
        } else if(act == 'middle-card') {
            let position = $(this).attr('position')
            let modal_body = `<div class="form-group"><button class="btn btn-info btn-tambah-point">Tambah</button></div>`

            $('body').find('[act="middle-card"][position="'+position+'"]').parent().parent().find('.pricing-point-list').each(function(e) {
                modal_body += `
                <div class="input-group mb-3">
                    <input type="text" class="form-control" value="${$(this).html()}" name="point">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary delete-point" type="button" id="button-addon2">Delete</button>
                    </div>
                </div>
                `
            })

            modal_body += `<button class="float-right mt-3 btn btn-primary update-content" act="${act}" position="${position}">Save</button`
            $('body').find('.modal-body').html(modal_body)
            $('.modal-data').modal('show')
        }
    })

    $('body').on('click', '.update-content', function() {

        let act = $(this).attr('act')

        if(act == 'top-card') {
            let position = $(this).attr('position')
            let title = $(this).parent().find('[name=title]').val()
            let sub_title = $(this).parent().find('[name=sub_title]').val()
            let price = $(this).parent().find('[name="price"]').val()
            updateContent({ act, _token, title, sub_title, price, position })
        } else if(act == 'bottom-card') {
            let position = $(this).attr('position')
            let text = $(this).parent().find('[name=text]').val()
            let link = $(this).parent().find('[name=link]').val()
            updateContent({ act, _token, position, text, link })
        } else if(act == 'middle-card') {
            let position = $(this).attr('position')
            let points = []
            $('body').find('[name="point"]').each(function(e) {
                if($(this).val()) {
                    points.push($(this).val())
                }
            })
            updateContent({ _token, act, points, position })
        }
    })

    $('body').on('click', '.btn-tambah-point', function() {
        $(`
        <div class="input-group mb-3">
            <input type="text" class="form-control" name="point">
            <div class="input-group-append">
                <button class="btn btn-outline-secondary delete-point" type="button" id="button-addon2">Delete</button>
            </div>
        </div>
        `).insertBefore('.update-content')
    })

    $('body').on('click', '.delete-point', function() {
        $(this).parent().parent().remove()
    })
})

function updateContent(data) {
    $.ajax({
        type: 'post',
        url: url_update,
        data,
        success(response) {

            if(data.act == 'top-card') {
                $('body').find('[act="top-card"][position="'+data.position+'"]').parent().parent().find('[act="price"]').html(data.price)
                $('body').find('[act="top-card"][position="'+data.position+'"]').parent().parent().find('[act="sub-title"]').html(data.sub_title)
                $('body').find('[act="top-card"][position="'+data.position+'"]').parent().parent().find('[act="title"]').html(data.title)
            } else if(data.act == 'bottom-card') {
                $('body').find('[act="bottom-card"][position="'+data.position+'"]').parent().parent().find('.btn-primary').html(data.text)
                $('body').find('[act="bottom-card"][position="'+data.position+'"]').parent().parent().find('.btn-primary').attr('link', data.link)
            } else if(data.act == 'middle-card') {
                let new_points = ''

                for(let i = 0; i <= data.points.length - 1; i++) {
                    new_points += `
                    <span class="d-block pricing-point-list">${data.points[i]}</span>
                    `
                }

                $('body').find('[act="middle-card"][position="'+data.position+'"]').parent().parent().find('.pricing-point').html(new_points)
            }

            $('body').find('.modal-data').modal('hide')
        }
    })
}

function numberOnly() {
    var input = document.querySelector('.price-web');
    input.addEventListener('input', function() {
        this.value = this.value.replace(/[^0-9 \,]/, '');
    });
}

function priceFormat() {
    $('.price-web').on('keyup', function() {
        var nilai = $(this).val();
        $(this).val(formatRupiah(nilai));
    })
}

const formatRupiah = angka => {
    var number_string = angka.replace(/[^,\d]/g, '').toString(),
    split   		= number_string.split(','),
    sisa     		= split[0].length % 3,
    rupiah     		= split[0].substr(0, sisa),
    ribuan     		= split[0].substr(sisa).match(/\d{3}/gi);

    // tambahkan titik jika yang di input sudah menjadi angka ribuan
    if(ribuan){
        separator = sisa ? '.' : '';
        rupiah += separator + ribuan.join('.');
    }

    rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
    return rupiah;
}

</script>
@endsection