@extends('layouts.master')

@section('styles')
    <style>
        .form-section-title {
            font-size: 14px;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 16px;
            padding-bottom: 8px;
            border-bottom: 2px solid #f1f5f9;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .image-preview-slot {
            width: 100px;
            height: 100px;
            border-radius: 8px;
            object-fit: cover;
            border: 1px solid #cbd5e1;
        }
        .dynamic-row {
            background-color: #f8fafc;
            border-radius: 8px;
            padding: 10px 12px;
            margin-bottom: 8px;
            border: 1px solid #e2e8f0;
        }
    </style>
@endsection

@section('content')
<div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
    <h1 class="page-title fw-semibold fs-18 mb-0">Tambah Produk Investasi Baru</h1>
    <div class="ms-md-1 ms-0">
        <nav>
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ route('investment-products.index') }}">Produk Investasi</a></li>
                <li class="breadcrumb-item active" aria-current="page">Tambah Produk</li>
            </ol>
        </nav>
    </div>
</div>

@if ($errors->any())
    <div class="alert alert-danger alert-dismissible fade show">
        <strong>Terjadi kesalahan input:</strong>
        <ul class="mb-0 mt-1">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

<form action="{{ route('investment-products.store') }}" method="POST" enctype="multipart/form-data">
    @csrf

    <div class="row">

        <div class="col-xl-8">
            <div class="card custom-card">
                <div class="card-header">
                    <div class="card-title">1. Informasi Pokok Produk</div>
                </div>
                <div class="card-body">
                    <div class="row gy-3">
                        <div class="col-md-8">
                            <label class="form-label required">Nama Produk Investasi</label>
                            <input type="text" name="name" class="form-control" placeholder="Contoh: Dana Pasti, DBIC Pasar Uang..." value="{{ old('name') }}" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Kode / Simbol Produk</label>
                            <input type="text" name="code" class="form-control" placeholder="Contoh: DAPAS-01" value="{{ old('code') }}">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label required">Kategori Produk</label>
                            <select name="category" class="form-select" required>
                                <option value="Fixed Income" {{ old('category') == 'Fixed Income' ? 'selected' : '' }}>Fixed Income (Pendapatan Tetap)</option>
                                <option value="Pasar Uang" {{ old('category') == 'Pasar Uang' ? 'selected' : '' }}>Pasar Uang</option>
                                <option value="Campuran" {{ old('category') == 'Campuran' ? 'selected' : '' }}>Campuran</option>
                                <option value="Saham" {{ old('category') == 'Saham' ? 'selected' : '' }}>Saham</option>
                                <option value="Obligasi" {{ old('category') == 'Obligasi' ? 'selected' : '' }}>Obligasi</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label required">Tingkat Imbal Hasil</label>
                            <input type="text" name="expected_return" class="form-control" placeholder="Contoh: 9%, 9.00% p.a." value="{{ old('expected_return', '9%') }}" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Tipe Imbal Hasil</label>
                            <input type="text" name="return_type" class="form-control" placeholder="Contoh: Fixed rate, Estimasi p.a." value="{{ old('return_type', 'Fixed rate') }}">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label required">Jangka Waktu (Tenor)</label>
                            <input type="text" name="tenor" class="form-control" placeholder="Contoh: 1 Tahun, 6 Bulan, Fleksibel" value="{{ old('tenor', '1 Tahun') }}" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label required">Minimal Investasi (Rp)</label>
                            <input type="number" name="min_investment" class="form-control" placeholder="Contoh: 100000000" value="{{ old('min_investment', '100000000') }}" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label required">Tingkat Risiko</label>
                            <select name="risk_level" class="form-select" required>
                                <option value="Rendah" {{ old('risk_level') == 'Rendah' ? 'selected' : '' }}>Rendah</option>
                                <option value="Sedang" {{ old('risk_level') == 'Sedang' ? 'selected' : '' }}>Sedang</option>
                                <option value="Tinggi" {{ old('risk_level') == 'Tinggi' ? 'selected' : '' }}>Tinggi</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Dana Kelolaan (AUM) - Opsional (Rp)</label>
                            <input type="number" name="aum" class="form-control" placeholder="Contoh: 145000000000" value="{{ old('aum') }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Harga per Unit (NAV) - Opsional (Rp)</label>
                            <input type="number" step="0.01" name="nav_price" class="form-control" placeholder="Contoh: 1000.00" value="{{ old('nav_price') }}">
                        </div>

                        <div class="col-12">
                            <label class="form-label">Deskripsi Produk</label>
                            <textarea name="description" class="form-control" rows="3" placeholder="Jelaskan karakteristik, tujuan, dan profil produk ini...">{{ old('description') }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card custom-card">
                <div class="card-header justify-content-between">
                    <div class="card-title">2. Tabel Skema Penempatan (Nominal vs Indikasi Hasil)</div>
                    <button type="button" class="btn btn-sm btn-outline-primary" id="addSchemeRow">
                        <i class="ri-add-line"></i> Tambah Baris Skema
                    </button>
                </div>
                <div class="card-body">
                    <p class="text-muted fs-13 mb-3">
                        Tabel nominal penempatan dan estimasi imbal hasil (seperti contoh: Rp 100jt &rarr; Rp 9jt).
                    </p>
                    <div id="schemesContainer">
                        <div class="dynamic-row row align-items-center g-2">
                            <div class="col-md-5">
                                <label class="fs-12 text-muted">Nominal Penempatan (Rp)</label>
                                <input type="number" name="schemes_nominal[]" class="form-control" placeholder="100000000" value="100000000">
                            </div>
                            <div class="col-md-5">
                                <label class="fs-12 text-muted">Indikasi Hasil Dana (Rp)</label>
                                <input type="number" name="schemes_indication[]" class="form-control" placeholder="9000000" value="9000000">
                            </div>
                            <div class="col-md-2 text-end pt-3">
                                <button type="button" class="btn btn-sm btn-outline-danger remove-row"><i class="ri-delete-bin-line"></i></button>
                            </div>
                        </div>
                        <div class="dynamic-row row align-items-center g-2">
                            <div class="col-md-5">
                                <label class="fs-12 text-muted">Nominal Penempatan (Rp)</label>
                                <input type="number" name="schemes_nominal[]" class="form-control" placeholder="200000000" value="200000000">
                            </div>
                            <div class="col-md-5">
                                <label class="fs-12 text-muted">Indikasi Hasil Dana (Rp)</label>
                                <input type="number" name="schemes_indication[]" class="form-control" placeholder="18000000" value="18000000">
                            </div>
                            <div class="col-md-2 text-end pt-3">
                                <button type="button" class="btn btn-sm btn-outline-danger remove-row"><i class="ri-delete-bin-line"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card custom-card">
                <div class="card-header justify-content-between">
                    <div class="card-title">3. Poin-Poin Keunggulan ("Kenapa Harus?")</div>
                    <button type="button" class="btn btn-sm btn-outline-primary" id="addBenefitRow">
                        <i class="ri-add-line"></i> Tambah Keunggulan
                    </button>
                </div>
                <div class="card-body">
                    <div id="benefitsContainer">
                        <div class="input-group mb-2">
                            <span class="input-group-text"><i class="ri-checkbox-circle-line text-success"></i></span>
                            <input type="text" name="benefits[]" class="form-control" placeholder="Contoh: Investasi stabil di tengah penurunan suku bunga" value="Investasi stabil di tengah penurunan suku bunga">
                            <button class="btn btn-outline-danger remove-benefit" type="button"><i class="ri-close-line"></i></button>
                        </div>
                        <div class="input-group mb-2">
                            <span class="input-group-text"><i class="ri-checkbox-circle-line text-success"></i></span>
                            <input type="text" name="benefits[]" class="form-control" placeholder="Contoh: Menerima pembayaran kupon yang tinggi secara teratur" value="Menerima pembayaran kupon yang tinggi secara teratur">
                            <button class="btn btn-outline-danger remove-benefit" type="button"><i class="ri-close-line"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4">
            <div class="card custom-card">
                <div class="card-header">
                    <div class="card-title">Cover & Thumbnail Produk</div>
                </div>
                <div class="card-body">
                    <div class="mb-3 text-center">
                        <img id="coverPreview" src="https://placehold.co/400x300/e2e8f0/64748b?text=Upload+Cover" alt="Cover" class="img-fluid rounded mb-2 border" style="max-height: 200px; width: 100%; object-fit: cover;">
                        <input type="file" name="cover_image" id="coverImageInput" class="form-control" accept="image/*">
                        <small class="text-muted d-block mt-1">Gambar utama kartu produk di mobile app.</small>
                    </div>
                </div>
            </div>

            <div class="card custom-card">
                <div class="card-header">
                    <div class="card-title">Pengaturan Publikasi</div>
                </div>
                <div class="card-body">
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" name="is_active" id="isActiveSwitch" value="1" checked>
                        <label class="form-check-label fw-semibold" for="isActiveSwitch">Produk Aktif</label>
                        <small class="text-muted d-block">Tampilkan produk ini di aplikasi mobile investor.</small>
                    </div>

                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" name="is_featured" id="isFeaturedSwitch" value="1" checked>
                        <label class="form-check-label fw-semibold" for="isFeaturedSwitch">Tampilkan di Beranda (Featured)</label>
                        <small class="text-muted d-block">Tampilkan sebagai produk rekomendasi di Beranda Home.</small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Urutan Tampil (Sort Order)</label>
                        <input type="number" name="sort_order" class="form-control" value="0">
                        <small class="text-muted">Angka lebih kecil tampil lebih awal.</small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Disclaimer Regulasi / OJK</label>
                        <textarea name="disclaimer" class="form-control fs-12" rows="3">DISCLAIMER: Nominal imbal hasil hanya merupakan estimasi dan bisa berbeda jika ada perbedaan perhitungan atau perubahan dari kondisi pasar saham. Simulasi ini dibuat berdasarkan kinerja di masa lalu dan tidak menjamin kinerja masa depan. Informasi ini bersifat edukasi. Keputusan investasi ada di tangan investor. Otoritas Jasa Keuangan tidak memberikan pernyataan menyetujui atau tidak menyetujui efek ini.</textarea>
                    </div>

                    <div class="d-grid gap-2 pt-2">
                        <button type="submit" class="btn btn-success btn-lg">
                            <i class="ri-save-line me-1"></i> Simpan Produk Investasi
                        </button>
                        <a href="{{ route('investment-products.index') }}" class="btn btn-outline-secondary">
                            Batal
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@section('scripts')
<script>

document.getElementById('coverImageInput').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(evt) {
            document.getElementById('coverPreview').src = evt.target.result;
        }
        reader.readAsDataURL(file);
    }
});

