@extends('layouts.app')

@section('title', 'Marketing Request Details')

@section('nav-items')
    <li><a href="{{ route('employee.dashboard') }}">Dashboard</a></li>
    <li><a href="{{ route('employee.requests.index') }}">My Requests</a></li>
    <li><a href="{{ route('employee.media.index') }}">Media Library</a></li>
    <li><a href="{{ route('employee.brand-assets.index') }}">Brand Assets</a></li>
    <li><a href="{{ route('employee.giveaways.index') }}">Giveaways</a></li>
@endsection

@section('styles')
<style>
    .request-header {
        background: white;
        border-radius: 12px;
        padding: 2rem;
        margin-bottom: 1.5rem;
        border: 1px solid var(--gray-200);
    }

    .request-title {
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--gray-900);
        margin-bottom: 1rem;
    }

    .request-meta-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--gray-200);
    }

    .meta-item {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .meta-label {
        font-size: 0.75rem;
        color: var(--gray-500);
        text-transform: uppercase;
        font-weight: 600;
    }

    .meta-value {
        font-size: 0.875rem;
        color: var(--gray-900);
        font-weight: 500;
    }

    .badge {
        padding: 0.25rem 0.75rem;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        display: inline-block;
    }

    .badge-pending {
        background: rgba(245, 158, 11, 0.1);
        color: var(--warning);
    }

    .badge-in_progress {
        background: rgba(59, 130, 246, 0.1);
        color: var(--info);
    }

    .badge-completed {
        background: rgba(5, 150, 105, 0.1);
        color: var(--success);
    }

    .badge-cancelled {
        background: var(--gray-100);
        color: var(--gray-600);
    }

    .badge-urgent {
        background: rgba(220, 38, 38, 0.1);
        color: var(--error);
    }

    .badge-high {
        background: rgba(245, 158, 11, 0.1);
        color: var(--warning);
    }

    .badge-medium {
        background: rgba(59, 130, 246, 0.1);
        color: var(--info);
    }

    .badge-low {
        background: var(--gray-100);
        color: var(--gray-600);
    }

    .type-badge {
        background: rgba(227, 27, 35, 0.1);
        color: var(--primary);
        padding: 0.25rem 0.75rem;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: capitalize;
    }

    .description-section {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        border: 1px solid var(--gray-200);
    }

    .description-section h3 {
        font-size: 1.125rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: var(--gray-900);
    }

    .attachments-section {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        border: 1px solid var(--gray-200);
    }

    .attachments-list {
        list-style: none;
        padding: 0;
        margin-top: 1rem;
    }

    .attachment-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        background: var(--gray-50);
        border-radius: 8px;
        margin-bottom: 0.75rem;
    }

    .attachment-icon {
        width: 40px;
        height: 40px;
        background: var(--primary);
        color: white;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .attachment-info {
        flex: 1;
    }

    .attachment-name {
        font-weight: 600;
        color: var(--gray-900);
        margin-bottom: 0.25rem;
    }

    .attachment-size {
        font-size: 0.75rem;
        color: var(--gray-500);
    }

    .comments-section {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        border: 1px solid var(--gray-200);
    }

    .comments-section h3 {
        font-size: 1.125rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: var(--gray-900);
    }

    .comments-list {
        list-style: none;
        padding: 0;
        margin-bottom: 1.5rem;
    }

    .comment-item {
        padding: 1rem;
        background: var(--gray-50);
        border-radius: 8px;
        margin-bottom: 1rem;
    }

    .comment-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .comment-author {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 600;
        color: var(--gray-900);
    }

    .comment-time {
        font-size: 0.75rem;
        color: var(--gray-500);
    }

    .comment-body {
        color: var(--gray-700);
        line-height: 1.6;
    }

    .comment-form {
        padding-top: 1.5rem;
        border-top: 1px solid var(--gray-200);
    }

    .comment-form textarea {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid var(--gray-300);
        border-radius: 8px;
        font-size: 0.875rem;
        min-height: 100px;
        resize: vertical;
        margin-bottom: 0.75rem;
        font-family: inherit;
    }

    .comment-form textarea:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(227, 27, 35, 0.1);
    }

    .user-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--primary);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.75rem;
    }

    .btn {
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        font-size: 0.875rem;
        font-weight: 600;
        border: none;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
        display: inline-block;
    }

    .btn-primary {
        background: var(--primary);
        color: white;
    }

    .btn-primary:hover {
        background: #b91c1c;
    }

    .btn-secondary {
        background: var(--gray-200);
        color: var(--gray-700);
    }

    .btn-secondary:hover {
        background: var(--gray-300);
    }

    .btn-danger {
        background: var(--error);
        color: white;
    }

    .btn-danger:hover {
        background: #b91c1c;
    }

    .btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }
