@extends('layouts.main')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-8 px-4">
    <div class="max-w-6xl mx-auto">
        <div class="mb-6">
            <div class="bg-gradient-to-r from-blue-600 to-blue-700 rounded-t-xl shadow-lg px-6 py-4">
                <div class="flex items-center justify-between">
                    <h2 class="text-2xl font-bold text-white flex items-center">
                        <i class="fas fa-plus-circle mr-3"></i>
                        Tambah Aktivitas
                    </h2>
                    <div class="flex items-center space-x-3">
                        @auth
                        <div class="flex items-center bg-white/10 rounded-lg px-3 py-2">
                            <i class="fas fa-user-shield text-white mr-2"></i>
                            <div class="text-white text-sm">
                                <span class="font-semibold">{{ auth()->user()->name }}</span>
                                @php $roleLabel = strtolower(trim(auth()->user()->role ?? '')); @endphp
                                <span class="ml-2 inline-flex items-center px-2 py-1 rounded bg-white/20 text-white text-xs">
                                    {{ $roleLabel ?: 'user' }}
                                </span>
                            </div>
                        </div>
                        @endauth
                        <a href="{{ url()->previous() ?: route('activity.index') }}" class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg transition-all flex items-center">
                            <i class="fas fa-arrow-left mr-2"></i>
                            Kembali
                        </a>
                    </div>
                </div>
            </div>
        </div>

        @if ($errors->any())
            <div class="mb-6 bg-red-50 border-l-4 border-red-500 rounded-lg p-4 shadow-sm">
                <div class="flex items-center">
                    <i class="fas fa-exclamation-triangle text-red-500 mr-3 text-xl"></i>
                    <div class="flex-1">
                        <h3 class="text-red-800 font-semibold mb-2">Terjadi kesalahan saat menyimpan data:</h3>
                        <ul class="list-disc list-inside text-red-700 space-y-1">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        @endif

        <div class="bg-white rounded-b-xl shadow-xl overflow-hidden">
            <form action="{{ route('activity.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="p-6 space-y-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="name" class="block text-sm font-semibold text-gray-700 mb-2">
                                <i class="fas fa-tasks mr-2 text-blue-600"></i>Nama Aktivitas
                            </label>
                            <input type="text"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all @error('name') border-red-500 @enderror"
                                   id="name"
                                   name="name"
                                   value="{{ old('name') }}"
                                   placeholder="Masukkan nama aktivitas"
                                   autocomplete="off"
                                   required>
                            @error('name')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="category_id" class="block text-sm font-semibold text-gray-700 mb-2">
                                <i class="fas fa-tag mr-2 text-blue-600"></i>Kategori
                            </label>
                            <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all @error('category_id') border-red-500 @enderror"
                                    id="category_id"
                                    name="category_id"
                                    autocomplete="off"
                                    required>
                                <option value="" disabled {{ old('category_id') ? '' : 'selected' }}>Pilih Kategori</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('category_id')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-calendar-alt mr-2 text-blue-600"></i>Waktu Kegiatan
                        </label>
                        <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
                            <div class="md:col-span-1">
                                <label for="date" class="block text-xs font-medium text-gray-600 mb-1">Tanggal Mulai</label>
                                <input type="date"
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all @error('date') border-red-500 @enderror"
                                       id="date"
                                       name="date"
                                       value="{{ old('date') }}"
                                       autocomplete="off"
                                       required>
                                @error('date')
                                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                            <div class="md:col-span-1">
                                <label for="start_time" class="block text-xs font-medium text-gray-600 mb-1">Waktu Mulai</label>
                                <input type="time"
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all @error('start_time') border-red-500 @enderror"
                                       id="start_time"
                                       name="start_time"
                                       value="{{ old('start_time') }}"
                                       autocomplete="off"
                                       required>
                                @error('start_time')
                                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                            <div class="md:col-span-1 flex items-end justify-center pb-3">
                                <span class="text-gray-500 font-semibold text-sm">s/d</span>
                            </div>
                            <div class="md:col-span-1">
                                <label for="end_date" class="block text-xs font-medium text-gray-600 mb-1">Tanggal Selesai</label>
                                <input type="date"
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all @error('end_date') border-red-500 @enderror"
                                       id="end_date"
                                       name="end_date"
                                       value="{{ old('end_date') }}"
                                       autocomplete="off">
                                @error('end_date')
                                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                            <div class="md:col-span-1">
                                <label for="end_time" class="block text-xs font-medium text-gray-600 mb-1">Waktu Selesai</label>
                                <input type="time"
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all @error('end_time') border-red-500 @enderror"
                                       id="end_time"
                                       name="end_time"
                                       value="{{ old('end_time') }}"
                                       autocomplete="off"
                                       required>
                                @error('end_time')
                                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <p class="mt-2 text-xs text-gray-600 flex items-start">
                            <i class="fas fa-info-circle mr-2 text-blue-500 mt-0.5"></i>
                            Jika acara berlangsung lebih dari satu hari, isi tanggal selesai. Jika tidak diisi, akan menggunakan tanggal mulai.
                        </p>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="location" class="block text-sm font-semibold text-gray-700 mb-2">
                                <i class="fas fa-map-marker-alt mr-2 text-blue-600"></i>Lokasi
                            </label>
                            <input type="text"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all @error('location') border-red-500 @enderror"
                                   id="location"
                                   name="location"
                                   value="{{ old('location') }}"
                                   placeholder="Masukkan lokasi kegiatan"
                                   autocomplete="address-line1"
                                   required>
                            @error('location')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="price" class="block text-sm font-semibold text-gray-700 mb-2">
                                <i class="fas fa-money-bill mr-2 text-blue-600"></i>Harga
                            </label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                    <span class="text-gray-600 font-semibold">Rp</span>
                                </div>
                                <input type="number"
                                       class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all @error('price') border-red-500 @enderror"
                                       id="price"
                                       name="price"
                                       value="{{ old('price') }}"
                                       min="0"
                                       step="0.01"
                                       placeholder="Masukkan harga"
                                       autocomplete="off">
                            </div>
                            @error('price')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                            <p class="mt-2 text-xs text-gray-600 flex items-start">
                                <i class="fas fa-info-circle mr-2 text-blue-500 mt-0.5"></i>
                                Untuk pembayaran otomatis (Midtrans), harga minimal <strong>Rp{{ number_format(optional(App\Models\FinancialSetting::current())->min_auto_price ?? 15000, 0, ',', '.') }}</strong>.
                            </p>
                        </div>
                    </div>

                    @php
                        $user = auth()->user();
                        $isAdminOrSuperAdmin = $user && ($user->isAdmin() || $user->isSuperAdmin());
                    @endphp
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        @if(!$isAdminOrSuperAdmin)
                            <input type="hidden" name="payment_method_type" value="automatic">
                        @else
                            <div>
                                <label for="payment_method_type" class="block text-sm font-semibold text-gray-700 mb-2">
                                    <i class="fas fa-credit-card mr-2 text-blue-600"></i>Metode Pembayaran
                                </label>
                                <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all @error('payment_method_type') border-red-500 @enderror"
                                        id="payment_method_type"
                                        name="payment_method_type"
                                        autocomplete="off"
                                        required>
                                    <option value="manual" {{ old('payment_method_type', old('price') > 0 ? 'automatic' : 'manual') == 'manual' ? 'selected' : '' }}>Manual (Upload Bukti Transfer)</option>
                                    <option value="automatic" {{ old('payment_method_type', old('price') > 0 ? 'automatic' : 'manual') == 'automatic' ? 'selected' : '' }}>Otomatis (Midtrans)</option>
                                </select>
                                <p class="mt-2 text-xs text-gray-600 flex items-start">
                                    <i class="fas fa-info-circle mr-2 text-blue-500 mt-0.5"></i>
                                    Pilih metode pembayaran untuk kegiatan ini. Manual = upload bukti transfer, Otomatis = pembayaran via Midtrans.
                                </p>
                                <div id="automatic-price-warning" class="mt-2 p-3 bg-red-50 border-l-4 border-red-400 rounded" style="display: none;">
                                    <div class="flex items-start">
                                        <i class="fas fa-exclamation-triangle text-red-600 mt-0.5 mr-2"></i>
                                        <div class="text-xs text-red-800">
                                            Untuk pembayaran otomatis (Midtrans), harga kegiatan <strong>minimal Rp{{ number_format(optional(App\Models\FinancialSetting::current())->min_auto_price ?? 15000, 0, ',', '.') }}</strong>.
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div id="manual-bank-section" class="mt-3 hidden">
                                <div class="text-sm font-medium text-gray-700 mb-2">Rekening Penerimaan (Transfer Manual)</div>
                                <div class="mb-2 text-sm text-gray-700">
                                    <div id="manualBankSavedInfo" class="hidden">
                                        <span class="inline-flex items-center px-2 py-1 rounded bg-teal-50 border border-teal-200 text-teal-700">
                                            <i class="fas fa-university mr-2"></i>
                                            <span id="manualBankSummary"></span>
                                        </span>
                                    </div>
                                    <div id="manualBankNoInfo" class="text-gray-500">Belum ada rekening tersimpan.</div>
                                </div>
                                <div id="savedBankListWrapper" class="mb-3">
                                    <div class="text-xs text-gray-700 font-medium mb-1">Rekening Tersimpan</div>
                                    <p id="savedBankEmpty" class="text-xs text-gray-500">Belum ada daftar rekening.</p>
                                    <ul id="savedBankList" class="divide-y divide-gray-200 rounded-md border border-gray-200 hidden"></ul>
                                </div>
                                <div class="grid grid-cols-1 gap-3 bg-white border border-gray-200 rounded-md p-3">
                                    <div>
                                        <label class="block text-xs font-medium text-gray-700 mb-1" for="activity_bank_name">Nama Bank</label>
                                        <select id="activity_bank_name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                            <option value="" disabled selected>Pilih bank</option>
                                            <option value="BCA">BCA</option>
                                            <option value="BRI">BRI</option>
                                            <option value="BNI">BNI</option>
                                            <option value="Mandiri">Mandiri</option>
                                            <option value="CIMB Niaga">CIMB Niaga</option>
                                            <option value="Permata">Permata</option>
                                            <option value="Danamon">Danamon</option>
                                            <option value="BTN">BTN</option>
                                            <option value="Maybank">Maybank Indonesia</option>
                                            <option value="OCBC NISP">OCBC NISP</option>
                                            <option value="OTHER">Bank lainnya</option>
                                        </select>
                                        <div id="bank_custom_wrapper" class="mt-2 hidden">
                                            <input type="text" id="activity_bank_name_custom" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Nama bank lainnya">
                                            <div id="bankCustomErrorActivity" class="mt-1 text-xs text-red-600 hidden"></div>
                                        </div>
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-gray-700 mb-1" for="activity_account_name">Nama Pemilik Rekening</label>
                                        <input type="text" id="activity_account_name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Nama pemilik rekening">
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-gray-700 mb-1" for="activity_account_number">Nomor Rekening</label>
                                        <input type="text" id="activity_account_number" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Nomor rekening">
                                    </div>
                                    <div class="flex items-center gap-2">
                                        <button type="button" id="saveActivityBankBtn" class="px-4 py-2 bg-blue-600 text-white rounded-md">Simpan</button>
                                        <button type="button" id="cancelEditBankBtn" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hidden">Batal</button>
                                    </div>
                                    <div id="activityBankSaveStatus" class="text-xs text-gray-600"></div>
                                    <div id="activityBankSaveError" class="text-xs text-red-600 hidden"></div>
                                </div>
                                <p class="mt-2 text-xs text-gray-600">Rekening ini digunakan sebagai tujuan transfer ketika peserta memilih pembayaran manual.</p>
                            </div>
                        @endif

                        @php $availableStatuses = ['public','pribadi','khusus']; @endphp
                        <div>
                            <label for="status" class="block text-sm font-semibold text-gray-700 mb-2">
                                <i class="fas fa-toggle-on mr-2 text-blue-600"></i>Status
                            </label>
                            <select id="status"
                                    name="status"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all @error('status') border-red-500 @enderror"
                                    autocomplete="off">
                                @foreach($availableStatuses as $status)
                                    <option value="{{ $status }}" {{ old('status') == $status ? 'selected' : '' }}>
                                        {{ ucfirst($status) }}
                                    </option>
                                @endforeach
                            </select>
                            @error('status')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div>
                        <label for="description" class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-align-left mr-2 text-blue-600"></i>Deskripsi
                        </label>
                        <div id="description-editor" style="min-height: 200px;">{!! old('description') !!}</div>
                        <textarea class="hidden" id="description" name="description">{{ old('description') }}</textarea>
                        <div id="description-error" class="hidden mt-1 text-sm text-red-600"></div>
                        @error('description')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="image" class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-image mr-2 text-blue-600"></i>Gambar
                        </label>
                        <div id="image-upload-card" class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-blue-400 transition-colors cursor-pointer" tabindex="0">
                            <div class="space-y-1 text-center">
                                <img id="image-preview" src="" alt="Preview" class="mx-auto mb-3 max-h-48 rounded-lg shadow-md border border-gray-200 hidden object-contain">
                                <i class="fas fa-cloud-upload-alt text-4xl text-gray-400"></i>
                                <div class="flex text-sm text-gray-600">
                                    <label for="image" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-500">
                                        <span>Upload file</span>
                                        <input type="file" class="sr-only" id="image" name="image" accept="image/*">
                                    </label>
                                    <p class="pl-1">atau drag and drop</p>
                                </div>
                                <p class="text-xs text-gray-500">Format: JPG, JPEG, PNG. Maksimal ukuran: 500MB</p>
                            </div>
                        </div>
                        @error('image')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="flex justify-end gap-4 pt-6 border-t border-gray-200">
                        <a href="{{ url()->previous() ?: route('activity.index') }}" class="px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg font-semibold transition-all flex items-center">
                            <i class="fas fa-arrow-left mr-2"></i>
                            Kembali
                        </a>
                        <button type="submit" class="px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white rounded-lg font-semibold shadow-lg hover:shadow-xl transition-all flex items-center">
                            <i class="fas fa-save mr-2"></i>
                            Simpan
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
<style>
    .ql-container{font-size:14px;font-family:inherit;border-radius:0 0 8px 8px;border:1px solid #d1d5db}
    .ql-toolbar{border-radius:8px 8px 0 0;border:1px solid #d1d5db;background:#f9fafb}
    .ql-editor{min-height:200px}
    .ql-editor iframe.ql-video{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0}
    .ql-container .ql-tooltip{z-index:10000}
    .ql-container .ql-tooltip.ql-editing{left:50%!important;transform:translateX(-50%)}
    #image-upload-card{min-height:220px;overflow:hidden}
    #image-preview{max-height:12rem;object-fit:contain}
</style>
@endpush

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>
<script>
$(document).ready(function(){
    $.ajaxSetup({headers:{'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')}});
    const quillToolbarOptions=[[{'header':[1,2,3,4,5,6,false]}],[{'font':[]}],[{'size':['small',false,'large','huge']}],['bold','italic','underline','strike'],[{'color':[]},{'background':[]}],[{'script':'sub'},{'script':'super'}],[{'list':'ordered'},{'list':'bullet'}],[{'indent':'-1'},{'indent':'+1'}],[{'align':[]}],['link','image','video'],['blockquote','code-block'],['clean']];
    function uploadImage(file,quill){const formData=new FormData();formData.append('image',file);$.ajax({url:"{{ route('activity.image.upload') }}",method:"POST",data:formData,contentType:false,processData:false,success:function(response){if(response.url){const range=quill.getSelection(true);quill.insertEmbed(range.index,'image',response.url,'user');quill.setSelection(range.index+1);}else{alert('Gagal mengupload gambar');}},error:function(){alert('Gagal mengupload gambar. Silakan coba lagi.');}})}
    const descriptionQuill=new Quill('#description-editor',{theme:'snow',placeholder:'Masukkan deskripsi kegiatan.',modules:{toolbar:quillToolbarOptions}});
    function extractVideoUrl(input){var s=(input||'').trim();var m=s.match(/https?:\/\/[^\s'\"]+/i);if(m)return m[0];m=s.match(/src=["']([^"']+)["']/i);if(m)return m[1];m=s.match(/href=["']([^"']+)["']/i);if(m)return m[1];return s}
    function toPlainVideoUrl(u){var s=(u||'').trim();var m;m=s.match(/youtube\.com\/embed\/([A-Za-z0-9_-]{6,})/i);if(m)return 'https://youtu.be/'+m[1];m=s.match(/player\.vimeo\.com\/video\/(\d+)/i);if(m)return 'https://vimeo.com/'+m[1];m=s.match(/(?:youtube\.com\/(?:watch\?v=|shorts\/)|youtu\.be\/)([A-Za-z0-9_-]{6,})/i);if(m)return 'https://youtu.be/'+m[1];m=s.match(/vimeo\.com\/(\d+)/i);if(m)return 'https://vimeo.com/'+m[1];return s}
    function toEmbedUrl(u){var s=(u||'').trim();var m;m=s.match(/(?:youtube\.com\/(?:watch\?v=|shorts\/)|youtu\.be\/)([A-Za-z0-9_-]{6,})/i);if(m)return 'https://www.youtube.com/embed/'+m[1];m=s.match(/vimeo\.com\/(\d+)/i);if(m)return 'https://player.vimeo.com/video/'+m[1];return ''}
    descriptionQuill.root.addEventListener('paste',function(e){var html=(e.clipboardData&&e.clipboardData.getData('text/html'))||'';var text=(e.clipboardData&&e.clipboardData.getData('text'))||'';var combined=html||text||'';if(/youtube\.com|youtu\.be|vimeo\.com/i.test(combined)){e.preventDefault();var embed=toEmbedUrl(extractVideoUrl(combined));if(!embed)return;var range=descriptionQuill.getSelection(true)||{index:descriptionQuill.getLength()};descriptionQuill.insertEmbed(range.index,'video',embed,'user');descriptionQuill.setSelection(range.index+1,'silent');}});
    function convertExistingLinksToEmbeds(){var html=descriptionQuill.root.innerHTML;html=html.replace(/<a[^>]+href="([^"]+)"[^>]*>[\s\S]*?<\/a>/gi,function(m,u){var e=toEmbedUrl(extractVideoUrl(u));return e?'<iframe class="ql-video" src="'+e+'" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>':m});html=html.replace(/(https?:\/\/(?:www\.|m\.)?(?:youtube\.com\/watch\?v=[A-Za-z0-9_-]{6,}|youtube\.com\/shorts\/[A-Za-z0-9_-]{6,}|youtu\.be\/[A-Za-z0-9_-]{6,}|vimeo\.com\/\d+))/gi,function(m){var e=toEmbedUrl(m);return e?'<iframe class="ql-video" src="'+e+'" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>':m});descriptionQuill.root.innerHTML=html}
    convertExistingLinksToEmbeds();
    descriptionQuill.on('text-change',function(){const descriptionText=descriptionQuill.getText().trim();if(descriptionText.length>0){$('#description-error').addClass('hidden').removeClass('block');$('#description-editor').css('border','')}});
    $('form').on('submit',function(e){const descriptionText=descriptionQuill.getText().trim();if(!descriptionText||descriptionText.length===0){e.preventDefault();$('#description-error').text('Deskripsi wajib diisi').removeClass('hidden').addClass('block');$('#description-editor').css('border','2px solid #ef4444');setTimeout(function(){$('#description-editor').css('border','');},3000);return false}else{$('#description-error').addClass('hidden').removeClass('block');$('#description-editor').css('border','');}const MIN_AUTO_PRICE={{ optional(App\Models\FinancialSetting::current())->min_auto_price ?? 15000 }};const paymentMethodSelect=$('#payment_method_type');let method=paymentMethodSelect.val();if(paymentMethodSelect.prop('disabled')){const hiddenInput=$('input[name="payment_method_type"][type="hidden"]');if(hiddenInput.length){method=hiddenInput.val();}}const priceVal=parseFloat($('#price').val()||0);if(method==='automatic'&&priceVal<MIN_AUTO_PRICE){e.preventDefault();const autoWarning=$('#automatic-price-warning');if(autoWarning.length){autoWarning.slideDown(200);}$('#price').addClass('border-red-500');$('#price')[0].focus();return false}else{$('#price').removeClass('border-red-500');}if(!$('#end_date').val()){$('#end_date').val($('#date').val());}var descriptionHtml=descriptionQuill.root.innerHTML;try{var container=document.createElement('div');container.innerHTML=descriptionHtml;container.querySelectorAll('iframe.ql-video').forEach(function(ifr){var plain=toPlainVideoUrl(ifr.getAttribute('src')||'');var textNode=document.createTextNode(plain);ifr.parentNode.replaceChild(textNode,ifr)});descriptionHtml=container.innerHTML}catch($e){}$('#description').val(descriptionHtml)});
    function updatePaymentOptionsByPrice(){const MIN_AUTO_PRICE={{ optional(App\Models\FinancialSetting::current())->min_auto_price ?? 15000 }};const priceVal=parseFloat($('#price').val()||0);const hasSelect=$('#payment_method_type').length>0;const autoWarning=$('#automatic-price-warning');if(!hasSelect){if(priceVal>0&&priceVal<MIN_AUTO_PRICE){if(autoWarning.length)autoWarning.slideDown(200);}else{if(autoWarning.length)autoWarning.slideUp(200);}return}const paymentMethodSelect=$('#payment_method_type');let selectedMethod=paymentMethodSelect.val();if(paymentMethodSelect.prop('disabled')){const hiddenInput=$('input[name="payment_method_type"][type="hidden"]');if(hiddenInput.length){selectedMethod=hiddenInput.val();}}if(selectedMethod==='automatic'&&priceVal>0&&priceVal<MIN_AUTO_PRICE){if(autoWarning.length)autoWarning.slideDown(200);}else{if(autoWarning.length)autoWarning.slideUp(200);}}
    $('#price').on('input change',updatePaymentOptionsByPrice);$('#payment_method_type').on('change',updatePaymentOptionsByPrice);updatePaymentOptionsByPrice();
    const $card=$('#image-upload-card');const $input=$('#image');const $previewImg=$('#image-preview');$card.on('click',function(e){if(!$(e.target).is('input[type="file"], label[for="image"], span')){$input.trigger('click');}});$card.on('keydown',function(e){if(e.key==='Enter'||e.key===' '){e.preventDefault();$input.trigger('click');}});$input.on('change',function(){const file=this.files&&this.files[0];if(!file)return;const reader=new FileReader();reader.onload=function(ev){$previewImg.attr('src',ev.target.result);$previewImg.removeClass('hidden')};reader.readAsDataURL(file)});
    window.savedBankAccount=@json($savedBankAccount ?? null);window.savedBankAccounts=@json($savedBankAccounts ?? []);
    function toggleManualBankSection(){const method=$('#payment_method_type').val();const section=$('#manual-bank-section');if(method==='manual'){section.removeClass('hidden')}else{section.addClass('hidden')}}
    function toggleCustomBankInput(){const val=($('#activity_bank_name').val()||'').trim();if(val==='OTHER'){$('#bank_custom_wrapper').removeClass('hidden')}else{$('#bank_custom_wrapper').addClass('hidden');$('#bankCustomErrorActivity').addClass('hidden').text('')}}
    function applySavedBankAccount(){const saved=window.savedBankAccount;const info=$('#manualBankSavedInfo');const noInfo=$('#manualBankNoInfo');const summary=$('#manualBankSummary');if(saved&&saved.bank_name&&saved.account_name&&saved.account_number){const bankSelect=$('#activity_bank_name');if(bankSelect.find(`option[value="${saved.bank_name}"]`).length===0){bankSelect.append(`<option value="${saved.bank_name}">${saved.bank_name}</option>`)}bankSelect.val(saved.bank_name);$('#activity_account_name').val(saved.account_name);$('#activity_account_number').val(saved.account_number);summary.text(`${saved.bank_name} • ${saved.account_name} • ${saved.account_number}`);info.removeClass('hidden');noInfo.addClass('hidden')}else{info.addClass('hidden');noInfo.removeClass('hidden')}toggleCustomBankInput()}
    if($('#payment_method_type').length){$('#payment_method_type').on('change',function(){toggleManualBankSection()});toggleManualBankSection()}
    $('#activity_bank_name').on('change',toggleCustomBankInput);applySavedBankAccount();
    function renderSavedBankList(){const accounts=Array.isArray(window.savedBankAccounts)?window.savedBankAccounts:[];const list=$('#savedBankList');const empty=$('#savedBankEmpty');if(!accounts.length){list.addClass('hidden').html('');empty.removeClass('hidden');return}empty.addClass('hidden');list.removeClass('hidden').html('');accounts.forEach(acc=>{const $li=$(`<li class="py-2 px-2 flex items-center justify-between"><span class="text-sm text-gray-700">${acc.bank_name} • ${acc.account_name} • ${acc.account_number}</span><span class="flex items-center gap-2"><button type="button" class="text-red-600 hover:underline delete-bank-btn" data-bank="${acc.bank_name}" data-number="${acc.account_number}">Hapus</button></span></li>`);list.append($li)})}
    renderSavedBankList();
    $(document).on('click','.delete-bank-btn',function(){const bank=$(this).data('bank');const num=$(this).data('number');const err=$('#activityBankSaveError');const status=$('#activityBankSaveStatus');err.addClass('hidden').text('');const token=$('meta[name="csrf-token"]').attr('content');const params=new URLSearchParams({_token:token,bank_name:bank,account_number:num});status.text('Menghapus...');fetch('{{ route('payments.bank-account.delete') }}',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:params.toString()}).then(r=>r.json()).then(data=>{if(!data||data.success!==true){const msg=(data&&data.message)?data.message:'Gagal menghapus rekening.';err.text(msg).removeClass('hidden');status.text('');return}window.savedBankAccounts=Array.isArray(data.bank_accounts)?data.bank_accounts:[];renderSavedBankList();status.text('Rekening dihapus.')}).catch(()=>{err.text('Terjadi kesalahan jaringan.').removeClass('hidden');status.text('')})});
    $('#saveActivityBankBtn').on('click',function(){const bankSel=($('#activity_bank_name').val()||'').trim();const bank=bankSel==='OTHER'?($('#activity_bank_name_custom').val()||'').trim():bankSel;const name=($('#activity_account_name').val()||'').trim();const number=($('#activity_account_number').val()||'').trim();const err=$('#activityBankSaveError');const status=$('#activityBankSaveStatus');err.addClass('hidden').text('');status.text('');if(bankSel==='OTHER'&&!bank){$('#bankCustomErrorActivity').text('Isi nama bank jika memilih ‘Bank lainnya’.').removeClass('hidden');return}if(!bank||!name||!number){err.text('Lengkapi semua kolom rekening.').removeClass('hidden');return}const token=$('meta[name="csrf-token"]').attr('content');const params=new URLSearchParams({_token:token,bank_name:bank,account_name:name,account_number:number});status.text('Menyimpan...');fetch('{{ route('payments.bank-account.save') }}',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:params.toString()}).then(r=>r.json()).then(data=>{if(!data||data.success!==true){const msg=(data&&data.message)?data.message:'Gagal menyimpan rekening.';err.text(msg).removeClass('hidden');status.text('');return}if(data.bank_account){window.savedBankAccount=data.bank_account}if(Array.isArray(data.bank_accounts)){window.savedBankAccounts=data.bank_accounts}applySavedBankAccount();renderSavedBankList();status.text('Rekening tersimpan.')}).catch(()=>{err.text('Terjadi kesalahan jaringan.').removeClass('hidden');status.text('')})});
});
</script>
@endpush