@extends("dashboard.layouts.app")

@section("title")
	{{__('messages.Items')}}
@endsection
@section("content")
 <div class="midde_cont">
    <div class="container-fluid">
     <div class="row column_title">
        <div class="col-md-12">
           <div class="page_title">
              <h2>{{__('messages.Items')}}</h2>
           </div>
        </div>
     </div>
    
     {{-- Add Modal --}}
<div class="modal fade" id="AddItemsModal" tabindex="-1" aria-labelledby="AddItemsModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="AddItemsModalLabel">{{__('messages.Add Item Data')}}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <ul id="save_msgList"></ul>

                <div class="form-group mb-3">
                    <label for=""> {{__('messages.Name')}}</label>
                    <input type="text" required class="name form-control">
                </div>
                <div class="form-group mb-3">
                    <label for="">{{__('messages.description')}}</label>
                    <input type="text" required class="description form-control">
                </div>
               <div class="form-group mb-3">
                    <label for="">{{__('messages.price')}}</label>
                    <input type="text" required class="price form-control">
                </div>
              <select id="category" class="category form-control">
              <option value="">{{__('messages.Select Category')}}</option>
             
              
              <!-- Add more options for other names as needed -->
            </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{__('messages.Close')}}</button>
                <button type="button" class="btn btn-primary add_item">{{__('messages.Save')}}</button>
            </div>

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


{{-- Edit Modal --}}
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">{{__('messages.Edit & Update Item Data')}}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">

                <ul id="update_msgList"></ul>

                <input type="hidden" id="item_id" />

                <div class="form-group mb-3">
                    <label for=""> {{__('messages.Name')}}</label>
                    <input type="text" id="name" required class="form-control">
                </div>
                <div class="form-group mb-3">
                    <label for="">{{__('messages.description')}}</label>
                    <input type="text" id="descriptionUbdate" required class="form-control">
                </div>
                     <div class="form-group mb-3">
                    <label for="">{{__('messages.Serial Number')}}</label>
                    <input type="text" id="priceUbdate" required class="form-control">
                </div>
                <div class="form-group mb-3">
                    
                </div>
                <label for="">{{__('messages.category')}}</label>
               <select id="categoryUbdate" class="categoryUbdate form-control">
              <option value="">{{__('messages.Select Category')}}</option>
           
              
              <!-- Add more options for other names as needed -->
            </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{__('messages.Close')}}</button>
                <button type="submit" class="btn btn-primary update_item">{{__('messages.Update')}}</button>
            </div>

        </div>
    </div>
</div>
{{-- Edn- Edit Modal --}}


{{-- Delete Modal --}}
<div class="modal fade" id="DeleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">{{__('messages.Delete Item Data')}}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h4>{{__('messages.Confirm to Delete Data ?')}}</h4>
                <input type="hidden" id="deleteing_id">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{__('messages.Close')}}</button>
                <button type="button" class="btn btn-primary delete_Category">{{__('messages.Yes Delete')}}</button>
            </div>
        </div>
    </div>
</div>
{{-- End - Delete Modal --}}

<div class="container py-5">
    <div class="row">
        <div class="col-md-12">

            <div id="success_message"></div>

            <div class="card">
                <div class="card-header">
                    <h4>
                        {{__('messages.Item Data')}}
                        <button type="button" class="btn btn-primary float-end showcategory" data-bs-toggle="modal"
                            data-bs-target="#AddItemsModal">{{__('messages.Add Item')}}</button>
                    </h4>
                </div>
                <div class="card-body">
                    <table class="table table-striped table-bordered customwidthth" id="datatableitem">
                        <thead class="thead-dark">
                            <tr>
                                <th>{{__('messages.ID')}}</th>
                                <th>{{__('messages.Name')}}</th>
                                <th>{{__('messages.description')}}</th>
                                <th>{{__('messages.price')}}</th>
                               <th>{{__('messages.category')}}</th>
                                <th>{{__('messages.Action')}}</th>
                              
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


   
    </div> 
  </div>
@endsection
@section('scripts')

