@extends('layout.app')

@section('content')
    <section class="content-header">
        <h1>
            Detalles de archivo multimedia
        </h1>
    </section>

    <section class="content">
        <!-- Box para las imágenes -->
        @if(in_array($media->type, ['image/jpeg', 'image/png', 'image/gif', 'image/webp']))
        <div class="row">
            <div class="col-xs-12">
                <div class="box box-default">
                    <div class="box-header with-border">
                        <h3 class="box-title">Visualización de imágenes</h3>
                    </div>
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-6 text-center">
                                <div class="image-container" style="margin-bottom: 15px;">
                                    <h4>Imagen sin procesar</h4>
                                    <a href="/media_images/unprocessed/{{ $media->name }}" target="_blank" title="Ver imagen original">
                                        <img src="/media_images/unprocessed/{{ $media->name }}" 
                                            class="img-responsive img-thumbnail" style="max-height: 300px; margin: 0 auto;">
                                    </a>
                                    <div class="mt-2">
                                        <a href="/media_images/unprocessed/{{ $media->name }}" class="btn btn-sm btn-default" download>
                                            <i class="fa fa-download"></i> Descargar original
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 text-center">
                                <div class="image-container">
                                    <h4>Imagen procesada</h4>
                                    @if($media->status == 'pending')
                                        <div class="alert alert-warning">
                                            <i class="fa fa-clock-o"></i> La imagen aún está pendiente de procesamiento.
                                        </div>
                                    @else
                                        <a href="/media_images/processed/{{ $media->name }}" target="_blank" title="Ver imagen procesada">
                                            <img src="/media_images/processed/{{ $media->name }}" 
                                                class="img-responsive img-thumbnail" style="max-height: 300px; margin: 0 auto;">
                                        </a>
                                        <div class="mt-2">
                                            <a href="/media_images/processed/{{ $media->name }}" class="btn btn-sm btn-default" download>
                                                <i class="fa fa-download"></i> Descargar procesada
                                            </a>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <!-- Box para detalles del archivo -->
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header with-border">
                        <h3 class="box-title">Información del archivo</h3>
                    </div>
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Nombre original</label>
                                    <p>{{ $media->original_name }}</p>
                                </div>

                                <div class="form-group">
                                    <label>Nombre del archivo</label>
                                    <p>{{ $media->name }}</p>
                                </div>

                                <div class="form-group">
                                    <label>Tipo</label>
                                    <p>{{ $media->type }}</p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Estado</label>
                                    <p>
                                        @if($media->status == 'pending')
                                            <span class="label label-warning">{{ $media->status }}</span>
                                        @else
                                            <span class="label label-success">{{ $media->status }}</span>
                                        @endif
                                    </p>
                                </div>

                                <div class="form-group">
                                    <label>Fecha de creación</label>
                                    <p>{{ $media->created_at }}</p>
                                </div>

                                @if(!in_array($media->type, ['image/jpeg', 'image/png', 'image/gif']))
                                    <div class="text-center">
                                        <i class="fa fa-file fa-5x"></i>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="box-footer">
                        <div class="btn-group">
                            <a href="{{ route('media.list') }}" class="btn btn-default">Volver</a>
                            <a href="{{ route('media.delete', $media->media_id) }}" class="btn btn-danger delete">
                                <i class="fa fa-trash"></i> Eliminar
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection