@extends('admin.layouts.app')

@section('title', 'الصور والفيديوهات')

@push('styles')
<style>
.media-card {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}
.media-card .delete-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(220, 53, 69, 0.9);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 10;
}
.media-card:hover .delete-btn {
    opacity: 1;
}
.media-card .delete-btn:hover {
    background: #dc3545;
    transform: scale(1.1);
}
.media-card .media-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: white;
    padding: 20px 10px 10px;
    font-size: 12px;
}
.media-card img, .media-card video {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
</style>
@endpush

@section('content')
<div class="container-fluid pt-4 px-4">
    <div class="bg-light rounded p-4">
        <div class="d-flex align-items-center justify-content-between mb-4">
            <h6 class="mb-0">
                <i class="fa fa-images text-primary me-2"></i>
                الصور والفيديوهات
            </h6>
            <span class="badge bg-info fs-6">{{ $media->total() }} ملف</span>
        </div>
        
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        <!-- الفلترة -->
        <div class="row mb-4 g-3">
            <div class="col-md-3">
                <select class="form-select" id="city_id" onchange="onCityChange()">
                    <option value="">جميع الدول</option>
                    @foreach($cities as $city)
                        <option value="{{ $city->id }}" {{ request('city_id') == $city->id ? 'selected' : '' }}>
                            {{ $city->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <select class="form-select" id="sub_city_id" onchange="onSubCityChange()" {{ !request('city_id') ? 'disabled' : '' }}>
                    <option value="">جميع المدن</option>
                    @if(request('city_id'))
                        @foreach($subCities->where('city_id', request('city_id')) as $subCity)
                            <option value="{{ $subCity->id }}" {{ request('sub_city_id') == $subCity->id ? 'selected' : '' }}>
                                {{ $subCity->name }}
                            </option>
                        @endforeach
                    @endif
                </select>
            </div>
            <div class="col-md-3">
                <button type="button" class="btn btn-success w-100" onclick="goToAddMedia()" id="addBtn" {{ !request('sub_city_id') ? 'disabled' : '' }}>
                    <i class="fa fa-plus me-1"></i>إضافة وسائط
                </button>
            </div>
            @if(request('city_id') || request('sub_city_id'))
            <div class="col-md-2">
                <a href="{{ route('admin.media.index') }}" class="btn btn-outline-secondary w-100">
                    <i class="fa fa-undo me-1"></i>إعادة تعيين
                </a>
            </div>
            @endif
        </div>
        
        <!-- عرض الوسائط -->
        @if($media->count() > 0)
            <div class="row">
                @foreach($media as $item)
                    <div class="col-md-3 mb-4">
                        <div class="media-card card shadow-sm">
                            <form action="{{ route('admin.subcities.media.delete', $item->id) }}" method="POST" class="d-inline" onsubmit="return confirm('هل أنت متأكد من الحذف؟')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="delete-btn border-0" title="حذف">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </form>
                            @if($item->file_type == 'video')
                                <video src="{{ asset('storage/' . $item->file_path) }}" controls></video>
                            @else
                                <img src="{{ asset('storage/' . $item->file_path) }}" alt="Media">
                            @endif
                            <div class="media-info">
                                {{ $item->subCity->city->name ?? '-' }} / {{ $item->subCity->name ?? '-' }}
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            
            <div class="mt-4 d-flex justify-content-center">
                {{ $media->links() }}
            </div>
        @else
            <div class="text-center py-5">
                <i class="fa fa-images fa-4x text-muted mb-3"></i>
                <p class="text-muted">لا توجد صور أو فيديوهات</p>
            </div>
        @endif
    </div>
</div>

<script>
const allSubCities = @json($subCities);

function onCityChange() {
    const cityId = document.getElementById('city_id').value;
    const subCitySelect = document.getElementById('sub_city_id');
    
    subCitySelect.innerHTML = '<option value="">جميع المدن</option>';
    
    if (cityId) {
        subCitySelect.disabled = false;
        allSubCities.forEach(subCity => {
            if (subCity.city_id == cityId) {
                const option = document.createElement('option');
                option.value = subCity.id;
                option.textContent = subCity.name;
                subCitySelect.appendChild(option);
            }
        });
        window.location.href = '{{ route("admin.media.index") }}?city_id=' + cityId;
    } else {
        subCitySelect.disabled = true;
        document.getElementById('addBtn').disabled = true;
        window.location.href = '{{ route("admin.media.index") }}';
    }
}

function onSubCityChange() {
    const cityId = document.getElementById('city_id').value;
    const subCityId = document.getElementById('sub_city_id').value;
    
    document.getElementById('addBtn').disabled = !subCityId;
    
    let url = '{{ route("admin.media.index") }}?city_id=' + cityId;
    if (subCityId) url += '&sub_city_id=' + subCityId;
    
    window.location.href = url;
}

function goToAddMedia() {
    const subCityId = document.getElementById('sub_city_id').value;
    if (subCityId) {
        window.location.href = '/admin/subcities/' + subCityId + '/media';
    }
}
</script>
@endsection