@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="addPlan">Add Package Plan</button>
            <div class="table-responsive">
                <table class="table table-bordered" id="plans-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Price</th>
                            <th>Periode Active</th>
                            <th>Type Game</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- modal -->
<div class="modal fade" id="planModal" tabindex="-1">
  <div class="modal-dialog">
    <form id="planForm">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Package Plan Form</h5>
          </div>
          <div class="modal-body">
            <input type="hidden" name="id" id="plan_id">
            <div class="mb-3">
              <label>Name</label>
              <input type="text" name="name" class="form-control" id="plan_name" required>
            </div>
            <div class="mb-3">
              <label>Description</label>
              <textarea name="description" class="form-control" id="plan_desc"></textarea>
            </div>
            <div class="mb-3">
              <label>Price</label>
              <input type="number" name="price" class="form-control" id="plan_price" required>
            </div>
            <div class="mb-3">
              <label>Periode Active (days)</label>
              <input type="number" name="periode_active" class="form-control" id="plan_periode" required>
            </div>
            <div class="mb-3">
              <label>Type Game</label>
              <select name="type_game_id" class="form-control" id="plan_type" required>
                  @foreach($type_games as $game)
                      <option value="{{ $game->id }}">{{ $game->type }}</option>
                  @endforeach
              </select>
            </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 = $('#plans-table').DataTable({
        processing:true,
        serverSide:true,
        ajax: "{{ route('admin.package-plans.index') }}",
        columns:[
            {data:'id'},
            {data:'name'},
            {data:'description'},
            {data:'price'},
            {data:'periode_active'},
            {data:'type_game_name'},
            {data:'action', orderable:false, searchable:false}
        ]
    });

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

    $('#addPlan').on('click', function(){
        $('#planForm')[0].reset();
        $('#plan_id').val('');
        planModal.show();
    });

    $('#plans-table').on('click','.edit', function(){
        let id = $(this).data('id');
        $.get("{{ url('admin/package-plans') }}/"+id, function(res){
            $('#plan_id').val(res.id);
            $('#plan_name').val(res.name);
            $('#plan_desc').val(res.description);
            $('#plan_price').val(res.price);
            $('#plan_periode').val(res.periode_active);
            $('#plan_type').val(res.type_game_id);
            planModal.show();
        })
    });

    $('#planForm').on('submit', function(e){
        e.preventDefault();
        $.ajax({
            url: "{{ route('admin.package-plans.store') }}",
            method: "POST",
            data: $(this).serialize(),
            success: function(){
                planModal.hide();
                table.ajax.reload();
            }
        })
    });

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