@extends('layouts.app')

@section('content')
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow-sm">
                <div class="card-header bg-maroon text-white">
                    <h4 class="mb-0">Upload Valuation CSV</h4>
                </div>
                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    @if(isset($errors) && count($errors) > 0)
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <ul class="mb-0">
                                @foreach($errors as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    <form method="POST" action="{{ route('valuations.upload.store') }}" enctype="multipart/form-data" id="uploadForm">
                        @csrf
                        <div class="upload-area mb-4" id="uploadArea">
                            <div class="text-center p-5 border-2 border-dashed rounded-3" id="dropZone">
                                <i class="fas fa-file-csv fa-3x text-maroon mb-3"></i>
                                <h5>Drag & Drop your CSV file here</h5>
                                <p class="text-muted">or</p>
                                <input type="file" class="form-control" id="csv_file" name="csv_file" accept=".csv" required>
                                <p class="text-muted mt-2 mb-0">Maximum file size: 10MB</p>
                            </div>
                            <div id="fileInfo" class="mt-3 d-none">
                                <div class="d-flex align-items-center p-3 bg-light rounded">
                                    <i class="fas fa-file-csv text-maroon me-3"></i>
                                    <div class="flex-grow-1">
                                        <h6 class="mb-0" id="fileName">filename.csv</h6>
                                        <small class="text-muted" id="fileSize">0 KB</small>
                                    </div>
                                    <button type="button" class="btn btn-sm btn-outline-danger" onclick="clearFile()">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="text-center">
                            <button type="submit" class="btn btn-maroon btn-lg px-5">
                                <i class="fas fa-upload me-2"></i>Upload CSV
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
    :root {
        --maroon: #800000;
        --maroon-light: #a52a2a;
        --maroon-dark: #5c0000;
    }

    .bg-maroon {
        background-color: var(--maroon) !important;
    }

    .text-maroon {
        color: var(--maroon) !important;
    }

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

    .btn-maroon:hover {
        background-color: var(--maroon-dark);
        border-color: var(--maroon-dark);
        color: white;
    }

    .btn-outline-maroon {
        color: var(--maroon);
        border-color: var(--maroon);
    }

    .btn-outline-maroon:hover {
        background-color: var(--maroon);
        border-color: var(--maroon);
        color: white;
    }

    .border-dashed {
        border: 2px dashed #dee2e6;
        transition: all 0.3s ease;
    }
    
    .upload-area {
        cursor: pointer;
    }
    
    .upload-area:hover .border-dashed {
        border-color: var(--maroon);
        background-color: rgba(128, 0, 0, 0.05);
    }
    
    .upload-area.dragover .border-dashed {
        border-color: var(--maroon);
        background-color: rgba(128, 0, 0, 0.1);
    }

    .form-control:focus {
        border-color: var(--maroon);
        box-shadow: 0 0 0 0.25rem rgba(128, 0, 0, 0.25);
    }

    #csv_file {
        display: none;
    }
</style>
@endpush

@push('scripts')
<script>
    const dropZone = document.getElementById('dropZone');
    const uploadArea = document.getElementById('uploadArea');
    const fileInput = document.getElementById('csv_file');
    const fileInfo = document.getElementById('fileInfo');
    const fileName = document.getElementById('fileName');
    const fileSize = document.getElementById('fileSize');

    // Prevent default drag behaviors
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, preventDefaults, false);
        document.body.addEventListener(eventName, preventDefaults, false);
    });

    // Highlight drop zone when item is dragged over it
    ['dragenter', 'dragover'].forEach(eventName => {
        dropZone.addEventListener(eventName, highlight, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, unhighlight, false);
    });

    // Handle dropped files
    dropZone.addEventListener('drop', handleDrop, false);

    // Handle file input change
    fileInput.addEventListener('change', handleFileSelect, false);

    // Make the entire drop zone clickable
    dropZone.addEventListener('click', () => {
        fileInput.click();
    });

    function preventDefaults (e) {
        e.preventDefault();
        e.stopPropagation();
    }

    function highlight(e) {
        uploadArea.classList.add('dragover');
    }

    function unhighlight(e) {
        uploadArea.classList.remove('dragover');
    }

    function handleDrop(e) {
        const dt = e.dataTransfer;
        const files = dt.files;
        handleFiles(files);
    }

    function handleFileSelect(e) {
        const files = e.target.files;
        handleFiles(files);
    }

    function handleFiles(files) {
        if (files.length > 0) {
            const file = files[0];
            if (file.type === 'text/csv' || file.name.endsWith('.csv')) {
                displayFileInfo(file);
            } else {
                alert('Please select a valid CSV file.');
                clearFile();
            }
        }
    }

    function displayFileInfo(file) {
        fileName.textContent = file.name;
        fileSize.textContent = formatFileSize(file.size);
        fileInfo.classList.remove('d-none');
    }

    function clearFile() {
        fileInput.value = '';
        fileInfo.classList.add('d-none');
    }

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