<script>
$(document).ready(function () {
	 $('#datatableitem').DataTable();
    fetchItems();
});
function fetchItems() {
    $.ajax({
        type: "GET",
        url: "{{ route('item.fetchItems') }}",
        dataType: "json",
        success: function (response) {
            console.log(response);

            // Assuming response[" items "] is an array of items
            var items = response[" items "];

            // Clear the DataTable before adding rows
            $('#datatableitem').DataTable().clear();

            // Loop through each item and add a row to the DataTable
            $.each(items, function (key, item) {
                // Check if item.item_category is not null or undefined before accessing name
                var categoryName = item.item_category ? item.item_category.name : 'N/A';

                // Add a row to the DataTable
                $('#datatableitem').DataTable().row.add([
                    item.id,
                    item.name,
                    item.description,
                    item.price,
                    categoryName, // Use the categoryName variable
                    '<td class="custom-row-class"><div class="row justify-content-center">' +
                    '<button type="button" value="' + item.id + '" class="btn btn-primary editbtn btn-sm mr-3 col-4 ">Edit</button>'+
                    '<button type="button" value="' + item.id + '" class="btn btn-danger deletebtn btn-sm col-4 ">Delete</button>'+
                    '</div> </td>'
                ]).draw(false); // Draw the added row without reloading the entire table
            });
        }
    });
}



    	$(document).on('click', '.showcategory', function (e) {
    	    e.preventDefault();
    	    fetchcategories();

    	    function fetchcategories() {
    	        $.ajax({
    	            type: "GET",
    	            url: "{{ route('ItemCategory.fetchcategories') }}",
    	            dataType: "json",
    	            success: function (response) {
    	                console.log(response);

    	                // Check if the 'ItemCategory' property exists in the response
    	                if (response.hasOwnProperty('ItemCategory')) {
    	                    // Populate the select element with categories
    	                    var select = $('#category');
    	                    select.find('option:not(:first)').remove(); // Remove previous options

    	                    // Loop through categories and append options
    	                    $.each(response.ItemCategory, function (key, category) {
    	                        select.append('<option value="' + category.id + '">' + category.name + '</option>');
    	                    });
    	                } else {
    	                    console.error('Invalid response format. Missing "ItemCategory" property.');
    	                }
    	            },
    	            error: function (error) {
    	                console.error('Error fetching categories:', error);
    	            }
    	        });
    	    }
    	});






    	$(document).on('click', '.add_item', function (e) {
    	    e.preventDefault();

    	    $(this).text('Sending..');

    	    var data = {
    	        '_token': $('meta[name="csrf-token"]').attr('content'),
    	        'name': $('.name').val(),
    	        'description': $('.description').val(),
    	        'price': $('.price').val(),
    	        'category': $('.category').val(),
    	    }

    	    $.ajaxSetup({
    	        headers: {
    	            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    	        }
    	    });

    	    $.ajax({
    	        type: "POST",
    	        url: "/admin/item",
    	        data: data,
    	        dataType: "json",
    	        success: function (response) {
    	            if (response.status == 400) {
    	                $('#save_msgList').html("");
    	                $('#save_msgList').addClass('alert alert-danger');
    	                $.each(response.errors, function (key, err_value) {
    	                    $('#save_msgList').append('<li>' + err_value + '</li>');
    	                });
    	                $('.add_item').text('Save');
    	            } else {
    	                $('#save_msgList').html("");
    	                $('#success_message').addClass('alert alert-success');
    	                $('#success_message').text(response.message);
    	                $('#AddItemsModal').find('input').val('');
    	                $('.add_item').text('Save');
    	                $('#AddItemsModal').modal('hide');
    	                fetchItems();
    	            }
    	        }
    	    });
    	});

    	$(document).on('click', '.editbtn', function (e) {
    	    e.preventDefault();
    	    var item_id = $(this).val();

    	    $('#editModal').modal('show');
    	    $.ajax({
    	        type: "GET",
    	        url: "/admin/edit-item/" + item_id,
    	        success: function (response) {
    	            if (response.status == 404) {
    	                $('#success_message').addClass('alert alert-success');
    	                $('#success_message').text(response.message);
    	                $('#editModal').modal('hide');
    	            } else {
    	                $('#name').val(response.item.name);
    	                $('#descriptionUbdate').val(response.item.description);
    	                $('#priceUbdate').val(response.item.price);

    	                // Fetch all categories
       	             // Fetch all categories
    	                $.ajax({
    	                    type: "GET",
    	                    url: "{{ route('ItemCategory.fetchcategories') }}",
    	                    success: function (categoriesResponse) {
    	                        // Populate the category dropdown
    	                        var categoryDropdown = $('#categoryUbdate');
    	                        categoryDropdown.empty(); // Clear previous options

    	                        $.each(categoriesResponse.ItemCategory, function (key, category) {
    	                            var selected = (category.id == response.item.item_category_id) ? 'selected' : '';
    	                            categoryDropdown.append('<option value="' + category.id + '" ' + selected + '>' + category.name + '</option>');
    	                        });
    	                    },
    	                    error: function (xhr, status, error) {
    	                        console.error(xhr.responseText);
    	                        // Handle error
    	                    },
    	                    complete: function () {
    	                        // This block will run after success or error
    	                        $('.update_item').text('Update');
    	                    }
    	                });


    	                $('#item_id').val(item_id);
    	            }
    	        }
    	    });
    	    $('.btn-close').find('input').val('');
    	});


        $(document).on('click', '.update_item', function (e) {
            e.preventDefault();

            $(this).text('Updating..');
            var id = $('#item_id').val();

            var data = {
                '_token': $('meta[name="csrf-token"]').attr('content'), 
                'name': $('#name').val(),
                'description': $('#descriptionUbdate').val(),
                'price': $('#priceUbdate').val(),
                'category': $('#categoryUbdate').val(),
            };

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type: "PUT",
                url: "/admin/update-item/" + id,
                data: data,
                dataType: "json",
                success: function (response) {
               	 $('#success_message').addClass('alert alert-success');
                 $('#success_message').text(response.message);
                 $('#editModal').modal('hide');
                 fetchItems();
                    
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                    // Handle error
                },
                complete: function () {
                    // This block will run after success or error
                    $('.update_item').text('Update');
                }
            });
        });


        $(document).on('click', '.deletebtn', function () {
            var item_id = $(this).val();
            $('#DeleteModal').modal('show');
            $('#deleteing_id').val(item_id);
        });

        $(document).on('click', '.delete_Category', function (e) {
            e.preventDefault();

            $(this).text('Deleting..');
            var id = $('#deleteing_id').val();

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type: "DELETE",
                url: "/admin/delete-item/" + id,
                dataType: "json",
                success: function (response) {
                    // console.log(response);
                    if (response.status == 404) {
                        $('#success_message').addClass('alert alert-success');
                        $('#success_message').text(response.message);
                        $('.delete_Category').text('Yes Delete');
                    } else {
                        $('#success_message').html("");
                        $('#success_message').addClass('alert alert-success');
                        $('#success_message').text(response.message);
                        $('.delete_Category').text('Yes Delete');
                        $('#DeleteModal').modal('hide');
                        fetchItems();
                    }
                }
            });
        });

    

</script>

@endsection