@extends('layouts.app')

@section('title', 'Tambah 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-plus"></i> Tambah Layanan Jasa</h4>
                    <a href="{{ route('layanan-jasa.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Kembali
                    </a>
                </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.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        
                        <!-- 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="details-tab" data-bs-toggle="tab" data-bs-target="#details" type="button" role="tab">
                                    <i class="fas fa-cogs"></i> Detail Teknis
                                </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') }}" 
                                                   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') }}</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>
                                            <div class="input-group">
                                                <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') == $kat ? 'selected' : '' }}>
                                                            {{ ucfirst($kat) }}
                                                        </option>
                                                    @endforeach
                                                    <option value="instalasi" {{ old('kategori') == 'instalasi' ? 'selected' : '' }}>Instalasi</option>
                                                    <option value="maintenance" {{ old('kategori') == 'maintenance' ? 'selected' : '' }}>Maintenance</option>
                                                    <option value="repair" {{ old('kategori') == 'repair' ? 'selected' : '' }}>Repair</option>
                                                    <option value="konsultasi" {{ old('kategori') == 'konsultasi' ? 'selected' : '' }}>Konsultasi</option>
                                                    <option value="upgrade" {{ old('kategori') == 'upgrade' ? 'selected' : '' }}>Upgrade</option>
                                                </select>
                                                <button class="btn btn-outline-secondary" type="button" id="addKategori">
                                                    <i class="fas fa-plus"></i>
                                                </button>
                                            </div>
                                            @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') == 'one_time' ? 'selected' : '' }}>Sekali Pakai</option>
                                                <option value="recurring" {{ old('tipe_layanan') == 'recurring' ? 'selected' : '' }}>Berulang</option>
                                                <option value="subscription" {{ old('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') == 'aktif' ? 'selected' : '' }}>Aktif</option>
                                                <option value="non_aktif" {{ old('status') == 'non_aktif' ? 'selected' : '' }}>Non Aktif</option>
                                                <option value="draft" {{ old('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') ? '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') ? 'checked' : '' }}>
                                                <label class="form-check-label" for="is_featured">
                                                    Layanan Unggulan
                                                </label>
                                            </div>
                                        </div>

                                        <!-- Kapasitas Maksimal -->
                                        <div class="mb-3">
                                            <label for="kapasitas_maksimal" class="form-label">Kapasitas Maksimal</label>
                                            <input type="number" class="form-control @error('kapasitas_maksimal') is-invalid @enderror" 
                                                   id="kapasitas_maksimal" name="kapasitas_maksimal" value="{{ old('kapasitas_maksimal') }}" 
                                                   min="1" placeholder="Jumlah maksimal per periode">
                                            @error('kapasitas_maksimal')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </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') }}" 
                                                       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') }}" 
                                                       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') == 'per_unit' ? 'selected' : '' }}>Per Unit</option>
                                                <option value="per_jam" {{ old('satuan_harga') == 'per_jam' ? 'selected' : '' }}>Per Jam</option>
                                                <option value="per_hari" {{ old('satuan_harga') == 'per_hari' ? 'selected' : '' }}>Per Hari</option>
                                                <option value="per_bulan" {{ old('satuan_harga') == 'per_bulan' ? 'selected' : '' }}>Per Bulan</option>
                                                <option value="per_tahun" {{ old('satuan_harga') == 'per_tahun' ? 'selected' : '' }}>Per Tahun</option>
                                                <option value="per_project" {{ old('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') }}" 
                                                   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') == 'menit' ? 'selected' : '' }}>Menit</option>
                                                <option value="jam" {{ old('durasi_satuan') == 'jam' ? 'selected' : '' }}>Jam</option>
                                                <option value="hari" {{ old('durasi_satuan') == 'hari' ? 'selected' : '' }}>Hari</option>
                                                <option value="minggu" {{ old('durasi_satuan') == 'minggu' ? 'selected' : '' }}>Minggu</option>
                                                <option value="bulan" {{ old('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', 1) }}" 
                                                   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>

                            <!-- Detail Teknis -->
                            <div class="tab-pane fade" id="details" role="tabpanel">
                                <div class="row">
                                    <div class="col-md-6">
                                        <!-- Persyaratan -->
                                        <div class="mb-3">
                                            <label class="form-label">Persyaratan</label>
                                            <div id="persyaratan-container">
                                                <div class="input-group mb-2">
                                                    <input type="text" class="form-control" name="persyaratan[]" placeholder="Masukkan persyaratan">
                                                    <button class="btn btn-outline-danger" type="button" onclick="removeField(this)">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="addField('persyaratan')">
                                                <i class="fas fa-plus"></i> Tambah Persyaratan
                                            </button>
                                        </div>

                                        <!-- Spesifikasi Teknis -->
                                        <div class="mb-3">
                                            <label class="form-label">Spesifikasi Teknis</label>
                                            <div id="spesifikasi_teknis-container">
                                                <div class="input-group mb-2">
                                                    <input type="text" class="form-control" name="spesifikasi_teknis[]" placeholder="Masukkan spesifikasi teknis">
                                                    <button class="btn btn-outline-danger" type="button" onclick="removeField(this)">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="addField('spesifikasi_teknis')">
                                                <i class="fas fa-plus"></i> Tambah Spesifikasi
                                            </button>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <!-- Peralatan Dibutuhkan -->
                                        <div class="mb-3">
                                            <label class="form-label">Peralatan Dibutuhkan</label>
                                            <div id="peralatan_dibutuhkan-container">
                                                <div class="input-group mb-2">
                                                    <input type="text" class="form-control" name="peralatan_dibutuhkan[]" placeholder="Masukkan peralatan yang dibutuhkan">
                                                    <button class="btn btn-outline-danger" type="button" onclick="removeField(this)">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="addField('peralatan_dibutuhkan')">
                                                <i class="fas fa-plus"></i> Tambah Peralatan
                                            </button>
                                        </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') }}</textarea>
                                            @error('catatan_khusus')
                                                <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 Utama -->
                                        <div class="mb-3">
                                            <label for="gambar_layanan" class="form-label">Gambar Utama Layanan</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.</div>
                                            @error('gambar_layanan')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- Preview Gambar Utama -->
                                        <div class="mb-3" id="imagePreview" style="display: none;">
                                            <label class="form-label">Preview Gambar</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 Gambar -->
                                        <div class="mb-3">
                                            <label for="galeri_gambar" class="form-label">Galeri Gambar</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. Format: JPEG, PNG, JPG, GIF. Maksimal 2MB per file.</div>
                                            @error('galeri_gambar.*')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- Preview Galeri -->
                                        <div class="mb-3" id="galleryPreview" style="display: none;">
                                            <label class="form-label">Preview Galeri</label>
                                            <div class="row" id="galleryContainer"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Pengaturan Lanjutan -->
                            <div class="tab-pane fade" id="advanced" role="tabpanel">
                                <div class="row">
                                    <div class="col-md-6">
                                        <!-- Area Layanan -->
                                        <div class="mb-3">
                                            <label class="form-label">Area Layanan</label>
                                            <div id="area_layanan-container">
                                                <div class="input-group mb-2">
                                                    <input type="text" class="form-control" name="area_layanan[]" placeholder="Masukkan area layanan">
                                                    <button class="btn btn-outline-danger" type="button" onclick="removeField(this)">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="addField('area_layanan')">
                                                <i class="fas fa-plus"></i> Tambah Area
                                            </button>
                                        </div>

                                        <!-- Layanan Luar Kota -->
                                        <div class="mb-3">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="layanan_luar_kota" name="layanan_luar_kota" value="1" {{ old('layanan_luar_kota') ? 'checked' : '' }}>
                                                <label class="form-check-label" for="layanan_luar_kota">
                                                    Melayani Luar Kota
                                                </label>
                                            </div>
                                        </div>

                                        <!-- Biaya Transport Luar Kota -->
                                        <div class="mb-3" id="biaya_transport_container" style="display: none;">
                                            <label for="biaya_transport_luar_kota" class="form-label">Biaya Transport Luar Kota</label>
                                            <div class="input-group">
                                                <span class="input-group-text">Rp</span>
                                                <input type="number" class="form-control @error('biaya_transport_luar_kota') is-invalid @enderror" 
                                                       id="biaya_transport_luar_kota" name="biaya_transport_luar_kota" value="{{ old('biaya_transport_luar_kota') }}" 
                                                       min="0" step="1000">
                                            </div>
                                            @error('biaya_transport_luar_kota')
                                                <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') ? '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="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') }}" 
                                                       min="0" step="1000">
                                            </div>
                                            @error('biaya_emergency')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <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') }}" 
                                                   min="0">
                                            @error('masa_garansi_hari')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- Syarat Garansi -->
                                        <div class="mb-3">
                                            <label for="syarat_garansi" class="form-label">Syarat & Ketentuan Garansi</label>
                                            <textarea class="form-control @error('syarat_garansi') is-invalid @enderror" 
                                                      id="syarat_garansi" name="syarat_garansi" rows="3" 
                                                      placeholder="Syarat dan ketentuan garansi">{{ old('syarat_garansi') }}</textarea>
                                            @error('syarat_garansi')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- 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') ? '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="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') }}" 
                                                   min="1">
                                            @error('maintenance_periode_bulan')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- Tags -->
                                        <div class="mb-3">
                                            <label class="form-label">Tags</label>
                                            <div id="tags-container">
                                                <div class="input-group mb-2">
                                                    <input type="text" class="form-control" name="tags[]" placeholder="Masukkan tag">
                                                    <button class="btn btn-outline-danger" type="button" onclick="removeField(this)">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="addField('tags')">
                                                <i class="fas fa-plus"></i> Tambah Tag
                                            </button>
                                        </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>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save"></i> Simpan 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);
    }
    
    .input-group .btn {
        border-radius: 0 6px 6px 0;
    }
    
    .input-group .form-control {
        border-radius: 6px 0 0 6px;
    }
