@extends('layout.backend.app',[
    'title' => 'Manage User',
    'pageTitle' =>'Manage User',
])

@push('css')
<link href="{{ asset('template/backend/sb-admin-2') }}/vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
@endpush

@section('content')
<div class="notify"></div>

<div class="card">
    <div class="card-header">
        <!-- Button trigger modal -->
        <!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#create-modal">
          Tambah Data
        </button> -->
    </div>
        <div class="card-body">
            <div class="table-responsive">    
                <table class="table table-bordered data-table">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Name</th>
                            <th>Mobile</th>
                            <th>Balance</th>
                            <th>Status</th>
                            <th>Register Date</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
</div>

<!-- Modal View -->
<div class="modal fade" id="view-modal" tabindex="-1" role="dialog" aria-labelledby="view-modalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document" style="max-width: 800px;">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="edit-modalLabel">View Data</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 class="form-group">
            <table  class="table">
               <tr>
                 <td>Name: </td>
                 <td><div id="name-view"></div></td>
              </tr>
              <tr>
                 <td>Parent User Detail: </td>
                 <td><div id="parent-user-data"></div></td>
              </tr>
              <tr>
                 <td>Mobile: </td>
                 <td><div id="mobile-view"></div></td>
              </tr>
              <tr>
                 <td>Wallet Balance: </td>
                 <td><div id="available_balance-view"></div></td>
              </tr>
              <tr>
                 <td>Status: </td>
                 <td><div id="status-view"></div></td>
              </tr>
              <tr>
                 <td>Mobile Verify Status: </td>
                 <td><div id="is-mobile-verify"></div></td>
              </tr>
              <tr>
                 <td>Bank Name: </td>
                 <td><div id="bank_name"></div></td>
              </tr>
              <tr>
                 <td>Account Number: </td>
                 <td><div id="account_holder_name "></div></td>
              </tr>
              <tr>
                 <td>Bank IFSC Code: </td>
                 <td><div id="ifsc_code"></div></td>
              </tr>
              <tr>
                 <td>Account Number: </td>
                 <td><div id="account_number"></div></td>
              </tr>
            </table>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- Modal View -->

<!-- Modal Edit -->
<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="edit-modalLabel">Edit Data</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="editForm">
        <div class="form-group">
            <label for="name">Name</label>
            <input type="hidden" required="" id="id" name="id" class="form-control">
            <input type="" required="" id="name" name="name" class="form-control">
        </div>
        <div class="form-group">
            <label for="email">Mobile</label>
            <input type="" required="" id="mobile" name="mobile" class="form-control" disabled>
        </div>
        <div class="form-group">
            <label for="role">Status</label>
            <select name="status" id="status" class="form-control">
                <option disabled="">- Select Status -</option>
                <option value="0">Inactive</option>
                <option value="1">Active</option>
            </select>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary btn-update">Update</button>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- Modal Edit -->

<!-- Destroy Modal -->
<div class="modal fade" id="destroy-modal" tabindex="-1" role="dialog" aria-labelledby="destroy-modalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="destroy-modalLabel">Are you sure ?</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
        <button type="button" class="btn btn-danger btn-destroy">Yes</button>
      </div>
    </div>
  </div>
</div>
<!-- Destroy Modal -->

@stop

@push('js')
<script src="{{ asset('template/backend/sb-admin-2') }}/vendor/datatables/jquery.dataTables.min.js"></script>
<script src="{{ asset('template/backend/sb-admin-2') }}/vendor/datatables/dataTables.bootstrap4.min.js"></script>
<script src="{{ asset('template/backend/sb-admin-2') }}/js/demo/datatables-demo.js"></script>

<script type="text/javascript">

  $(function () {
    
    var table = $('.data-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('user.index') }}",
        columns: [
            {data: 'DT_RowIndex' , name: 'id'},
            {data: 'name', name: 'name'},
            {data: 'mobile', name: 'mobile'},
            {data: 'available_balance', name: 'available_balance'},
            {data: 'status', name: 'status'},
            {data: 'created_at', name: 'created_at'},
            {data: 'action', name: 'action', orderable: false, searchable: true},
        ]
    });
  });

  // View
  $('body').on("click",".btn-view",function(){
        var id = $(this).attr("id")
         var url = '{{ route("user.edit", ":id") }}';
         url = url.replace(':id', id);
        $.ajax({
            url: url,
            method: "GET",
            success:function(response){
              console.log(response)
                
                var statusName = 'Inactive';
                var isMobileVerify = 'Unverify'
                if(response.status == 1){
                  statusName = 'Active';
                }
                if(response.is_mobile_verify == 1){
                  isMobileVerify = 'Verify';
                }

                if(response.parent_user){
                  $("#parent-user-data").html(response.parent_user.name + ' ('+ response.parent_user.mobile +')')
                } else {
                  $("#parent-user-data").html(' -Not Found- ');
                }
                $("#view-modal").modal("show")
                $("#name-view").html(response.name)
                $("#available_balance-view").html(response.available_balance)
                $("#mobile-view").html(response.mobile)
                $("#status-view").html(statusName)
                $("#is-mobile-verify").html(isMobileVerify)
                $("#bank_name").html(response.bank_name)
                $("#account_holder_name").html(response.account_holder_name)
                $("#ifsc_code").html(response.ifsc_code)
                $("#account_number").html(response.account_number)
            }
        })
    });

    // Edit & Update
    $('body').on("click",".btn-edit",function(){
        var id = $(this).attr("id")
        var url = '{{ route("user.edit", ":id") }}';
         url = url.replace(':id', id);
        $.ajax({
            url: url,
            method: "GET",
            success:function(response){
                $("#edit-modal").modal("show")
                $("#id").val(response.id)
                $("#name").val(response.name)
                $("#mobile").val(response.mobile)
                $("#status").val(response.status)
            }
        })
    });

    $("#editForm").on("submit",function(e){
        e.preventDefault()
        var id = $("#id").val()
var url = '{{ route("user.update", ":id") }}';
         url = url.replace(':id', id);
        $.ajax({
            url: url,
            method: "PATCH",
            data: $(this).serialize(),
            success:function(){
                $('.data-table').DataTable().ajax.reload();
                $("#edit-modal").modal("hide")
                flash("success","Updated successfully")
            }
        })
    })
    //Edit & Update

    $('body').on("click",".btn-delete",function(){
        var id = $(this).attr("id")
        $(".btn-destroy").attr("id",id)
        $("#destroy-modal").modal("show")
    });

    $(".btn-destroy").on("click",function(){
        var id = $(this).attr("id")
        var url = '{{ route("user.destroy", ":id") }}';
         url = url.replace(':id', id);
        $.ajax({
            url: url,
            method: "DELETE",
            success:function(){
                $("#destroy-modal").modal("hide")
                $('.data-table').DataTable().ajax.reload();
                flash('success','Deleted successfully')
            }
        });
    })

    function flash(type,message){
        $(".notify").html(`<div class="alert alert-`+type+` alert-dismissible fade show" role="alert">
                              `+message+`
                              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                            </div>`)
    }

</script>
@endpush