@extends('layouts.admin')

@section('title', __('Testimonials List'))

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0 text-gray-800">{{ __('Testimonials') }}</h1>
                    <p class="text-muted">{{ __('Manage and view all client testimonials') }}</p>
                </div>
                <div class="d-flex">
                    <a href="{{ route('admin.testimonials.dashboard', ['locale' => app()->getLocale()]) }}"
                       class="btn btn-outline-secondary mr-2">
                        <i class="fas fa-chart-bar"></i> {{ __('Dashboard') }}
                    </a>
                    <a href="{{ route('admin.testimonials.create', ['locale' => app()->getLocale()]) }}"
                       class="btn btn-primary">
                        <i class="fas fa-plus"></i> {{ __('Add Testimonial') }}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="card mb-4">
        <div class="card-header">
            <h6 class="m-0 font-weight-bold text-primary">{{ __('Filters') }}</h6>
        </div>
        <div class="card-body">
            <form id="filterForm" method="GET" action="{{ route('admin.testimonials.list', ['locale' => app()->getLocale()]) }}">
                <div class="row">
                    <div class="col-md-3">
                        <label for="status">{{ __('Status') }}</label>
                        <select name="status" id="status" class="form-control">
                            <option value="">{{ __('All') }}</option>
                            <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>{{ __('Active') }}</option>
                            <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>{{ __('Inactive') }}</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="featured">{{ __('Featured') }}</label>
                        <select name="featured" id="featured" class="form-control">
                            <option value="">{{ __('All') }}</option>
                            <option value="featured" {{ request('featured') == 'featured' ? 'selected' : '' }}>{{ __('Featured') }}</option>
                            <option value="not-featured" {{ request('featured') == 'not-featured' ? 'selected' : '' }}>{{ __('Not Featured') }}</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label for="rating">{{ __('Rating') }}</label>
                        <select name="rating" id="rating" class="form-control">
                            <option value="">{{ __('All') }}</option>
                            @for($i = 1; $i <= 5; $i++)
                                <option value="{{ $i }}" {{ request('rating') == $i ? 'selected' : '' }}>{{ $i }} {{ Str::plural('Star', $i) }}</option>
                            @endfor
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label for="search">{{ __('Searchtestimonials') }}</label>
                        <input type="text" name="search" id="search" class="form-control" placeholder="{{ __('Client name or content') }}" value="{{ request('search') }}">
                    </div>
                    <div class="col-md-2 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary mr-2">{{ __('Filter') }}</button>
                        <a href="{{ route('admin.testimonials.list', ['locale' => app()->getLocale()]) }}" class="btn btn-outline-secondary">{{ __('Reset') }}</a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Bulk Actions -->
    <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h6 class="m-0 font-weight-bold text-primary">{{ __('Bulk Actions') }}</h6>
            <div class="form-group mb-0">
                <select id="bulkAction" class="form-control form-control-sm d-inline-block w-auto">
                    <option value="">{{ __('Select action') }}</option>
                    <option value="activate">{{ __('Activate') }}</option>
                    <option value="deactivate">{{ __('Deactivate') }}</option>
                    <option value="feature">{{ __('Feature') }}</option>
                    <option value="unfeature">{{ __('Unfeature') }}</option>
                    <option value="delete">{{ __('Delete') }}</option>
                </select>
                <button id="bulkSubmit" class="btn btn-sm btn-primary ml-2" disabled>{{ __('Apply') }}</button>
            </div>
        </div>
    </div>

    <!-- DataTable -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">{{ __('Testimonials List') }}</h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="testimonialsTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="selectAll"></th>
                            <th>{{ __('Client') }}</th>
                            <th>{{ __('Rating') }}</th>
                            <th>{{ __('Content') }}</th>
                            <th>{{ __('Project') }}</th>
                            <th>{{ __('Status') }}</th>
                            <th>{{ __('Created') }}</th>
                            <th>{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th><input type="checkbox" id="selectAllFooter"></th>
                            <th>{{ __('Client') }}</th>
                            <th>{{ __('Rating') }}</th>
                            <th>{{ __('Content') }}</th>
                            <th>{{ __('Project') }}</th>
                            <th>{{ __('Status') }}</th>
                            <th>{{ __('Created') }}</th>
                            <th>{{ __('Actions') }}</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>

@push('styles')
<link href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.bootstrap4.min.css" rel="stylesheet">
<style>
.rating-stars {
    color: #ffc107;
    font-size: 16px;
}

.status-badge {
    font-size: 0.75rem;
}

.avatar-sm {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.table-actions .btn {
    margin-right: 5px;
    margin-bottom: 5px;
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js"></script>

<script>
$(document).ready(function() {
    let table = $('#testimonialsTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("admin.testimonials.list", ["locale" => app()->getLocale()]) }}',
            data: function(d) {
                d.status = $('#status').val();
                d.featured = $('#featured').val();
                d.rating = $('#rating').val();
                d.search = $('#search').val();
            }
        },
        columns: [
            {
                data: null,
                orderable: false,
                searchable: false,
                render: function(data, type, row) {
                    return '<input type="checkbox" class="row-checkbox" value="' + row.id + '">';
                },
                width: "5%"
            },
            { data: 'client_info', name: 'client_name', orderable: true, searchable: true },
            { data: 'rating_display', name: 'rating', orderable: true, searchable: false },
            {
                data: 'content',
                name: 'content_en',
                orderable: true,
                searchable: true,
                render: function(data, type, row) {
                    if (type === 'display') {
                        return '<div class="text-truncate" style="max-width: 200px;" title="' + row.content_en + '">' + row.content_en + '</div>';
                    }
                    return data;
                }
            },
            {
                data: 'portfolio',
                name: 'portfolio.title',
                orderable: true,
                searchable: true,
                render: function(data, type, row) {
                    if (data && data.title) {
                        return '<span>' + data.title + '</span>';
                    }
                    return '<span class="text-muted">{{ __("No Project") }}</span>';
                },
                defaultContent: '<span class="text-muted">{{ __("No Project") }}</span>'
            },
            { data: 'status', name: 'is_active', orderable: true, searchable: false },
            {
                data: 'created_at',
                name: 'created_at',
                orderable: true,
                searchable: false,
                render: function(data, type, row) {
                    if (type === 'display') {
                        return moment(data).format('MMM DD, YYYY');
                    }
                    return data;
                }
            },
            {
                data: 'actions',
                name: 'actions',
                orderable: false,
                searchable: false,
                width: "15%"
            }
        ],
        order: [[6, 'desc']],
        pageLength: 25,
        lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "{{ __('All') }}"]],
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'copy',
                className: 'btn btn-sm btn-outline-secondary'
            },
            {
                extend: 'csv',
                className: 'btn btn-sm btn-outline-secondary',
                filename: 'testimonials_{{ date("Y-m-d") }}'
            },
            {
                extend: 'excel',
                className: 'btn btn-sm btn-outline-secondary',
                filename: 'testimonials_{{ date("Y-m-d") }}'
            },
            {
                extend: 'pdf',
                className: 'btn btn-sm btn-outline-secondary',
                filename: 'testimonials_{{ date("Y-m-d") }}'
            },
            {
                extend: 'print',
                className: 'btn btn-sm btn-outline-secondary'
            }
        ],
        language: {
            url: '//cdn.datatables.net/plug-ins/1.10.24/i18n/{{ app()->getLocale() }}.json'
        },
        drawCallback: function(settings) {
            // Re-apply checkboxes
            $('#selectAll, #selectAllFooter').off('change').on('change', function() {
                $('.row-checkbox').prop('checked', this.checked);
                toggleBulkButton();
            });

            $('.row-checkbox').off('change').on('change', function() {
                toggleBulkButton();
            });
        }
    });

    // Filter form submission
    $('#filterForm').on('submit', function(e) {
        e.preventDefault();
        table.ajax.reload();
    });

    // Search input
    $('#search').on('keyup', function() {
        table.ajax.reload();
    });

    // Bulk action
    $('#bulkAction').on('change', function() {
        toggleBulkButton();
    });

    $('#bulkSubmit').on('click', function() {
        let action = $('#bulkAction').val();
        let selectedIds = $('.row-checkbox:checked').map(function() {
            return this.value;
        }).get();

        if (selectedIds.length === 0) {
            alert('{{ __("Please select at least one testimonial.") }}');
            return;
        }

        if (!confirm('{{ __("Are you sure you want to") }} ' + action + ' {{ __("the selected testimonials?") }}')) {
            return;
        }

        $.ajax({
            url: '{{ route("admin.testimonials.bulk-action", ["locale" => app()->getLocale()]) }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                action: action,
                ids: selectedIds
            },
            success: function(response) {
                if (response.success) {
                    alert(response.message);
                    table.ajax.reload();
                    $('#bulkAction').val('');
                    toggleBulkButton();
                } else {
                    alert('{{ __("An error occurred.") }}');
                }
            },
            error: function() {
                alert('{{ __("An error occurred.") }}');
            }
        });
    });

    function toggleBulkButton() {
        let selectedCount = $('.row-checkbox:checked').length;
        let action = $('#bulkAction').val();

        $('#bulkSubmit').prop('disabled', selectedCount === 0 || action === '');
    }
});
</script>
@endpush
@endsection