document.getElementById('addSchemeRow').addEventListener('click', function() {
    const container = document.getElementById('schemesContainer');
    const div = document.createElement('div');
    div.className = 'dynamic-row row align-items-center g-2';
    div.innerHTML = `
        <div class="col-md-5">
            <label class="fs-12 text-muted">Nominal Penempatan (Rp)</label>
            <input type="number" name="schemes_nominal[]" class="form-control" placeholder="100000000">
        </div>
        <div class="col-md-5">
            <label class="fs-12 text-muted">Indikasi Hasil Dana (Rp)</label>
            <input type="number" name="schemes_indication[]" class="form-control" placeholder="9000000">
        </div>
        <div class="col-md-2 text-end pt-3">
            <button type="button" class="btn btn-sm btn-outline-danger remove-row"><i class="ri-delete-bin-line"></i></button>
        </div>
    `;
    container.appendChild(div);
});

document.getElementById('addBenefitRow').addEventListener('click', function() {
    const container = document.getElementById('benefitsContainer');
    const div = document.createElement('div');
    div.className = 'input-group mb-2';
    div.innerHTML = `
        <span class="input-group-text"><i class="ri-checkbox-circle-line text-success"></i></span>
        <input type="text" name="benefits[]" class="form-control" placeholder="Keunggulan produk...">
        <button class="btn btn-outline-danger remove-benefit" type="button"><i class="ri-close-line"></i></button>
    `;
    container.appendChild(div);
});

document.addEventListener('click', function(e) {
    if (e.target.closest('.remove-row')) {
        e.target.closest('.dynamic-row').remove();
    }
    if (e.target.closest('.remove-benefit')) {
        e.target.closest('.input-group').remove();
    }
});
</script>
@endsection