@extends("dashboard.layouts.app")

@section("title")
	{{__('messages.Suppliers')}}
@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.Suppliers')}}</h2>
           </div>
        </div>
     </div>
    
     {{-- Add Modal --}}
<div class="modal fade" id="AddSuppliersModal" tabindex="-1" aria-labelledby="AddSuppliersModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="AddSuppliersModalLabel">{{__('messages.Add Suppliers 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.adress1')}}</label>
                    <input type="text" required class="adress1 form-control">
                </div>
                
               <div class="form-group mb-3">
                    <label for="">{{__('messages.adress2')}}</label>
                    <input type="text" required class="adress2 form-control">
                </div>
                <div class="form-group mb-3">
                    <label for="">{{__('messages.phone')}}</label>
                    <input type="text" required class="phone form-control">
                </div>
                <div class="form-group mb-3">
                    <label for="">{{__('messages.email')}}</label>
                    <input type="text" required class="email form-control">
                </div>
<!--               <select id="category" class="category form-control"> -->
<!--               <option value="">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_Suppliers">{{__('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 Suppliers 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="supplier_id" />

                <div class="form-group mb-3">
                    <label for=""> Name</label>
                    <input type="text" id="name" required class="form-control">
                </div>
                <div class="form-group mb-3">
                    <label for="">{{__('messages.adress1')}}</label>
                    <input type="text" id="adress1Ubdate" required class="form-control">
                </div>
                  <div class="form-group mb-3">
                    <label for="">{{__('messages.adress2')}}</label>
                    <input type="text" required class=" form-control" id="adress2Ubdate">
                </div>
                <div class="form-group mb-3">
                    <label for="">{{__('messages.phone')}}</label>
                    <input type="text" required class=" form-control" id="phoneUbdate">
                </div>
                <div class="form-group mb-3">
                    <label for="">{{__('messages.email')}}</label>
                    <input type="text" required class=" form-control" id="emailUbdate">
                </div>
                <div class="form-group mb-3">
                    
                </div>
<!--                 <label for="">category</label> -->
<!--                <select id="categoryUbdate" class="categoryUbdate form-control"> -->
<!--               <option value="">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 Suppliers 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. Suppliers Data')}}
                        <button type="button" class="btn btn-primary float-end showcategory" data-bs-toggle="modal"
                            data-bs-target="#AddSuppliersModal">{{__('messages.Add Suppliers')}}</button>
                    </h4>
                </div>
                <div class="card-body">
                    <table class="table table-striped table-bordered customwidthth" id="datatableSupplier">
                        <thead class="thead-dark">
                            <tr>
                                <th>{{__('messages.ID')}}</th>
                                <th>{{__('messages.Name')}}</th>
                                <th>{{__('messages.adress1')}}</th>
                                <th>{{__('messages.adress2')}}</th>
                                <th>{{__('messages.phone')}}</th>
                                <th>{{__('messages.email')}}</th>
                          <!--    <th>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 () {
	 $('#datatableSupplier').DataTable();
    fetchSupplier();
});
// function fetchSupplier() {
//     $.ajax({
//         type: "GET",
//         url: "{{ route('supplier.fetchItems') }}",
//         dataType: "json",
//         success: function (response) {
//             console.log(response);

//             // Assuming response.supplier is an array of suppliers
//             var suppliers = response.supplier;

//             // Check if suppliers is not null or undefined before accessing its length
//             if (suppliers) {
//                 console.log("Number of suppliers: " + suppliers.length);

//                 // Clear the table body before appending rows
//                 $('tbody').html("");

//                 // Loop through each supplier and append a row to the table
//                 suppliers.forEach(function (supplier) {
//                     console.log(supplier);

