@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>
                        Edit Data Kondisi Sarpras Irigasi
                    </span>
                    <a href="{{ route('sarpras-irigasi.show', $kondisiSarpras->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-irigasi.update', $kondisiSarpras->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <!-- Hidden input untuk file yang akan dihapus -->
                    <input type="hidden" name="delete_files" id="delete_files_input" value="">
                    <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>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', $kondisiSarpras->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 name="kondisi_id" id="kondisi_id" class="browser-default @error('kondisi_id') invalid @enderror" required>
                                <option value="" disabled>Pilih Kondisi</option>
                                @foreach($kondisiList as $kondisi)
                                <option value="{{ $kondisi->id }}" {{ old('kondisi_id', $kondisiSarpras->kondisi_id) == $kondisi->id ? 'selected' : '' }}>{{ $kondisi->kondisi }} ({{ $kondisi->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', $kondisiSarpras->keterangan) }}</textarea>
                        <label for="keterangan" class="active">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>

                    <!-- Upload foto baru -->
                    <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">
                                        <!-- Existing photos will be loaded here dynamically -->
                                    </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>

                    <!-- Upload PDF baru -->
                    <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">
                                        <!-- Existing PDFs will be loaded here dynamically -->
                                    </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="{{ route('sarpras-irigasi.show', $kondisiSarpras->sarpras_id) }}" class="btn grey">Batal</a>
                        <button type="submit" class="btn indigo">
                            <i class="mdi-content-save left"></i> Update
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- CSS untuk styling alert dan error -->
<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;
    }
}

/* Flexbox utilities */
.d-flex {
    display: flex;
}

.justify-content-between {
    justify-content: space-between;
}

.align-items-center {
    align-items: center;
}

/* 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;
}

/* Label styling */
label {
    font-weight: 500;
    color: #424242;
    margin-bottom: 8px;
    display: block;
}

/* Section divider */
.row {
    margin-bottom: 20px;
}

.row:last-child {
    margin-bottom: 0;
}

/* Card styling consistency */
.card {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-content {
    padding: 24px;
}

.card-title {
    font-size: 20px;
    font-weight: 500;
    color: #424242;
    margin-bottom: 20px;
}

/* Form field styling */
.input-field {
    margin-bottom: 20px;
}

.input-field label {
    font-weight: 500;
    color: #424242;
}

/* Select styling */
select.browser-default {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 12px;
    background: white;
    transition: all 0.3s ease;
}

select.browser-default:focus {
    border-color: #00bcd4;
    box-shadow: 0 0 0 2px rgba(0, 188, 212, 0.2);
}

/* Textarea styling */
.materialize-textarea {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px;
    min-height: 100px;
    transition: all 0.3s ease;
}

.materialize-textarea:focus {
    border-color: #00bcd4;
    box-shadow: 0 0 0 2px rgba(0, 188, 212, 0.2);
}

/* Button styling */
.btn {
    border-radius: 4px;
    font-weight: 500;
    text-transform: none;
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn.indigo {
    background-color: #3f51b5;
}

.btn.indigo:hover {
    background-color: #303f9f;
}

.btn.grey {
    background-color: #9e9e9e;
}

.btn.grey:hover {
    background-color: #757575;
}

/* Card action styling */
.card-action {
    padding: 16px 24px;
    border-top: 1px solid #e0e0e0;
    background: #fafafa;
    border-radius: 0 0 8px 8px;
}

/* 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); }
}

/* Existing Dokumen Styling */
.existing-dokumen {
    margin-top: 10px;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.existing-dokumen label {
    font-weight: 500;
    color: #424242;
    margin-bottom: 10px;
    display: block;
}

.dokumen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 10px;
}

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

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

.dokumen-thumbnail {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 8px;
}

.pdf-thumbnail {
    width: 100%;
    height: 80px;
    background: #fff3e0;
    border: 2px dashed #ff5722;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.pdf-thumbnail i {
    font-size: 32px;
    color: #ff5722;
}

.dokumen-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dokumen-type {
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

.dokumen-info .btn-small {
    height: 28px;
    line-height: 28px;
    font-size: 11px;
    padding: 0 8px;
}

/* 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 */
.file-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 15px;
}

/* File Item Styling */
.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);
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.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);
}

/* 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;
}

/* Existing File Styling */
.existing-file-item {
    border-color: #4caf50;
    background: #f1f8e9;
    position: relative;
}

.existing-file-item:hover {
    border-color: #388e3c;
    background: #e8f5e8;
}

.existing-file-item .remove-btn {
    background: #4caf50;
}

.existing-file-item .remove-btn:hover {
    background: #388e3c;
}

/* View Button Styling */
.view-btn {
    position: absolute;
    bottom: -6px;
    left: -6px;
    background: #2196f3;
    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;
    text-decoration: none;
}

.view-btn:hover {
    background: #1976d2;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    color: white;
}

.view-btn i {
    font-size: 12px;
}

/* Existing PDF File Item Styling */
.existing-file-item.pdf-file-item {
    border-color: #ff9800;
    background: #fff8e1;
}

.existing-file-item.pdf-file-item:hover {
    border-color: #f57c00;
    background: #fff3e0;
}

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

.existing-file-item.pdf-file-item .remove-btn:hover {
    background: #f57c00;
}

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

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

