@extends('layouts.app')

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

@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>
    .form-container {
        background: white;
        border-radius: 12px;
        padding: 2rem;
        border: 1px solid var(--gray-200);
        max-width: 800px;
        margin: 0 auto;
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-group label {
        display: block;
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: var(--gray-700);
    }

    .form-group label .required {
        color: var(--error);
    }

    .form-group input[type="text"],
    .form-group input[type="date"],
    .form-group select,
    .form-group textarea {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid var(--gray-300);
        border-radius: 8px;
        font-size: 0.875rem;
        font-family: inherit;
    }

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

    .form-group textarea {
        min-height: 150px;
        resize: vertical;
    }

    .form-group .help-text {
        font-size: 0.75rem;
        color: var(--gray-500);
        margin-top: 0.25rem;
    }

    .file-upload-area {
        border: 2px dashed var(--gray-300);
        border-radius: 8px;
        padding: 2rem;
        text-align: center;
        background: var(--gray-50);
        transition: all 0.2s;
    }

    .file-upload-area:hover {
        border-color: var(--primary);
        background: rgba(227, 27, 35, 0.05);
    }

    .file-upload-area.dragover {
        border-color: var(--primary);
        background: rgba(227, 27, 35, 0.1);
    }

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

    .file-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem;
        background: white;
        border-radius: 6px;
        margin-bottom: 0.5rem;
        border: 1px solid var(--gray-200);
    }

    .file-name {
        flex: 1;
        font-size: 0.875rem;
        color: var(--gray-900);
    }

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

    .remove-file {
        background: var(--error);
        color: white;
        border: none;
        border-radius: 4px;
        padding: 0.25rem 0.5rem;
        cursor: pointer;
        font-size: 0.75rem;
    }

    .form-actions {
        display: flex;
        gap: 1rem;
        margin-top: 2rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--gray-200);
    }

    .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);
    }
</style>
@endsection

@section('content')
<div style="margin-bottom: 2rem;">
    <a href="{{ route('employee.requests.index') }}" class="btn btn-secondary" style="text-decoration: none; margin-bottom: 1rem;">
        ← Back to Requests
    </a>
    <h1 style="font-size: 2rem; font-weight: 700; color: var(--gray-900);">
        Create Marketing Request
    </h1>
</div>