</style>
@endsection

@section('content')
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
    <h1 style="font-size: 2rem; font-weight: 700; color: var(--gray-900);">
        Marketing Request
    </h1>
    <a href="{{ route('employee.requests.index') }}" class="btn btn-secondary">
        ← Back to Requests
    </a>
</div>

<!-- Request Header -->
<div class="request-header">
    <div class="request-title">{{ $request->title }}</div>
    
    <div style="display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem;">
        <span class="type-badge">{{ str_replace('_', ' ', $request->request_type) }}</span>
        <span class="badge badge-{{ $request->status }}">{{ str_replace('_', ' ', $request->status) }}</span>
        <span class="badge badge-{{ $request->priority }}">{{ ucfirst($request->priority) }}</span>
    </div>

    <div class="request-meta-grid">
        <div class="meta-item">
            <div class="meta-label">Assigned To</div>
            <div class="meta-value">
                @if($request->assignee)
                    {{ $request->assignee->name }}
                @else
                    <span style="color: var(--gray-400);">Unassigned</span>
                @endif
            </div>
        </div>

        <div class="meta-item">
            <div class="meta-label">Deadline</div>
            <div class="meta-value">
                @if($request->deadline)
                    {{ $request->deadline->format('F d, Y') }}
                    @if($request->deadline->isPast() && !$request->isCompleted())
                        <span style="color: var(--error); font-size: 0.75rem;">(Overdue)</span>
                    @endif
                @else
                    <span style="color: var(--gray-400);">Not set</span>
                @endif
            </div>
        </div>

        <div class="meta-item">
            <div class="meta-label">Created</div>
            <div class="meta-value">{{ $request->created_at->format('F d, Y g:i A') }}</div>
        </div>

        @if($request->completed_at)
            <div class="meta-item">
                <div class="meta-label">Completed</div>
                <div class="meta-value">{{ $request->completed_at->format('F d, Y g:i A') }}</div>
            </div>
        @endif
    </div>

    @if($request->isPending())
        <div style="margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--gray-200);">
            <form method="POST" action="{{ route('employee.requests.cancel', $request) }}" onsubmit="return confirm('Are you sure you want to cancel this request?');">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-danger btn-sm">Cancel Request</button>
            </form>
        </div>
    @endif
</div>

<!-- Description -->
<div class="description-section">
    <h3>Description</h3>
    <p style="color: var(--gray-700); line-height: 1.6; white-space: pre-wrap;">{{ $request->description }}</p>
</div>

<!-- Attachments -->
@if($request->attachments->count() > 0)
    <div class="attachments-section">
        <h3>Attachments ({{ $request->attachments->count() }})</h3>
        <ul class="attachments-list">
            @foreach($request->attachments as $attachment)
                <li class="attachment-item">
                    <div class="attachment-icon">
                        <svg style="width: 20px; height: 20px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                    </div>
                    <div class="attachment-info">
                        <div class="attachment-name">{{ $attachment->file_name }}</div>
                        <div class="attachment-size">{{ number_format($attachment->file_size / 1024, 2) }} KB</div>
                    </div>
                    <a href="{{ asset('storage/' . $attachment->file_path) }}" target="_blank" class="btn btn-secondary btn-sm">
                        Download
                    </a>
                </li>
            @endforeach
        </ul>
    </div>
@endif

<!-- Comments -->
<div class="comments-section">
    <h3>Comments ({{ $request->comments->count() }})</h3>

    @if($request->comments->count() > 0)
        <ul class="comments-list">
            @foreach($request->comments as $comment)
                <li class="comment-item">
                    <div class="comment-header">
                        <div class="comment-author">
                            <div class="user-avatar">{{ strtoupper(substr($comment->user->name, 0, 1)) }}</div>
                            {{ $comment->user->name }}
                        </div>
                        <div class="comment-time">{{ $comment->created_at->diffForHumans() }}</div>
                    </div>
                    <div class="comment-body">{{ $comment->comment }}</div>
                </li>
            @endforeach
        </ul>
    @else
        <p style="color: var(--gray-500); text-align: center; padding: 2rem;">No comments yet.</p>
    @endif

    <!-- Add Comment Form -->
    <form method="POST" action="{{ route('employee.requests.comment', $request) }}" class="comment-form">
        @csrf
        <textarea name="comment" placeholder="Add a comment..." required></textarea>
        <button type="submit" class="btn btn-primary">Add Comment</button>
    </form>
</div>
@endsection