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

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

  <div class="header-action">
    <nav class="nav">
      <a class="nav-link" 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') }}">
        Expense Main Categories
      </a>
      <a class="nav-link active" href="{{ route('expense-sub-category.index') }}">
        Expense Sub Categories
      </a>
    </nav>
  </div>
</header>
@endsection

@section('content')
<div class="col-12">
  <div class="card">
    @isset($expenseSubCategory)
    <h4 class="card-title">Update Expense Sub Category</h4>
    @else
    <h4 class="card-title">New Expense Sub Category</h4>
    @endisset
    <div class="card-body">
      <form
        action="@isset($expenseSubCategory) {{ route('expense-sub-category.update', $expenseSubCategory->id) }} @else {{ route('expense-sub-category.store') }} @endisset"
        method="POST">
        @csrf
        @isset($expenseSubCategory)
        @method('PUT')
        @endisset
        <div class="form-row">
          <div class="form-group col-md-4 mt-4">
            <input type="text" name="name" placeholder="Enter Expense Sub Category"
              class="form-control {{ $errors->has('name') ? 'is-invalid': '' }}" @isset($expenseSubCategory)
              value="{{ $expenseSubCategory->name }}" @endisset>
            @if($errors->has('name'))
            <span class="invalid-feedback">{{ $errors->first('name') }}</span>
            @endif
          </div>
          <div class="form-group col-md-4 mt-4">
            <select name="category_id" id="" class="form-control {{ $errors->has('category_id') ? 'is-invalid': '' }}">
              <option value="">Select Main Category</option>
              @foreach ($expense_categories as $item)
              <option @isset($expenseSubCategory) {{ $expenseSubCategory->category_id == $item->id ? 'selected' : '' }}
                @endisset
                {{ old('category_id') == $item->id ? 'selected' : '' }}
                value="{{ $item->id }}">{{ $item->name }}</option>
              @endforeach
            </select>
            @if($errors->has('category_id'))
            <span class="invalid-feedback">{{ $errors->first('category_id') }}</span>
            @endif
          </div>

          <div class="form-group col-md-4">
            <button type="submit" class="btn btn-primary mt-4">
              @isset($expenseSubCategory)
              <i class="fa fa-refresh"></i>
              Update
              @else
              <i class="fa fa-save"></i>
              Save
              @endisset

            </button>
          </div>
        </div>
        <hr style="margin:0px">
      </form>
    </div>
  </div>
</div>
<div class="col-12">
  <div class="card">
    <form action="#">
      <div class="row">
        <div class="col-6">
          <h4 class="card-title"><strong>Expense Sub Category</strong></h4>
        </div>
        <div class="col-4 mt-2">
          <select name="category_id" id="name" class="form-control" data-provide="selectpicker" data-live-search="true"
            data-size="10">
            <option value="">Select Main Category</option>
            @foreach (\App\ExpenseCategory::all() as $item)
            <option value="{{ $item->id }}" {{ request()->category_id == $item->id ? 'selected' : '' }}>
              {{ $item->name }}</option>
            @endforeach
          </select>
        </div>
        <div class="col-2 mt-2">
          <button class="btn btn-primary" type="submit">
            <i class="fa fa-sliders"></i>
            Filter
          </button>
          <a href="{{ route('expense-sub-category.index') }}" class="btn btn-info">Reset</a>
        </div>
      </div>
    </form>
    <div class="card-body card-body-soft">
      @if($expenseSubCategories->count() > 0)
      <div class="table-responsive table-bordered">
        <table class="table table-soft">
          <thead>
            <tr class="bg-primary">
              <th style="width:10%;">#</th>
              <th>Sub Category</th>
              <th>Main Category</th>
              @can('lock_permission')
              <th>Status</th>
              @endcan
              @canany(['edit-expense_sub_category', 'delete-expense_sub_category'])
              <th style="width:20%;">Actions</th>
              @endcanany
            </tr>
          </thead>
          <tbody>
            @foreach($expenseSubCategories as $key => $item)
            <tr>
              <th scope="row">{{ ++$key }}</th>
              <td>{{ $item->name }}</td>
              <td>{{ $item->category->name }}</td>
              @can('lock_permission')
              <td>
                <span class="status-toggle" data-id="{{ $item->id }}" data-status="{{ $item->status }}">
                  <button class="btn btn-sm {{ $item->status == '1' ? 'btn-success' : 'btn-danger' }} toggle-status">
                    {{ $item->status == '1' ? 'Unlocked' : 'Locked' }}
                  </button>
                </span>
              </td>
              @endcan
              @canany(['edit-expense_sub_category', 'delete-expense_sub_category'])
              <td>
                @can('edit-expense_sub_category')
                <a href="{{ route('expense-sub-category.edit', $item->id) }}" class="btn btn-primary btn-sm">
                  <i class="fa fa-edit"></i>
                  Edit
                </a>
                @endcan
                @can('delete-expense_sub_category')
                <a href="{{ route('expense-sub-category.destroy',$item->id) }}" onclick=""
                  class="btn btn-danger btn-sm delete">
                  <i class="fa fa-trash"></i> Delete
                </a>
                @endcan
              </td>
              @endcanany
            </tr>
            @endforeach

          </tbody>
        </table>
        {{-- {{ $expenseSubCategories->links() }} --}}
      </div>
      @else
      <div class="alert alert-danger text-center" role="alert">
        <strong>You have no Expense Sub Category </strong>
      </div>
      @endif
    </div>
  </div>
</div>

@endsection

@section('styles')

@endsection

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

<script>
  $('.toggle-status').on('click', function () {
        var button = $(this);
        var id = button.closest('.status-toggle').data('id');
        var currentStatus = button.closest('.status-toggle').data('status');
        $.ajax({
            type: 'POST',
            url: '{{ route('expense-sub-category.toggleStatus') }}',
            data: {
                '_token': '{{ csrf_token() }}',
                'id': id,
                'status': currentStatus == 1 ? 0 : 1
            },
            success: function (data) {
                var newStatus = data.status;
                var buttonText = newStatus == 1 ? 'Unlocked' : 'Locked';
                var buttonClass = newStatus == 1 ? 'btn-success' : 'btn-danger';
                button.text(buttonText).removeClass('btn-success btn-danger').addClass(buttonClass);
                button.closest('.status-toggle').data('status', newStatus);
                toastr.success('Coupon status updated successfully.');
            }
        });
    });
</script>
@endsection