@extends('admin.layouts.dashboard')
@section('title', 'All Items')
@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 mt-3 mb-3">
            <h3 class="mb-2 main-heading">Dresses</h3>
        </div>
    </div>
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-6 form-group my-3">
                <label for="status">Filter by Status:</label>
                <select class="form-control" id="status" onchange="updateSearch()">
                    <option value="1">Active Products</option>
                    <option value="0">Inactive Products</option>
                </select>
            </div>
            <div class="col-md-6 form-group my-3 d-none">
                <label for="productType">Product Type:</label>
                <select class="form-control" id="productType" >
                    <option value="sale">Sale Products</option>
                    <option value="rental">Rental Products</option>
                </select>
            </div>
    </div>
            <!-- <div class="form-group my-3">
                    <label for="searchTypeFilter">Search By:</label>
                    <select class="form-control" id="searchTypeFilter" onchange="updateSearchType()">
                        <option value="product">Product Name</option>
                        <option value="bar_code">Bar Code</option>
                    </select>
                </div> -->
            <div class="col-md-12">
                <div class="row mb-4">
                   
                        <input type="text" class="form-control" id="search" placeholder="Search...">
                  
            </div>
              @if (session('success'))
              <div class="alert alert-success">
                  {{ session('success') }}
              </div>
              @endif

              @if (session('error'))
              <div class="alert alert-danger">
                  {{ session('error') }}
              </div>
              @endif
         </div>
      </div>


            <div class="row mb-4" id="ajaxSearchData">
                <div class="col-lg-12">
                    <div class="table-responsive rounded-4 bg-white p-4">
                        <table class="table table-head-fixed text-nowrap" id="example">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Code</th>
                                    <th>Category</th>
                                    <!-- <th>SubCategory</th> -->
                                    <!-- <th>Price</th> -->
                                    <!-- <th>Stock</th> -->
                                    <th>Views</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if($items->count() > 0)
                                @foreach($items as $key => $item)
                                <tr>
                                    <td>{{ $items->firstItem() + $key }}</td>
                                    <td>
                                        <p class="hid-text text-desk mb-1"><a
                                                style="text-decoration: underline!important; color:#000;"
                                                title="{{ $item->name }}"
                                                href="{{ route('admin.items.edit', $item->id) }}">{{ substr($item->name,0, 10) }}...</a>
                                        </p>
                                    </td>
                                    <td>{{ $item->code }}</td>
                                    <td>{{ optional($item->category)->name }}</td>
                                    {{-- <td>{{ empty($item->subcategory->name)? "" : $item->subcategory->name }}</td>
                                    --}}
                                    <!-- <td>Rs.{{ $item->price }}</td> -->
                                    {{-- <td class="text-center {{ $item->max_purchase_qty == 0 ? 'text-danger' : '' }}">
                                        {{ $item->max_purchase_qty == 0 ? 'Out of Stock' : $item->max_purchase_qty }}
                                    </td> --}}
                                    <td>{{ $item->views }}</td>
                                    <td>@if($item->is_active)
                                        @php $statusBtn = '<a title="Deactivate"
                                            href="'. route('change_status', ['type' => 'item', 'id' => $item->id, 'status' => '0']) .'"
                                            class="btn btn-danger btn-sm"><i class="fa fa-user-times"
                                                aria-hidden="true"></i></a>' @endphp
                                        Active
                                        @else
                                        @php $statusBtn = '<a title="Activate"
                                            href="'. route('change_status', ['type' => 'item', 'id' => $item->id, 'status' => '1']) .'"
                                            class="btn btn-success btn-sm"><i class="fa fa-user-plus"
                                                aria-hidden="true"></i></a>' @endphp
                                        Deactive
                                        @endif</td>
                                    <td>
                                        {!! $statusBtn !!}
                                        <a style="text-decoration: underline;"
                                            href="{{ route('admin.items.edit', $item->id) }}"><span
                                                class="btn btn-warning"><i class="fa fa-pencil-alt"
                                                    aria-hidden="true"></i></span></a>
                                        <!-- <button class="btn btn-warning" ><i class="fa fa-plus" aria-hidden="true"></i></button> -->
                                        <form action="{{ route('admin.items.destroy', $item->id) }}" method="POST"
                                            style="display:inline-block;">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-danger btn-sm"
                                                onclick="return confirm('Are you sure you want to delete this item?');">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                                @endforeach
                                <tr>
                                    <td colspan="11">
                                    {{ $items->appends(request()->query())->links() }}
                                    </td>
                                </tr>
                                @else
                                <tr>
                                    <td colspan="5">No Data</td>
                                </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        @endsection

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="{{asset('vroom/assets/js/plugins/jquery.validate.min.js')}}"></script>
        <!-- form-picker-custom Js -->
        <script src="{{asset('vroom/assets/js/pages/form-validation.js')}}"></script>


        <script>
