@extends('layouts.app')

@section('content')
<!-- Alert untuk menampilkan pesan error/success -->
@if(session('error'))
    <div class="row">
        <div class="col s12">
            <div class="card-panel red lighten-4 red-text text-darken-4" style="border-left: 4px solid #f44336;">
                <i class="mdi-alert-error left"></i>
                <strong>Error!</strong> {{ session('error') }}
            </div>
        </div>
    </div>
@endif

@if(session('success'))
    <div class="row">
        <div class="col s12">
            <div class="card-panel green lighten-4 green-text text-darken-4" style="border-left: 4px solid #4caf50;">
                <i class="mdi-action-check-circle left"></i>
                <strong>Berhasil!</strong> {{ session('success') }}
            </div>
        </div>
    </div>
@endif

@if($errors->any())
    <div class="row">
        <div class="col s12">
            <div class="card-panel red lighten-4 red-text text-darken-4" style="border-left: 4px solid #f44336;">
                <i class="mdi-alert-error left"></i>
                <strong>Terjadi kesalahan:</strong>
                <ul style="margin: 5px 0 0 20px;">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
@endif

<div class="row">
    <div class="col s12 m12 l12">
        <div class="card">
            <div class="card-content">
                <div class="d-flex justify-content-between align-items-center">
                    <span class="card-title">
                        <i
                            style="display: inline-flex; align-items: center; justify-content: center; font-weight: bold; margin-right: 10px;">
                            <svg width="22" height="22" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 5V19" stroke="#00bcd4" stroke-width="2.2" fill="none" />
                                <path d="M5 12H19" stroke="#00bcd4" stroke-width="2.2" fill="none" />
                            </svg>
                        </i>
                        Tambah Data Kondisi Sarpras Rawa
                    </span>
                    <a href="{{ route('sarpras-rawa.show', $sarpras_id) }}" class="btn waves-effect waves-light grey right">
                        <i class="mdi-navigation-arrow-back"></i> Kembali
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row" style="margin-top: -20px;">
    <div class="col s12 m12 l12">
        <div class="card">
            <div class="card-content">
                <form action="{{ route('kondisi-sarpras-rawa.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="sarpras_id" value="{{ $sarpras_id }}">
                    <div class="row">
                        <div class="col s6">
                            <label>Tahun</label>
                            <select class="browser-default @error('tahun') invalid @enderror" name="tahun" id="tahun" required>
                                <option value="" disabled selected>Pilih Tahun</option>
                                @for($year = date('Y'); $year >= 2024; $year--)
                                    @if(in_array($year, $existingYears))
                                        <option value="{{ $year }}" disabled>{{ $year }} (Sudah ada data)</option>
                                    @else
                                        <option value="{{ $year }}" {{ old('tahun') == $year ? 'selected' : '' }}>{{ $year }}</option>
                                    @endif
                                @endfor
                            </select>
                            @if(count($existingYears) > 0)
                                <small class="grey-text">Tahun yang sudah ada data: {{ implode(', ', $existingYears) }}</small>
                            @endif
                            @error('tahun')
                                <span class="red-text text-darken-2" style="font-size: 12px;">
                                    <i class="mdi-alert-error tiny"></i> {{ $message }}
                                </span>
                            @enderror
                        </div>
                        <div class="col s6">
                            <label>Kondisi</label>
                            <select id="kondisi_id" name="kondisi_id" class="browser-default @error('kondisi_id') invalid @enderror" required>
                                <option value="" disabled selected>Pilih Kondisi</option>
                                @foreach($kondisiList as $ks)
                                    <option value="{{ $ks->id }}" {{ old('kondisi_id') == $ks->id ? 'selected' : '' }}>{{ $ks->kondisi }} ({{ $ks->keterangan }})</option>
                                @endforeach
                            </select>
                            @error('kondisi_id')
                                <span class="red-text text-darken-2" style="font-size: 12px;">
                                    <i class="mdi-alert-error tiny"></i> {{ $message }}
                                </span>
                            @enderror
                        </div>
                    </div>
                    <div class="input-field">
                        <textarea name="keterangan" id="keterangan" class="materialize-textarea @error('keterangan') invalid @enderror">{{ old('keterangan') }}</textarea>
                        <label for="keterangan">Keterangan</label>
                        @error('keterangan')
                            <span class="red-text text-darken-2" style="font-size: 12px;">
                                <i class="mdi-alert-error tiny"></i> {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <div class="row">
                        <div class="col s12">
                            <label>Foto Kondisi Sarpras</label>
                            <div class="file-upload-container">
                                <div id="dropzone" class="dropzone-area">
                                    <div class="dropzone-content">
                                        <i class="mdi-image-photo-camera"></i>
                                        <p>Klik untuk memilih foto atau seret foto ke sini</p>
                                        <small>Format: JPG, PNG, GIF (Maksimal 5MB per file)</small>
                                    </div>
                                    <div id="file-preview" class="file-preview"></div>
                                </div>
                                <input type="file" id="file-input" name="foto[]" multiple accept="image/*" style="display: none;">
                            </div>
                            @error('foto')
                                <span class="red-text text-darken-2" style="font-size: 12px;">
                                    <i class="mdi-alert-error tiny"></i> {{ $message }}
                                </span>
                            @enderror
                            @error('foto.*')
                                <span class="red-text text-darken-2" style="font-size: 12px;">
                                    <i class="mdi-alert-error tiny"></i> {{ $message }}
                                </span>
                            @enderror
                        </div>
                    </div>

                    <div class="row">
                        <div class="col s12">
                            <label>Dokumen Tambahan (.PDF)</label>
                            <div class="file-upload-container">
                                <div id="pdf-dropzone" class="dropzone-area pdf-dropzone">
                                    <div class="dropzone-content">
                                        <i class="mdi-file-pdf-box"></i>
                                        <p>Klik untuk memilih PDF atau seret PDF ke sini</p>
                                        <small>Format: PDF (Maksimal 10MB per file)</small>
                                    </div>
                                    <div id="pdf-file-preview" class="file-preview"></div>
                                </div>
                                <input type="file" id="pdf-file-input" name="dokumen[]" multiple accept=".pdf" style="display: none;">
                            </div>
                            @error('dokumen')
                                <span class="red-text text-darken-2" style="font-size: 12px;">
                                    <i class="mdi-alert-error tiny"></i> {{ $message }}
                                </span>
                            @enderror
                            @error('dokumen.*')
                                <span class="red-text text-darken-2" style="font-size: 12px;">
                                    <i class="mdi-alert-error tiny"></i> {{ $message }}
                                </span>
                            @enderror
                        </div>
                    </div>

                    <div class="card-action right-align">
                        <a href="{{ url()->previous() }}" class="btn grey">Batal</a>
                        <button type="submit" class="btn indigo">
                            <i class="mdi-content-save left"></i> Simpan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Custom CSS untuk Dropzone -->
<style>
/* Styling untuk alert messages */
.card-panel {
    margin-bottom: 20px;
    border-radius: 4px;
    position: relative;
    animation: slideInDown 0.5s ease-out;
}

.card-panel.red {
    border-left: 4px solid #f44336 !important;
}

.card-panel.green {
    border-left: 4px solid #4caf50 !important;
}

.card-panel i.left {
    margin-right: 10px;
    font-size: 20px;
}

.card-panel ul {
    margin: 5px 0 0 20px;
    padding-left: 0;
}

.card-panel li {
    margin-bottom: 2px;
}

/* Animasi untuk alert */
@keyframes slideInDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Styling untuk error fields */
.invalid {
    border-color: #f44336 !important;
    box-shadow: 0 1px 0 0 #f44336 !important;
}

.invalid + label {
    color: #f44336 !important;
}

.invalid:focus {
    border-color: #f44336 !important;
    box-shadow: 0 1px 0 0 #f44336 !important;
}

/* Error message styling */
.red-text.text-darken-2 {
    display: block;
    margin-top: 5px;
    font-weight: 500;
}

.red-text.text-darken-2 i {
    margin-right: 5px;
    vertical-align: middle;
}

/* File Upload Container */
.file-upload-container {
    margin-top: 10px;
}

/* Dropzone Area */
.dropzone-area {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    background: #f9f9f9;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    min-height: 200px;
}

.dropzone-area:hover {
    border-color: #00bcd4;
    background: #f0f9ff;
    box-shadow: 0 2px 8px rgba(0, 188, 212, 0.15);
}

.dropzone-area.dragover {
    border-color: #00bcd4;
    background: #e0f7fa;
    box-shadow: 0 4px 12px rgba(0, 188, 212, 0.2);
}

.dropzone-area.error {
    border-color: #f44336;
    background: #ffebee;
}

.dropzone-area.has-files {
    cursor: default;
}

.dropzone-area.has-files .dropzone-content {
    display: none;
}

/* Dropzone Content */
.dropzone-content i {
    font-size: 48px;
    color: #ccc;
    transition: all 0.3s ease;
    display: block;
    margin-bottom: 15px;
}

.dropzone-area:hover i {
    color: #00bcd4;
    transform: scale(1.1);
}

.dropzone-area.dragover i {
    color: #00bcd4;
    transform: scale(1.1);
}

.dropzone-content p {
    margin: 10px 0 5px 0;
    font-size: 16px;
    color: #666;
}

.dropzone-content small {
    color: #999;
    font-size: 12px;
}

/* File Preview */
.file-preview {
    margin-top: 20px;
    display: none;
}

.file-preview.show {
    display: block;
}

.file-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 15px;
}

