@extends('admin.layouts.app')

@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.broadcasts')}}">@lang('admin.broadcasts')</a></li>
                </ol>
            </div>
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4>@lang('admin.broadcasts')</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 class="form-control" type="text" name="name"  value="{{ request()->input('name') }}" placeholder="Filter by Name">
                            </div>
                            <div class="input-group me-2">
                                <select class="form-select" name="business_id" aria-label="Filter by Business Name">
                                    <option value="">Select Business</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 class="form-control" type="text" name="user_name"  value="{{ request()->input('user_name') }}" placeholder="Filter by User Name">
                            </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('admin.name')</th>
                                        <th>@lang('admin.business_name')</th>
                                        <th>@lang('admin.user_name')</th>
                                        <th>@lang('admin.language')</th>
                                        <th>@lang('admin.success_sent')</th>
                                        <th>@lang('admin.failed_sent')</th>
                                        <th>@lang('admin.status')</th>
                                        <th>@lang('admin.schedule_date')</th>
                                        <th>@lang('admin.created_at')</th>
                                        <th>@lang('admin.actions')</th>
                                    </tr>
                                </thead>
                                <tbody id="broadcastTableBody">
                                    @foreach ($broadcasts as $broadcast)
                                        <tr>
                                            <td>{{ $broadcast->name }}</td>
                                            <td>{{ $broadcast->business->name }}</td>
                                            <td>{{ $broadcast->user->name }}</td>
                                            <td>{{ $broadcast->lang }}</td>
                                            <td>{{ $broadcast->logs()->where('status', '!=', '6')->count() }}</td>
                                            <td>{{ $broadcast->logs()->where('status', 6)->count() }}</td>
                                            <td>
                                                <span
                                                    class="badge  text-bg-{{ $broadcast->isSent == 1 ? 'success' : 'warning' }}">
                                                    @if ($broadcast->isSent == 1)
                                                        @lang('admin.sent')
                                                    @elseif ($broadcast->isSent == 2)
                                                        @lang('admin.sending')
                                                    @else
                                                        @lang('admin.un_sent')
                                                    @endif
                                                </span>
                                            </td>
                                            <td>{{ $broadcast->schedule_date }}</td>
                                            <td>{{ $broadcast->created_at }}</td>
                                            <td>
                                                <div class="d-flex" style="justify-content: space-around;">
                                                    <button type="button" class="btn btn-info shadow btn-xs sharp"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#previewModal_{{ $broadcast->id }}"><i
                                                            class="fa fa-eye"></i></button>
                                                    <a href="{{route('admin.reports.broadcasts.statistics',['id'=>$broadcast->id])}}" class="btn btn-info shadow btn-xs sharp"><i class="fas fa-chart-bar"></i></a>
                                                </div>
                                            </td>
                                        </tr>

                                        <!-- Modal -->
                                        <div class="modal fade" id="previewModal_{{ $broadcast->id }}">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal">
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <ul id="templates-view">
                                                            <li class="template-result template-result-{{ $broadcast->template->id }}"
                                                                data-templateid="{{ $broadcast->template->id }}"
                                                                data-category="{{ $broadcast->template->category_name }}"
                                                                data-language="{{ $broadcast->template->lang }}"
                                                                data-body="{{ $broadcast->template->body }}"
                                                                data-media="{{ $broadcast->template->media_type }}">
                                                                <h3 class="template-name">{{ $broadcast->template->name }}
                                                                </h3>
                                                                <span
                                                                    class="template-title">{{ $broadcast->template->title }}</span>
                                                                @if ($broadcast->template->media_type != 0 && $broadcast->file)
                                                                    <div
                                                                        class="media_type media_type_{{ $broadcast->template->media_type_name }}">
                                                                        <img style="width: 300px;height: 121px;"
                                                                            src="{{ asset('storage/' . $broadcast->file->path) }}">
                                                                    </div>
                                                                @endif
                                                                <style>
                                                                    #templates-results .media_type.media_type_image::after,
                                                                    #templates-view .media_type.media_type_image::after {
                                                                        content: '';
                                                                    }
                                                                </style>
                                                                <p class="template-body">{{ $broadcast->template->body }}
                                                                </p>
                                                                @if ($broadcast->template->buttons)
                                                                    <div class="buttons-container">
                                                                        @foreach (json_decode($broadcast->template->buttons) as $button)
                                                                            @if ($button)
                                                                                @if ($button->type === 'PHONE_NUMBER')
                                                                                    <button
                                                                                        class="btn btn-primary btn-PHONE_NUMBER">{{ $button->text }}</button>
                                                                                @elseif ($button->type === 'URL')
                                                                                    <a href="javascript:void(0);"
                                                                                        class="btn btn-primary btn-URL">{{ $button->text ?? 'Visit' }}</a>
                                                                                @endif
                                                                            @endif
                                                                        @endforeach
                                                                    </div>
                                                                @endif
                                                            </li>
                                                        </ul>
                                                    </div>
                                                    <div class="modal-footer">

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </tbody>
                            </table>
                            {{ $broadcasts->links('vendor.pagination.custom') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
    $(document).ready(function() {
        // 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.broadcasts.filter') }}",
        //         data: formData,
        //         success: function(response) {
        //             // Update the table with the filtered data
        //             $('#broadcastTableBody').empty(); // Clear the existing rows
        //             $.each(response.broadcasts, function(index, broadcast) {
        //                 // Convert the datetime string to a Date object
        //                 var created_at = new Date(broadcast.created_at);
        //                 created_at = created_at.toLocaleString();

        //                 var schedule_date = new Date(broadcast.schedule_date);
        //                 schedule_date = schedule_date.toLocaleString();

        //                 var buttonsHtml = '';
        //                 var buttons = JSON.parse(broadcast.template.buttons);
        //                 if (Array.isArray(buttons)) {
        //                     buttonsHtml = buttons.map(button => {
        //                         if (button.type === 'PHONE_NUMBER') {
        //                             return `<button class="btn btn-primary btn-PHONE_NUMBER">${button.phone_number}</button>`;
        //                         } else if (button.type === 'URL') {
        //                             return `<a href="${button.url}" class="btn btn-primary btn-URL">${button.text ?? 'Visit'}</a>`;
        //                         } else {
        //                             return '';
        //                         }
        //                     }).join('');
        //                 }

        //                 var rowHtml = `
        //                     <tr>
        //                         <td>${broadcast.name}</td>
        //                         <td>${broadcast.business.name}</td>
        //                         <td>${broadcast.user.name}</td>
        //                         <td>${broadcast.lang}</td>
        //                         <td>${broadcast.success_sent}</td>
        //                         <td>${broadcast.failed_sent}</td>
        //                         <td>${schedule_date}</td>
        //                         <td>${created_at}</td>
        //                         <td>
        //                             <div class="d-flex">
        //                                 <button type="button" class="btn btn-info shadow btn-xs sharp"
        //                                     data-bs-toggle="modal" data-bs-target="#previewModal_${broadcast.id}">
        //                                     <i class="fa fa-eye"></i>
        //                                 </button>
        //                             </div>
        //                         </td>
        //                     </tr>`;

        //                 $('#broadcastTableBody').append(rowHtml);

        //                 // Add modal dynamically
        //                 var modalHtml = `
        //                     <div class="modal fade" id="previewModal_${broadcast.id}" tabindex="-1" aria-labelledby="previewModalLabel_${broadcast.id}" aria-hidden="true">
        //                         <div class="modal-dialog" role="document">
        //                             <div class="modal-content">
        //                                 <div class="modal-header">
        //                                     <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        //                                 </div>
        //                                 <div class="modal-body">
        //                                     <ul id="templates-view">
        //                                         <li class="template-result template-result-${broadcast.template.id}" data-templateid="${broadcast.template.id}" data-category="${broadcast.template.category_name}" data-language="${broadcast.template.lang}" data-body="${broadcast.template.body}" data-media="${broadcast.template.media_type}">
        //                                             <h3 class="template-name">${broadcast.template.name}</h3>
        //                                             <span class="template-title">${broadcast.template.title}</span>
        //                                             ${broadcast.template.media_type === 1 ? `
        //                                             <div class="media_type media_type_${broadcast.template.media_type_name}">
        //                                                 <img style="width: 300px; height: 121px;" src="{{ asset('storage/') }}/${broadcast.files[0].path}">
        //                                             </div>` : ''}
        //                                             <style>
        //                                                 #templates-results .media_type.media_type_image::after, #templates-view .media_type.media_type_image::after {
        //                                                     content: '';
        //                                                 }
        //                                             </style>
        //                                             <p class="template-body">${broadcast.template.body}</p>
        //                                             <div class="buttons-container">
        //                                                 ${buttonsHtml}
        //                                             </div>
        //                                         </li>
        //                                     </ul>
        //                                 </div>
        //                                 <div class="modal-footer">
        //                                     <!-- Modal footer content goes here -->
        //                                 </div>
        //                             </div>
        //                         </div>
        //                     </div>`;

        //                 $('body').append(modalHtml);
        //             });

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

        // // Function to generate pagination links
        // function generatePaginationLinks(response) {
        //     var paginationHtml = '<ul class="pagination">';
        //     for (var i = 1; i <= response.last_page; i++) {
        //         var activeClass = (i === response.current_page) ? 'active' : '';
        //         paginationHtml += '<li class="page-item ' + activeClass +
        //             '"><a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>';
        //     }
        //     paginationHtml += '</ul>';
        //     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.broadcasts.filter') }}",
        //         data: formData,
        //         success: function(response) {
        //             // Clear existing rows and modals
        //             $('#broadcastTableBody').empty();
        //             $('.modal').remove(); // Clear all modals

        //             response.broadcasts.forEach(function(broadcast) {
        //                 // Convert the datetime string to a Date object
        //                 var created_at = new Date(broadcast.created_at)
        //                     .toLocaleString();
        //                 var schedule_date = new Date(broadcast.schedule_date)
        //                     .toLocaleString();

        //                 var rowHtml = `
        //                 <tr>
        //                     <td>${broadcast.name}</td>
        //                     <td>${broadcast.business.name}</td>
        //                     <td>${broadcast.user.name}</td>
        //                     <td>${broadcast.lang}</td>
        //                     <td>${broadcast.success_sent}</td>
        //                     <td>${broadcast.failed_sent}</td>
        //                     <td>${schedule_date}</td>
        //                     <td>${created_at}</td>
        //                     <td>
        //                         <div class="d-flex">
        //                             <button type="button" class="btn btn-info shadow btn-xs sharp"
        //                                 data-bs-toggle="modal" data-bs-target="#previewModal_${broadcast.id}">
        //                                 <i class="fa fa-eye"></i>
        //                             </button>
        //                         </div>
        //                     </td>
        //                 </tr>`;
        //                 $('#broadcastTableBody').append(rowHtml);

        //                 // Add modal dynamically
        //                 var modalHtml = `
        //                     <div class="modal fade" id="previewModal_${broadcast.id}" tabindex="-1" aria-labelledby="previewModalLabel_${broadcast.id}" aria-hidden="true">
        //                         <div class="modal-dialog" role="document">
        //                             <div class="modal-content">
        //                                 <div class="modal-header">
        //                                     <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        //                                 </div>
        //                                 <div class="modal-body">
        //                                     <ul id="templates-view">
        //                                         <li class="template-result template-result-${broadcast.template.id}" data-templateid="${broadcast.template.id}" data-category="${broadcast.template.category_name}" data-language="${broadcast.template.lang}" data-body="${broadcast.template.body}" data-media="${broadcast.template.media_type}">
        //                                             <h3 class="template-name">${broadcast.template.name}</h3>
        //                                             <span class="template-title">${broadcast.template.title}</span>
        //                                             ${broadcast.template.media_type === 1 ? `
        //                                             <div class="media_type media_type_${broadcast.template.media_type_name}">
        //                                                 <img style="width: 300px; height: 121px;" src="{{ asset('storage/') }}/${broadcast.files[0].path}">
        //                                             </div>` : ''}
        //                                             <style>
        //                                                 #templates-results .media_type.media_type_image::after, #templates-view .media_type.media_type_image::after {
        //                                                     content: '';
        //                                                 }
        //                                             </style>
        //                                             <p class="template-body">${broadcast.template.body}</p>
        //                                             ${broadcast.template.buttons ? `
        //                                             <div class="buttons-container">
        //                                                 ${broadcast.template.buttons.map(button => `
        //                                                     ${button.type === 'PHONE_NUMBER' ? `
        //                                                         <button class="btn btn-primary btn-PHONE_NUMBER">${button.phone_number}</button>` :
        //                                                     button.type === 'URL' ? `
        //                                                         <a href="${button.url}" class="btn btn-primary btn-URL">${button.text || 'Visit'}</a>` : ''}
        //                                                 `).join('')}
        //                                             </div>` : ''}
        //                                         </li>
        //                                     </ul>
        //                                 </div>
        //                                 <div class="modal-footer">
        //                                     <!-- Modal footer content goes here -->
        //                                 </div>
        //                             </div>
        //                         </div>
        //                     </div>`;

        //                 $('body').append(modalHtml);
        //             });

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


    });
</script>