@extends('admin.layout.template')
@section('title', 'Products')
@section('content')

<div class="page-content">
  <div class="container-xxl">

    <!-- Add Product Card -->
    <div class="row">
      <div class="col-lg-12">
        <div class="card d-flex">
          <div class="card-header d-flex justify-content-between align-items-center gap-1">
            <h4 class="card-title flex-grow-1">
              <iconify-icon icon="solar:box-bold-duotone" class="text-primary fs-20"></iconify-icon>
              All Product List
            </h4>

            <a href="{{route('add-product')}}" class="btn btn-sm btn-primary">
              Add Product
            </a>


          </div>

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


    <!-- Product Table -->
    <div class="row mt-3">
      <div class="col-xl-12">
        <div class="card">
          <div class="card-body p-0">
          <!-- filter section sstart -->
<div class="row mt-3">
  <div class="col-xl-12">
    <div class="card shadow-sm">

      <!-- FILTER HEADER -->
      <div class="card-header bg-light">
        <h5 class="mb-0 fw-semibold">
          <i class="bi bi-funnel me-2"></i> Product Filters
        </h5>
      </div>

      <div class="card-body">

        <!-- FILTER SECTION -->
        <div class="row g-3">

          <!-- ROW 1 -->
          <div class="col-md-3">
            <label class="form-label fw-semibold">Category</label>
            <select id="filter_category" class="form-select">
              <option value="">All Categories</option>
              @foreach(App\Models\Category::all() as $cat)
              <option value="{{ $cat->id }}">{{ $cat->name }}</option>
              @endforeach
            </select>
          </div>

          <div class="col-md-3">
            <label class="form-label fw-semibold">Subcategory</label>
            <select id="filter_subcategory" class="form-select">
              <option value="">All Subcategories</option>
            </select>
          </div>

          <div class="col-md-3">
            <label class="form-label fw-semibold">Tag</label>
            <select id="filter_tag" class="form-select">
              <option value="">All Tags</option>
              @foreach(App\Models\Tags::all() as $tag)
              <option value="{{ $tag->id }}">{{ $tag->name }}</option>
              @endforeach
            </select>
          </div>

          <div class="col-md-3">
            <label class="form-label fw-semibold">Room</label>
            <select id="filter_room" class="form-select">
              <option value="">All Rooms</option>
              @foreach(App\Models\Room::all() as $room)
              <option value="{{ $room->id }}">{{ $room->name }}</option>
              @endforeach
            </select>
          </div>

          <!-- ROW 2 -->
          <div class="col-md-4">
            <label class="form-label fw-semibold">Catalog</label>
            <select id="filter_catalog" class="form-select">
              <option value="">All Catalogs</option>
              @foreach($catalogues as $catalogue)
              <option value="{{ $catalogue }}">{{ $catalogue }}</option>
              @endforeach
            </select>
          </div>

          <div class="col-md-4">
            <label class="form-label fw-semibold">Minimum Price</label>
            <input type="number" id="min_price" class="form-control" placeholder="Enter Min Price">
          </div>

          <div class="col-md-4">
            <label class="form-label fw-semibold">Maximum Price</label>
            <input type="number" id="max_price" class="form-control" placeholder="Enter Max Price">
          </div>

        </div>
        <!-- END FILTER SECTION -->

      </div>

    </div>
  </div>
</div>
  <!-- filter section end -->
            <div class="table-responsive">
              <table class="table align-middle mb-0 table-hover table-centered">
                <thead class="bg-light-subtle">
                  <tr>
                    <th>SL.NO</th>
                    <th>Product</th>
                    <th>Category</th>
                    <th>Subcategory</th>
                    <th>Master Catelog</th>
                    <th>Images</th>
                    <th>Price</th>
                    <th>Stock</th>
                    <th>Status</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>


<!-- ========================== JAVASCRIPT ========================== -->
<script>
  $(document).ready(function() {
    // Initialize DataTable
    var table = $('.table').DataTable({
      processing: true,
      serverSide: true,
      ajax: {
        url: "{{ route('get-products') }}",
        data: function(d) {
          d.category = $('#filter_category').val();
          d.subcategory = $('#filter_subcategory').val();
          d.tag = $('#filter_tag').val();
          d.room = $('#filter_room').val();
          d.min_price = $('#min_price').val();
          d.max_price = $('#max_price').val();
           d.catalog = $('#filter_catalog').val();
        }
      },
      // order: [
      //   [1, 'asc']
      // ],
      columns: [{
          data: 'DT_RowIndex',
          name: 'DT_RowIndex',
          orderable: false,
          searchable: false
        },
        {
          data: 'name',
          name: 'name'
        },
        {
          data: 'category',
          name: 'category'
        },
        {
          data: 'subcategory',
          name: 'subcategory'
        },
        {
          data: 'master_catalogue_name',
          name: 'master_catalogue_name'
        },
        {
          data: 'images',
          name: 'images',
          orderable: false,
          searchable: false
        },
        {
          data: 'price',
          name: 'price'
        },
        {
          data: 'stock',
          name: 'stock'
        },
        {
          data: 'status',
          name: 'status',
          orderable: false
        },
        {
          data: 'action',
          name: 'action',
          orderable: false,
          searchable: false
        }
      ]
    });

    $('#filter_category, #filter_subcategory, #filter_tag, #filter_room, #min_price, #max_price,#filter_catalog')
      .on('change keyup', function() {
        table.ajax.reload();
      });

    $('#filter_category').change(function() {
      var id = $(this).val();

      $.get("{{ url('get-subcategories') }}/" + id, function(data) {
        $('#filter_subcategory').html('<option value="">All Subcategories</option>');
        $.each(data, function(key, value) {
          $('#filter_subcategory').append('<option value="' + value.id + '">' + value.name + '</option>');
        });
      });
    });


    // Delete Product
    $(document).on('click', '.deleteProduct', function() {
      var id = $(this).data('id');
      Swal.fire({
        title: 'Are you sure? Do you want to Delete this Product?',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, delete',
        cancelButtonText: 'Cancel'
      }).then(result => {
        if (result.isConfirmed) {
          $.ajax({
            url: "{{ url('delete-product') }}/" + id,
            type: 'DELETE',
            data: {
              _token: '{{ csrf_token() }}'
            },
            success: function(res) {
              Swal.fire({
                icon: 'success',
                title: 'Deleted!',
                text: res.success,
                timer: 1500,
                showConfirmButton: false
              });
              table.ajax.reload();
            }
          });
        }
      });
    });


  });
</script>

@endsection