@extends('layouts.master')

@section('page_title', 'Leads Details')
@section('title', 'Leads Details')
@section('main_item', 'Order')
@section('sub_item', 'Leads Details')

@section('content')
    <div class="col-md-12 mt-2">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">

                <div>
                    <a href="javascript:void(0);" id="syncBtn" class="btn btn-primary">Sync Google Sheet</a>
                </div>
            </div>
            <div id="fullScreenLoader" class="full-screen-loader" style="display: none;">
                <div class="spinner-container">
                    <i class="fas fa-spinner fa-spin fa-3x"></i><br>
                    Syncing data, please wait...
                </div>
            </div>
            <style>
                .full-screen-loader {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.7); /* Dark background */
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    z-index: 9999; /* Ensure it appears above everything else */
                }

                .spinner-container {
                    text-align: center;
                    color: white;
                    font-size: 20px;
                }
                </style>
            <div class="card-body">
                <div class="table-responsive dash-social">
                    <table id="laravel_datatable" class="table table-hover" style="width: 100%">
                        <thead class="thead-dark">
                            <tr>
                                
                                <th>Ads ID</th>
                                <th>Ads Campaign ID</th>
                                <th>Ads SKU</th>
                                <th>Name</th>
                                <th>Address</th>
                                <th>Mobile</th>
                                <th>Mobile 2</th>
                                <th>View Item</th>
                                <th>Lead Status</th>
                                <th>Order History</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($leads as $lead)
                                <tr>
                                    
                                    <td>{{ $lead->ad_id }}</td>
                                    <td>{{ $lead->campain_id }}</td>
                                    <td>{{ $lead->sku }}</td>
                                    <td>{{ $lead->name }}</td>
                                    <td>{{ $lead->address }}</td>
                                    <td>{{ $lead->mobile_1 }}</td>
                                    <td>{{ $lead->mobile_2 }}</td>
                                    <td><button type="button" class="btn btn-primary btn-sm view-item" data-sku="{{ $lead->sku }}">View Item</button></td>
                                    <td>{{ $lead->status }}</td>
                                    <td><button type="button" class="btn btn-primary btn-sm order-history" data-mobile="{{ $lead->mobile_1 }}">
                                        <i class="fas fa-history"></i> Order History
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div class="d-flex justify-content-end mt-2">
                        {{ $leads->links() }}
                    </div>
                    <div>
                        <span style="font-weight: bold">Total Count: {{ $leads->total() }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Order History Modal -->
    <div class="modal fade" id="orderHistoryModal" tabindex="-1" role="dialog" aria-labelledby="orderHistoryModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="orderHistoryModalLabel">Order History</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- Sales data will be injected here via AJAX -->
                    <div class="text-center p-3">
                        <i class="fas fa-spinner fa-spin fa-2x"></i><br>Loading data...
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <!-- Include SweetAlert library -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(document).ready(function() {
            $('#laravel_datatable').DataTable({
                "paging": false, // Disable DataTables pagination, using Laravel's pagination instead
                "ordering": true,
                "info": false,
                "searching": true,
                "autoWidth": false,
            });

            // Delete confirmation using SweetAlert
            $('.delete-button').on('click', function() {
                var leadId = $(this).data('id');
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Submit the form to delete the lead
                        $('#delete-form-' + leadId).submit();
                    }
                });
            });
        });
        $(document).ready(function() {
    $('.order-history').on('click', function() {
        var mobile = $(this).data('mobile'); // Get the mobile number from the button

        // Show loading spinner in modal while waiting for response
        $('#orderHistoryModal .modal-body').html('<div class="text-center p-3"><i class="fas fa-spinner fa-spin fa-2x"></i><br>Loading data...</div>');
        $('#orderHistoryModal').modal('show'); // Open the modal

        // Perform AJAX request
        $.ajax({
            url: '{{ route('sales.getSaleData') }}', // Your Laravel route
            method: 'GET',
            data: { mobile: mobile },  // Pass the mobile number
            success: function(response) {
                if (response.success) {
                    // Insert received data into the modal body
                    $('#orderHistoryModal .modal-body').html(response.data);
                } else {
                    // Display no data message
                    $('#orderHistoryModal .modal-body').html('<div class="alert alert-warning text-center">No sales found for this mobile number.</div>');
                }
            },
            error: function() {
                // Show error message inside the modal
                $('#orderHistoryModal .modal-body').html('<div class="alert alert-danger text-center">An error occurred while fetching the data.</div>');
            }
        });
    });
});



    </script>
    <script>
        $(document).ready(function () {
            $('#salesTable').DataTable({
                "paging": true,
                "searching": true,
                "ordering": true,
                "info": true
            });
        });
        $(document).ready(function() {
    // When the "View Item" button is clicked
    $('.view-item').on('click', function() {
        var sku = $(this).data('sku'); // Get the SKU from the button's data attribute

        // Show loading spinner in modal while waiting for response
        $('#orderHistoryModal .modal-body').html('<div class="text-center p-3"><i class="fas fa-spinner fa-spin fa-2x"></i><br>Loading data...</div>');
        $('#orderHistoryModal').modal('show'); // Open the modal

        // Perform AJAX request to fetch related products based on SKU
        $.ajax({
            url: '{{ route('ads_products.getSkuProduct') }}', // Your route to get related products
            method: 'GET',
            data: { sku: sku },  // Pass the SKU
            success: function(response) {
                if (response.success) {
                    // If products are found, display them in the modal
                    var productData = response.data;
                    var htmlContent = '<table class="table table-bordered"><thead><tr><th>Product Name</th><th>SKU</th><th>Description</th></tr></thead><tbody>';

                    // Loop through each related product and add it to the table
                    productData.forEach(function(product) {
                        htmlContent += '<tr>';
                        htmlContent += '<td>' + product.product_name + '</td>';
                        htmlContent += '<td>' + product.sku + '</td>';
                        htmlContent += '<td>' + (product.description || 'No Description') + '</td>';
                        htmlContent += '</tr>';
                    });

                    htmlContent += '</tbody></table>';
                    $('#orderHistoryModal .modal-body').html(htmlContent); // Insert the table into the modal
                } else {
                    // If no related products found, show a warning message
                    $('#orderHistoryModal .modal-body').html('<div class="alert alert-warning text-center">No related products found for this SKU.</div>');
                }
            },
            error: function() {
                // If an error occurs, show an error message
                $('#orderHistoryModal .modal-body').html('<div class="alert alert-danger text-center">An error occurred while fetching the data.</div>');
            }
        });
    });
});


    </script>
    <script>
$(document).ready(function() {
    $('#syncBtn').on('click', function() {
        // Show the full-screen loading spinner
        $('#fullScreenLoader').show();

        // Hide the sync button while syncing
        $('#syncBtn').hide();

        // Make AJAX request to sync the Google Sheets data
        $.ajax({
            url: '{{ route('getGoogleSheetData') }}',
            method: 'GET',
            success: function(response) {
                // Hide the full-screen loader after syncing
                $('#fullScreenLoader').hide();
                
                // Show the sync button again
                $('#syncBtn').show();

                // Display success message and reload the page
                alert(response.message);
                location.reload();  // Reload the page to show the updated data
            },
            error: function() {
                // Hide the full-screen loader in case of an error
                $('#fullScreenLoader').hide();
                
                // Show the sync button again
                $('#syncBtn').show();
                
                alert('An error occurred while syncing the data.');
            }
        });
    });
});


    </script>
@endsection