@extends('main')

@section('css')
<!-- DataTables -->
<link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
@endsection

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

    <!-- Main content -->
    <section class="content">
      @if(session('message'))
      <div class="row">
        <div class="col-12">
          <div class="form-group mt-3">
            <div class="alert alert-success" role="alert">
                {{ session('message') }}
            </div>
        </div>
        </div>
      </div>
       @endif
      <!-- /.row -->
      <div class="row">
        <div class="col-12">
          <div class="card card-primary mt-3">
            <div class="card-header"></div>
            <div class="card-body">
              <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                  <a class="nav-link active" id="welcome-tab" data-toggle="tab" href="#welcome" role="tab" aria-controls="welcome" aria-selected="true">Display</a>
                </li>
                <li class="nav-item" role="presentation">
                  <a class="nav-link" id="button-tab" data-toggle="tab" href="#button" role="tab" aria-controls="button" aria-selected="false">Monthly</a>
                </li>
                <li class="nav-item" role="presentation">
                  <a class="nav-link" id="display-tab" data-toggle="tab" href="#display" role="tab" aria-controls="display" aria-selected="false">Yearly</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="word-tab" data-toggle="tab" href="#word" role="tab" aria-controls="word" aria-selected="false">Word</a>
                  </li>
              </ul>
              <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active text-center" id="welcome" role="tabpanel" aria-labelledby="welcome-tab">
                  <iframe class="mt-4" src="{{ route('template.emka.pricing') }}" style="width: 80%; height:100vh;"></iframe>
                </div>
                <div class="tab-pane fade" id="button" role="tabpanel" aria-labelledby="button-tab">
                    <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>
                <div class="tab-pane fade" id="display" role="tabpanel" aria-labelledby="display-tab">
                    <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="4"><i class="fas fa-edit"></i></button>
                                                </div>
                                                <div class="col-12 text-center">
                                                    <span class="d-block" act="price">{{ $yearly->price_1 }}</span><br>
                                                    <span class="d-block" act="sub-title">{{ $yearly->sub_title_1 }}</span><br>
                                                    <span class="d-block" act="title">{{ $yearly->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="4"><i class="fas fa-edit"></i></button>
                                                </div>
                                                <div class="col-12 text-center pricing-point">
                                                    @php
                                                    $point_1 = json_decode($yearly->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="4"><i class="fas fa-edit"></i></button>
                                                </div>
                                                <div class="col-12">
                                                    <button class="d-block mx-auto btn btn-primary" link="{{ $yearly->btn_link_1 }}">{{ $yearly->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="5"><i class="fas fa-edit"></i></button>
                                                </div>
                                                <div class="col-12 text-center">
                                                    <span class="d-block" act="price">{{ $yearly->price_2 }}</span><br>
                                                    <span class="d-block" act="sub-title">{{ $yearly->sub_title_2 }}</span><br>
                                                    <span class="d-block" act="title">{{ $yearly->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="5"><i class="fas fa-edit"></i></button>
                                                </div>
                                                <div class="col-12 text-center pricing-point">
                                                    @php
                                                    $point_2 = json_decode($yearly->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="5"><i class="fas fa-edit"></i></button>
                                                </div>
                                                <div class="col-12">
                                                    <button class="d-block mx-auto btn btn-primary" link="{{ $yearly->btn_link_2 }}">{{ $yearly->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="6"><i class="fas fa-edit"></i></button>
                                                </div>
                                                <div class="col-12 text-center">
                                                    <span class="d-block" act="price">{{ $yearly->price_3 }}</span><br>
                                                    <span class="d-block" act="sub-title">{{ $yearly->sub_title_3 }}</span><br>
                                                    <span class="d-block" act="title">{{ $yearly->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="6"><i class="fas fa-edit"></i></button>
                                                </div>
                                                <div class="col-12 text-center pricing-point">
                                                    @php
                                                    $point_3 = json_decode($yearly->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="6"><i class="fas fa-edit"></i></button>
                                                </div>
                                                <div class="col-12">
                                                    <button class="d-block mx-auto btn btn-primary" link="{{ $yearly->btn_link_3 }}">{{ $yearly->btn_text_3 }}</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="word" role="tabpanel" aria-labelledby="word-tab">
                    <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="7"><i class="fas fa-edit"></i></button>
                                </div>
                                <div class="col-12 text-center">
                                    <span class="d-block" act="price">{{ $word->big_title }}</span><br>
                                    <span class="d-block" act="sub-title">{{ $word->medium_title }}</span><br>
                                    <span class="d-block" act="title">{{ $word->small_title }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    <!-- /.content -->
    </section>
  </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')
<!-- DataTables -->
<script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>


<script>
$(document).ready(function() {
    $('#example2').DataTable({
      "ordering": false
    })
})
</script>


<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