<div class="form-container">
    <form method="POST" action="{{ route('employee.requests.store') }}" enctype="multipart/form-data">
        @csrf

        <div class="form-group">
            <label for="request_type">
                Request Type <span class="required">*</span>
            </label>
            <select name="request_type" id="request_type" required>
                <option value="">Select type...</option>
                <option value="artwork" {{ old('request_type') == 'artwork' ? 'selected' : '' }}>Artwork</option>
                <option value="video" {{ old('request_type') == 'video' ? 'selected' : '' }}>Video</option>
                <option value="event" {{ old('request_type') == 'event' ? 'selected' : '' }}>Event</option>
                <option value="meeting" {{ old('request_type') == 'meeting' ? 'selected' : '' }}>Meeting</option>
                <option value="exhibition" {{ old('request_type') == 'exhibition' ? 'selected' : '' }}>Exhibition</option>
            </select>
            @error('request_type')
                <div style="color: var(--error); font-size: 0.75rem; margin-top: 0.25rem;">{{ $message }}</div>
            @enderror
        </div>

        <div class="form-group">
            <label for="title">
                Title <span class="required">*</span>
            </label>
            <input type="text" name="title" id="title" value="{{ old('title') }}" required maxlength="255">
            @error('title')
                <div style="color: var(--error); font-size: 0.75rem; margin-top: 0.25rem;">{{ $message }}</div>
            @enderror
        </div>

        <div class="form-group">
            <label for="description">
                Description <span class="required">*</span>
            </label>
            <textarea name="description" id="description" required>{{ old('description') }}</textarea>
            <div class="help-text">Provide detailed information about your request</div>
            @error('description')
                <div style="color: var(--error); font-size: 0.75rem; margin-top: 0.25rem;">{{ $message }}</div>
            @enderror
        </div>

        <div class="form-group">
            <label for="priority">
                Priority <span class="required">*</span>
            </label>
            <select name="priority" id="priority" required>
                <option value="low" {{ old('priority') == 'low' ? 'selected' : '' }}>Low</option>
                <option value="medium" {{ old('priority') == 'medium' ? 'selected' : '' }}>Medium</option>
                <option value="high" {{ old('priority') == 'high' ? 'selected' : '' }}>High</option>
                <option value="urgent" {{ old('priority') == 'urgent' ? 'selected' : '' }}>Urgent</option>
            </select>
            @error('priority')
                <div style="color: var(--error); font-size: 0.75rem; margin-top: 0.25rem;">{{ $message }}</div>
            @enderror
        </div>

        <div class="form-group">
            <label for="deadline">
                Deadline
            </label>
            <input type="date" name="deadline" id="deadline" value="{{ old('deadline') }}" min="{{ date('Y-m-d', strtotime('+1 day')) }}">
            <div class="help-text">Optional. Must be a future date.</div>
            @error('deadline')
                <div style="color: var(--error); font-size: 0.75rem; margin-top: 0.25rem;">{{ $message }}</div>
            @enderror
        </div>

        <div class="form-group">
            <label for="attachments">
                Attachments
            </label>
            <div class="file-upload-area" id="fileUploadArea">
                <input type="file" name="attachments[]" id="attachments" multiple accept="*/*" style="display: none;">
                <label for="attachments" style="cursor: pointer;">
                    <svg style="width: 48px; height: 48px; margin: 0 auto 1rem; color: var(--gray-400);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
                    </svg>
                    <div style="font-weight: 600; color: var(--gray-700); margin-bottom: 0.5rem;">Click to upload files</div>
                    <div style="font-size: 0.75rem; color: var(--gray-500);">or drag and drop</div>
                    <div style="font-size: 0.75rem; color: var(--gray-500); margin-top: 0.5rem;">Max 10MB per file</div>
                </label>
            </div>
            <ul class="file-list" id="fileList"></ul>
            @error('attachments.*')
                <div style="color: var(--error); font-size: 0.75rem; margin-top: 0.25rem;">{{ $message }}</div>
            @enderror
        </div>

        <div class="form-actions">
            <button type="submit" class="btn btn-primary">Submit Request</button>
            <a href="{{ route('employee.requests.index') }}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>

<script>
    const fileInput = document.getElementById('attachments');
    const fileList = document.getElementById('fileList');
    const fileUploadArea = document.getElementById('fileUploadArea');
    const files = [];

    fileInput.addEventListener('change', function(e) {
        handleFiles(Array.from(e.target.files));
    });

    fileUploadArea.addEventListener('dragover', function(e) {
        e.preventDefault();
        fileUploadArea.classList.add('dragover');
    });

    fileUploadArea.addEventListener('dragleave', function(e) {
        e.preventDefault();
        fileUploadArea.classList.remove('dragover');
    });

    fileUploadArea.addEventListener('drop', function(e) {
        e.preventDefault();
        fileUploadArea.classList.remove('dragover');
        handleFiles(Array.from(e.dataTransfer.files));
    });

    function handleFiles(newFiles) {
        newFiles.forEach(file => {
            if (file.size > 10 * 1024 * 1024) {
                alert(`File "${file.name}" is too large. Maximum size is 10MB.`);
                return;
            }
            files.push(file);
            displayFile(file);
        });
        updateFileInput();
    }

    function displayFile(file) {
        const li = document.createElement('li');
        li.className = 'file-item';
        li.dataset.fileName = file.name;
        
        li.innerHTML = `
            <div class="file-name">${file.name}</div>
            <div class="file-size">${formatFileSize(file.size)}</div>
            <button type="button" class="remove-file" onclick="removeFile('${file.name}')">Remove</button>
        `;
        fileList.appendChild(li);
    }

    function removeFile(fileName) {
        files.splice(files.findIndex(f => f.name === fileName), 1);
        const li = fileList.querySelector(`[data-file-name="${fileName}"]`);
        if (li) li.remove();
        updateFileInput();
    }

    function updateFileInput() {
        const dt = new DataTransfer();
        files.forEach(file => dt.items.add(file));
        fileInput.files = dt.files;
    }

    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
    }
</script>
@endsection