@extends('layouts.app')

@section('title', 'Edit Layanan Jasa')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="mb-0"><i class="fas fa-edit"></i> Edit Layanan Jasa</h4>
                    <div class="btn-group">
                        <a href="{{ route('layanan-jasa.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Kembali
                        </a>
                        <a href="{{ route('layanan-jasa.show', $layananJasa->id) }}" class="btn btn-info">
                            <i class="fas fa-eye"></i> Lihat Detail
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    @if($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <strong>Terjadi kesalahan!</strong>
                            <ul class="mb-0 mt-2">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    <form action="{{ route('layanan-jasa.update', $layananJasa->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" id="layananTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="basic-tab" data-bs-toggle="tab" data-bs-target="#basic" type="button" role="tab">
                                    <i class="fas fa-info-circle"></i> Informasi Dasar
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="pricing-tab" data-bs-toggle="tab" data-bs-target="#pricing" type="button" role="tab">
                                    <i class="fas fa-dollar-sign"></i> Harga & Durasi
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="media-tab" data-bs-toggle="tab" data-bs-target="#media" type="button" role="tab">
                                    <i class="fas fa-images"></i> Media & Galeri
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="advanced-tab" data-bs-toggle="tab" data-bs-target="#advanced" type="button" role="tab">
                                    <i class="fas fa-sliders-h"></i> Pengaturan Lanjutan
                                </button>
                            </li>
                        </ul>

                        <!-- Tab panes -->
                        <div class="tab-content mt-3" id="layananTabContent">
                            <!-- Informasi Dasar -->
                            <div class="tab-pane fade show active" id="basic" role="tabpanel">
                                <div class="row">
                                    <div class="col-md-8">
                                        <!-- Nama Layanan -->
                                        <div class="mb-3">
                                            <label for="nama_layanan" class="form-label">Nama Layanan <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control @error('nama_layanan') is-invalid @enderror" 
                                                   id="nama_layanan" name="nama_layanan" value="{{ old('nama_layanan', $layananJasa->nama_layanan) }}" 
                                                   placeholder="Masukkan nama layanan" required>
                                            @error('nama_layanan')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- Deskripsi -->
                                        <div class="mb-3">
                                            <label for="deskripsi" class="form-label">Deskripsi Layanan</label>
                                            <textarea class="form-control @error('deskripsi') is-invalid @enderror" 
                                                      id="deskripsi" name="deskripsi" rows="4" 
                                                      placeholder="Masukkan deskripsi lengkap layanan">{{ old('deskripsi', $layananJasa->deskripsi) }}</textarea>
                                            @error('deskripsi')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- Kategori -->
                                        <div class="mb-3">
                                            <label for="kategori" class="form-label">Kategori <span class="text-danger">*</span></label>
                                            <select class="form-select @error('kategori') is-invalid @enderror" id="kategori" name="kategori" required>
                                                <option value="">Pilih Kategori</option>
                                                @foreach($kategoris as $kat)
                                                    <option value="{{ $kat }}" {{ old('kategori', $layananJasa->kategori) == $kat ? 'selected' : '' }}>
                                                        {{ ucfirst($kat) }}
                                                    </option>
                                                @endforeach
                                                <option value="instalasi" {{ old('kategori', $layananJasa->kategori) == 'instalasi' ? 'selected' : '' }}>Instalasi</option>
                                                <option value="maintenance" {{ old('kategori', $layananJasa->kategori) == 'maintenance' ? 'selected' : '' }}>Maintenance</option>
                                                <option value="repair" {{ old('kategori', $layananJasa->kategori) == 'repair' ? 'selected' : '' }}>Repair</option>
                                                <option value="konsultasi" {{ old('kategori', $layananJasa->kategori) == 'konsultasi' ? 'selected' : '' }}>Konsultasi</option>
                                                <option value="upgrade" {{ old('kategori', $layananJasa->kategori) == 'upgrade' ? 'selected' : '' }}>Upgrade</option>
                                            </select>
                                            @error('kategori')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- Tipe Layanan -->
                                        <div class="mb-3">
                                            <label for="tipe_layanan" class="form-label">Tipe Layanan <span class="text-danger">*</span></label>
                                            <select class="form-select @error('tipe_layanan') is-invalid @enderror" id="tipe_layanan" name="tipe_layanan" required>
                                                <option value="">Pilih Tipe Layanan</option>
                                                <option value="one_time" {{ old('tipe_layanan', $layananJasa->tipe_layanan) == 'one_time' ? 'selected' : '' }}>Sekali Pakai</option>
                                                <option value="recurring" {{ old('tipe_layanan', $layananJasa->tipe_layanan) == 'recurring' ? 'selected' : '' }}>Berulang</option>
                                                <option value="subscription" {{ old('tipe_layanan', $layananJasa->tipe_layanan) == 'subscription' ? 'selected' : '' }}>Berlangganan</option>
                                            </select>
                                            @error('tipe_layanan')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <!-- Status -->
                                        <div class="mb-3">
                                            <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                                            <select class="form-select @error('status') is-invalid @enderror" id="status" name="status" required>
                                                <option value="">Pilih Status</option>
                                                <option value="aktif" {{ old('status', $layananJasa->status) == 'aktif' ? 'selected' : '' }}>Aktif</option>
                                                <option value="non_aktif" {{ old('status', $layananJasa->status) == 'non_aktif' ? 'selected' : '' }}>Non Aktif</option>
                                                <option value="draft" {{ old('status', $layananJasa->status) == 'draft' ? 'selected' : '' }}>Draft</option>
                                            </select>
                                            @error('status')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- Ketersediaan -->
                                        <div class="mb-3">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="tersedia" name="tersedia" value="1" 
                                                       {{ old('tersedia', $layananJasa->tersedia) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="tersedia">
                                                    Layanan Tersedia
                                                </label>
                                            </div>
                                        </div>

                                        <!-- Featured -->
                                        <div class="mb-3">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="is_featured" name="is_featured" value="1" 
                                                       {{ old('is_featured', $layananJasa->is_featured) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="is_featured">
                                                    Layanan Unggulan
                                                </label>
                                            </div>
                                        </div>

                                        <!-- Info Card -->
                                        <div class="card bg-light">
                                            <div class="card-body">
                                                <h6 class="card-title"><i class="fas fa-info-circle"></i> Informasi</h6>
                                                <ul class="small mb-0">
                                                    <li><strong>Dibuat:</strong> {{ $layananJasa->created_at->format('d/m/Y H:i') }}</li>
                                                    <li><strong>Diupdate:</strong> {{ $layananJasa->updated_at->format('d/m/Y H:i') }}</li>
                                                    <li><strong>Oleh:</strong> {{ $layananJasa->createdBy->name ?? 'System' }}</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Harga & Durasi -->
                            <div class="tab-pane fade" id="pricing" role="tabpanel">
                                <div class="row">
                                    <div class="col-md-6">
                                        <!-- Harga Dasar -->
                                        <div class="mb-3">
                                            <label for="harga_dasar" class="form-label">Harga Dasar <span class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <span class="input-group-text">Rp</span>
                                                <input type="number" class="form-control @error('harga_dasar') is-invalid @enderror" 
                                                       id="harga_dasar" name="harga_dasar" value="{{ old('harga_dasar', $layananJasa->harga_dasar) }}" 
                                                       min="0" step="1000" required>
                                            </div>
                                            @error('harga_dasar')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- Harga Promo -->
                                        <div class="mb-3">
                                            <label for="harga_promo" class="form-label">Harga Promo</label>
                                            <div class="input-group">
                                                <span class="input-group-text">Rp</span>
                                                <input type="number" class="form-control @error('harga_promo') is-invalid @enderror" 
                                                       id="harga_promo" name="harga_promo" value="{{ old('harga_promo', $layananJasa->harga_promo) }}" 
                                                       min="0" step="1000">
                                            </div>
                                            @error('harga_promo')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- Satuan Harga -->
                                        <div class="mb-3">
                                            <label for="satuan_harga" class="form-label">Satuan Harga <span class="text-danger">*</span></label>
                                            <select class="form-select @error('satuan_harga') is-invalid @enderror" id="satuan_harga" name="satuan_harga" required>
                                                <option value="">Pilih Satuan</option>
                                                <option value="per_unit" {{ old('satuan_harga', $layananJasa->satuan_harga) == 'per_unit' ? 'selected' : '' }}>Per Unit</option>
                                                <option value="per_jam" {{ old('satuan_harga', $layananJasa->satuan_harga) == 'per_jam' ? 'selected' : '' }}>Per Jam</option>
                                                <option value="per_hari" {{ old('satuan_harga', $layananJasa->satuan_harga) == 'per_hari' ? 'selected' : '' }}>Per Hari</option>
                                                <option value="per_bulan" {{ old('satuan_harga', $layananJasa->satuan_harga) == 'per_bulan' ? 'selected' : '' }}>Per Bulan</option>
                                                <option value="per_tahun" {{ old('satuan_harga', $layananJasa->satuan_harga) == 'per_tahun' ? 'selected' : '' }}>Per Tahun</option>
                                                <option value="per_project" {{ old('satuan_harga', $layananJasa->satuan_harga) == 'per_project' ? 'selected' : '' }}>Per Project</option>
                                            </select>
                                            @error('satuan_harga')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <!-- Durasi Estimasi -->
                                        <div class="mb-3">
                                            <label for="durasi_estimasi" class="form-label">Durasi Estimasi</label>
                                            <input type="number" class="form-control @error('durasi_estimasi') is-invalid @enderror" 
                                                   id="durasi_estimasi" name="durasi_estimasi" value="{{ old('durasi_estimasi', $layananJasa->durasi_estimasi) }}" 
                                                   min="1" placeholder="Estimasi waktu pengerjaan">
                                            @error('durasi_estimasi')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- Durasi Satuan -->
                                        <div class="mb-3">
                                            <label for="durasi_satuan" class="form-label">Satuan Durasi <span class="text-danger">*</span></label>
                                            <select class="form-select @error('durasi_satuan') is-invalid @enderror" id="durasi_satuan" name="durasi_satuan" required>
                                                <option value="">Pilih Satuan</option>
                                                <option value="menit" {{ old('durasi_satuan', $layananJasa->durasi_satuan) == 'menit' ? 'selected' : '' }}>Menit</option>
                                                <option value="jam" {{ old('durasi_satuan', $layananJasa->durasi_satuan) == 'jam' ? 'selected' : '' }}>Jam</option>
                                                <option value="hari" {{ old('durasi_satuan', $layananJasa->durasi_satuan) == 'hari' ? 'selected' : '' }}>Hari</option>
                                                <option value="minggu" {{ old('durasi_satuan', $layananJasa->durasi_satuan) == 'minggu' ? 'selected' : '' }}>Minggu</option>
                                                <option value="bulan" {{ old('durasi_satuan', $layananJasa->durasi_satuan) == 'bulan' ? 'selected' : '' }}>Bulan</option>
                                            </select>
                                            @error('durasi_satuan')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- Lead Time -->
                                        <div class="mb-3">
                                            <label for="lead_time_hari" class="form-label">Lead Time (Hari) <span class="text-danger">*</span></label>
                                            <input type="number" class="form-control @error('lead_time_hari') is-invalid @enderror" 
                                                   id="lead_time_hari" name="lead_time_hari" value="{{ old('lead_time_hari', $layananJasa->lead_time_hari) }}" 
                                                   min="0" required>
                                            <div class="form-text">Waktu persiapan sebelum layanan dimulai</div>
                                            @error('lead_time_hari')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Media & Galeri -->
                            <div class="tab-pane fade" id="media" role="tabpanel">
                                <div class="row">
                                    <div class="col-md-6">
                                        <!-- Gambar Saat Ini -->
                                        @if($layananJasa->gambar_layanan)
                                        <div class="mb-3">
                                            <label class="form-label">Gambar Saat Ini</label>
                                            <div class="border rounded p-3 text-center bg-light">
                                                <img src="{{ asset('storage/' . $layananJasa->gambar_layanan) }}" alt="{{ $layananJasa->nama_layanan }}" 
                                                     class="img-fluid" style="max-height: 200px; border-radius: 8px;">
                                                <p class="small text-muted mt-2 mb-0">{{ basename($layananJasa->gambar_layanan) }}</p>
                                            </div>
                                        </div>
                                        @endif

                                        <!-- Upload Gambar Baru -->
                                        <div class="mb-3">
                                            <label for="gambar_layanan" class="form-label">Upload Gambar Baru (Opsional)</label>
                                            <input type="file" class="form-control @error('gambar_layanan') is-invalid @enderror" 
                                                   id="gambar_layanan" name="gambar_layanan" accept="image/*">
                                            <div class="form-text">Format: JPEG, PNG, JPG, GIF. Maksimal 2MB. Kosongkan jika tidak ingin mengubah.</div>
                                            @error('gambar_layanan')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- Preview Gambar Baru -->
                                        <div class="mb-3" id="imagePreview" style="display: none;">
                                            <label class="form-label">Preview Gambar Baru</label>
                                            <div class="border rounded p-3 text-center">
                                                <img id="previewImg" src="" alt="Preview" class="img-fluid" style="max-height: 200px;">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <!-- Galeri Saat Ini -->
                                        @if($layananJasa->galeri_gambar && count($layananJasa->galeri_gambar) > 0)
                                        <div class="mb-3">
                                            <label class="form-label">Galeri Saat Ini</label>
                                            <div class="row">
                                                @foreach($layananJasa->galeri_gambar as $index => $gambar)
                                                <div class="col-md-6 mb-2">
                                                    <img src="{{ asset('storage/' . $gambar) }}" alt="Gallery {{ $index + 1 }}" 
                                                         class="img-fluid rounded" style="height: 80px; object-fit: cover;">
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        @endif

                                        <!-- Upload Galeri Baru -->
                                        <div class="mb-3">
                                            <label for="galeri_gambar" class="form-label">Upload Galeri Baru (Opsional)</label>
                                            <input type="file" class="form-control @error('galeri_gambar.*') is-invalid @enderror" 
                                                   id="galeri_gambar" name="galeri_gambar[]" accept="image/*" multiple>
                                            <div class="form-text">Pilih beberapa gambar untuk galeri. Akan menggantikan galeri yang ada.</div>
                                            @error('galeri_gambar.*')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Pengaturan Lanjutan -->
                            <div class="tab-pane fade" id="advanced" role="tabpanel">
                                <div class="row">
                                    <div class="col-md-6">
                                        <!-- Masa Garansi -->
                                        <div class="mb-3">
                                            <label for="masa_garansi_hari" class="form-label">Masa Garansi (Hari)</label>
                                            <input type="number" class="form-control @error('masa_garansi_hari') is-invalid @enderror" 
                                                   id="masa_garansi_hari" name="masa_garansi_hari" value="{{ old('masa_garansi_hari', $layananJasa->masa_garansi_hari) }}" 
                                                   min="0">
                                            @error('masa_garansi_hari')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- Layanan Emergency -->
                                        <div class="mb-3">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="layanan_emergency" name="layanan_emergency" value="1" 
                                                       {{ old('layanan_emergency', $layananJasa->layanan_emergency) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="layanan_emergency">
                                                    Layanan Emergency
                                                </label>
                                            </div>
                                        </div>

                                        <!-- Biaya Emergency -->
                                        <div class="mb-3" id="biaya_emergency_container" style="{{ old('layanan_emergency', $layananJasa->layanan_emergency) ? 'display: block;' : 'display: none;' }}">
                                            <label for="biaya_emergency" class="form-label">Biaya Emergency</label>
                                            <div class="input-group">
                                                <span class="input-group-text">Rp</span>
                                                <input type="number" class="form-control @error('biaya_emergency') is-invalid @enderror" 
                                                       id="biaya_emergency" name="biaya_emergency" value="{{ old('biaya_emergency', $layananJasa->biaya_emergency) }}" 
                                                       min="0" step="1000">
                                            </div>
                                            @error('biaya_emergency')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <!-- Include Maintenance -->
                                        <div class="mb-3">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="include_maintenance" name="include_maintenance" value="1" 
                                                       {{ old('include_maintenance', $layananJasa->include_maintenance) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="include_maintenance">
                                                    Termasuk Maintenance
                                                </label>
                                            </div>
                                        </div>

                                        <!-- Periode Maintenance -->
                                        <div class="mb-3" id="maintenance_periode_container" style="{{ old('include_maintenance', $layananJasa->include_maintenance) ? 'display: block;' : 'display: none;' }}">
                                            <label for="maintenance_periode_bulan" class="form-label">Periode Maintenance (Bulan)</label>
                                            <input type="number" class="form-control @error('maintenance_periode_bulan') is-invalid @enderror" 
                                                   id="maintenance_periode_bulan" name="maintenance_periode_bulan" value="{{ old('maintenance_periode_bulan', $layananJasa->maintenance_periode_bulan) }}" 
                                                   min="1">
                                            @error('maintenance_periode_bulan')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- Catatan Khusus -->
                                        <div class="mb-3">
                                            <label for="catatan_khusus" class="form-label">Catatan Khusus</label>
                                            <textarea class="form-control @error('catatan_khusus') is-invalid @enderror" 
                                                      id="catatan_khusus" name="catatan_khusus" rows="4" 
                                                      placeholder="Catatan khusus untuk layanan ini">{{ old('catatan_khusus', $layananJasa->catatan_khusus) }}</textarea>
                                            @error('catatan_khusus')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Submit Buttons -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="d-flex justify-content-end gap-2">
                                    <a href="{{ route('layanan-jasa.index') }}" class="btn btn-secondary">
                                        <i class="fas fa-times"></i> Batal
                                    </a>
                                    <a href="{{ route('layanan-jasa.show', $layananJasa->id) }}" class="btn btn-info">
                                        <i class="fas fa-eye"></i> Lihat Detail
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save"></i> Update Layanan
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .nav-tabs .nav-link {
        border-radius: 8px 8px 0 0;
    }
    
    .nav-tabs .nav-link.active {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
    }
    
    .form-control:focus, .form-select:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
    }
    
    .btn {
        border-radius: 6px;
    }
    
    .alert {
        border-radius: 8px;
    }
    
    #previewImg {
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .bg-light {
        background-color: #f8f9fa !important;
    }
</style>
@endpush

@push('scripts')
<script>
    // Image preview functionality
    document.getElementById('gambar_layanan').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('previewImg').src = e.target.result;
                document.getElementById('imagePreview').style.display = 'block';
            }
            reader.readAsDataURL(file);
        } else {
            document.getElementById('imagePreview').style.display = 'none';
        }
    });

    // Toggle conditional fields
    document.getElementById('layanan_emergency').addEventListener('change', function() {
        const container = document.getElementById('biaya_emergency_container');
        container.style.display = this.checked ? 'block' : 'none';
    });

    document.getElementById('include_maintenance').addEventListener('change', function() {
        const container = document.getElementById('maintenance_periode_container');
        container.style.display = this.checked ? 'block' : 'none';
    });

    // Confirm if user wants to change image
    document.getElementById('gambar_layanan').addEventListener('change', function(e) {
        if (e.target.files[0]) {
            if (!confirm('Gambar baru akan menggantikan gambar yang sudah ada. Lanjutkan?')) {
                e.target.value = '';
                document.getElementById('imagePreview').style.display = 'none';
            }
        }
    });

    // Form validation
    document.querySelector('form').addEventListener('submit', function(e) {
        const requiredFields = ['nama_layanan', 'kategori', 'tipe_layanan', 'harga_dasar', 'satuan_harga', 'durasi_satuan', 'status', 'lead_time_hari'];
        let isValid = true;

        requiredFields.forEach(fieldName => {
            const field = document.getElementById(fieldName);
            if (!field.value.trim()) {
                isValid = false;
                field.classList.add('is-invalid');
            } else {
                field.classList.remove('is-invalid');
            }
        });

        if (!isValid) {
            e.preventDefault();
            alert('Mohon lengkapi semua field yang wajib diisi!');
            return false;
        }
    });
</script>
@endpush