@extends('layouts.master')

@section('styles')
    <style>
        .dynamic-row {
            background-color: #f8fafc;
            border-radius: 8px;
            padding: 10px 12px;
            margin-bottom: 8px;
            border: 1px solid #e2e8f0;
        }
        .gallery-card {
            position: relative;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            overflow: hidden;
            background: #fff;
            transition: transform 0.2s;
        }
        .gallery-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .gallery-card img {
            width: 100%;
            height: 120px;
            object-fit: cover;
        }
    </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">Edit Produk: {{ $product->name }}</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">Edit Produk</li>
            </ol>
        </nav>
    </div>
</div>

@if (session('success'))
    <div class="alert alert-success alert-dismissible fade show">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

@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.update', $product->id) }}" method="POST" enctype="multipart/form-data">
    @csrf
    @method('PUT')

    <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" value="{{ old('name', $product->name) }}" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Kode / Simbol Produk</label>
                            <input type="text" name="code" class="form-control" value="{{ old('code', $product->code) }}">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label required">Kategori Produk</label>
                            <select name="category" class="form-select" required>
                                @foreach(['Fixed Income', 'Pasar Uang', 'Campuran', 'Saham', 'Obligasi'] as $cat)
                                    <option value="{{ $cat }}" {{ old('category', $product->category) == $cat ? 'selected' : '' }}>{{ $cat }}</option>
                                @endforeach
                            </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" value="{{ old('expected_return', $product->expected_return) }}" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Tipe Imbal Hasil</label>
                            <input type="text" name="return_type" class="form-control" value="{{ old('return_type', $product->return_type) }}">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label required">Jangka Waktu (Tenor)</label>
                            <input type="text" name="tenor" class="form-control" value="{{ old('tenor', $product->tenor) }}" 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" value="{{ old('min_investment', (int)$product->min_investment) }}" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label required">Tingkat Risiko</label>
                            <select name="risk_level" class="form-select" required>
                                @foreach(['Rendah', 'Sedang', 'Tinggi'] as $risk)
                                    <option value="{{ $risk }}" {{ old('risk_level', $product->risk_level) == $risk ? 'selected' : '' }}>{{ $risk }}</option>
                                @endforeach
                            </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" value="{{ old('aum', $product->aum ? (int)$product->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" value="{{ old('nav_price', $product->nav_price) }}">
                        </div>

                        <div class="col-12">
                            <label class="form-label">Deskripsi Produk</label>
                            <textarea name="description" class="form-control" rows="3">{{ old('description', $product->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">
                    <div id="schemesContainer">
                        @php                            $schemes = old('schemes_nominal') ? [] : ($product->placement_schemes ?? []);

@endphp
                        @if(empty($schemes) && !old('schemes_nominal'))
                            <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">
                                </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>
                            </div>
                        @else
                            @foreach($schemes as $scheme)
                                <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" value="{{ $scheme['nominal'] ?? '' }}">
                                    </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" value="{{ $scheme['indication'] ?? '' }}">
                                    </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>
                            @endforeach
                        @endif
                    </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">
                        @php                            $benefits = old('benefits', $product->benefits ?? []);

@endphp
                        @if(empty($benefits))
                            <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="Keunggulan produk...">
                                <button class="btn btn-outline-danger remove-benefit" type="button"><i class="ri-close-line"></i></button>
                            </div>
                        @else
                            @foreach($benefits as $b)
                                <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" value="{{ $b }}">
                                    <button class="btn btn-outline-danger remove-benefit" type="button"><i class="ri-close-line"></i></button>
                                </div>
                            @endforeach
                        @endif
                    </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="{{ $product->cover_image_url }}" 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">Kosongkan jika tidak ingin mengubah cover.</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" {{ old('is_active', $product->is_active) ? '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" {{ old('is_featured', $product->is_featured) ? '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="{{ old('sort_order', $product->sort_order) }}">
                        <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">{{ old('disclaimer', $product->disclaimer) }}</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> Perbarui 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