@extends('layouts.app')

@section('content')
<div class="row">
    <div class="col s12">
        <div class="card">
            <div class="card-content">
                <div class="d-flex justify-content-between align-items-center">
                    <span class="card-title">Detail E-Proposal</span>
                    <a href="{{ route('eproposals.index') }}" class="btn grey waves-effect waves-light grey lighten-1 tooltipped right" data-position="top" data-delay="50" data-tooltip="Kembali">
                        <i class="mdi-navigation-arrow-back"></i>
                    </a>
                </div>

                <div class="row">
                    <div class="col s12">
                        <table class="striped">
                            <tbody>
                                <tr>
                                    <th style="width: 200px;">Nama Lengkap</th>
                                    <td>{{ $eproposal->nama_lengkap }}</td>
                                </tr>
                                <tr>
                                    <th>Alamat</th>
                                    <td>{{ $eproposal->alamat }}</td>
                                </tr>
                                <tr>
                                    <th>Perihal</th>
                                    <td>{{ $eproposal->perihal }}</td>
                                </tr>
                                <tr>
                                    <th>Tanggal</th>
                                    <td>{{ $eproposal->created_at->format('d/m/Y H:i') }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="row">
                    <div class="col s12">
                        <h5>Dokumen</h5>
                        @if($eproposal->file_dokumen)
                            <div style="height: 800px; background: #f5f5f5; border-radius: 4px; overflow: hidden;">
                                <iframe src="{{ asset('storage/' . $eproposal->file_dokumen) }}"
                                        style="width: 100%; height: 100%; border: none;"
                                        type="application/pdf">
                                </iframe>
                            </div>
                        @else
                            <div class="card-panel yellow lighten-4">
                                <span class="black-text">
                                    <i class="mdi-alert-warning"></i>
                                    Dokumen tidak tersedia
                                </span>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .detail-container {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
    }
    .detail-item {
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #e9ecef;
    }
    .detail-item:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }
    .detail-label {
        font-weight: 600;
        color: #495057;
        margin-bottom: 5px;
    }
    .detail-value {
        color: #212529;
    }
    .document-section {
        margin-top: 20px;
    }
    .section-title {
        color: #495057;
        margin-bottom: 15px;
        font-weight: 500;
    }
    .pdf-container {
        background-color: #f8f9fa;
        border-radius: 8px;
        overflow: hidden;
        height: 800px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .pdf-container iframe {
        width: 100%;
        height: 100%;
        border: none;
    }
    .no-document {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 40px;
        text-align: center;
        color: #6c757d;
    }
    .no-document i {
        font-size: 48px;
        color: #ffc107;
        margin-bottom: 15px;
    }
    .no-document p {
        margin: 0;
        font-size: 16px;
    }
    @media (max-width: 600px) {
        .pdf-container {
            height: 500px;
        }
    }
</style>
@endpush