@extends('layouts.admin')

@section('title', __('Portfolio Projects'))

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard', ['locale' => app()->getLocale()]) }}">{{ __('Dashboard') }}</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.portfolio.dashboard', ['locale' => app()->getLocale()]) }}">{{ __('Portfolio') }}</a></li>
                        <li class="breadcrumb-item active">{{ __('Projects') }}</li>
                    </ol>
                </div>
                <h4 class="page-title">{{ __('Portfolio Projects') }}</h4>
            </div>
        </div>
    </div>

    <!-- Filters and Search -->
    @include('admin.portfolio.partials.filters')

    <!-- Bulk Actions -->
    <div class="row mb-3">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <div class="form-check form-switch form-switch-md mb-3">
                                <input class="form-check-input" type="checkbox" id="bulkSelectAll" data-bs-toggle="tooltip" title="{{ __('Select All') }}">
                                <label class="form-check-label" for="bulkSelectAll">{{ __('Select All') }}</label>
                            </div>
                            <select class="form-select d-inline-block w-auto" id="bulkAction" style="width: auto;">
                                <option value="">{{ __('Bulk Actions') }}</option>
                                <option value="active">{{ __('Activate') }}</option>
                                <option value="inactive">{{ __('Deactivate') }}</option>
                                <option value="featured">{{ __('Feature') }}</option>
                                <option value="unfeatured">{{ __('Unfeature') }}</option>
                                <option value="delete">{{ __('Delete') }}</option>
                            </select>
                            <button type="button" class="btn btn-primary btn-sm ms-2" id="applyBulkAction" disabled>{{ __('Apply') }}</button>
                        </div>
                        <div class="col-md-6 text-end">
                            <a href="{{ route('admin.portfolio.projects.create', ['locale' => app()->getLocale()]) }}" class="btn btn-success">
                                <i class="mdi mdi-plus me-1"></i>{{ __('Add New Project') }}
                            </a>
                            <a href="#" class="btn btn-outline-secondary ms-2" onclick="exportProjects()">
                                <i class="mdi mdi-file-export me-1"></i>{{ __('Export') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Projects Table -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    @if($projects->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-centered table-nowrap mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th class="w-1">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="selectAll">
                                                <label class="form-check-label" for="selectAll">&nbsp;</label>
                                            </div>
                                        </th>
                                        <th>{{ __('Project') }}</th>
                                        <th>{{ __('Category') }}</th>
                                        <th>{{ __('Client') }}</th>
                                        <th>{{ __('Status') }}</th>
                                        <th>{{ __('Views') }}</th>
                                        <th>{{ __('Budget') }}</th>
                                        <th>{{ __('Created') }}</th>
                                        <th>{{ __('Actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($projects as $project)
                                        <tr>
                                            <td>
                                                <div class="form-check">
                                                    <input class="form-check-input project-checkbox" type="checkbox" value="{{ $project->id }}" id="project_{{ $project->id }}">
                                                    <label class="form-check-label" for="project_{{ $project->id }}">&nbsp;</label>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    @if($project->featured_image)
                                                        <img src="{{ asset('storage/' . $project->featured_image) }}" alt="{{ $project->title_en }}" class="rounded me-3" width="50" height="50" style="object-fit: cover;">
                                                    @else
                                                        <div class="bg-light rounded me-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                                                            <i class="mdi mdi-image-outline text-muted fs-4"></i>
                                                        </div>
                                                    @endif
                                                    <div>
                                                        <h5 class="m-0 fw-normal">{{ $project->title_en }}</h5>
                                                        @if($project->title_ar)
                                                            <p class="text-muted mb-0 small">{{ $project->title_ar }}</p>
                                                        @endif
                                                        <p class="text-muted mb-0 small">{{ Str::limit($project->challenge_en, 50) }}</p>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                @if($project->category)
                                                    <span class="badge bg-primary">{{ $project->category->name_en }}</span>
                                                    @if($project->category->name_ar)
                                                        <br><small class="text-muted">{{ $project->category->name_ar }}</small>
                                                    @endif
                                                @else
                                                    <span class="text-muted">{{ __('No Category') }}</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($project->client)
                                                    <span class="badge bg-info">{{ $project->client->name }}</span>
                                                @else
                                                    <span class="text-muted">{{ __('No Client') }}</span>
                                                @endif
                                            </td>
                                            <td>
                                                <div class="d-flex flex-column gap-1">
                                                    @if($project->is_active)
                                                        <span class="badge bg-success">{{ __('Active') }}</span>
                                                    @else
                                                        <span class="badge bg-secondary">{{ __('Inactive') }}</span>
                                                    @endif
                                                    @if($project->is_featured)
                                                        <span class="badge bg-warning">{{ __('Featured') }}</span>
                                                    @endif
                                                </div>
                                            </td>
                                            <td>
                                                <span class="badge bg-info">{{ number_format($project->views_count) }}</span>
                                            </td>
                                            <td>
                                                @if($project->budget)
                                                    ${{ number_format($project->budget, 2) }}
                                                @else
                                                    <span class="text-muted">{{ __('N/A') }}</span>
                                                @endif
                                            </td>
                                            <td>{{ $project->created_at->format('M d, Y') }}</td>
                                            <td>
                                                <div class="btn-group" role="group">
                                                    <a href="{{ route('admin.portfolio.projects.preview', ['locale' => app()->getLocale(), 'portfolio' => $project]) }}" class="btn btn-sm btn-outline-info" data-bs-toggle="tooltip" title="{{ __('Preview') }}" target="_blank">
                                                        <i class="mdi mdi-eye"></i>
                                                    </a>
                                                    <a href="{{ route('admin.portfolio.projects.show', ['locale' => app()->getLocale(), 'portfolio' => $project]) }}" class="btn btn-sm btn-outline-primary" data-bs-toggle="tooltip" title="{{ __('View') }}">
                                                        <i class="mdi mdi-eye-outline"></i>
                                                    </a>
                                                    <a href="{{ route('admin.portfolio.projects.edit', ['locale' => app()->getLocale(), 'portfolio' => $project]) }}" class="btn btn-sm btn-outline-secondary" data-bs-toggle="tooltip" title="{{ __('Edit') }}">
                                                        <i class="mdi mdi-pencil"></i>
                                                    </a>
                                                    <button type="button" class="btn btn-sm btn-outline-danger delete-project" data-id="{{ $project->id }}" data-bs-toggle="tooltip" title="{{ __('Delete') }}">
                                                        <i class="mdi mdi-delete"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-outline-warning duplicate-project" data-id="{{ $project->id }}" data-bs-toggle="tooltip" title="{{ __('Duplicate') }}">
                                                        <i class="mdi mdi-content-duplicate"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <!-- Pagination -->
                        <div class="d-flex justify-content-end mt-3">
                            {{ $projects->appends(request()->query())->links() }}
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="mdi mdi-briefcase-outline display-4 text-muted"></i>
                            <h4 class="mt-3">{{ __('No Projects Found') }}</h4>
                            <p class="text-muted">{{ __('Get started by creating your first portfolio project.') }}</p>
                            <a href="{{ route('admin.portfolio.projects.create', ['locale' => app()->getLocale()]) }}" class="btn btn-primary">{{ __('Create Project') }}</a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bulk Action Modal -->
<div class="modal fade" id="bulkActionModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('Confirm Bulk Action') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p id="bulkActionMessage"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                <button type="button" class="btn btn-primary" id="confirmBulkAction">{{ __('Confirm') }}</button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('Confirm Delete') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>{{ __('Are you sure you want to delete this project? This action cannot be undone.') }}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                <form id="deleteForm" method="POST" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">{{ __('Delete') }}</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.table th {
    border-top: none;
    font-weight: 600;
    color: #495057;
}

.card {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid #dee2e6;
}

.btn-group .btn {
    border-radius: 0;
}

.btn-group .btn:first-child {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.btn-group .btn:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

.img-thumbnail {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.badge {
    font-size: 0.75em;
}
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    let selectedProjects = [];

    // Select All Checkbox
    $('#selectAll').on('change', function() {
        $('.project-checkbox').prop('checked', this.checked);
        toggleBulkActionButton();
    });

    // Individual Checkboxes
    $('.project-checkbox').on('change', function() {
        $('#selectAll').prop('checked', $('.project-checkbox:checked').length === $('.project-checkbox').length);
        toggleBulkActionButton();
    });

    function toggleBulkActionButton() {
        const checkedCount = $('.project-checkbox:checked').length;
        $('#applyBulkAction').prop('disabled', checkedCount === 0);
        selectedProjects = $('.project-checkbox:checked').map(function() { return $(this).val(); }).get();
    }

    // Bulk Action Selection
    $('#bulkAction').on('change', function() {
        const action = $(this).val();
        if (action && selectedProjects.length > 0) {
            let message = '';
            switch(action) {
                case 'active':
                    message = `{{ __('Activate') }} ${selectedProjects.length} {{ __('project(s)?') }}`;
                    break;
                case 'inactive':
                    message = `{{ __('Deactivate') }} ${selectedProjects.length} {{ __('project(s)?') }}`;
                    break;
                case 'featured':
                    message = `{{ __('Feature') }} ${selectedProjects.length} {{ __('project(s)?') }}`;
                    break;
                case 'unfeatured':
                    message = `{{ __('Unfeature') }} ${selectedProjects.length} {{ __('project(s)?') }}`;
                    break;
                case 'delete':
                    message = `{{ __('Delete') }} ${selectedProjects.length} {{ __('project(s)?') }}`;
                    break;
            }
            $('#bulkActionMessage').html(message);
            $('#bulkActionModal').modal('show');
        }
    });

    // Apply Bulk Action
    $('#confirmBulkAction').on('click', function() {
        const action = $('#bulkAction').val();
        const url = `{{ route('admin.portfolio.projects.bulk-action', ['locale' => app()->getLocale()]) }}`;

        $.ajax({
            url: url,
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                action: action,
                ids: selectedProjects
            },
            success: function(response) {
                $('#bulkActionModal').modal('hide');
                location.reload();
            },
            error: function(xhr) {
                $('#bulkActionModal').modal('hide');
                showAlert('error', xhr.responseJSON?.message || '{{ __("An error occurred") }}');
            }
        });
    });

    // Delete Project
    $('.delete-project').on('click', function() {
        const id = $(this).data('id');
        $('#deleteForm').attr('action', `{{ route('admin.portfolio.projects.destroy', ['locale' => app()->getLocale(), 'portfolio' => ':id']) }}`.replace(':id', id));
        $('#deleteModal').modal('show');
    });

    // Duplicate Project
    $('.duplicate-project').on('click', function() {
        const id = $(this).data('id');
        const url = `{{ route('admin.portfolio.projects.duplicate', ['locale' => app()->getLocale(), 'portfolio' => ':id']) }}`.replace(':id', id);

        if (confirm('{{ __("Are you sure you want to duplicate this project?") }}')) {
            $.ajax({
                url: url,
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    showAlert('success', response.message);
                    setTimeout(() => location.reload(), 1500);
                },
                error: function(xhr) {
                    showAlert('error', xhr.responseJSON?.message || '{{ __("An error occurred") }}');
                }
            });
        }
    });

    // Toggle Featured/Active
    $('.toggle-featured, .toggle-active').on('click', function(e) {
        e.preventDefault();
        const id = $(this).data('id');
        const type = $(this).data('type');
        const url = `{{ route('admin.portfolio.projects.toggle-featured', ['locale' => app()->getLocale(), 'portfolio' => ':id']) }}`.replace(':id', id);

        $.ajax({
            url: url,
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                type: type
            },
            success: function(response) {
                showAlert('success', response.message);
                location.reload();
            },
            error: function(xhr) {
                showAlert('error', xhr.responseJSON?.message || '{{ __("An error occurred") }}');
            }
        });
    });

    // Search and Filter
    $('#searchForm').on('submit', function(e) {
        e.preventDefault();
        const formData = $(this).serialize();
        const url = new URL(window.location);
        Object.keys(formData).forEach(key => {
            if (formData[key]) {
                url.searchParams.set(key, formData[key]);
            } else {
                url.searchParams.delete(key);
            }
        });
        window.location = url;
    });

    // Export Projects
    function exportProjects() {
        const url = `{{ route('admin.portfolio.projects.index', ['locale' => app()->getLocale()]) }}?export=csv`;
        window.location.href = url;
    }

    // Initialize tooltips
    $('[data-bs-toggle="tooltip"]').tooltip();
});

function showAlert(type, message) {
    // Implement your alert system here
    alert(`${type.toUpperCase()}: ${message}`);
}
</script>
@endpush