</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';
        }
    });

    // Gallery preview functionality
    document.getElementById('galeri_gambar').addEventListener('change', function(e) {
        const files = e.target.files;
        const container = document.getElementById('galleryContainer');
        container.innerHTML = '';
        
        if (files.length > 0) {
            document.getElementById('galleryPreview').style.display = 'block';
            
            Array.from(files).forEach((file, index) => {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const col = document.createElement('div');
                    col.className = 'col-md-4 mb-2';
                    col.innerHTML = `
                        <img src="${e.target.result}" alt="Gallery ${index + 1}" 
                             class="img-fluid rounded" style="height: 100px; object-fit: cover;">
                    `;
                    container.appendChild(col);
                }
                reader.readAsDataURL(file);
            });
        } else {
            document.getElementById('galleryPreview').style.display = 'none';
        }
    });

    // Dynamic field functions
    function addField(fieldName) {
        const container = document.getElementById(fieldName + '-container');
        const newField = document.createElement('div');
        newField.className = 'input-group mb-2';
        newField.innerHTML = `
            <input type="text" class="form-control" name="${fieldName}[]" placeholder="Masukkan ${fieldName.replace('_', ' ')}">
            <button class="btn btn-outline-danger" type="button" onclick="removeField(this)">
                <i class="fas fa-times"></i>
            </button>
        `;
        container.appendChild(newField);
    }

    function removeField(button) {
        button.parentElement.remove();
    }

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

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

    // Add new category
    document.getElementById('addKategori').addEventListener('click', function() {
        const newCategory = prompt('Masukkan kategori baru:');
        if (newCategory && newCategory.trim()) {
            const select = document.getElementById('kategori');
            const option = document.createElement('option');
            option.value = newCategory.trim().toLowerCase();
            option.text = newCategory.trim();
            option.selected = true;
            select.appendChild(option);
        }
    });

    // 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