@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.templates')}}">@lang('admin.templates')</a></li>
                </ol>
            </div>
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4>@lang('admin.templates')</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('user.media')</th>
                                        <th>@lang('user.language')</th>
                                        <th>@lang('admin.status')</th>
                                        <th>@lang('admin.approval_status')</th>
                                        <th>@lang('admin.created_at')</th>
                                        <th>@lang('admin.actions')</th>
                                    </tr>
                                </thead>
                                <tbody id="templateTableBody">
                                    @foreach ($templates as $template)
                                        <tr>
                                            <td>{{ $template->name }}</td>
                                            <td>{{ $template->business->name }}</td>
                                            <td>{{ $template->user->name ?? '' }}</td>
                                            <td>
                                                @if ($template->media_type == 0)
                                                    <i class="fas fa-ban"></i>
                                                @elseif($template->media_type == 1)
                                                    <i class="fas fa-image"></i>
                                                @elseif($template->media_type == 2)
                                                    <i class="fas fa-video"></i>
                                                @elseif($template->media_type == 3)
                                                    <i class="fas fa-file-alt"></i>
                                                @endif
                                            </td>
                                            <td>{{ $template->lang }}</td>
                                            <td>
                                                <span
                                                    class="badge  text-bg-{{ $template->status == 1 ? 'success' : 'warning' }}">
                                                    @if ($template->status == 1)
                                                        @lang('user.active')
                                                    @else
                                                        @lang('user.Inactive')
                                                    @endif
                                                </span>
                                            </td>
                                            <td>
                                                <span
                                                    class="badge text-bg-{{ $template->approval_status == 0 ? 'warning' : ($template->approval_status == 1 ? 'success' : 'danger') }}">
                                                    @switch($template->approval_status)
                                                        @case(0)
                                                            @lang('user.pending')
                                                        @break

                                                        @case(1)
                                                            @lang('user.accepted')
                                                        @break

                                                        @case(2)
                                                            @lang('user.rejected')
                                                        @break

                                                        @default
                                                            @lang('user.unknown_status')
                                                    @endswitch
                                                </span>
                                            </td>
                                            <td>{{ $template->created_at->format('d/m/Y') }}</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_{{ $template->id }}"><i
                                                            class="fa fa-eye"></i></button>
                                                </div>
                                            </td>
                                        </tr>

                                        <!-- Modal -->
                                        <div class="modal fade" id="previewModal_{{ $template->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-{{ $template->id }}"
                                                                data-templateid="{{ $template->id }}"
                                                                data-category="{{ $template->category_name }}"
                                                                data-language="{{ $template->lang }}"
                                                                data-body="{{ $template->body }}"
                                                                data-media="{{ $template->media_type }}">
                                                                <h3 class="template-name">{{ $template->name }}</h3>
                                                                <span class="template-title">{{ $template->title }}</span>
                                                                @if ($template->media_type == 1)
                                                                    <div
                                                                        class="media_type media_type_{{ $template->media_type_name }}">
                                                                        @if ($template->file)
                                                                            <img style="width: 300px;height: 121px;"
                                                                                src="{{ asset('storage/' . $template->file->path) }}">
                                                                        @else
                                                                            <img src="{{ asset('dummy-image.png') }}"
                                                                                alt="user Image"
                                                                                class="img-fluid rounded-circle"
                                                                                style="max-width: 100px; height: auto;">
                                                                        @endif
                                                                    </div>
                                                                @elseif($template->media_type == 2)
                                                                    <div
                                                                        class="media_type media_type_{{ $template->media_type_name }}">
                                                                        @if ($template->file)
                                                                            <img style="width: 300px;height: 121px;"
                                                                                src="{{ asset('storage/' . $template->file->path) }}">
                                                                        @else
                                                                            <img src="{{ asset('dummy-video.png') }}"
                                                                                alt="user Image"
                                                                                class="img-fluid rounded-circle"
                                                                                style="max-width: 100px; height: auto;">
                                                                        @endif
                                                                    </div>
                                                                @elseif($template->media_type == 3)
                                                                    <div
                                                                        class="media_type media_type_{{ $template->media_type_name }}">
                                                                        @if ($template->file)
                                                                            <img style="width: 300px;height: 121px;"
                                                                                src="{{ asset('storage/' . $template->file->path) }}">
                                                                        @else
                                                                            <img src="{{ asset('dummy-doc.png') }}"
                                                                                alt="user Image"
                                                                                class="img-fluid rounded-circle"
                                                                                style="max-width: 100px; height: auto;">
                                                                        @endif
                                                                    </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">{{ $template->body }}</p>
                                                                @if ($template->buttons)
                                                                    <div class="buttons-container">
                                                                        @foreach (json_decode($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>
                                                        @if($template->approval_status == 2 && !empty($template->reason))
                                                            <div class="row">
                                                                <div class="col-md-3">
                                                                    <label class="form-label">@lang('user.rejection_reason')</label>
                                                                </div>
                                                                <div class="col-md-9">{{ $template->reason }}</div>
                                                            </div>
                                                        @endif
                                                    </div>
                                                    <div class="modal-footer">

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </tbody>
                            </table>
                            {{ $templates->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.templates.filter')}}",
        //         data: formData,
        //         success: function(response) {
        //             // Update the table with the filtered data
        //             $('#templateTableBody').html(''); // Clear the existing rows
        //             $.each(response.templates, function(index, template) {
        //                 var rowHtml = `
        //                 <tr>
        //                     <td>${template.name}</td>
        //                     <td>${template.business.name}</td>
        //                     <td>${template.user.name}</td>
        //                     <td>
        //                         ${template.media_type === 0 ? '<i class="fas fa-ban"></i>' :
        //                         template.media_type === 1 ? '<i class="fas fa-image"></i>' :
        //                         template.media_type === 2 ? '<i class="fas fa-video"></i>' :
        //                         template.media_type === 3 ? '<i class="fas fa-file-alt"></i>' : ''}
        //                     </td>
        //                     <td>${template.lang}</td>
        //                     <td>
        //                         <span class="badge text-bg-${template.status == 1 ? 'success' : 'warning'}">
        //                             ${template.status == 1 ? '@lang('user.active')' : '@lang('user.Inactive')'}
        //                         </span>
        //                     </td>
        //                     <td>
        //                         <span class="badge text-bg-${template.approval_status == 0 ? 'warning' : 
        //                             template.approval_status == 1 ? 'success' : 'danger'}">
        //                             ${template.approval_status == 0 ? '@lang('user.pending')' :
        //                             template.approval_status == 1 ? '@lang('user.accepted')' :
        //                             template.approval_status == 2 ? '@lang('user.rejected')' :
        //                             '@lang('user.unknown_status')'}
        //                         </span>
        //                     </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_${template.id}">
        //                                 <i class="fa fa-eye"></i>
        //                             </button>
        //                         </div>
        //                     </td>
        //                 </tr>`;
        //                 $('#templateTableBody').append(rowHtml);

        //                 // Add modal dynamically
        //                 var modalHtml = `
        //                 <div class="modal fade" id="previewModal_${template.id}" tabindex="-1" aria-labelledby="previewModalLabel_${template.id}" aria-hidden="true">
        //                     <div class="modal-dialog modal-lg">
        //                         <div class="modal-content">
        //                             <div class="modal-header">
        //                                 <h5 class="modal-title" id="previewModalLabel_${template.id}">${template.name}</h5>
        //                                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        //                             </div>
        //                             <div class="modal-body">
        //                                 <!-- Your modal content here -->
        //                                 <p>Template ID: ${template.id}</p>
        //                                 <p>Business Name: ${template.business ? template.business.name : 'N/A'}</p>
        //                                 <!-- Add other template details as needed -->
        //                             </div>
        //                             <div class="modal-footer">
        //                                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        //                                 <!-- Add other modal footer buttons as needed -->
        //                             </div>
        //                         </div>
        //                     </div>
        //                 </div>`;

        //                 $('body').append(modalHtml);
        //             });
        //             $('.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.templates.filter') }}",
        //         data: formData,
        //         success: function(response) {
        //             // Clear existing rows and modals
        //             $('#templateTableBody').empty();
        //             $('.modal').remove(); // Clear all modals

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

        //                 var rowHtml = `
        //                 <tr>
        //                     <td>${template.name}</td>
        //                     <td>${template.business.name}</td>
        //                     <td>${template.user.name}</td>
        //                     <td>
        //                         ${template.media_type === 0 ? '<i class="fas fa-ban"></i>' :
        //                         template.media_type === 1 ? '<i class="fas fa-image"></i>' :
        //                         template.media_type === 2 ? '<i class="fas fa-video"></i>' :
        //                         template.media_type === 3 ? '<i class="fas fa-file-alt"></i>' : ''}
        //                     </td>
        //                     <td>${template.lang}</td>
        //                     <td>
        //                         <span class="badge text-bg-${template.status == 1 ? 'success' : 'warning'}">
        //                             ${template.status == 1 ? '@lang('user.active')' : '@lang('user.Inactive')'}
        //                         </span>
        //                     </td>
        //                     <td>
        //                         <span class="badge text-bg-${template.approval_status == 0 ? 'warning' : 
        //                             template.approval_status == 1 ? 'success' : 'danger'}">
        //                             ${template.approval_status == 0 ? '@lang('user.pending')' :
        //                             template.approval_status == 1 ? '@lang('user.accepted')' :
        //                             template.approval_status == 2 ? '@lang('user.rejected')' :
        //                             '@lang('user.unknown_status')'}
        //                         </span>
        //                     </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_${template.id}">
        //                                 <i class="fa fa-eye"></i>
        //                             </button>
        //                         </div>
        //                     </td>
        //                 </tr>`;
        //                 $('#templateTableBody').append(rowHtml);

        //                 // Add modal dynamically
        //                 var modalHtml = `
        //                 <div class="modal fade" id="previewModal_${template.id}" tabindex="-1" aria-labelledby="previewModalLabel_${template.id}" aria-hidden="true">
        //                     <div class="modal-dialog modal-lg">
        //                         <div class="modal-content">
        //                             <div class="modal-header">
        //                                 <h5 class="modal-title" id="previewModalLabel_${template.id}">${template.name}</h5>
        //                                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        //                             </div>
        //                             <div class="modal-body">
        //                                 <!-- Your modal content here -->
        //                                 <p>Template ID: ${template.id}</p>
        //                                 <p>Business Name: ${template.business ? template.business.name : 'N/A'}</p>
        //                                 <!-- Add other template details as needed -->
        //                             </div>
        //                             <div class="modal-footer">
        //                                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        //                                 <!-- Add other modal footer buttons as needed -->
        //                             </div>
        //                         </div>
        //                     </div>
        //                 </div>`;

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

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

    });
</script>