<script>
const existingPhotos = {!! json_encode($kondisiSarpras->dokumen->filter(function($dokumen) {
    return strtolower($dokumen->jenis_dokumen) === 'image' ||
           in_array(strtolower(pathinfo($dokumen->file_dokumen, PATHINFO_EXTENSION)), ['jpg', 'jpeg', 'png', 'gif']);
})->values()->map(function($dokumen) {
    return [
        'id' => $dokumen->id,
        'name' => $dokumen->file_dokumen,
        'url' => asset('storage/dokumen_kondisi_irigasi/' . $dokumen->file_dokumen),
        'size' => 'Existing file',
        'isExisting' => true
    ];
})) !!};

const existingPdfs = {!! json_encode($kondisiSarpras->dokumen->filter(function($dokumen) {
    return strtolower($dokumen->jenis_dokumen) === 'pdf' ||
           strpos(strtolower($dokumen->file_dokumen), '.pdf') !== false;
})->values()->map(function($dokumen) {
    return [
        'id' => $dokumen->id,
        'name' => $dokumen->file_dokumen,
        'url' => asset('storage/dokumen_kondisi_irigasi/' . $dokumen->file_dokumen),
        'size' => 'Existing file',
        'isExisting' => true
    ];
})) !!};

let selectedFiles = [];
let selectedPdfFiles = [];

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

    if (existingPhotos.length > 0) {
        selectedFiles = [...existingPhotos];
        updatePreview();
        dropzone.classList.add('has-files');
    }

    if (existingPdfs.length > 0) {
        selectedPdfFiles = [...existingPdfs];
        updatePdfPreview();
        pdfDropzone.classList.add('has-files');
    }

    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 = file.isExisting ? file.size : formatFileSize(file.size);
            const imageSrc = file.isExisting ? file.url : URL.createObjectURL(file);
            const removeBtn = file.isExisting ?
                `<button type="button" class="remove-btn existing-file" onclick="removeExistingFile(${file.id}, ${index})" title="Hapus file">×</button>` :
                `<button type="button" class="remove-btn" onclick="removeFile(${index})" title="Hapus file">×</button>`;

            html += `
                <div class="file-item ${file.isExisting ? 'existing-file-item' : ''}">
                    <img src="${imageSrc}" alt="${file.name}">
                    <div class="file-name">${file.name}</div>
                    <div class="file-size">${fileSize}</div>
                    ${removeBtn}
                    ${file.isExisting ? `<a href="${file.url}" target="_blank" class="view-btn" title="Lihat file"><i class="mdi-image-photo"></i></a>` : ''}
                </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;
    }

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

        selectedFiles.filter(file => !file.isExisting).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.removeFile = function(index) {
        selectedFiles.splice(index, 1);
        updatePreview();
        updateFileInput();
    };

    window.removeExistingFile = function(fileId, index) {
        if (confirm('Apakah Anda yakin ingin menghapus file ini?')) {
            const deleteInput = document.getElementById('delete_files_input');
            let currentValue = deleteInput.value;
            let fileIds = currentValue ? currentValue.split(',').filter(id => id.trim() !== '') : [];

            if (!fileIds.includes(fileId.toString())) {
                fileIds.push(fileId.toString());
            }

            deleteInput.value = fileIds.join(',');

            selectedFiles.splice(index, 1);
            updatePreview();
            updateFileInput();
        }
    };

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

    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 = file.isExisting ? file.size : formatFileSize(file.size);
            const removeBtn = file.isExisting ?
                `<button type="button" class="remove-btn existing-file" onclick="removeExistingPdfFile(${file.id}, ${index})" title="Hapus file">×</button>` :
                `<button type="button" class="remove-btn" onclick="removePdfFile(${index})" title="Hapus file">×</button>`;

            html += `
                <div class="file-item pdf-file-item ${file.isExisting ? 'existing-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>
                    ${removeBtn}
                    ${file.isExisting ? `<a href="${file.url}" target="_blank" class="view-btn" title="Lihat file"><i class="mdi-editor-insert-drive-file"></i></a>` : ''}
                </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;
    }

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

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

        pdfFileInput.files = dt.files;
    }

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

    window.removeExistingPdfFile = function(fileId, index) {
        if (confirm('Apakah Anda yakin ingin menghapus file ini?')) {
            const deleteInput = document.getElementById('delete_files_input');
            let currentValue = deleteInput.value;
            let fileIds = currentValue ? currentValue.split(',').filter(id => id.trim() !== '') : [];

            if (!fileIds.includes(fileId.toString())) {
                fileIds.push(fileId.toString());
            }

            deleteInput.value = fileIds.join(',');

            selectedPdfFiles.splice(index, 1);
            updatePdfPreview();
            updatePdfFileInput();
        }
    };

    window.addMorePdfFiles = function() {
        pdfFileInput.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.filter(f => !f.isExisting).length > 0) {
            const invalidFiles = selectedFiles.filter(file => !file.isExisting && (!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.filter(f => !f.isExisting).length > 0) {
            const invalidPdfFiles = selectedPdfFiles.filter(file => !file.isExisting && (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.filter(f => !f.isExisting).length > 0) {
            updateFileInput();
        }

        if (selectedPdfFiles.filter(f => !f.isExisting).length > 0) {
            updatePdfFileInput();
        }
    });
});
</script>
@endsection