@extends('main.layouts.app')
@section('content')

<style>
    body,
    html {
        min-height: 100%;
        overflow-x: hidden;
    }

    .btn-container .btn-primary {
    white-space: nowrap;
}

    .date h3 {
        font-size: 11px;
        line-height: 11px;
        color: #1f365c;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .date span {
        font-size: 10px;
    }


    .section .section-header {
        flex-wrap: wrap;
        margin-bottom: 20px !important;
    }


    .br-20 {
        border-radius: 20px;
    }

    .align-middle {
        vertical-align: middle;
    }

    div.clock {
        font-size: 26px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
        font-weight: bold;
    }

    .autopull-header h5 {
        font-size: 16px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
    }

    .autopull-header h3 {
        font-size: 26px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
        font-weight: bold;
    }



    .card .card-header {
        width: 100%;
        min-height: 0px;
    }


    .card .card-header h4 {
        font-size: 16px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
    }

    .bg_blue_color {
        border-radius: 20px !important;
        background-color: #0E194D !important;
    }

    .depo {
        font-size: 14px;
    }

    .dash-text {
        text-align: center;
    }

    @media (max-width:767px) {
        .autopull-header h3 {
            font-size: 13px;
            line-height: 14px;
            color: #1f365c;
        }

        .depo {
            font-size: 15px;
        }

        .autopull-header h5 {
            font-size: 13px;
            line-height: 15px;
            color: #1f365c;
            padding-right: 0px;
            margin-bottom: 0;
        }
    }
</style>
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.3/css/dataTables.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/searchbuilder/1.7.0/css/searchBuilder.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/datetime/1.5.2/css/dataTables.dateTime.min.css">
<div class="main-content">
    <section class="section">
        <div class="section-header d-block bg_blue_color mb-0">
            <div class="row">
                <div class="col-12">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <div class="dash-text">
                                <h5 class="text-white depo mb-0">
                                    <a href="/admin/dashboard"><img src="/img/homepage.png" alt="image"> </a>
                                    Inventory List
                                </h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="row marginTop">
            <div class="overflow-auto w-100">
                <table id="photos_table" class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Product Title</th>
                            <th>Banner</th>
                            <th>Unit Remaining</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($products as $product)
                        <tr>
                            <td>{{$product->id}}</td>
                            <td>{{$product->product_title}}</td>
                            <td><img src="{{$product->images}}" style="width:200px;"></td>
                            <td>{{$product->quantity}}</td>
                            <td><button class="btn btn-primary" data-toggle="modal" data-target="#editModal" data-id="{{$product->id}}">Update Quantity</button></td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <div class="clearfix"></div>
    </section>
</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">Refill Quantity</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form id="editForm">
            <div class="form-group">
              {{-- <label for="inputNumber">Enter Number:</label> --}}
              <input type="number" class="form-control" id="inputNumber" required>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.datatables.net/2.0.3/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/searchbuilder/1.7.0/js/dataTables.searchBuilder.js"></script>
<script src="https://cdn.datatables.net/searchbuilder/1.7.0/js/searchBuilder.dataTables.js"></script>
<script src="https://cdn.datatables.net/datetime/1.5.2/js/dataTables.dateTime.min.js"></script>

<script>
    $(document).ready(function() {
        $('#photos_table').DataTable();
    } );
</script>

  <script>
$(document).ready(function(){
    $('#editModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget); // Button that triggered the modal
        var itemId = button.data('id'); // Extract the ID from data-* attributes
        console.log('Editing item with ID:', itemId);

        // Handle form submission
        $('#editForm').off('submit').on('submit', function(e) {
            e.preventDefault();
            var inputValue = $('#inputNumber').val();

            // Validation: Check if inputValue is blank or less than 1
            if (inputValue === '' || parseInt(inputValue) < 1) {
                alert('Please enter a valid quantity greater than 0.');
                return; // Exit the function if validation fails
            }

            console.log('Submitted value for item ID ' + itemId + ': ' + inputValue);

            $('#editModal').modal('hide');

            let formData = {
                product_id: itemId,
                quantity: inputValue
            };

            // Get CSRF token
            var csrfToken = $('meta[name="csrf-token"]').attr('content');

            // Perform AJAX request
            $.ajax({
                type: 'POST',
                url: '/product/update-product-quantity',
                data: JSON.stringify(formData), // Convert formData to JSON string
                contentType: 'application/json', // Set content type to application/json
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                success: function(response) {
                    // Show success notification
                    alert('Quantity updated successfully!');

                    // Reload the page after 2 seconds
                    setTimeout(function() {
                        location.reload();
                    }, 2000);
                },
                error: function(xhr, status, error) {
                    // Handle error
                    console.log('Error saving bank details:', status, error);
                    alert('An error occurred while updating the quantity.');
                }
            });
        });
    });
});


  </script>

@endsection