@extends('admin.layouts.admin')

@section('title', \App\Helpers\NavHelper::title())

@section('content')
<div class="page-heading">
    {!! \App\Helpers\NavHelper::pageHeading() !!}
</div>

<div class="page-content">
    <div class="card">
        <div class="card-body">
            <button class="btn btn-primary mb-2" id="addTypeGame">Add Type Game</button>
            <div class="table-responsive">
                <table class="table table-bordered" id="typegames-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Type</th>
                            <th>Status</th>
                            <th>Description</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="typeGameModal" tabindex="-1">
  <div class="modal-dialog">
    <form id="typeGameForm">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Type Game Form</h5>
          </div>
          <div class="modal-body">
            <input type="hidden" name="id" id="type_game_id">
            <div class="mb-3">
              <label>Type</label>
              <input type="text" name="type" class="form-control" id="type_game_type" required>
            </div>
            <div class="mb-3">
              <label>Status</label>
              <select name="status" class="form-control" id="type_game_status">
                <option value="1">Active</option>
                <option value="0">Inactive</option>
              </select>
            </div>
            <div class="mb-3">
              <label>Description</label>
              <textarea name="description" class="form-control" id="type_game_desc"></textarea>
            </div>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Save</button>
          </div>
        </div>
    </form>
  </div>
</div>
@endsection

@push('scripts')
<script>
$(function(){
    let table = $('#typegames-table').DataTable({
        processing:true,
        serverSide:true,
        ajax: "{{ route('admin.type_games.index') }}",
        columns:[
            {data:'id'},
            {data:'type'},
            {data:'status_text', orderable:false},
            {data:'description'},
            {data:'action', orderable:false, searchable:false}
        ]
    });

    let modal = new bootstrap.Modal(document.getElementById('typeGameModal'));

    $('#addTypeGame').on('click', function(){
        modal.show();
        $('#typeGameForm')[0].reset();
        $('#type_game_id').val('');
    });

    $('#typegames-table').on('click','.edit', function(){
        let id = $(this).data('id');
        $.get("{{ url('admin/type_games') }}/"+id, function(res){
            $('#type_game_id').val(res.id);
            $('#type_game_type').val(res.type);
            $('#type_game_status').val(res.status);
            $('#type_game_desc').val(res.description);
            modal.show();
        });
    });

    $('#typeGameForm').on('submit', function(e){
        e.preventDefault();
        $.ajax({
            url: "{{ route('admin.type_games.store') }}",
            method: "POST",
            data: $(this).serialize(),
            success: function(){
                modal.hide();
                table.ajax.reload();
            }
        })
    });

    $('#typegames-table').on('click','.delete', function(){
        let id = $(this).data('id');
        if(confirm("Delete this type game?")){
            $.ajax({
                url: "{{ url('admin/type_games') }}/"+id,
                method: "DELETE",
                data: {_token:"{{ csrf_token() }}"},
                success: function(){ table.ajax.reload(); }
            })
        }
    });
})
</script>
@endpush