@extends('layouts.master')

@section('page_title', 'Duplicate Leads Details')
@section('title', 'Duplicate Leads Details')
@section('main_item', 'Order')
@section('sub_item', 'Duplicate 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>
            
            <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>Lead Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($paginatedLeads as $group)
                                <tr>
                                    <td colspan="5" style="font-weight: bold;">Mobile: {{ $group->first()->mobile_1 }}</td>
                                    <td colspan="2" style="font-weight: bold;"><button class="btn btn-primary merge-btn" data-mobile="{{ $group->first()->mobile_1 }}">Merge Leads</button></td>
                                    <td colspan="2" style="font-weight: bold;"><button class="btn btn-danger reject-btn" data-mobile="{{ $group->first()->mobile_1 }}">Reject Leads</button></td>
                                    
                                </tr>
                                
                                @foreach($group 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>{{ $lead->status }}</td>
                                    </tr>
                                @endforeach
                                <tr>
                                    <td colspan="8">
                                        
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div class="d-flex justify-content-end mt-2">
                        {{ $paginatedLeads->links() }}
                    </div>
                    <div>
                        <span style="font-weight: bold">Total Count: {{ $paginatedLeads->total() }}</span>
                    </div>
                </div>
            </div>
            
            
        </div>
    </div>
    <!-- Order History Modal -->
   <!-- Modal -->
<div class="modal fade" id="mergeModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Merge Order</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="mergeForm">
                    @csrf
                    <input type="hidden" id="mobile_1" name="mobile_1">
                    
                    <!-- Campaign ID Dropdown -->
                    <div class="form-group">
                        <label for="ads_id">Campaign ID</label>
                        <select id="ads_id" name="ads_id" class="form-control">
                            <option value="">Select Ads</option>
                        </select>
                    </div>

                    <!-- SKU Dropdown -->
                    <div class="form-group">
                        <label for="sku">SKU</label>
                        <select name="sku" class="form-control">
                            <option value="">Select SKU</option>
                            @foreach ( $skus as $sku)
                                <option value="{{ $sku->ads_sku }}">{{ $sku->ads_sku }}</option>
                            @endforeach
                        </select>
                    </div>

                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="mergeModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Merge Lead</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="mergeForm">
                    @csrf
                    <input type="hidden" id="mobile_1" name="mobile_1">
                    
                    <!-- Campaign ID Dropdown -->
                    <div class="form-group">
                        <label for="ads_id">Campaign ID</label>
                        <select id="ads_id" name="ads_id" class="form-control">
                            <option value="">Select Ads</option>
                        </select>
                    </div>

                    <!-- SKU Dropdown -->
                    <div class="form-group">
                        <label for="sku">SKU</label>
                        <select name="sku" class="form-control">
                            <option value="">Select SKU</option>
                            @foreach ( $skus as $sku)
                                <option value="{{ $sku->ads_sku }}">{{ $sku->ads_sku }}</option>
                            @endforeach
                        </select>
                    </div>

                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="rejectModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reject Lead</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="rejectForm">
                    @csrf
                    <input type="hidden" id="mobile_1" name="mobile_1">
                    
                    <!-- Campaign ID Dropdown -->
                    <div class="form-group">
                        <label for="ad_id">Campaign ID</label>
                        <select id="ad_id" name="ads_id" class="form-control">
                            <option value="">Select Ads</option>
                        </select>
                    </div>

                    <!-- SKU Dropdown -->
                   

                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </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.');
            }
        });
    });
});
$(document).on('click', '.merge-btn', function() {
        let mobile = $(this).data('mobile');

        $.ajax({
            url: '{{ route("leads.merge") }}',
            type: 'GET',
            data: { mobile: mobile },
            success: function(response) {
                console.log(response);
                
                // Set hidden field for mobile_1
                $('#mobile_1').val(mobile);

                // Populate Campaign ID dropdown
                let campaignDropdown = $('#ads_id');
                campaignDropdown.empty().append('<option value="">Select Campaign</option>');
                response.forEach(lead => {
                    campaignDropdown.append(`<option value="${lead.ad_id}">${lead.ad_id}</option>`);
                });

                

                // Show the modal
                $('#mergeModal').modal('show');
            },
            error: function(xhr) {
                console.error(xhr.responseText);
                alert("Error fetching data.");
            }
        });
    });

    // Handle form submission
    $('#mergeForm').on('submit', function(e) {
        e.preventDefault();
        
        let formData = $(this).serialize(); // Serialize form data

        $.ajax({
            url: '{{ route("leads.submitMerge") }}', // Define submit route
            type: 'POST',
            data: formData,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                alert("Merge Order Submitted Successfully!");
                $('#mergeModal').modal('hide');
                location.reload(); // Reload the page after success
            },
            error: function(xhr) {
                console.error(xhr.responseText);
                alert("Error submitting merge order.");
            }
        });
    });


    $(document).on('click', '.reject-btn', function() {
        let mobile = $(this).data('mobile');

        $.ajax({
            url: '{{ route("leads.merge") }}',
            type: 'GET',
            data: { mobile: mobile },
            success: function(response) {
                console.log(response);
                
                // Set hidden field for mobile_1
                $('#mobile_1').val(mobile);

                // Populate Campaign ID dropdown
                let campaignDropdown = $('#ad_id');
                campaignDropdown.empty().append('<option value="">Select Campaign</option>');
                response.forEach(lead => {
                    campaignDropdown.append(`<option value="${lead.ad_id}">${lead.ad_id}</option>`);
                });

                

                // Show the modal
                $('#rejectModal').modal('show');
            },
            error: function(xhr) {
                console.error(xhr.responseText);
                alert("Error fetching data.");
            }
        });
    });

    // Handle form submission
    $('#rejectForm').on('submit', function(e) {
        e.preventDefault();
        
        let formData = $(this).serialize(); // Serialize form data

        $.ajax({
            url: '{{ route("leads.submitReject") }}', // Define submit route
            type: 'POST',
            data: formData,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                alert("Reject Lead Submitted Successfully!");
                $('#rejectModal').modal('hide');
                location.reload(); // Reload the page after success
            },
            error: function(xhr) {
                console.error(xhr.responseText);
                alert("Error submitting reject lead.");
            }
        });
    });
    </script>
@endsection