@extends('admin.layouts.app')

@section('title', 'إدارة وسائط ' . $subCity->name)

@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">إدارة وسائط: {{ $subCity->name }}</h6>
            <a href="{{ route('admin.subcities.index') }}" class="btn btn-secondary">العودة</a>
        </div>
        
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        
        @if($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
            </div>
        @endif
        
        <!-- Form to Add Media -->
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                إضافة صور أو فيديوهات جديدة
            </div>
            <div class="card-body">
                <form action="{{ route('admin.subcities.media.store', $subCity->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3">
                        <label for="media" class="form-label">اختر الملفات</label>
                        <input type="file" class="form-control" id="media" name="media[]" multiple accept="image/*,video/*">
                        <small class="text-muted">يمكنك اختيار عدة ملفات (صور أو فيديو) بأي مساحة</small>
                    </div>
                    <button type="submit" class="btn btn-success"><i class="fa fa-upload me-2"></i>رفع الملفات</button>
                </form>
            </div>
        </div>

        <!-- Existing Media List -->
        <h6 class="mb-3">الوسائط الحالية ({{ $subCity->media->count() }})</h6>
        
        @if($subCity->media->count() > 0)
            <div class="row">
                @foreach($subCity->media as $media)
                    <div class="col-md-3 mb-4">
                        <div class="card h-100 shadow-sm">
                            @if($media->file_type == 'video')
                                <video src="{{ asset('storage/' . $media->file_path) }}" class="card-img-top" controls style="height: 200px; object-fit: cover; background: #000;"></video>
                            @else
                                <img src="{{ asset('storage/' . $media->file_path) }}" class="card-img-top" alt="Media" style="height: 200px; object-fit: cover;">
                            @endif
                            <div class="card-body text-center p-2">
                                <form action="{{ route('admin.subcities.media.delete', $media->id) }}" method="POST" class="d-inline" onsubmit="return confirm('هل أنت متأكد من الحذف؟')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-sm w-100">
                                        <i class="fa fa-trash me-1"></i> حذف
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="alert alert-info text-center">لا توجد وسائط مرفوعة لهذه المدينة</div>
        @endif
    </div>
</div>
@endsection