@extends('admin.layouts.app')

<style>
    #date-range {
        background-color: #fff;
        border: 1px solid #aaa;
    }
</style>
@section('content')
    <div class=" content-body default-height">
        <div class="container-fluid">
            <div class="page-titles">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">@lang('admin.dashboard')</a></li>
                    <li class="breadcrumb-item active"><a href="{{route('admin.reports.contacts')}}">@lang('admin.contacts')</a></li>
                </ol>
            </div>
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4>@lang('admin.contacts')</h4>
                    </div>
                    <div class="card-body">
                        <!-- Add a form for filtering -->
                        <form  method="get" action="" class="d-flex">
                            @csrf
                            <div class="input-group me-2">
                                    <input type="text" class="form-control" name="keyword"
                                        value="{{ request()->input('keyword') }}"
                                        placeholder="@lang('user.search')...">
                            </div>
                            <div class="input-group me-2">
                                <select class="form-select" name="business_id" aria-label="Filter by Business Name">
                                    <option value="">@lang('admin.select')</option>
                                    @foreach($businesses as $business)
                                        <option value="{{ $business->id }}" {{ request()->input('business_id') == $business->id ? 'selected' : '' }}>{{ $business->name }}</option>
                                    @endforeach
                                </select>
                            </div>  
                            <div class="input-group me-2">
                                <input type="text" class="form-control" id="date-range"
                                    name="date_range"
                                    value="{{ request()->input('date_range') }}"readonly>
                                    <button type="button" class="btn btn-secondary" onclick="clearDateRange()">@lang('admin.clear')</button>

                            </div>                          
                            <button type="submit" class="btn btn-primary">@lang('admin.filter')</button>
                        </form>
                        
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>@lang('user.first_name')</th>
                                        <th>@lang('user.last_name')</th>
                                        <th>@lang('admin.business_name')</th>
                                        <th>@lang('user.email')</th>
                                        <th>@lang('user.mobile')</th>
                                        <th>@lang('user.tags')</th>
                                        <th>@lang('user.channel')</th>
                                        <th>@lang('user.created_at')</th>
                                    </tr>
                                </thead>
                                <tbody id="contactTableBody">
                                    @foreach ($contacts as $contact)
                                    <tr>
                                        <td>{{ $contact->first_name }}</td>
                                        <td>{{ $contact->last_name }}</td>
                                        <td>{{ $contact->business->name }}</td>
                                        <td>{{ $contact->email }}</td>
                                        <td>{{ $contact->mobile }}</td>
                                        <td>
                                            @foreach ($contact->tags()->get() as $tag)
                                                {{ $tag->name }}
                                            @endforeach
                                        </td>
                                        <td>
                                            @if ($contact->channel == 1)
                                                WhatsApp
                                            @elseif($contact->channel == 2)
                                                Messenger
                                            @else
                                                Instagram
                                            @endif
                                        </td>
                                        <td>{{ $contact->created_at }}</td>
                                       
                                    </tr>

                                    @endforeach
                                </tbody>
                            </table>
                            {{ $contacts->links('vendor.pagination.custom') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker@3.1.0/daterangepicker.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker@3.1.0/daterangepicker.min.js"></script>
<script>
    $(document).ready(function() {

        $('#date-range').daterangepicker({
                autoUpdateInput: false,
                timePicker: true,
                locale: {
                    format: 'DD/MM/YYYY h:mm A'
                },
                timePickerIncrement: 30,
                showDropdowns: true
            });

            $('#date-range').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('DD/MM/YYYY h:mm A') + ' - ' + picker.endDate.format(
                    'DD/MM/YYYY h:mm A'));
            });
            
        // Assuming you're using jQuery for simplicity
        // $('#filterForm').on('submit', function(e) {
        //     e.preventDefault();
        //     var formData = $(this).serialize();
        //     $.ajax({
        //         type: 'GET',
        //         url: "{{route('admin.reports.contacts.filter')}}",
        //         data: formData,
        //         success: function(response) {
        //             // Update the table with the filtered data
        //             $('#contactTableBody').html(''); // Clear the existing rows
        //             $.each(response.contacts, function(index, contact) {
        //                 var rowHtml = `
        //                 <tr>
        //                     <td>${contact.first_name}</td>
        //                     <td>${contact.last_name}</td>
        //                     <td>${contact.business.name}</td>
        //                     <td>${contact.email}</td>
        //                     <td>${contact.mobile}</td>
        //                     <td> ${contact.tags.map(tag => `${tag.name}`).join('')}</td>
        //                     <td>
        //                         ${contact.channel === 1 ? 'WhatsApp' :
        //                         contact.channel === 2 ? 'Messenger' :
        //                         contact.channel === 3 ? 'Instagram' : ''}
        //                     </td>
        //                     <td>${contact.created_at}</td>
                           
        //                 </tr>`;
        //                 $('#contactTableBody').append(rowHtml);
        //             });
                    
        //             // Update pagination links
        //             $('.pagination').html(generatePaginationLinks(response));
        //         },
        //         error: function(xhr, status, error) {
        //             console.error(error);
        //         }
        //     });
        // });

         // Function to generate pagination links
        //  function generatePaginationLinks(paginator) {
        //     var paginationHtml = '<nav aria-label="Page navigation example">';
        //     paginationHtml += '<ul class="pagination justify-content-center">';

        //     if (paginator.current_page === 1) {
        //         paginationHtml += '<li class="page-item disabled">';
        //     } else {
        //         paginationHtml += '<li class="page-item">';
        //     }
        //     paginationHtml += '<a class="page-link" href="#" tabindex="-1">Previous</a></li>';

        //     for (var i = 1; i <= paginator.last_page; i++) {
        //         if (i === paginator.current_page) {
        //             paginationHtml += '<li class="page-item active">';
        //         } else {
        //             paginationHtml += '<li class="page-item">';
        //         }
        //         paginationHtml += '<a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>';
        //     }

        //     if (paginator.current_page === paginator.last_page) {
        //         paginationHtml += '<li class="page-item disabled">';
        //     } else {
        //         paginationHtml += '<li class="page-item">';
        //     }
        //     paginationHtml += '<a class="page-link" href="#" rel="next">Next</a></li>';

        //     paginationHtml += '</ul></nav>';

        //     return paginationHtml;
        // }
        
        // Handle pagination links click
        // $(document).on('click', '.pagination a', function(e) {
        //     e.preventDefault();
        //     var page = $(this).data('page'); // Get the page number from the data attribute
        //     var formData = $('#filterForm').serialize() + '&page=' + page; // Add page parameter to form data
        //     $.ajax({
        //         type: 'GET',
        //         url: "{{ route('admin.reports.contacts.filter') }}",
        //         data: formData,
        //         success: function(response) {
        //             // Clear existing rows and modals
        //             $('#contactTableBody').empty();
        //             $('.modal').remove(); // Clear all modals

        //             $.each(response.contacts, function(index, contact) {
        //                 // Convert the datetime string to a Date object
        //                 var created_at = new Date(contact.created_at).toLocaleString();
        //                 var schedule_date = new Date(contact.schedule_date).toLocaleString();

        //                 var rowHtml = `
        //                 <tr>
        //                     <td>${contact.first_name}</td>
        //                     <td>${contact.last_name}</td>
        //                     <td>${contact.business.name}</td>
        //                     <td>${contact.email}</td>
        //                     <td>${contact.mobile}</td>
        //                     <td> ${contact.tags.map(tag => `${tag.name}`).join('')}</td>
        //                     <td>
        //                         ${contact.channel === 1 ? 'WhatsApp' :
        //                         contact.channel === 2 ? 'Messenger' :
        //                         contact.channel === 3 ? 'Instagram' : ''}
        //                     </td>
        //                     <td>${contact.created_at}</td>
                           
        //                 </tr>`;
        //                 $('#contactTableBody').append(rowHtml);

        //             });

        //             // Update pagination links
        //             $('.pagination').html(generatePaginationLinks(response));
        //         },
        //         error: function(xhr, status, error) {
        //             console.error(error);
        //         }
        //     });
        // });

    });
    function clearDateRange() {
                document.getElementById('date-range').value = '';
            }
</script>
@endpush