@extends('layouts.admin')

@section('title', __('Edit Media File'))

@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">{{ __('Edit Media File') }}</h1>
            <p class="mb-0 text-muted">{{ $media->original_name }}</p>
        </div>
        <div>
            <a href="{{ route('admin.media.show', ['locale' => app()->getLocale(), 'media' => $media]) }}" class="btn btn-info">
                <i class="fas fa-eye"></i> {{ __('View Details') }}
            </a>
            <a href="{{ route('admin.media.index', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> {{ __('Back to Library') }}
            </a>
        </div>
    </div>

    <!-- Edit Form -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('File Information') }}</h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.media.update', ['locale' => app()->getLocale(), 'media' => $media]) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <!-- Alt Text -->
                        <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" value="{{ old('alt_text_en', $media->alt_text_en) }}" maxlength="255">
                                    <small class="form-text text-muted">{{ __('Alternative text for accessibility. Max 255 characters.') }}</small>
                                </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" value="{{ old('alt_text_ar', $media->alt_text_ar) }}" maxlength="255">
                                    <small class="form-text text-muted">{{ __('نص بديل للوصولية. حد أقصى 255 حرف.') }}</small>
                                </div>
                            </div>
                        </div>

                        <!-- Description -->
                        <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">{{ old('description_en', $media->description_en) }}</textarea>
                                    <small class="form-text text-muted">{{ __('Detailed description of the file. Max 1000 characters.') }}</small>
                                </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">{{ old('description_ar', $media->description_ar) }}</textarea>
                                    <small class="form-text text-muted">{{ __('وصف مفصل للملف. حد أقصى 1000 حرف.') }}</small>
                                </div>
                            </div>
                        </div>

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

                        <!-- Tags -->
                        <div class="form-group">
                            <label for="tags">{{ __('Tags') }}</label>
                            <select class="form-control" id="tags" name="tags[]" multiple>
                                @foreach($tags as $tag)
                                <option value="{{ $tag->id }}" {{ $media->tags->contains($tag->id) ? 'selected' : '' }}>
                                    {{ $tag->name }}
                                </option>
                                @endforeach
                            </select>
                            <small class="form-text text-muted">{{ __('Select existing tags or create new ones') }}</small>
                        </div>

                        <!-- Public Access -->
                        <div class="form-group">
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="is_public" name="is_public" {{ old('is_public', $media->is_public) ? 'checked' : '' }}>
                                <label class="custom-control-label" for="is_public">{{ __('Public Access') }}</label>
                            </div>
                            <small class="form-text text-muted">{{ __('Allow public access to this file') }}</small>
                        </div>

                        <!-- Submit Buttons -->
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> {{ __('Update File') }}
                            </button>
                            <a href="{{ route('admin.media.show', ['locale' => app()->getLocale(), 'media' => $media]) }}" class="btn btn-secondary">
                                <i class="fas fa-times"></i> {{ __('Cancel') }}
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- File Preview -->
        <div class="col-lg-4">
            <div class="card shadow">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('File Preview') }}</h6>
                </div>
                <div class="card-body text-center">
                    @if($media->isImage())
                        <img src="{{ $media->getUrl() }}" class="img-fluid rounded mb-3" alt="{{ $media->alt_text_en ?? $media->original_name }}" style="max-height: 300px;">
                    @elseif($media->isVideo())
                        <video controls class="w-100 rounded mb-3" style="max-height: 300px;">
                            <source src="{{ $media->getUrl() }}" type="{{ $media->mime_type }}">
                            {{ __('Your browser does not support the video tag.') }}
                        </video>
                    @elseif($media->isAudio())
                        <audio controls class="w-100 mb-3">
                            <source src="{{ $media->getUrl() }}" type="{{ $media->mime_type }}">
                            {{ __('Your browser does not support the audio tag.') }}
                        </audio>
                    @else
                        <div class="py-5 mb-3">
                            <i class="fas fa-file-{{ $media->getIcon() }} fa-4x text-muted mb-3"></i>
                            <p class="text-muted">{{ __('Preview not available for this file type') }}</p>
                        </div>
                    @endif

                    <!-- File Info -->
                    <div class="text-left">
                        <p class="mb-1"><strong>{{ __('File Name') }}:</strong> {{ $media->original_name }}</p>
                        <p class="mb-1"><strong>{{ __('Size') }}:</strong> {{ $media->size_formatted }}</p>
                        <p class="mb-1"><strong>{{ __('Type') }}:</strong> {{ $media->file_type }}</p>
                        <p class="mb-1"><strong>{{ __('Uploaded') }}:</strong> {{ $media->created_at->format('M d, Y H:i') }}</p>
                    </div>

                    <!-- Quick Actions -->
                    <div class="mt-3">
                        <button onclick="copyUrl('{{ $media->getUrl() }}')" class="btn btn-outline-primary btn-sm btn-block">
                            <i class="fas fa-copy"></i> {{ __('Copy URL') }}
                        </button>
                        <a href="{{ $media->getUrl() }}" target="_blank" class="btn btn-outline-info btn-sm btn-block">
                            <i class="fas fa-external-link-alt"></i> {{ __('View Full Size') }}
                        </a>
                        <a href="{{ $media->getDownloadUrl() }}" class="btn btn-outline-success btn-sm btn-block">
                            <i class="fas fa-download"></i> {{ __('Download') }}
                        </a>
                    </div>
                </div>
            </div>

            <!-- Statistics -->
            <div class="card shadow mt-4">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Statistics') }}</h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6">
                            <h4 class="text-primary">{{ number_format($media->views_count) }}</h4>
                            <p class="text-muted mb-0">{{ __('Views') }}</p>
                        </div>
                        <div class="col-6">
                            <h4 class="text-success">{{ number_format($media->downloads_count) }}</h4>
                            <p class="text-muted mb-0">{{ __('Downloads') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.custom-control-label::before,
.custom-control-label::after {
    top: 0.25rem;
}
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    // Initialize select2 for tags
    $('#tags').select2({
        placeholder: '{{ __("Select tags") }}',
        allowClear: true,
        tags: true,
        createTag: function (params) {
            return {
                id: params.term,
                text: params.term,
                newOption: true
            };
        }
    });

    // Set selected tags
    const selectedTags = @json($media->tags->pluck('id')->toArray());
    $('#tags').val(selectedTags).trigger('change');
});

// Copy URL to clipboard
function copyUrl(url) {
    navigator.clipboard.writeText(url).then(function() {
        // Show success message
        if (typeof toastr !== 'undefined') {
            toastr.success('{{ __("URL copied to clipboard") }}');
        } else {
            alert('{{ __("URL copied to clipboard") }}');
        }
    });
}
</script>
@endpush