//                     // Append a row to the table
//                     $('tbody').append('<tr>' +
//                         '<td>' + supplier.id + '</td>' +
//                         '<td>' + supplier.name + '</td>' +
//                         '<td>' + supplier.address1 + '</td>' +
//                         '<td>' + supplier.address2 + '</td>' +
//                         '<td>' + supplier.phone + '</td>' +
//                         '<td>' + supplier.email + '</td>' +
//                         '<td><button type="button" value="' + supplier.id + '" class="btn btn-primary editbtn btn-sm">Edit</button></td>' +
//                         '<td><button type="button" value="' + supplier.id + '" class="btn btn-danger deletebtn btn-sm">Delete</button></td>' +
//                         '</tr>');
//                 });
//             }
//         }
//     });
// }
function fetchSupplier() {
    $.ajax({
        type: "GET",
        url: "{{ route('supplier.fetchItems') }}",
        dataType: "json",
        success: function (response) {
            console.log(response);

            // Assuming response.supplier is an array of suppliers
            var suppliers = response.supplier;

            // Check if suppliers is not null or undefined before accessing its length
            if (suppliers) {
                console.log("Number of suppliers: " + suppliers.length);

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

                // Loop through each supplier and add a row to the DataTable
                suppliers.forEach(function (supplier) {
                    console.log(supplier);

                    // Add a row to the DataTable
                    $('#datatableSupplier').DataTable().row.add([
                        supplier.id,
                        supplier.name,
                        supplier.address1,
                        supplier.address2,
                        supplier.phone,
                        supplier.email,
                        '<td class="custom-row-class"><div class="row justify-content-center">' +
                        '<button type="button" value="' + supplier.id + '" class="btn btn-primary editbtn btn-sm mr-3 col-4 ">Edit</button>'+
                        '<button type="button" value="' + supplier.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', '.add_Suppliers', function (e) {
    	    e.preventDefault();

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

    	    var data = {
    	        '_token': $('meta[name="csrf-token"]').attr('content'),
    	        'name': $('.name').val(),
    	        'adress1': $('.adress1').val(),
    	        'adress2': $('.adress2').val(),
    	        'phone': $('.phone').val(),
    	        'email': $('.email').val(),
    	    //    'category': $('.category').val(),
    	    }

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

    	    $.ajax({
    	        type: "POST",
    	        url: "/admin/supplier",
    	        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_Suppliers').text('Save');
    	            } else {
       	        
                     
    	                $('#save_msgList').html("");
    	                $('#success_message').addClass('alert alert-success');
    	                $('#success_message').text(response.message);
    	                $('#AddSuppliersModal').find('input').val('');
    	                $('.add_Suppliers').text('Save');
    	                $('#AddSuppliersModal').modal('hide');
    	                fetchSupplier();
    	            }
    	        }
    	    });
    	});

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

    	    $('#editModal').modal('show');
    	    $.ajax({
    	        type: "GET",
    	        url: "/admin/edit-supplier/" + supplier_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.Supplier.name);
    	                $('#adress1Ubdate').val(response.Supplier.address1);
    	                $('#adress2Ubdate').val(response.Supplier.address2);
    	                $('#phoneUbdate').val(response.Supplier.phone);
    	                $('#emailUbdate').val(response.Supplier.email);

    	                // 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');
//     	                    }
//     	                });


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


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

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

            var data = {
                '_token': $('meta[name="csrf-token"]').attr('content'), 
                'name': $('#name').val(),
                'adress1': $('#adress1Ubdate').val(),
                'adress2': $('#adress2Ubdate').val(),
                'phone': $('#phoneUbdate').val(),
                'email': $('#emailUbdate').val(),
            //    'category': $('#categoryUbdate').val(),
            };

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

            $.ajax({
                type: "PUT",
                url: "/admin/update-supplier/" + id,
                data: data,
                dataType: "json",
                success: function (response) {
               	 $('#success_message').addClass('alert alert-success');
                 $('#success_message').text(response.message);
                 $('#editModal').modal('hide');
                 fetchSupplier();
                    
                },
                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 supplier_id = $(this).val();
            $('#DeleteModal').modal('show');
            $('#deleteing_id').val(supplier_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-supplier/" + 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');
                        fetchSupplier();
                    }
                }
            });
        });

    

</script>

@endsection