@extends('admin.layouts.app')

@section('title', 'Expenses Category')

@section('content')
<h4 class="font-weight-bold py-3 mb-0">List Of Expenses Category
  <span style="float: right;">
    <button type="button" class="btn btn-secondary btn-round" data-toggle="modal" data-target="#modals-default" id="add_button"><i class="ion ion-md-add mr-2"></i> Add More</button>
  </span>
</h4><br>

<div class="modal fade insert_frm" id="modals-default">
<div class="modal-dialog">
<form class="modal-content" id="validation-form" method="post" action="{{ route('admin.expenses.categories.store') }}" autocomplete="off">
@csrf
<input type="hidden" name="_method" id="form_method" value="POST">
<div class="modal-header">
<h5 class="modal-title">Add <span class="font-weight-light">Expenses Category</span></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
</div>
<div class="modal-body">
  <input type="hidden" name="id" id="id" />
  <div class="form-row">
<div class="form-group col">
<label class="form-label">Expenses Category Name <span class="text-danger">*</span></label>
<input type="text" name="Name" class="form-control" id="Name" placeholder="Expenses Category Name" required>
</div>
</div>
<div class="form-row">
<div class="form-group col">
<label class="form-label">Status <span class="text-danger">*</span></label>
  <select class="form-control" id="Status" name="Status" required>
<option value="1" selected>Active</option>
<option value="0">Inctive</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-danger" id="submit" name="submit">Submit</button>
</div>
</form>
</div>
</div>

<div class="card">
<div class="card-datatable">
<table id="example" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Catgory Name</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach ($categories as $index => $category)
<tr>
<td>{{ $index + 1 }}</td>
<td>{{ $category->Name }}</td>
<td>
@if ((int) $category->Status === 1)
<span style="color:green;">Active</span>
@else
<span style="color:red;">Inactive</span>
@endif
</td>
<td>
<a href="javascript:void(0);" class="update" data-id="{{ $category->id }}" data-name="{{ $category->Name }}" data-status="{{ $category->Status }}" data-url="{{ route('admin.expenses.categories.update', $category) }}"><i class="lnr lnr-pencil mr-2"></i></a>
<form method="POST" action="{{ route('admin.expenses.categories.destroy', $category) }}" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this category?');">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-link p-0 align-baseline"><i class="lnr lnr-trash text-danger"></i></button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
  $('#example').DataTable();

  $('#add_button').click(function(){
    $('.modal-title').html("Add <span class='font-weight-light'>Expenses Category</span>");
    $('#validation-form').attr('action', "{{ route('admin.expenses.categories.store') }}");
    $('#form_method').val('POST');
    $('#id').val('');
    $('#Name').val('');
    $('#Status').val('1');
  });

  $(document).on('click', '.update', function(){
    $('.modal-title').html("Edit <span class='font-weight-light'>Expenses Category</span>");
    $('#validation-form').attr('action', $(this).data('url'));
    $('#form_method').val('PUT');
    $('#id').val($(this).data('id'));
    $('#Name').val($(this).data('name'));
    $('#Status').val($(this).data('status'));
    $('#modals-default').modal('show');
  });
});
</script>
@endpush