@extends('layouts.app')

@section('title', $material->title)
@section('page-title', 'Material Details')

@section('header-buttons')
    <a href="{{ route('materials.index') }}" class="btn btn-outline-secondary shadow-sm">
        <i class="fas fa-arrow-left me-1"></i> Back
    </a>
@endsection

@section('content')
<div class="row">

    <!-- LEFT SIDE CONTENT -->
    <div class="col-md-8">
        
        <!-- Material Information -->
        <div class="card shadow-sm border-0">
            <div class="card-header bg-white border-0 pb-0">
                <h4 class="fw-bold text-primary mb-1">{{ $material->title }}</h4>
                <small class="text-muted">Complete material information</small>
            </div>

            <div class="card-body">

                <div class="row g-3">

                    <div class="col-md-6">
                        <label class="fw-bold text-secondary">Batch:</label>
                        <div>{{ $material->class->batch->name }}</div>
                    </div>

                    <div class="col-md-6">
                        <label class="fw-bold text-secondary">Subject:</label>
                        <div>{{ $material->class->subject->name }}</div>
                    </div>

                    <div class="col-md-6">
                        <label class="fw-bold text-secondary">Class Teacher:</label>
                        <div>{{ $material->class->teacher->user->name }}</div>
                    </div>

                    <div class="col-md-6">
                        <label class="fw-bold text-secondary">Uploaded By:</label>
                        <div>{{ $material->teacher->user->name }}</div>
                    </div>

                    <div class="col-md-6">
                        <label class="fw-bold text-secondary">Upload Date:</label>
                        <div>{{ $material->created_at->format('F d, Y \a\t h:i A') }}</div>
                    </div>

                    <div class="col-md-6">
                        <label class="fw-bold text-secondary">File Type:</label>
                        <span class="badge bg-primary">{{ strtoupper($material->file_extension) }}</span>
                    </div>

                    <div class="col-md-6">
                        <label class="fw-bold text-secondary">File Size:</label>
                        <div>{{ $material->file_size_formatted }}</div>
                    </div>

                    <div class="col-md-6">
                        <label class="fw-bold text-secondary">Status:</label>
                        <span class="badge bg-{{ $material->published ? 'success' : 'warning' }} px-3 py-1">
                            {{ $material->published ? 'Published' : 'Unpublished' }}
                        </span>
                    </div>

                </div>

            </div>
        </div>

        <!-- File Preview -->
        <div class="card shadow-sm border-0 mt-4">
            <div class="card-header bg-white border-0">
                <h5 class="fw-bold text-secondary mb-0">File Preview</h5>
            </div>
            <div class="card-body text-center">

                @if($material->isImage())
                    <img src="{{ Storage::disk('public')->url($material->file_path) }}"
                         class="img-fluid rounded shadow-sm"
                         style="max-height: 420px; object-fit: contain;"
                         alt="{{ $material->title }}">
                
                @elseif($material->isPdf())
                    <i class="fas fa-file-pdf text-danger fa-6x mb-3"></i>
                    <p class="text-muted">PDF preview is not supported. Please download.</p>

                @elseif($material->isVideo())
                    <i class="fas fa-file-video text-warning fa-6x mb-3"></i>
                    <p class="text-muted">Video preview unavailable. Please download.</p>

                @else
                    <i class="fas fa-file text-primary fa-6x mb-3"></i>
                    <p class="text-muted">{{ strtoupper($material->file_extension) }} Document</p>
                @endif

            </div>
        </div>

    </div>

    <!-- RIGHT SIDE ACTIONS -->
    <div class="col-md-4">

        <!-- Actions -->
        <div class="card shadow-sm border-0">
            <div class="card-header bg-white border-0">
                <h5 class="fw-bold text-secondary mb-0">Actions</h5>
            </div>

            <div class="card-body">

                <div class="d-grid gap-2">

                    <a href="{{ route('materials.download', $material) }}" 
                       class="btn btn-primary shadow-sm">
                        <i class="fas fa-download me-2"></i> Download File
                    </a>

                    <a href="{{ route('materials.edit', $material) }}" 
                       class="btn btn-outline-primary shadow-sm">
                        <i class="fas fa-edit me-2"></i> Edit Details
                    </a>

                    <form action="{{ route('materials.toggle-publish', $material) }}" method="POST">
                        @csrf
                        <button class="btn btn-{{ $material->published ? 'warning' : 'success' }} shadow-sm">
                            <i class="fas fa-{{ $material->published ? 'eye-slash' : 'eye' }} me-2"></i>
                            {{ $material->published ? 'Unpublish' : 'Publish' }}
                        </button>
                    </form>

                    <form action="{{ route('materials.destroy', $material) }}" method="POST">
                        @csrf
                        @method('DELETE')
                        <button onclick="return confirm('Are you sure?')" 
                                class="btn btn-outline-danger shadow-sm">
                            <i class="fas fa-trash me-2"></i> Delete Material
                        </button>
                    </form>

                </div>

            </div>
        </div>

        <!-- File Information -->
        <div class="card shadow-sm border-0 mt-4">
            <div class="card-header bg-white border-0">
                <h5 class="fw-bold text-secondary mb-0">File Information</h5>
            </div>
            <div class="card-body">

                <table class="table table-borderless table-sm">
                    <tr>
                        <td class="fw-bold text-secondary">Filename:</td>
                        <td>{{ $material->file_name }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold text-secondary">Type:</td>
                        <td>{{ $material->file_type }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold text-secondary">Size:</td>
                        <td>{{ $material->file_size_formatted }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold text-secondary">Extension:</td>
                        <td>{{ $material->file_extension }}</td>
                    </tr>
                </table>

            </div>
        </div>

    </div>

</div>
@endsection