@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" id="logsTable">
                    <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" role="document">
        <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">
                <p><strong>Ad Name:</strong> <span id="modalAdName"></span></p>
                <p><strong>Created At:</strong> <span id="modalCreatedAt"></span></p>
                <p><strong>Total Logs:</strong> <span id="modalTotalLogs"></span></p>
                <p><strong>Name:</strong> <span id="modalName"></span></p>
                <p><strong>Address:</strong> <span id="modalAddress"></span></p>
                <p><strong>Mobile 1:</strong> <span id="modalMobile1"></span></p>
                <p><strong>Mobile 2:</strong> <span id="modalMobile2"></span></p>
                <p><strong>Campain ID:</strong> <span id="modalCampainId"></span></p>
                <p><strong>Ad ID:</strong> <span id="modalAdId"></span></p>
            </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") }}',
                method: 'GET',
                data: {
                    ad_name: adName,
                    created_at: createdAt
                },
                success: function(response) {
                    if (response.error) {
                        alert(response.error);
                    } else {
                        // Populate the modal with data
                        $('#modalAdName').text(response[0].ad_name);
                        $('#modalCreatedAt').text(response[0].created_at);
                        $('#modalTotalLogs').text(response[0].total_logs);
                        $('#modalName').text(response[0].name);
                        $('#modalAddress').text(response[0].address);
                        $('#modalMobile1').text(response[0].mobile_1);
                        $('#modalMobile2').text(response[0].mobile_2);
                        $('#modalCampainId').text(response[0].campain_id);
                        $('#modalAdId').text(response[0].ad_id);

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