@extends('layouts.master')
@section('title', 'Expense List')

@section('page-header')
<header class="header bg-ui-general">
  <div class="header-info">
    <h1 class="header-title">
      <strong>Expense</strong>
    </h1>
  </div>

  <div class="header-action">
    <nav class="nav">
      <a class="nav-link active" href="{{ route('expense.index') }}">
        <i class="fa fa-list"></i>
        Expenses
      </a>
      <a class="nav-link" href="{{ route('expense.create') }}">
        <i class="fa fa-plus"></i>
        Add Expense
      </a>
      <a class="nav-link" href="{{ route('expense-category.index') }}">
        {{-- <i class="fa fa-plus"></i> --}}
        Expense Main Categories
      </a>
      <a class="nav-link" href="{{ route('expense-sub-category.index') }}">
        Expense Sub Categories
      </a>
    </nav>
  </div>
</header>
@endsection

@section('content')
<div class="col-12">
  <div class="card card-body mb-2">
    <form action="#">
      <div class="form-row">
        <div class="form-group col-md-2">
          <input type="text" data-provide="datepicker" data-date-today-highlight="true" data-orientation="bottom"
            data-date-format="yyyy-mm-dd" data-date-autoclose="true" class="form-control" name="start_date"
            placeholder="Start Date" autocomplete="off" value="{{ request('start_date') }}">
        </div>
        <div class="form-group col-md-2">
          <input type="text" data-provide="datepicker" data-date-today-highlight="true" data-orientation="bottom"
            data-date-format="yyyy-mm-dd" data-date-autoclose="true" class="form-control" name="end_date"
            placeholder="End Date" autocomplete="off" value="{{ request('end_date') }}">
        </div>
        <div class="form-group col-md-2">
          <select name="category" id="category" class="form-control" data-provide="selectpicker" data-live-search="true"
            data-size="10">
            <option value="">Select Main Category</option>
            @foreach ($expenseCategory as $item)
            <option value="{{ $item->id }}" {{ request()->category == $item->id ? 'selected' : '' }}>
              {{ $item->name }}</option>
            @endforeach
          </select>
        </div>
        <div class="form-group col-md-2">
          <select name="sub_category" id="subcategory" class="form-control">
            <option value="">Select Sub Category</option>
          </select>
        </div>
        <div class="form-group col-md-2">
          <select name="created_by" class="form-control" data-provide="selectpicker" data-live-search="true"
            data-size="10">
            <option value="">Select User</option>
            @foreach (\App\User::all() as $user)
            <option value="{{ $user->id }}" {{ request()->created_by == $user->id ? 'selected' : '' }}>
              {{ $user->fname }}</option>
            @endforeach
          </select>
        </div>

        <div class="form-group col-2">
          <button class="btn btn-primary" type="submit">
            <i class="fa fa-sliders"></i>
            Filter
          </button>
          <a href="{{ route('expense.index') }}" class="btn btn-info">Reset</a>
          <a href="" class="btn btn-primary" onclick="window.print()">Print</a>
        </div>
      </div>
    </form>
  </div>

  <div class="card print_area" style="width:100%;">
    <h4 class="card-title"><strong>Expense</strong></h4>
    <div class="card-body">
      @if($expenses->count() > 0)
      <div class="table-responsive">
        <table class="table  table-bordered" data-provide="datatables" data-page-length='100'>
          <thead>
            <tr class="bg-primary">
              <th>#</th>
              <th>Date</th>
              <th>Main Category</th>
              <th>Sub Category</th>
              <th>Note</th>
              <th>Payment Type</th>
              <th>Amount</th>
              <th>Creator</th>
              @canany(['edit-expense', 'delete-expense'])
              <th class="print_hidden">Actions</th>
              @endcanany
            </tr>
          </thead>
          <tbody>
            @foreach($expenses as $key => $item)
            <tr>
              <td>{{ (isset($_GET['page']))? ($_GET['page']-1)*20+$key+1 : $key+1 }}</td>
              <td>
                {{ date('d-m-Y', strtotime($item->expense_date)) }}
              </td>
              <td>
                {{ $item->category ? $item->category->name : '' }}
              </td>
              <td>{{ $item->sub_category ? $item->sub_category->name : '' }}</td>
              <td>
                {!! $item->note !!}
              </td>
              <td>
                {{ $item->bank->name?? '' }}
              </td>
              <td>
                {{ number_format($item->amount) }} Tk
              </td>
              <td>{{$item->user->name()??''}}</td>
              @canany(['edit-expense', 'delete-expense'])
              <td class="print_hidden">
                @can('edit-expense')
                <a href="{{ route('expense.edit', $item->id) }}" class="btn btn-primary btn-sm">
                  <i class="fa fa-edit"></i>
                  Edit
                </a>
                @endcan
                @can('delete-expense')
                <a href="{{ route('expense.destroy',$item->id) }}" class="btn btn-danger btn-sm delete">
                  <i class="fa fa-trash"></i>Delete
                </a>
                @endcan
              </td>
              @endcanany
            </tr>
            @endforeach
          </tbody>
          <tfoot>
            <tr>
              <td colspan="6"></td>
              <td>
                <strong>
                  Total : {{ number_format($expenses->sum('amount')) }} Tk
                </strong>
              </td>
              <td colspan="2"></td>
            </tr>
          </tfoot>
        </table>
        {{-- {!! $expenses->appends(Request::except("_token"))->links() !!} --}}
      </div>
      @else
      <div class="alert alert-danger text-center" role="alert">
        <strong>You have no Expenses. </strong>
      </div>
      @endif
    </div>
  </div>
</div>

@endsection

@section('styles')

@endsection

@section('scripts')
@include('includes.delete-alert')

<script>
  $(document).ready(function () {
  $('#category').on('change', function () {
  let id = $(this).val();
  $('#subcategory').empty();
  $('#subcategory').append(`<option selected>Processing...</option>`);
  $.ajax({
  type: 'GET',
  url: '/back/expense/sub-categories/' + id,
  success: function (response) {
  var response = JSON.parse(response);
  console.log(response);
  $('#subcategory').empty();
  $('#subcategory').append(`<option value="" selected>Select Sub-Category</option>`);
  response.forEach(element => {
      $('#subcategory').append(`<option value="${element['id']}">${element['name']}</option>`);
      });
  }
  });
  });
});
</script>
@endsection