@extends('layouts.admin')

@section('title', __('Products'))

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">{{ __('Products') }}</h1>
            <p class="mb-0 text-muted">{{ __('Manage your software products') }}</p>
        </div>
        <div>
            <a href="{{ route('admin.products.create', ['locale' => app()->getLocale()]) }}" class="btn btn-primary">
                <i class="fas fa-plus"></i> {{ __('New Product') }}
            </a>
        </div>
    </div>

    <!-- Filters -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">{{ __('Filters') }}</h6>
        </div>
        <div class="card-body">
            <form id="filterForm" class="row">
                <div class="col-md-3">
                    <label for="category_id">{{ __('Category') }}</label>
                    <select name="category_id" id="category_id" class="form-control">
                        <option value="">{{ __('All Categories') }}</option>
                        @foreach($categories as $category)
                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="is_featured">{{ __('Featured') }}</label>
                    <select name="is_featured" id="is_featured" class="form-control">
                        <option value="">{{ __('All') }}</option>
                        <option value="1">{{ __('Featured Only') }}</option>
                        <option value="0">{{ __('Not Featured') }}</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="is_active">{{ __('Status') }}</label>
                    <select name="is_active" id="is_active" class="form-control">
                        <option value="">{{ __('All') }}</option>
                        <option value="1">{{ __('Active') }}</option>
                        <option value="0">{{ __('Inactive') }}</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="version">{{ __('Version') }}</label>
                    <input type="text" name="version" id="version" class="form-control" placeholder="{{ __('Search by version') }}">
                </div>
                <div class="col-md-6 mt-3">
                    <label for="date_from">{{ __('Release Date From') }}</label>
                    <input type="date" name="date_from" id="date_from" class="form-control">
                </div>
                <div class="col-md-6 mt-3">
                    <label for="date_to">{{ __('Release Date To') }}</label>
                    <input type="date" name="date_to" id="date_to" class="form-control">
                </div>
                <div class="col-md-12 mt-3">
                    <button type="button" id="applyFilters" class="btn btn-primary">
                        <i class="fas fa-filter"></i> {{ __('Apply Filters') }}
                    </button>
                    <button type="button" id="clearFilters" class="btn btn-secondary">
                        <i class="fas fa-times"></i> {{ __('Clear Filters') }}
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Bulk Actions -->
    <div class="card shadow mb-4" id="bulkActions" style="display: none;">
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <span id="selectedCount">0</span> {{ __('products selected') }}
                </div>
                <div class="col-md-6 text-right">
                    <button type="button" id="bulkActivate" class="btn btn-success btn-sm">
                        <i class="fas fa-check"></i> {{ __('Activate') }}
                    </button>
                    <button type="button" id="bulkDeactivate" class="btn btn-warning btn-sm">
                        <i class="fas fa-ban"></i> {{ __('Deactivate') }}
                    </button>
                    <button type="button" id="bulkFeature" class="btn btn-info btn-sm">
                        <i class="fas fa-star"></i> {{ __('Feature') }}
                    </button>
                    <button type="button" id="bulkUnfeature" class="btn btn-outline-info btn-sm">
                        <i class="fas fa-star-half-alt"></i> {{ __('Unfeature') }}
                    </button>
                    <button type="button" id="bulkDelete" class="btn btn-danger btn-sm">
                        <i class="fas fa-trash"></i> {{ __('Delete') }}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Products Table -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">{{ __('Products') }}</h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="productsTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th width="30">
                                <input type="checkbox" id="selectAll">
                            </th>
                            <th>{{ __('Name') }}</th>
                            <th>{{ __('Category') }}</th>
                            <th>{{ __('Version') }}</th>
                            <th>{{ __('Status') }}</th>
                            <th>{{ __('Featured') }}</th>
                            <th>{{ __('Release Date') }}</th>
                            <th>{{ __('Views') }}</th>
                            <th>{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Data will be loaded via AJAX -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@endsection

@push('styles')
<link href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
@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>
$(document).ready(function() {
    let table = $('#productsTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("admin.products.list", ["locale" => app()->getLocale()]) }}',
            data: function(d) {
                d.category_id = $('#category_id').val();
                d.is_featured = $('#is_featured').val();
                d.is_active = $('#is_active').val();
                d.version = $('#version').val();
                d.date_from = $('#date_from').val();
                d.date_to = $('#date_to').val();
            }
        },
        columns: [
            {
                data: null,
                orderable: false,
                render: function(data, type, row) {
                    return '<input type="checkbox" class="product-checkbox" value="' + row.id + '">';
                }
            },
            {
                data: 'name',
                render: function(data, type, row) {
                    let featuredIcon = row.is_featured ? ' <span class="text-warning">⭐</span>' : '';
                    return '<a href="{{ url("/' + app.locale + '/products/") }}' + row.slug_en + '" target="_blank" class="font-weight-bold">' + data + '</a>' + featuredIcon;
                }
            },
            {
                data: 'category',
                render: function(data, type, row) {
                    return data ? data.name : '{{ __("Uncategorized") }}';
                }
            },
            {
                data: 'version',
                render: function(data, type, row) {
                    return data || '{{ __("N/A") }}';
                }
            },
            {
                data: 'is_active',
                render: function(data, type, row) {
                    let badgeClass = data ? 'success' : 'secondary';
                    let statusText = data ? '{{ __("Active") }}' : '{{ __("Inactive") }}';
                    return '<span class="badge badge-' + badgeClass + '">' + statusText + '</span>';
                }
            },
            {
                data: 'is_featured',
                render: function(data, type, row) {
                    let badgeClass = data ? 'warning' : 'light';
                    let featuredText = data ? '{{ __("Featured") }}' : '{{ __("Not Featured") }}';
                    return '<span class="badge badge-' + badgeClass + '">' + featuredText + '</span>';
                }
            },
            {
                data: 'release_date',
                render: function(data, type, row) {
                    return data ? new Date(data).toLocaleDateString() : '{{ __("Not set") }}';
                }
            },
            {
                data: 'views_count',
                render: function(data, type, row) {
                    return data || 0;
                }
            },
            {
                data: 'actions',
                orderable: false,
                searchable: false
            }
        ],
        order: [[6, 'desc']],
        pageLength: 25,
        language: {
            url: '//cdn.datatables.net/plug-ins/1.10.24/i18n/{{ app()->getLocale() }}.json'
        }
    });

    // Apply filters
    $('#applyFilters').on('click', function() {
        table.ajax.reload();
    });

    // Clear filters
    $('#clearFilters').on('click', function() {
        $('#filterForm')[0].reset();
        table.ajax.reload();
    });

    // Select all checkbox
    $('#selectAll').on('change', function() {
        $('.product-checkbox').prop('checked', $(this).prop('checked'));
        updateBulkActions();
    });

    // Individual checkboxes
    $(document).on('change', '.product-checkbox', function() {
        updateBulkActions();
    });

    function updateBulkActions() {
        let checkedBoxes = $('.product-checkbox:checked');
        if (checkedBoxes.length > 0) {
            $('#bulkActions').show();
            $('#selectedCount').text(checkedBoxes.length);
        } else {
            $('#bulkActions').hide();
        }
    }

    // Bulk actions
    $('#bulkActivate').on('click', performBulkAction.bind(null, 'activate'));
    $('#bulkDeactivate').on('click', performBulkAction.bind(null, 'deactivate'));
    $('#bulkFeature').on('click', performBulkAction.bind(null, 'feature'));
    $('#bulkUnfeature').on('click', performBulkAction.bind(null, 'unfeature'));
    $('#bulkDelete').on('click', performBulkAction.bind(null, 'delete'));

    function performBulkAction(action) {
        let ids = $('.product-checkbox:checked').map(function() {
            return $(this).val();
        }).get();

        if (ids.length === 0) return;

        if (action === 'delete' && !confirm('{{ __("Are you sure you want to delete selected products?") }}')) {
            return;
        }

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

    // Delete single product with SweetAlert
    $(document).on('click', '.delete-product', function(e) {
        e.preventDefault();
        let deleteUrl = $(this).data('url');

        Swal.fire({
            title: '{{ __("Are you sure?") }}',
            text: "{{ __('This action cannot be undone!') }}",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: '{{ __("Yes, delete it!") }}',
            cancelButtonText: '{{ __("Cancel") }}'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: deleteUrl,
                    method: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire(
                                '{{ __("Deleted!") }}',
                                response.message,
                                'success'
                            );
                            table.ajax.reload();
                        } else {
                            Swal.fire(
                                '{{ __("Error!") }}',
                                response.message,
                                'error'
                            );
                        }
                    },
                    error: function() {
                        Swal.fire(
                            '{{ __("Error!") }}',
                            '{{ __("An error occurred while deleting the product.") }}',
                            'error'
                        );
                    }
                });
            }
        });
    });
});
</script>
@endpush