.file-item {
    position: relative;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px;
    background: white;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.file-item:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.file-item img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 6px;
}

.file-item .file-name {
    font-size: 11px;
    color: #666;
    margin-bottom: 3px;
    word-break: break-word;
    line-height: 1.2;
    max-height: 2.4em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.file-item .file-size {
    font-size: 10px;
    color: #999;
    margin-bottom: 6px;
}

.file-item .remove-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #f44336;
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-item .remove-btn:hover {
    background: #d32f2f;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Loading state */
.dropzone-area.loading {
    pointer-events: none;
    opacity: 0.7;
}

.dropzone-area.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #00bcd4;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Add More File Item */
.add-more-item {
    border: 2px dashed #ddd;
    background: #fafafa;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

.add-more-item:hover {
    border-color: #00bcd4;
    background: #f0f9ff;
    transform: translateY(-2px);
}

.add-more-item:hover i {
    color: #00bcd4 !important;
}

.add-more-content {
    text-align: center;
}

/* PDF Dropzone Styling */
.pdf-dropzone {
    border-color: #ff5722;
    background: #fff3e0;
}

.pdf-dropzone:hover {
    border-color: #e64a19;
    background: #ffe0b2;
    box-shadow: 0 2px 8px rgba(255, 87, 34, 0.15);
}

.pdf-dropzone.dragover {
    border-color: #e64a19;
    background: #ffccbc;
    box-shadow: 0 4px 12px rgba(255, 87, 34, 0.2);
}

.pdf-dropzone .dropzone-content i {
    color: #ff5722;
}

.pdf-dropzone:hover .dropzone-content i {
    color: #e64a19;
    transform: scale(1.1);
}

.pdf-dropzone.dragover .dropzone-content i {
    color: #e64a19;
    transform: scale(1.1);
}

/* PDF File Item Styling */
.pdf-file-item {
    border-color: #ff5722;
    background: #fff3e0;
}

.pdf-file-item:hover {
    border-color: #e64a19;
    background: #ffe0b2;
}

.pdf-file-item .file-icon {
    font-size: 48px;
    color: #ff5722;
    margin-bottom: 8px;
}

.pdf-file-item .remove-btn {
    background: #ff5722;
}

.pdf-file-item .remove-btn:hover {
    background: #e64a19;
}
</style>

<!-- JavaScript untuk Dropzone -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const dropzone = document.getElementById('dropzone');
    const fileInput = document.getElementById('file-input');
    const filePreview = document.getElementById('file-preview');

    let selectedFiles = [];

    dropzone.addEventListener('click', function() {
        if (selectedFiles.length === 0) {
            fileInput.click();
        }
    });

    dropzone.addEventListener('dragover', function(e) {
        e.preventDefault();
        e.stopPropagation();
        this.classList.add('dragover');
    });

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

    dropzone.addEventListener('drop', function(e) {
        e.preventDefault();
        e.stopPropagation();
        this.classList.remove('dragover');

        const files = Array.from(e.dataTransfer.files);
        handleFiles(files);
    });

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

    function handleFiles(files) {
        const validFiles = files.filter(file => {
            if (!file.type.startsWith('image/')) {
                alert(`File ${file.name} bukan file gambar yang valid`);
                return false;
            }

            if (file.size > 5 * 1024 * 1024) {
                alert(`File ${file.name} terlalu besar (maksimal 5MB)`);
                return false;
            }

            return true;
        });

        if (validFiles.length > 0) {
            selectedFiles = selectedFiles.concat(validFiles);
            updatePreview();
            updateFileInput();
        }
    }

    function updatePreview() {
        if (selectedFiles.length === 0) {
            filePreview.classList.remove('show');
            dropzone.classList.remove('has-files');
            return;
        }

        filePreview.classList.add('show');
        dropzone.classList.add('has-files');

        let html = '<div class="file-preview-grid">';

        selectedFiles.forEach((file, index) => {
            const fileSize = formatFileSize(file.size);

            html += `
                <div class="file-item">
                    <img src="${URL.createObjectURL(file)}" alt="${file.name}">
                    <div class="file-name">${file.name}</div>
                    <div class="file-size">${fileSize}</div>
                    <button type="button" class="remove-btn" onclick="removeFile(${index})">×</button>
                </div>
            `;
        });

        html += `
            <div class="file-item add-more-item" onclick="addMoreFiles()">
                <div class="add-more-content">
                    <i class="mdi-add" style="font-size: 24px; color: #ccc; margin-bottom: 8px;"></i>
                    <div style="font-size: 11px; color: #999;">Tambah File</div>
                </div>
            </div>
        `;

        html += '</div>';
        filePreview.innerHTML = html;
    }

    window.removeFile = function(index) {
        selectedFiles.splice(index, 1);
        updatePreview();
        updateFileInput();
    };

    function updateFileInput() {
        const dt = new DataTransfer();

        selectedFiles.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', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));

        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }

    window.addMoreFiles = function() {
        fileInput.click();
    };

    document.querySelector('form').addEventListener('submit', function(e) {
        let isValid = true;
        const errorMessages = [];

        const tahunSelect = document.getElementById('tahun');
        if (!tahunSelect.value) {
            isValid = false;
            errorMessages.push('Tahun harus dipilih');
            tahunSelect.classList.add('invalid');
        } else {
            tahunSelect.classList.remove('invalid');
        }

        const kondisiSelect = document.getElementById('kondisi_id');
        if (!kondisiSelect.value) {
            isValid = false;
            errorMessages.push('Kondisi harus dipilih');
            kondisiSelect.classList.add('invalid');
        } else {
            kondisiSelect.classList.remove('invalid');
        }

        if (selectedFiles.length > 0) {
            const invalidFiles = selectedFiles.filter(file => {
                return !file.type.startsWith('image/') || file.size > 5 * 1024 * 1024;
            });

            if (invalidFiles.length > 0) {
                isValid = false;
                errorMessages.push('Beberapa file foto tidak valid');
                dropzone.classList.add('error');
            } else {
                dropzone.classList.remove('error');
            }
        }

        if (selectedPdfFiles.length > 0) {
            const invalidPdfFiles = selectedPdfFiles.filter(file => {
                return file.type !== 'application/pdf' || file.size > 10 * 1024 * 1024;
            });

            if (invalidPdfFiles.length > 0) {
                isValid = false;
                errorMessages.push('Beberapa file PDF tidak valid');
                pdfDropzone.classList.add('error');
            } else {
                pdfDropzone.classList.remove('error');
            }
        }

        if (!isValid) {
            e.preventDefault();

            const errorDiv = document.createElement('div');
            errorDiv.className = 'card-panel red lighten-4 red-text text-darken-4';
            errorDiv.style.borderLeft = '4px solid #f44336';
            errorDiv.innerHTML = `
                <i class="mdi-alert-error left"></i>
                <strong>Validasi Error:</strong>
                <ul style="margin: 5px 0 0 20px;">
                    ${errorMessages.map(msg => `<li>${msg}</li>`).join('')}
                </ul>
            `;

            const form = document.querySelector('form');
            form.parentNode.insertBefore(errorDiv, form);
            errorDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
            return;
        }

        if (selectedFiles.length > 0) {
            updateFileInput();
        }

        if (selectedPdfFiles.length > 0) {
            updatePdfFileInput();
        }
    });
});

let selectedPdfFiles = [];
let pdfDropzone;

document.addEventListener('DOMContentLoaded', function() {
    pdfDropzone = document.getElementById('pdf-dropzone');
    const pdfFileInput = document.getElementById('pdf-file-input');
    const pdfFilePreview = document.getElementById('pdf-file-preview');

    pdfDropzone.addEventListener('click', function() {
        if (selectedPdfFiles.length === 0) {
            pdfFileInput.click();
        }
    });

    pdfDropzone.addEventListener('dragover', function(e) {
        e.preventDefault();
        e.stopPropagation();
        this.classList.add('dragover');
    });

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

    pdfDropzone.addEventListener('drop', function(e) {
        e.preventDefault();
        e.stopPropagation();
        this.classList.remove('dragover');

        const files = Array.from(e.dataTransfer.files);
        handlePdfFiles(files);
    });

    pdfFileInput.addEventListener('change', function(e) {
        const files = Array.from(e.target.files);
        handlePdfFiles(files);
    });

    function handlePdfFiles(files) {
        const validFiles = files.filter(file => {
            if (file.type !== 'application/pdf') {
                alert(`File ${file.name} bukan file PDF yang valid`);
                return false;
            }

            if (file.size > 10 * 1024 * 1024) {
                alert(`File ${file.name} terlalu besar (maksimal 10MB)`);
                return false;
            }

            return true;
        });

        if (validFiles.length > 0) {
            selectedPdfFiles = selectedPdfFiles.concat(validFiles);
            updatePdfPreview();
            updatePdfFileInput();
        }
    }

    function updatePdfPreview() {
        if (selectedPdfFiles.length === 0) {
            pdfFilePreview.classList.remove('show');
            pdfDropzone.classList.remove('has-files');
            return;
        }

        pdfFilePreview.classList.add('show');
        pdfDropzone.classList.add('has-files');

        let html = '<div class="file-preview-grid">';

        selectedPdfFiles.forEach((file, index) => {
            const fileSize = formatFileSize(file.size);

            html += `
                <div class="file-item pdf-file-item">
                    <div class="file-icon">
                        <i class="mdi-file-pdf-box"></i>
                    </div>
                    <div class="file-name">${file.name}</div>
                    <div class="file-size">${fileSize}</div>
                    <button type="button" class="remove-btn" onclick="removePdfFile(${index})">×</button>
                </div>
            `;
        });

        html += `
            <div class="file-item add-more-item" onclick="addMorePdfFiles()">
                <div class="add-more-content">
                    <i class="mdi-add" style="font-size: 24px; color: #ccc; margin-bottom: 8px;"></i>
                    <div style="font-size: 11px; color: #999;">Tambah PDF</div>
                </div>
            </div>
        `;

        html += '</div>';
        pdfFilePreview.innerHTML = html;
    }

    window.removePdfFile = function(index) {
        selectedPdfFiles.splice(index, 1);
        updatePdfPreview();
        updatePdfFileInput();
    };

    window.updatePdfFileInput = function() {
        const pdfFileInput = document.getElementById('pdf-file-input');
        const dt = new DataTransfer();

        selectedPdfFiles.forEach(file => {
            dt.items.add(file);
        });

        pdfFileInput.files = dt.files;
    };

    window.addMorePdfFiles = function() {
        pdfFileInput.click();
    };

    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>
@endsection