@extends('admin.layouts.main')
@php
  $page_name = 'Size';
@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="size_form" method="POST" action="{{ route('admin.savesize') }}">
          @csrf
          @if ($edit)
            <input type="hidden" value="{{ enc($size['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="size">Size name</label>
                <input type="text" value="{{ $size['name'] ?? '' }}" name="size" id="size" placeholder="Size" 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 size..."
                value="{{ request()->query('query') }}">
              <button class="btn btn-primary" type="submit">Search</button>
            </div>
          </form>
        </div>
        <div class="table-responsive" id="category_table">
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>#</th>
                <th>Size Name</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($sizes as $key => $size)
                <tr>
                  <td>{{ $key + 1 }}</td>
                  <td>{{ $size->name }}</td>
                  <td>
                    <a href="{{ route('admin.editsize', enc($size->id)) }}" class="btn btn-sm btn-warning">Edit</a>
                    <button id="delete_button" value="{{ enc($size->id) }}" type="buttom" class="btn btn-sm btn-danger"
                        >Delete</button>
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
          @if (count($sizes) > 0)
            <div class="mt-3">
              {{ $sizes->links() }}
            </div>
          @endif
        </div>

      </div>
    </div>
  </div>

  @include('components.alertmodal', [
      'modal_id' => 'deleteSizeModal',
      'form_id' => 'deleteSizeForm',
      'action' => route('admin.deletesize'),
      'modal_title' => 'Alert!',
      'input_id' => 'deleteSizeId',
      'modal_mess' => 'Are you sure you want to delete this Size?',
      'button_type' => 'submit',
      'button_id' => 'confirmDeleteSizeButton',
  ])
@endsection

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