@extends('adminlte::page')

@section('title', 'Reef | Map')


@section('css')
  <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">

@stop

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Reef Spaces</h3>

                @if(Session::has('success'))
                  <p class="alert {{ Session::get('alert-class', 'alert-info') }}" id="msg_alert">{{ Session::get('success') }}</p>
                @endif

            </div>

            <div class="card-body">
              <livewire:tables.space-map  sort="order_col|asc"/>
                {{-- <table id="main_table_venue_reef" class="table table-hover text-center align-middle">
                    <thead class="thead-dark">
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Space Name</th>
                            <th scope="col">Address</th>
                            <th scope="col">Address 2</th>
                            <th scope="col">Region</th>
                            <th scope="col">City</th>
                            <th scope="col">Zip</th>
                            <th scope="col">Published</th>
                            <th scope="col">Action</th>
                        </tr>
                    </thead>
                    <tbody id="tablecontents_venues_reef">
                        @include('dashboard.venue_map.reef_venues')
                    </tbody>
                </table> --}}
            </div>
        </div>
    </div>
</div>


<!-- -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Upcoming Venues</h3>
            </div>
            <div class="card-body">
              <livewire:tables.space-map-upcoming  sort="order_col|asc"/>
                {{-- <table id="main_table_upcoming_venues" class="table table-hover text-center align-middle">
                    <thead class="thead-dark">
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Space Name</th>
                            <th scope="col">Address</th>
                            <th scope="col">Address 2</th>
                            <th scope="col">Region</th>
                            <th scope="col">City</th>
                            <th scope="col">Zip</th>
                            <th scope="col">Published</th>
                            <th scope="col">Action</th>
                        </tr>
                    </thead>
                    <tbody id="tablecontents_upcoming_venues">
                        @include('dashboard.venue_map.upcoming_list')
                    </tbody>
                </table> --}}
            </div>
        </div>
    </div>
</div>
<!-- -->

{{-- @include('admin-panel.blog_modals') --}}

@stop

@section('modals')
  <!-- Modal -->
  <div wire:ignore.self class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Delete Confirm</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true close-btn">×</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you sure want to delete?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary close-btn" data-dismiss="modal">Close</button>
                <button type="button" wire:click.prevent="delete()" class="btn btn-danger close-modal" data-dismiss="modal">Yes, Delete</button>
            </div>
        </div>
    </div>
  </div>



@endsection

@section('js')

<!-- jQuery UI -->
  <script type="text/javascript" src="//code.jquery.com/ui/1.12.1/jquery-ui.js" ></script>
 
  <!-- Datatables Js-->
  <!-- <script type="text/javascript" src="//cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script> -->

  <script type="text/javascript">
  $(function () {
    window.table = $("#main_table_venue_reef").DataTable();

    $( "#tablecontents_venues_reef" ).sortable({
      items: "tr",
      cursor: 'move',
      opacity: 0.6,
      update: function() {
          sendOrderToServer1();
      }
    });

    function sendOrderToServer1() {

      var order = [];
      $('tr.row1').each(function(index,element) {
        order.push({
          id: $(this).attr('data-id'),
          position: index+1
        });
      });

      $.ajax({
        type: "POST", 
        dataType: "json", 
        url: "{{ url('dashboard/venue-map/sort_upcoming_venue') }}",
        data: {
          order:order,
          _token: '{{csrf_token()}}'
        },
        success: function(response) {
            if (response.status == "success") {
              console.log(response);
            } else {
              console.log(response);
            }
        }
      });

    }
  });

</script>


<!-- -->
<script type="text/javascript">
  $(function () {
    window.table1 = $("#main_table_upcoming_venues").DataTable();

    $( "#tablecontents_upcoming_venues" ).sortable({
      items: "tr",
      cursor: 'move',
      opacity: 0.6,
      update: function() {
          sendOrderToServer2();
      }
    });

    function sendOrderToServer2() {

      var order = [];
      $('tr.row2').each(function(index,element) {
        order.push({
          id: $(this).attr('data-id'),
          position: index+1
        });
      });

      $.ajax({
        type: "POST", 
        dataType: "json", 
        url: "{{ url('dashboard/venue-map/sort_reef_venue') }}",
        data: {
          order:order,
          _token: '{{csrf_token()}}'
        },
        success: function(response) {
            if (response.status == "success") {
              console.log(response);
            } else {
              console.log(response);
            }
        }
      });

    }
  });

</script>
<script src="{{ mix('js/delete-map-script.js') }}"></script>
<script>
  $(document).ready( function () {

  //publish unpublish blog
$(document).on('change', ".published_unpublished_post_btn", function(){
var post_id = $(this).attr('id');
var post_type = $(this).val();
$.ajax({
      type: "GET",
      data: {post_id:post_id, post_type:post_type},
      url: "/dashboard/posts/blog_publish_unpublish_post",
      success: function(data) {
          //  $("#blog_posts_for_ajax").html(data['html']);
        },
  });
});
//

});
</script>
@stop