//       $(document).ready(function() {
//     // Set default values for filters if they are not already set
//     var status = $('#status').val();
//     var productType = $('#productType').val();
//     var searchValue = $('#search').val();

//     // Call searchData on page load with default values
//     searchData(status, productType, searchValue);

//     // Trigger searchData when a filter option or search input is changed
//     $('#status, #productType, #search').on('change input', function() {
//         var searchValue = $('#search').val();
//         var status = $('#status').val();
//         var productType = $('#productType').val();
//         searchData(status, productType, searchValue);
//     });
// });

// function searchData(status, productType, searchValue) {
//     // Perform the AJAX request
//     $.ajax({
//         type: 'POST',
//         url: '{{ url('admin/item/search-product') }}',
//         data: {
//             search: searchValue,
//             status: status,
//             product_type: productType,
//             _token: $('meta[name="csrf-token"]').attr('content')  // CSRF token for security
//         },
//         success: function(data) {
//             $('#ajaxSearchData').html(data);  // Update the results container
//         },
//         error: function(error) {
//             console.log('Error:', error.responseJSON);
//             alert('Error: ' + (error.responseJSON?.message || 'Something went wrong.'));
//         }
//     });
// }
$(document).ready(function() {
    // Set default values for filters if they are not already set
    var status = $('#status').val();
    var productType = $('#productType').val();
    var searchValue = $('#search').val();

    // Call searchData on page load with default values
    searchData(status, productType, searchValue);

    // Trigger searchData when a filter option or search input is changed
    $('#status, #productType, #search').on('change input', function() {
        var searchValue = $('#search').val();
        var status = $('#status').val();
        var productType = $('#productType').val();
        searchData(status, productType, searchValue);
    });

    // Listen for pagination links and fetch data accordingly
    $(document).on('click', '.pagination a', function(event) {
        event.preventDefault();  // Prevent the default link behavior

        var page = $(this).attr('href').split('page=')[1];
        var status = $('#status').val();
        var productType = $('#productType').val();
        var searchValue = $('#search').val();

        // Send request with the correct page number
        searchData(status, productType, searchValue, page);
    });
});

