@extends('admin.layouts.master')
@section('main_content')

    <div class="dashboard-main-body">
    <div class="dashboard-main-bodydashboard-main-body">
    <div class="card basic-data-table">
      <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-3">
        <h5 class="card-title mb-0">Product</h5>
        <div class="d-flex flex-wrap align-items-center gap-3">
          <div class="d-flex align-items-center gap-2">
          </div>
        </div>
        <!-- Button -->
        <div class="d-flex flex-wrap align-items-center gap-3">
        <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addProductModal">
            <i class="ri-add-line"></i> Add Product
        </button>
        </div>
      </div>
      <div class="card-body">
        <table class="table table-sm striped-table mb-0" id="dataTable" data-page-length='10'>
        <thead>
            <tr>
            <th scope="col">
                <div class="form-check style-check d-flex align-items-center">
                <input class="form-check-input" type="checkbox">
                <label class="form-check-label">S.L</label>
                </div>
            </th>
            <th scope="col">Product Id</th>
            <th scope="col">Name</th>
            <th scope="col">Cost/kg</th>
            <th scope="col">Status</th>
            <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
            <td>
                <div class="form-check style-check d-flex align-items-center">
                <input class="form-check-input" type="checkbox">
                <label class="form-check-label">01</label>
                </div>
            </td>
            <td><a href="" class="text-primary-600">426534</a></td>
            <td>
                <div class="d-flex align-items-center">
                <p class="text-md mb-0 fw-medium flex-grow-1">Kathryn Murphy</h6>
                </div>
            </td>
            <td>$200.00</td>
            <td>
                <div class="form-switch switch-primary d-flex align-items-center gap-3">
                <input class="form-check-input" type="checkbox" role="switch" id="switch1" checked>
                <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch1">Active</label>
                </div>
            <td>
                <a href="javascript:void(0)" class="w-32-px h-32-px bg-primary-light text-primary-600 rounded-circle d-inline-flex align-items-center justify-content-center">
                <iconify-icon icon="iconamoon:eye-light"></iconify-icon>
                </a>
                <a href="javascript:void(0)" class="w-32-px h-32-px bg-success-focus text-success-main rounded-circle d-inline-flex align-items-center justify-content-center">
                <iconify-icon icon="lucide:edit"></iconify-icon>
                </a>
                <a href="javascript:void(0)" class="w-32-px h-32-px bg-danger-focus text-danger-main rounded-circle d-inline-flex align-items-center justify-content-center">
                <iconify-icon icon="mingcute:delete-2-line"></iconify-icon>
                </a>
            </td>
            </tr>
            
        </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- Modal -->
<div class="modal fade" id="addProductModal" tabindex="-1" aria-labelledby="addProductModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg custom-modal-width">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title" id="addProductModalLabel">Add Product</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <form class="needs-validation" novalidate>
        <div class="modal-body">
          <div class="row g-3">
            <!-- Field 1 -->
            <div class="col-md-4">
              <div class="icon-field has-validation">
                <span class="icon">
                  <iconify-icon icon="f7:person"></iconify-icon>
                </span>
                <input type="text" name="material_name" class="form-control" placeholder="Material Name" required>
                <div class="invalid-feedback">Please provide material name</div>
              </div>
            </div>

            <!-- Field 2 -->
            <div class="col-md-3">
              <div class="icon-field has-validation">
                <select class="form-select form-select-sm" required>
                  <option value="">Select Category</option>
                  <option>Compound</option>
                  <option>Material</option>
                </select>
                <div class="invalid-feedback">Please select category</div>
              </div>
            </div>

            <!-- Field 3 -->
            <div class="col-md-3">
              <div class="icon-field has-validation">
                <select class="form-select form-select-sm" required>
                  <option value="">Select Family</option>
                  <option>Soap</option>
                  <option>Perfume</option>
                  <option>Shampoo</option>
                </select>
                <div class="invalid-feedback">Please select family</div>
              </div>
            </div>

            <!-- Field 4 -->
            <div class="col-md-2">
              <div class="icon-field has-validation">
                <span class="icon">
                 <iconify-icon icon="fa6-solid:dollar-sign"></iconify-icon>
                </span>
                <input type="number" name="material_name" class="form-control" placeholder="cost" required>
                <div class="invalid-feedback">Please provide material cost</div>
              </div>
            </div>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-sm btn-danger" data-bs-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-sm btn-primary">Save changes</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection