@extends('admin.layouts.main')
@php
  $page_name = 'Unit';
@endphp
@section('content')
  <div class="card">
    <div class="card-body">
      <h4 class="mb-4"> {{ $edit ? 'Edit' : 'Add' }} {{ $page_name }}</h4>
      <div class="mb-3">
        <form id="unit_form" method="POST" action="{{ route('admin.saveunit') }}">
          @csrf
          @if ($edit)
            <input type="hidden" value="{{ enc($unit['id'] ?? '') }}" name="edit_id" id="edit_id" required>
          @endif
          <div class="row m-0">
            <div class="col-md-6">
              <div class="mb-3">
                <label class="form-label" for="unit">Unit full name</label>
                <input type="text" value="{{ $unit['full_name'] ?? '' }}" name="full_name" placeholder="Unit Full Name"
                  id="unit_full_name" class="form-control" required>
              </div>
            </div>
            <div class="col-md-6">
              <div class="mb-3">
                <label class="form-label" for="unit">Unit name</label>
                <input type="text" value="{{ $unit['name'] ?? '' }}" name="name" id="unit_name"
                  placeholder="Unit Name" class="form-control" required>
              </div>
            </div>
            <div class="col-12">
              <button class="btn btn-sm btn-primary" type="submit">Submit</button>
            </div>
          </div>
        </form>
      </div>
      <div class="mb-3">
        <h5>{{ $page_name }} List</h5>
        <div class="mb-3">
          <form method="GET" action="">
            <div class="input-group">
              <input type="text" name="query" class="form-control" placeholder="Search unit..."
                value="{{ request()->query('query') }}">
              <button class="btn btn-primary" type="submit">Search</button>
            </div>
          </form>
        </div>
        <div class="table-responsive" id="unit_table">
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>#</th>
                <th>Unit Full Name</th>
                <th>Unit Name</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($units as $key => $unit)
                <tr>
                  <td>{{ $key + 1 }}</td>
                  <td>{{ $unit->full_name }}</td>
                  <td>{{ $unit->name }}</td>
                  <td>
                    <a href="{{ route('admin.editunit', enc($unit->id)) }}" class="btn btn-sm btn-warning">Edit</a>
                    <button id="delete_button" value="{{ enc($unit->id) }}" type="button" class="btn btn-sm btn-danger">
                      Delete
                    </button>
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
          @if (count($units) > 0)
            <div class="mt-3">
              {{ $units->links() }}
            </div>
          @else
          <div> 
            <h4>Data not found!</h4>
          </div>
          @endif
          
        </div>
      </div>
    </div>
  </div>
  @include('components.alertmodal', [
      'modal_id' => 'deleteUnitModal',
      'form_id' => 'deleteUnitForm',
      'action' => route('admin.deleteunit'),
      'modal_title' => 'Alert!',
      'input_id' => 'deleteUnitId',
      'modal_mess' => 'Are you sure you want to delete this Unit?',
      'button_type' => 'submit',
      'button_id' => 'confirmDeleteUnitButton',
  ])
@endsection

@section('script')
  <script>
    $(document).on("click", "#delete_button", function() {
      let val = $(this).attr("value");
      $("#deleteUnitId").val(val);
      $("#deleteUnitModal").modal("show");
    });
  </script>
@endsection