function searchData(status, productType, searchValue, page = 1) {
    $.ajax({
        type: 'POST',
        url: '{{ url('admin/item/search-product') }}',
        data: {
            search: searchValue,
            status: status,
            product_type: productType,
            page: page, // Include page number in the request
            _token: $('meta[name="csrf-token"]').attr('content')  // CSRF token for security
        },
        success: function(data) {
            $('#ajaxSearchData').html(data);  // Update the results container
        },
        error: function(error) {
            console.log('Error:', error.responseJSON);
            alert('Error: ' + (error.responseJSON?.message || 'Something went wrong.'));
        }
    });
}



        // var status=1;

        //  $(document).ready(function(){

        // $('#ajaxSearchItem').show();
        // $('#ajaxSearchBarCode').hide();

        // $('#ajaxSearchItem').keyup(function(){
        //     var value = $(this).val();

        //     $.ajax({
        //       type:'GET',
        //       url:'{{ url("admin/item/search-product") }}',
        //       data:{
        //         search:value,
        //         status:status
        //       },
        //       success:function(data) {
        //           $('#ajaxSearchData').html(data);
        //       },
        //       error:function(error){
        //         alert('error: ', error);
        //       }
        //     });

        //   }); 

        //   $('#ajaxSearchBarCode').keyup(function(){
        //     var value = $(this).val();

        //     $.ajax({
        //       type:'GET',
        //       url:'{{ url("admin/item/search-code") }}',
        //       data:{
        //         search:value,
        //         status:status
        //       },
        //       success:function(data) {
        //           $('#ajaxSearchData').html(data);
        //       },
        //       error:function(error){
        //         alert('error: ', error);
        //       }
        //     });

        //   })
        // });


        // function radio_check() {
        //   var value = '';

        //   if ($('#product_active').prop('checked')) {
        //       $('#ajaxSearchItem').show();
        //       $('#ajaxSearchBarCode').hide();
        //       // $('#ajaxSearchItem').val('');

        //         $.ajax({
        //           type:'GET',
        //           url:'{{ url("admin/item/search-product-active") }}',
        //           data:{
        //             page:1
        //           },
        //           success:function(data) {
        //               $('#ajaxSearchData').html(data);
        //           },
        //           error:function(error){
        //             alert('error: ', error);
        //           }
        //         });

        //         status=1;
        //   }else if ($('#product_inactive').prop('checked')) {
        //       $('#ajaxSearchItem').show();
        //       $('#ajaxSearchBarCode').hide();
        //       // $('#ajaxSearchItem').val('');

        //         $.ajax({
        //           type:'GET',
        //           url:'{{ url("admin/item/search-product-inactive") }}',
        //           data:{
        //             page:1
        //           },
        //           success:function(data) {
        //               $('#ajaxSearchData').html(data);
        //           },
        //           error:function(error){
        //             alert('error: ', error);
        //           }
        //         });
        //         status=0;
        //   }

        // }

        // function radio_check1() {
        //   var value = '';

        //   if ($('#product').prop('checked')) {
        //     $('#ajaxSearchItem').show();
        //     // $('#ajaxSearchBarCode').val('');

        //     $.ajax({
        //           type:'GET',
        //           url:'{{ url("admin/item/search-product") }}',
        //           data:{
        //             search:value,
        //             status:status
        //           },
        //           success:function(data) {
        //               $('#ajaxSearchData').html(data);
        //           },
        //           error:function(error){
        //             alert('error: ', error);
        //           }
        //         });
        //     $('#ajaxSearchBarCode').hide();

        //   } else if ($('#bar_code').prop('checked')) {
        //       $('#ajaxSearchItem').hide();

        //       // $('#ajaxSearchItem').val('');

        //         $.ajax({
        //           type:'GET',
        //           url:'{{ url("admin/item/search-code") }}',
        //           data:{
        //             search:value,
        //             status:status
        //           },
        //           success:function(data) {
        //               $('#ajaxSearchData').html(data);
        //           },
        //           error:function(error){
        //             alert('error: ', error);
        //           }
        //         });
        //       $('#ajaxSearchBarCode').show();
        //   }

        // }
        // function radio_check2() {
        //   var value = '';

        //   if ($('#sale').prop('checked')) {
        //       $('#ajaxSearchItem').show();
        //       $('#ajaxSearchBarCode').hide();
        //       // $('#ajaxSearchItem').val('');

        //         $.ajax({
        //           type:'GET',
        //           url:'{{ url("admin/item/search-product-sale") }}',
        //           data:{
        //             search:value,
        //             status:status
        //           },
        //           success:function(data) {
        //               $('#ajaxSearchData').html(data);
        //           },
        //           error:function(error){
        //             alert('error: ', error);
        //           }
        //         });


        //   }else if ($('#rental').prop('checked')) {

        //       $('#ajaxSearchItem').show();
        //       $('#ajaxSearchBarCode').hide();
        //       // $('#ajaxSearchItem').val('');

        //         $.ajax({
        //           type:'GET',
        //           url:'{{ url("admin/item/search-product-rent") }}',
        //           data:{
        //             search:value,
        //             status:status
        //           },
        //           success:function(data) {
        //               $('#ajaxSearchData').html(data);
        //           },
        //           error:function(error){
        //             alert('error: ', error);
        //           }
        //         });

        //   }

        // }
        </script>