@extends('layouts.admin')

@section('title', __('Media Library'))

@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">{{ __('Media Library') }}</h1>
            <p class="mb-0 text-muted">{{ __('Manage your media files and folders') }}</p>
        </div>
        <div>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#uploadModal">
                <i class="fas fa-upload"></i> {{ __('Upload Files') }}
            </button>
            <a href="{{ route('admin.media.analytics.index', ['locale' => app()->getLocale()]) }}" class="btn btn-info">
                <i class="fas fa-chart-line"></i> {{ __('Analytics') }}
            </a>
        </div>
    </div>

    <!-- Filters and Search -->
    <div class="card shadow mb-4">
        <div class="card-body">
            <form method="GET" action="{{ route('admin.media.index', ['locale' => app()->getLocale()]) }}" class="row">
                <div class="col-md-3">
                    <input type="text" name="search" class="form-control" placeholder="{{ __('Search files...') }}" value="{{ request('search') }}">
                </div>
                <div class="col-md-2">
                    <select name="folder_id" class="form-control">
                        <option value="">{{ __('All Folders') }}</option>
                        @foreach($folders as $folder)
                        <option value="{{ $folder->id }}" {{ request('folder_id') == $folder->id ? 'selected' : '' }}>
                            {{ $folder->name }}
                        </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <select name="type" class="form-control">
                        <option value="">{{ __('All Types') }}</option>
                        <option value="image" {{ request('type') == 'image' ? 'selected' : '' }}>{{ __('Images') }}</option>
                        <option value="video" {{ request('type') == 'video' ? 'selected' : '' }}>{{ __('Videos') }}</option>
                        <option value="audio" {{ request('type') == 'audio' ? 'selected' : '' }}>{{ __('Audio') }}</option>
                        <option value="document" {{ request('type') == 'document' ? 'selected' : '' }}>{{ __('Documents') }}</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <select name="sort" class="form-control">
                        <option value="created_at" {{ request('sort') == 'created_at' ? 'selected' : '' }}>{{ __('Newest First') }}</option>
                        <option value="name" {{ request('sort') == 'name' ? 'selected' : '' }}>{{ __('Name A-Z') }}</option>
                        <option value="size" {{ request('sort') == 'size' ? 'selected' : '' }}>{{ __('Size') }}</option>
                        <option value="views_count" {{ request('sort') == 'views_count' ? 'selected' : '' }}>{{ __('Most Viewed') }}</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-search"></i> {{ __('Search') }}
                    </button>
                    <a href="{{ route('admin.media.index', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary">
                        <i class="fas fa-times"></i> {{ __('Clear') }}
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Media Grid -->
    <div class="row">
        @if($media->count() > 0)
            @foreach($media as $file)
            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 mb-4">
                <div class="card h-100 shadow-sm media-card" data-id="{{ $file->id }}">
                    <div class="card-body p-2">
                        <div class="media-preview mb-2" style="height: 120px; overflow: hidden; border-radius: 5px;">
                            @if($file->isImage())
                                <img src="{{ $file->getUrl() }}" class="img-fluid w-100 h-100 object-fit-cover" alt="{{ $file->alt_text_en ?? $file->original_name }}">
                            @elseif($file->isVideo())
                                <video class="w-100 h-100 object-fit-cover">
                                    <source src="{{ $file->getUrl() }}" type="{{ $file->mime_type }}">
                                </video>
                            @else
                                <div class="d-flex align-items-center justify-content-center h-100 bg-light">
                                    <i class="fas fa-file-{{ $file->getIcon() }} fa-3x text-muted"></i>
                                </div>
                            @endif
                        </div>

                        <div class="media-info">
                            <h6 class="card-title mb-1 text-truncate" title="{{ $file->original_name }}">
                                {{ $file->original_name }}
                            </h6>
                            <small class="text-muted d-block">
                                {{ $file->size_formatted }} • {{ $file->created_at->diffForHumans() }}
                            </small>
                            <small class="text-muted d-block">
                                {{ $file->views_count }} {{ __('views') }} • {{ $file->downloads_count }} {{ __('downloads') }}
                            </small>
                        </div>
                    </div>

                    <div class="card-footer p-2 bg-transparent">
                        <div class="btn-group btn-group-sm w-100" role="group">
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="copyUrl('{{ $file->getUrl() }}')">
                                <i class="fas fa-copy"></i>
                            </button>
                            <button type="button" class="btn btn-outline-info btn-sm" onclick="showDetails({{ $file->id }})">
                                <i class="fas fa-info"></i>
                            </button>
                            <button type="button" class="btn btn-outline-warning btn-sm" onclick="editFile({{ $file->id }})">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button type="button" class="btn btn-outline-danger btn-sm" onclick="deleteFile({{ $file->id }})">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        @else
            <div class="col-12">
                <div class="text-center py-5">
                    <i class="fas fa-images fa-4x text-muted mb-3"></i>
                    <h4>{{ __('No media files found') }}</h4>
                    <p class="text-muted">{{ __('Upload some files to get started') }}</p>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#uploadModal">
                        <i class="fas fa-upload"></i> {{ __('Upload Files') }}
                    </button>
                </div>
            </div>
        @endif
    </div>

    <!-- Pagination -->
    @if($media->hasPages())
    <div class="d-flex justify-content-center">
        {{ $media->appends(request()->query())->links() }}
    </div>
    @endif

    <!-- Upload Modal -->
    <div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="uploadModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="uploadModalLabel">{{ __('Upload Media Files') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="uploadForm" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="files">{{ __('Select Files') }}</label>
                            <input type="file" class="form-control-file" id="files" name="files[]" multiple required>
                            <small class="form-text text-muted">
                                {{ __('Supported formats: Images, Videos, Audio, Documents. Max 50MB per file.') }}
                            </small>
                        </div>

                        <div class="form-group">
                            <label for="folder_id">{{ __('Folder (Optional)') }}</label>
                            <select class="form-control" id="folder_id" name="folder_id">
                                <option value="">{{ __('Root Folder') }}</option>
                                @foreach($folders as $folder)
                                <option value="{{ $folder->id }}">{{ $folder->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="tags">{{ __('Tags (Optional)') }}</label>
                            <select class="form-control" id="tags" name="tags[]" multiple>
                                @foreach($tags as $tag)
                                <option value="{{ $tag->id }}">{{ $tag->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="alt_text_en">{{ __('Alt Text (English)') }}</label>
                                    <input type="text" class="form-control" id="alt_text_en" name="alt_text_en" maxlength="255">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="alt_text_ar">{{ __('Alt Text (Arabic)') }}</label>
                                    <input type="text" class="form-control" id="alt_text_ar" name="alt_text_ar" maxlength="255">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="description_en">{{ __('Description (English)') }}</label>
                                    <textarea class="form-control" id="description_en" name="description_en" rows="3" maxlength="1000"></textarea>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="description_ar">{{ __('Description (Arabic)') }}</label>
                                    <textarea class="form-control" id="description_ar" name="description_ar" rows="3" maxlength="1000"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('Upload') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Edit Modal -->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editModalLabel">{{ __('Edit Media File') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="editForm">
                    @csrf
                    @method('PUT')
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="edit_alt_text_en">{{ __('Alt Text (English)') }}</label>
                                    <input type="text" class="form-control" id="edit_alt_text_en" name="alt_text_en" maxlength="255">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="edit_alt_text_ar">{{ __('Alt Text (Arabic)') }}</label>
                                    <input type="text" class="form-control" id="edit_alt_text_ar" name="alt_text_ar" maxlength="255">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="edit_description_en">{{ __('Description (English)') }}</label>
                                    <textarea class="form-control" id="edit_description_en" name="description_en" rows="3" maxlength="1000"></textarea>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="edit_description_ar">{{ __('Description (Arabic)') }}</label>
                                    <textarea class="form-control" id="edit_description_ar" name="description_ar" rows="3" maxlength="1000"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="edit_folder_id">{{ __('Folder') }}</label>
                            <select class="form-control" id="edit_folder_id" name="folder_id">
                                <option value="">{{ __('Root Folder') }}</option>
                                @foreach($folders as $folder)
                                <option value="{{ $folder->id }}">{{ $folder->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="edit_tags">{{ __('Tags') }}</label>
                            <select class="form-control" id="edit_tags" name="tags[]" multiple>
                                @foreach($tags as $tag)
                                <option value="{{ $tag->id }}">{{ $tag->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="edit_is_public" name="is_public">
                                <label class="custom-control-label" for="edit_is_public">{{ __('Public Access') }}</label>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('Update') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.media-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.media-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

.media-preview {
    position: relative;
}

.media-preview video {
    object-fit: cover;
}

.object-fit-cover {
    object-fit: cover;
}
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    // Initialize select2 for tags
    $('#tags, #edit_tags').select2({
        placeholder: '{{ __("Select tags") }}',
        allowClear: true
    });

    // Upload form submission
    $('#uploadForm').on('submit', function(e) {
        e.preventDefault();

        const formData = new FormData(this);

        $.ajax({
            url: '{{ route("admin.media.store", ["locale" => app()->getLocale()]) }}',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                $('#uploadModal').modal('hide');
                location.reload();
            },
            error: function(xhr) {
                alert('{{ __("Upload failed. Please try again.") }}');
            }
        });
    });

    // Edit form submission
    $('#editForm').on('submit', function(e) {
        e.preventDefault();

        const formData = new FormData(this);
        const fileId = $(this).data('file-id');

        $.ajax({
            url: '{{ route("admin.media.update", ["locale" => app()->getLocale(), "media" => ":id"]) }}'.replace(':id', fileId),
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                $('#editModal').modal('hide');
                location.reload();
            },
            error: function(xhr) {
                alert('{{ __("Update failed. Please try again.") }}');
            }
        });
    });
});

// Copy URL to clipboard
function copyUrl(url) {
    navigator.clipboard.writeText(url).then(function() {
        // Show success message
        toastr.success('{{ __("URL copied to clipboard") }}');
    });
}

// Show file details
function showDetails(fileId) {
    // Implement modal to show file details
    window.location.href = '{{ route("admin.media.show", ["locale" => app()->getLocale(), "media" => ":id"]) }}'.replace(':id', fileId);
}

// Edit file
function editFile(fileId) {
    // Load file data and show edit modal
    $.get('{{ route("admin.media.show", ["locale" => app()->getLocale(), "media" => ":id"]) }}'.replace(':id', fileId))
        .done(function(data) {
            $('#edit_alt_text_en').val(data.alt_text_en);
            $('#edit_alt_text_ar').val(data.alt_text_ar);
            $('#edit_description_en').val(data.description_en);
            $('#edit_description_ar').val(data.description_ar);
            $('#edit_folder_id').val(data.folder_id);
            $('#edit_is_public').prop('checked', data.is_public);

            // Set tags
            const tagIds = data.tags ? data.tags.map(tag => tag.id) : [];
            $('#edit_tags').val(tagIds).trigger('change');

            $('#editForm').data('file-id', fileId);
            $('#editModal').modal('show');
        });
}

// Delete file
function deleteFile(fileId) {
    if (confirm('{{ __("Are you sure you want to delete this file?") }}')) {
        $.ajax({
            url: '{{ route("admin.media.destroy", ["locale" => app()->getLocale(), "media" => ":id"]) }}'.replace(':id', fileId),
            type: 'DELETE',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                location.reload();
            },
            error: function(xhr) {
                alert('{{ __("Delete failed. Please try again.") }}');
            }
        });
    }
}
</script>
@endpush