@extends('layouts.master')

@section('page_title', 'Reports / Sync Report')
@section('title', 'Reports / Sync Report')
@section('main_item', 'Reports')
@section('sub_item', 'Reports / Sync Report')

@section('content')
<style>
    th.sort {
        color: white;
    }
    th.sort:hover {
        color: blue;
    }
    th.sort a {
        color: inherit;
        text-decoration: none;
    }
    th.sort a:hover {
        color: blue;
    }
</style>

<div class="col-12">
    <div class="card">
        <div id="accordion">
            <div class="border-bottom card-header" style="background-color: white; cursor: pointer;" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                <h4 class="mb-0 header-title">
                    Filter
                </h4>
            </div>
            <div id="collapseOne" class="collapse show mt-3" aria-labelledby="headingOne" data-parent="#accordion">
                <div class="card-body">
                    <form action="{{ route('sync_log_report') }}" method="GET">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label style="font-weight: bold" for="reportrange"> Date </label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" name="date_filter" id="reportrange" value="{{ request()->input('date_filter', '') }}" readonly>
                                        <div class="input-group-append">
                                            <span class="input-group-text"><i class="dripicons-calendar"></i></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-12">
    <div class="card">
        <div class="card-body">
            <div class="table-responsive dash-social">
                <table class="table table-hover">
                    <thead class="thead-dark">
                        <tr>
                            <th>Ad Name</th>
                            <th>Created At</th>
                            <th>Total Logs</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($logs as $log)
                        <tr>
                            <td>{{ $log->ad_name }}</td>
                            <td>{{ \Carbon\Carbon::parse($log->created_at)->format('Y-m-d') }}</td>
                            <td>{{ $log->total_logs }}</td>
                            <td>
                                <button class="btn btn-info view-details" 
                                    data-id="{{ $log->id }}"
                                    data-ad-name="{{ $log->ad_name }}" 
                                    data-created-at="{{ \Carbon\Carbon::parse($log->created_at)->format('Y-m-d') }}"
                                    data-total-logs="{{ $log->total_logs }}">
                                    View Details
                                </button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal for Log Details -->
<div class="modal fade" id="logModal" tabindex="-1" role="dialog" aria-labelledby="logModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document"> <!-- Added modal-lg for larger modal -->
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="logModalLabel">Log Details</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="table-responsive dash-social">
                <!-- Table will be dynamically inserted here -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@section('scripts')
<script>
$(document).ready(function() {
    // Date range picker configuration
    $('#reportrange').daterangepicker({
        opens: 'right',
        autoUpdateInput: false,
        locale: {
            cancelLabel: 'Clear',
            format: 'YYYY-MM-DD'
        },
        ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    });

    $('#reportrange').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('YYYY-MM-DD') + ' to ' + picker.endDate.format('YYYY-MM-DD'));
        $(this).closest('form').submit();  // Automatically submit the form
    });

    $('#reportrange').on('cancel.daterangepicker', function(ev, picker) {
        $(this).val('');
        $(this).closest('form').submit();
    });

    // Handle View Details button click using AJAX
    $('.view-details').on('click', function() {
        var adName = $(this).data('ad-name');
        var createdAt = $(this).data('created-at');

        $.ajax({
            url: '{{ route("log.details") }}',  // Ensure this route is correctly set in your routes/web.php
            method: 'GET',
            data: {
                ad_name: adName,
                created_at: createdAt
            },
            success: function(response) {
                if (response.error) {
                    alert(response.error); // Handle errors if logs are not found
                } else {
                    // Clear previous modal content
                    var modalBody = $('#logModal .modal-body');
                    modalBody.empty();

                    // Create the table for displaying log details
                    var tableWrapper = '<div class="table-responsive dash-social">'; // Table wrapper added here
                    var table = '<table class="table table-hover">';

                    // Define the table headers
                    var headers = ['Ad ID', 'Campaign ID', 'Ad Name', 'Name', 'Address', 'Mobile 1', 'Mobile 2'];

                    // Add table header row
                    table += '<thead class="thead-dark"><tr>';
                    headers.forEach(function(header) {
                        table += '<th>' + header + '</th>';
                    });
                    table += '</tr></thead><tbody>';

                    // Iterate over all logs and add data rows
                    response.forEach(function(logDetails) {
                        table += '<tr>';
                        table += '<td>' + (logDetails.ad_id ? logDetails.ad_id : '<span class="text-danger">N/A</span>') + '</td>';
                        table += '<td>' + (logDetails.campain_id ? logDetails.campain_id : '<span class="text-danger">N/A</span>') + '</td>';
                        table += '<td>' + (logDetails.ad_name ? logDetails.ad_name : '<span class="text-danger">N/A</span>') + '</td>';
                        table += '<td>' + (logDetails.name ? logDetails.name : '<span class="text-danger">N/A</span>') + '</td>';
                        table += '<td>' + (logDetails.address ? logDetails.address : '<span class="text-danger">N/A</span>') + '</td>';
                        table += '<td>' + (logDetails.mobile_1 ? logDetails.mobile_1 : '<span class="text-danger">N/A</span>') + '</td>';
                        table += '<td>' + (logDetails.mobile_2 ? logDetails.mobile_2 : '<span class="text-danger">N/A</span>') + '</td>';
                        table += '</tr>';
                    });

                    table += '</tbody></table>';
                    tableWrapper += table + '</div>'; // Closing the table wrapper

                    // Append the table wrapper to the modal
                    modalBody.append(tableWrapper);

                    // Show the modal
                    $('#logModal').modal('show');
                }
            },
            error: function() {
                alert('Error fetching log details.');
            }
        });
    });
});




</script>
@endsection
@endsection