@extends('admin.layouts.master')

@section('title', __('admin.attachments.create_title'))

@section('content')

@php
function getCategoryIcon($category) {
    return match($category) {
        'contract' => 'ti-file-text',
        'quotation' => 'ti-file-dollar',
        'invoice' => 'ti-receipt-2',
        'receipt' => 'ti-receipt',
        'drawing' => 'ti-blueprint',
        'photo' => 'ti-photo',
        'document' => 'ti-file',
        'other' => 'ti-paperclip',
        default => 'ti-file'
    };
}
@endphp
<div class="page-content-wrapper">
    <div class="content-container">
        <div class="page-content">
            <!-- Page Header -->
            <div class="content-header d-flex justify-content-between align-items-start flex-wrap gap-3 mb-4">
                <div>
                    <h1 class="mb-2">{{ __('admin.attachments.create_title') }}</h1>
                    <p class="text-muted mb-0">{{ __('admin.attachments.upload_description') }}</p>
                </div>
                <a href="{{ route('admin.attachments.index') }}" class="btn btn-outline-secondary">
                    <i class="ti ti-arrow-left me-1"></i>{{ __('admin.actions.back_to_list') }}
                </a>
            </div>

            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
                    <i class="ti ti-circle-check me-2"></i>
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
                    <i class="ti ti-alert-circle me-2"></i>
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <div class="row">
                <!-- Main Form -->
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">{{ __('admin.attachments.form_title') }}</h5>
                        </div>
                        <div class="card-body">
                            <form id="uploadForm" action="{{ route('admin.attachments.store') }}" method="POST" enctype="multipart/form-data">
                                @csrf

                                <!-- Project Selection -->
                                <div class="mb-4">
                                    <label class="form-label fw-600">{{ __('admin.attachments.fields.project_id') }} <span class="text-danger">*</span></label>
                                    <select name="project_id" id="projectSelect" class="form-select @error('project_id') is-invalid @enderror" required>
                                        <option value="">-- {{ __('admin.attachments.placeholders.select_project') }} --</option>
                                        @foreach($projects as $project)
                                            <option value="{{ $project->id }}" @selected(old('project_id') == $project->id)>
                                                {{ $project->project_name ?: $project->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('project_id')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Stage Selection -->
                                <div class="mb-4">
                                    <label class="form-label fw-600">{{ __('admin.attachments.fields.stage_id') }}</label>
                                    <select name="stage_id" id="stageSelect" class="form-select @error('stage_id') is-invalid @enderror" disabled>
                                        <option value="">-- {{ __('admin.attachments.placeholders.select_stage_optional') }} --</option>
                                    </select>
                                    @error('stage_id')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Category Selection -->
                                <div class="mb-4">
                                    <label class="form-label fw-600">{{ __('admin.attachments.fields.category') }} <span class="text-danger">*</span></label>
                                    <div class="category-grid mb-2">
                                        @foreach($categories as $category)
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="category" id="cat_{{ $category }}"
                                                       value="{{ $category }}" @checked(old('category', 'document') === $category) required>
                                                <label class="form-check-label" for="cat_{{ $category }}">
                                                    <i class="ti {{ getCategoryIcon($category) }} me-1"></i>
                                                    {{ __('admin.attachments.categories.'.$category) }}
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                    @error('category')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Drag & Drop Upload Area -->
                                <div class="mb-4">
                                    <label class="form-label fw-600">{{ __('admin.attachments.fields.file') }} <span class="text-danger">*</span></label>
                                    <div id="dropZone" class="drop-zone @error('attachment') border-danger @enderror">
                                        <div class="drop-zone-content">
                                            <i class="ti ti-cloud-upload drop-zone-icon"></i>
                                            <h5 class="mt-3">{{ __('admin.attachments.drag_drop_title') }}</h5>
                                            <p class="text-muted">{{ __('admin.attachments.drag_drop_description') }}</p>
                                            <button type="button" class="btn btn-primary" id="browseBtn">
                                                <i class="ti ti-folder-open me-1"></i>{{ __('admin.attachments.browse_files') }}
                                            </button>
                                            <input type="file" id="fileInput" name="attachment" accept=".jpg,.jpeg,.png,.webp,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.dwg,.dxf,.zip,.rar,.txt" style="display: none;" required>
                                        </div>
                                        <div id="filePreview" style="display: none;" class="mt-3">
                                            <div class="d-flex align-items-center gap-3">
                                                <div>
                                                    <img id="previewImage" src="" alt="Preview" style="max-width: 80px; max-height: 80px; object-fit: cover; border-radius: 4px;">
                                                </div>
                                                <div class="flex-grow-1">
                                                    <h6 id="fileName" class="mb-1"></h6>
                                                    <small class="text-muted" id="fileSize"></small>
                                                    <br>
                                                    <button type="button" class="btn btn-sm btn-link text-danger mt-2" id="clearFile">
                                                        {{ __('admin.actions.remove') }}
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @error('attachment')
                                        <div class="text-danger small mt-2">{{ $message }}</div>
                                    @enderror
                                    <small class="d-block mt-2 text-muted">
                                        {{ __('admin.attachments.file_restrictions') }}
                                    </small>
                                </div>

                                <!-- Notes -->
                                <div class="mb-4">
                                    <label class="form-label fw-600">{{ __('admin.attachments.fields.notes') }}</label>
                                    <textarea name="notes" rows="3" class="form-control @error('notes') is-invalid @enderror"
                                              placeholder="{{ __('admin.attachments.placeholders.notes') }}"
                                              maxlength="500">{{ old('notes') }}</textarea>
                                    <small class="text-muted d-block mt-1">{{ __('admin.attachments.notes_help') }}</small>
                                    @error('notes')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Hidden redirect field -->
                                <input type="hidden" name="redirect_to" value="{{ route('admin.attachments.index') }}">

                                <!-- Submit Buttons -->
                                <div class="d-flex gap-2 justify-content-end">
                                    <a href="{{ route('admin.attachments.index') }}" class="btn btn-outline-secondary">
                                        {{ __('admin.actions.cancel') }}
                                    </a>
                                    <button type="submit" id="submitBtn" class="btn btn-primary" disabled>
                                        <i class="ti ti-upload me-1"></i>{{ __('admin.attachments.upload') }}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Info Sidebar -->
                <div class="col-lg-4">
                    <!-- Tips Card -->
                    <div class="card mb-3">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="ti ti-lightbulb me-2"></i>{{ __('admin.attachments.upload_tips') }}
                            </h5>
                        </div>
                        <div class="card-body">
                            <ul class="list-unstyled">
                                <li class="mb-2">
                                    <strong>{{ __('admin.attachments.tip_descriptive_names') }}</strong>
                                    <small class="text-muted d-block">{{ __('admin.attachments.tip_descriptive_names_help') }}</small>
                                </li>
                                <li class="mb-2">
                                    <strong>{{ __('admin.attachments.tip_organize') }}</strong>
                                    <small class="text-muted d-block">{{ __('admin.attachments.tip_organize_help') }}</small>
                                </li>
                                <li class="mb-2">
                                    <strong>{{ __('admin.attachments.tip_add_notes') }}</strong>
                                    <small class="text-muted d-block">{{ __('admin.attachments.tip_add_notes_help') }}</small>
                                </li>
                                <li>
                                    <strong>{{ __('admin.attachments.tip_file_size') }}</strong>
                                    <small class="text-muted d-block">{{ __('admin.attachments.tip_file_size_help') }}</small>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!-- Supported Formats Card -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="ti ti-files me-2"></i>{{ __('admin.attachments.supported_formats') }}
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="format-group mb-3">
                                <small class="text-muted fw-600 d-block mb-2">{{ __('admin.attachments.images') }}</small>
                                <div class="format-tags">
                                    <span class="badge bg-light text-dark">JPG</span>
                                    <span class="badge bg-light text-dark">PNG</span>
                                    <span class="badge bg-light text-dark">WebP</span>
                                </div>
                            </div>

                            <div class="format-group mb-3">
                                <small class="text-muted fw-600 d-block mb-2">{{ __('admin.attachments.documents') }}</small>
                                <div class="format-tags">
                                    <span class="badge bg-light text-dark">PDF</span>
                                    <span class="badge bg-light text-dark">DOC</span>
                                    <span class="badge bg-light text-dark">DOCX</span>
                                </div>
                            </div>

                            <div class="format-group mb-3">
                                <small class="text-muted fw-600 d-block mb-2">{{ __('admin.attachments.spreadsheets') }}</small>
                                <div class="format-tags">
                                    <span class="badge bg-light text-dark">XLS</span>
                                    <span class="badge bg-light text-dark">XLSX</span>
                                </div>
                            </div>

                            <div class="format-group mb-3">
                                <small class="text-muted fw-600 d-block mb-2">{{ __('admin.attachments.presentations') }}</small>
                                <div class="format-tags">
                                    <span class="badge bg-light text-dark">PPT</span>
                                    <span class="badge bg-light text-dark">PPTX</span>
                                </div>
                            </div>

                            <div class="format-group">
                                <small class="text-muted fw-600 d-block mb-2">{{ __('admin.attachments.archives') }}</small>
                                <div class="format-tags">
                                    <span class="badge bg-light text-dark">ZIP</span>
                                    <span class="badge bg-light text-dark">RAR</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const dropZone = document.getElementById('dropZone');
    const fileInput = document.getElementById('fileInput');
    const browseBtn = document.getElementById('browseBtn');
    const projectSelect = document.getElementById('projectSelect');
    const stageSelect = document.getElementById('stageSelect');
    const clearFileBtn = document.getElementById('clearFile');
    const submitBtn = document.getElementById('submitBtn');
    const filePreview = document.getElementById('filePreview');
    const dropZoneContent = document.querySelector('.drop-zone-content');

    let selectedFile = null;

    // Browse button click
    browseBtn.addEventListener('click', () => fileInput.click());

    // File input change
    fileInput.addEventListener('change', (e) => {
        const files = e.target.files;
        if (files.length > 0) {
            handleFileSelect(files[0]);
        }
    });

    // Drag and drop
    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.classList.add('drag-over');
    });

    dropZone.addEventListener('dragleave', () => {
        dropZone.classList.remove('drag-over');
    });

    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.classList.remove('drag-over');

        const files = e.dataTransfer.files;
        if (files.length > 0) {
            fileInput.files = files;
            handleFileSelect(files[0]);
        }
    });

    // Handle file selection
    function handleFileSelect(file) {
        selectedFile = file;

        // Validate file size (max 10MB)
        const maxSize = 10 * 1024 * 1024;
        if (file.size > maxSize) {
            alert('{{ __('admin.attachments.file_too_large') }}');
            fileInput.value = '';
            return;
        }

        // Show preview
        dropZoneContent.style.display = 'none';
        filePreview.style.display = 'block';

        document.getElementById('fileName').textContent = file.name;
        document.getElementById('fileSize').textContent = formatFileSize(file.size);

        // Show image preview if applicable
        if (file.type.startsWith('image/')) {
            const reader = new FileReader();
            reader.onload = (e) => {
                document.getElementById('previewImage').src = e.target.result;
                document.getElementById('previewImage').style.display = 'block';
            };
            reader.readAsDataURL(file);
        } else {
            document.getElementById('previewImage').style.display = 'none';
        }

        submitBtn.disabled = false;
    }

    // Clear file
    clearFileBtn.addEventListener('click', () => {
        fileInput.value = '';
        selectedFile = null;
        dropZoneContent.style.display = 'block';
        filePreview.style.display = 'none';
        submitBtn.disabled = true;
    });

    // Load stages based on project selection
    projectSelect.addEventListener('change', function() {
        const projectId = this.value;
        const stageSelect = document.getElementById('stageSelect');

        if (!projectId) {
            stageSelect.innerHTML = '<option value="">-- {{ __('admin.attachments.placeholders.select_stage_optional') }} --</option>';
            stageSelect.disabled = true;
            return;
        }

        stageSelect.disabled = true;
        fetch(`{{ route('admin.attachments.stages') }}?project_id=${projectId}`)
            .then(response => response.json())
            .then(stages => {
                stageSelect.innerHTML = '<option value="">-- {{ __('admin.attachments.placeholders.select_stage_optional') }} --</option>';
                stages.forEach(stage => {
                    const option = document.createElement('option');
                    option.value = stage.id;
                    option.textContent = stage.name;
                    stageSelect.appendChild(option);
                });
                stageSelect.disabled = false;
            })
            .catch(error => {
                console.error('Error loading stages:', error);
                stageSelect.disabled = true;
            });
    });

    // Format file size
    function formatFileSize(bytes) {
        const units = ['B', 'KB', 'MB', 'GB'];
        let size = bytes;
        let unitIndex = 0;

        while (size >= 1024 && unitIndex < units.length - 1) {
            size /= 1024;
            unitIndex++;
        }

        return size.toFixed(2) + ' ' + units[unitIndex];
    }
});
</script>

<style>
.drop-zone {
    border: 2px dashed #e9ecef;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
}

.drop-zone:hover {
    border-color: #0066ff;
    background-color: #f0f7ff;
}

.drop-zone.drag-over {
    border-color: #0066ff;
    background-color: #e8f2ff;
    transform: scale(1.01);
}

.drop-zone-icon {
    font-size: 3rem;
    color: #0066ff;
}

.drop-zone-content h5 {
    color: #1a1a1a;
    font-weight: 600;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.form-check-inline {
    display: block !important;
    margin-right: 0 !important;
}

.format-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.format-tags .badge {
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
}

.content-header {
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 1.5rem;
}

#previewImage {
    display: none;
}
</style>
@endsection