@extends('layouts.master')

@section('styles')
    <style>
        .product-stat-card {
            border-radius: 10px;
            transition: all 0.25s ease;
        }
        .product-stat-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }
        .product-thumb {
            width: 44px;
            height: 44px;
            object-fit: cover;
            border-radius: 8px;
            border: 1px solid #e2e8f0;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('build/assets/libs/sweetalert2/sweetalert2.min.css') }}">
@endsection

@section('content')

    <div class="page-header-breadcrumb mb-3">
        <div class="d-flex align-items-center justify-content-between flex-wrap mb-3">
            <div>
                <h1 class="page-title fw-bold fs-18 mb-1">Kelola Produk Investasi</h1>
                <p class="text-muted mb-0 fs-13">Kelola katalog reksa dana, instrumen pasar uang, dan produk investasi DBIC yang tampil di aplikasi investor.</p>
            </div>
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="javascript:void(0);">Investasi</a></li>
                <li class="breadcrumb-item active" aria-current="page">Produk Investasi</li>
            </ol>
        </div>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show d-flex align-items-center" role="alert">
                <i class="ri-checkbox-circle-line fs-18 me-2"></i>
                <div>{{ session('success') }}</div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show d-flex align-items-center" role="alert">
                <i class="ri-error-warning-line fs-18 me-2"></i>
                <div>{{ session('error') }}</div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div class="row mb-3 g-3">
            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12">
                <div class="card custom-card product-stat-card mb-0 h-100">
                    <div class="card-body p-3">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <span class="d-block text-muted fs-12 fw-medium mb-1">TOTAL PRODUK</span>
                                <h3 class="mb-0 fw-bold text-dark">{{ number_format($totalProducts) }}</h3>
                                <span class="text-muted fs-11 mt-1 d-block"><i class="ri-folders-line me-1"></i>Instrumen investasi</span>
                            </div>
                            <div class="avatar avatar-md bg-primary-transparent rounded-circle">
                                <i class="ri-funds-box-line fs-20 text-primary"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12">
                <div class="card custom-card product-stat-card mb-0 h-100">
                    <div class="card-body p-3">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <span class="d-block text-muted fs-12 fw-medium mb-1">PRODUK AKTIF</span>
                                <h3 class="mb-0 fw-bold text-success">{{ number_format($activeProducts) }}</h3>
                                <span class="text-muted fs-11 mt-1 d-block"><i class="ri-smartphone-line me-1"></i>Tampil di mobile app</span>
                            </div>
                            <div class="avatar avatar-md bg-success-transparent rounded-circle">
                                <i class="ri-checkbox-circle-line fs-20 text-success"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12">
                <div class="card custom-card product-stat-card mb-0 h-100">
                    <div class="card-body p-3">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <span class="d-block text-muted fs-12 fw-medium mb-1">UNGGULAN (FEATURED)</span>
                                <h3 class="mb-0 fw-bold text-warning">{{ number_format($featuredProducts) }}</h3>
                                <span class="text-muted fs-11 mt-1 d-block"><i class="ri-star-line me-1"></i>Rekomendasi di Beranda</span>
                            </div>
                            <div class="avatar avatar-md bg-warning-transparent rounded-circle">
                                <i class="ri-star-fill fs-20 text-warning"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-header justify-content-between border-bottom-0 flex-wrap gap-2">

                        <div class="d-flex align-items-center gap-2 flex-grow-1" style="max-width: 380px;">
                            <div class="input-group">
                                <span class="input-group-text bg-light border-end-0 text-muted"><i class="ri-search-line"></i></span>
                                <input class="form-control border-start-0" type="search" id="product-search-input" placeholder="Cari nama, kategori, kode produk..." aria-label="Search">
                            </div>
                        </div>

                        <div class="d-flex gap-2 flex-wrap align-items-center">

                            <div>
                                <select class="form-select form-select-sm" id="product-category-filter" style="min-width: 160px;">
                                    <option value="all">Semua Kategori</option>
                                    @foreach($categories as $cat)
                                        <option value="{{ $cat }}">{{ $cat }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div>
                                <select class="form-select form-select-sm" id="product-status-filter" style="min-width: 140px;">
                                    <option value="all">Semua Status</option>
                                    <option value="active">Aktif</option>
                                    <option value="inactive">Nonaktif</option>
                                </select>
                            </div>

                            <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-reset-filter" title="Reset Filter">
                                <i class="ri-refresh-line me-1"></i>Reset
                            </button>

                            <a href="{{ route('investment-products.create') }}" class="btn btn-sm btn-primary d-inline-flex align-items-center gap-1">
                                <i class="ri-add-line fs-14"></i> Tambah Produk
                            </a>
                        </div>
                    </div>

                    <div class="card-body pb-4">
                        <div class="table-responsive mb-4">
                            <table id="table-products" class="table table-hover text-nowrap w-100 align-middle">
                                <thead class="table-success">
                                    <tr>
                                        <th style="width: 50px;">ID</th>
                                        <th>Produk</th>
                                        <th>Kategori</th>
                                        <th>Harga/Unit (NAV)</th>
                                        <th>Dana Dikelola (AUM)</th>
                                        <th>Imbal Hasil</th>
                                        <th>Tenor</th>
                                        <th>Status Mobile</th>
                                        <th style="width: 110px;" class="text-center">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Hidden form for deleting allowed products -->
    <form id="global-delete-form" method="POST" style="display: none;">
        @csrf
        @method('DELETE')
    </form>

@endsection

@section('scripts')
    <script src="{{ asset('build/assets/libs/sweetalert2/sweetalert2.all.min.js') }}"></script>
    <script>
        let productDataTable;

        function escapeHtml(text) {
            if (!text) return '';
            return String(text)
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        }

        $(document).ready(function () {
            productDataTable = $('#table-products').DataTable({
                processing: true,
                serverSide: true,
                searching: false,
                paging: true,
                lengthChange: true,
                pageLength: 10,
                stateSave: true,
                stateDuration: 7200,
                stateSaveParams: function (settings, data) {
                    data.search_input = $('#product-search-input').val();
                    data.category_filter = $('#product-category-filter').val();
                    data.status_filter = $('#product-status-filter').val();
                },
                stateLoadParams: function (settings, data) {
                    if (data.search_input !== undefined) $('#product-search-input').val(data.search_input);
                    if (data.category_filter !== undefined) $('#product-category-filter').val(data.category_filter);
                    if (data.status_filter !== undefined) $('#product-status-filter').val(data.status_filter);
                },
                drawCallback: function (settings) {
                    const api = this.api();
                    const info = api.page.info();
                    if (info && info.pages > 0 && info.page >= info.pages) {
                        api.page('previous').draw('page');
                    }
                },
                ajax: {
                    url: '{{ route("investment-products.api.list") }}',
                    type: 'GET',
                    data: function (d) {
                        return {
                            page: (d.start / d.length) + 1,
                            page_size: d.length,
                            search: $('#product-search-input').val(),
                            category: $('#product-category-filter').val(),
                            status: $('#product-status-filter').val()
                        };
                    },
                    dataSrc: function (json) {
                        json.recordsTotal = json.meta ? json.meta.total : 0;
                        json.recordsFiltered = json.meta ? json.meta.total : 0;
                        return json.data || [];
                    }
                },
                columns: [
                    { data: 'id', name: 'id' },
                    {
                        data: null,
                        name: 'product',
                        render: function (data, type, row) {
                            const featuredBadge = row.is_featured
                                ? `<span class="badge bg-warning-transparent text-warning ms-1 fs-10"><i class="ri-star-fill me-1"></i>Unggulan</span>`
                                : '';
                            const thumb = row.cover_image_url
                                ? `<img src="${row.cover_image_url}" class="product-thumb me-2" alt="${escapeHtml(row.name)}">`
                                : `<div class="product-thumb me-2 bg-light d-flex align-items-center justify-content-center text-muted"><i class="ri-funds-line fs-18"></i></div>`;

                            return `
                                <div class="d-flex align-items-center">
                                    ${thumb}
                                    <div>
                                        <div class="fw-bold text-dark fs-13">
                                            <a href="${row.show_url}" class="text-dark">${escapeHtml(row.name)}</a>
                                            ${featuredBadge}
                                        </div>
                                        <div class="text-muted fs-11">${escapeHtml(row.code)} &bull; Risiko ${escapeHtml(row.risk_level)}</div>
                                    </div>
                                </div>
                            `;
                        }
                    },
                    {
                        data: null,
                        name: 'category',
                        render: function (data, type, row) {
                            return `<span class="badge bg-primary-transparent text-primary fw-semibold fs-11">${escapeHtml(row.category)}</span>`;
                        }
                    },
                    {
                        data: 'nav_price_formatted',
                        name: 'nav_price',
                        render: function (data, type, row) {
                            return `
                                <div>
                                    <span class="fw-bold text-dark fs-13">${data}</span>
                                    <span class="text-muted fs-10 d-block">/ unit</span>
                                </div>
                            `;
                        }
                    },
                    {
                        data: null,
                        name: 'aum',
                        render: function (data, type, row) {
                            const hasAum = parseFloat(row.aum) > 0;
                            const badgeClass = hasAum ? 'bg-success-transparent text-success' : 'bg-light text-muted';
                            return `
                                <div>
                                    <span class="badge ${badgeClass} fw-semibold fs-12 px-2 py-1">${row.aum_formatted}</span>
                                    ${hasAum ? '<span class="text-success fs-10 d-block mt-0-5"><i class="ri-shield-check-line me-1"></i>Dana Aktif</span>' : '<span class="text-muted fs-10 d-block mt-0-5">Nol Dana</span>'}
                                </div>
                            `;
                        }
                    },
                    {
                        data: null,
                        name: 'expected_return',
                        render: function (data, type, row) {
                            return `
                                <div>
                                    <span class="badge bg-success-transparent text-success fw-bold fs-12">${escapeHtml(row.expected_return)}</span>
                                    <div class="fs-11 text-muted mt-1">${escapeHtml(row.return_type)}</div>
                                </div>
                            `;
                        }
                    },
                    {
                        data: null,
                        name: 'tenor',
                        render: function (data, type, row) {
                            return `<span class="badge bg-light text-dark fw-semibold fs-11">${escapeHtml(row.tenor)}</span>`;
                        }
                    },
                    {
                        data: null,
                        name: 'is_active',
                        orderable: false,
                        render: function (data, type, row) {
                            const isChecked = row.is_active ? 'checked' : '';
                            const labelText = row.is_active ? 'Aktif' : 'Nonaktif';
                            return `
                                <div class="form-check form-switch mb-0">
                                    <input class="form-check-input toggle-status" type="checkbox" role="switch"
                                           data-id="${row.id}" ${isChecked}>
                                    <label class="form-check-label fs-12 text-muted status-label">${labelText}</label>
                                </div>
                            `;
                        }
                    },
                    {
                        data: null,
                        name: 'actions',
                        orderable: false,
                        render: function (data, type, row) {
                            let deleteBtn = '';
                            if (!row.can_delete) {
                                deleteBtn = `
                                    <button type="button" class="btn btn-sm btn-icon btn-warning-light btn-delete-restricted"
                                            data-name="${escapeHtml(row.name)}"
                                            data-reason="${escapeHtml(row.restriction_reason || 'Masih memiliki dana kelolaan aktif')}"
                                            title="Penghapusan Dibatasi (Ada Dana Kelolaan Aktif)">
                                        <i class="ri-lock-line"></i>
                                    </button>
                                `;
                            } else {
                                deleteBtn = `
                                    <button type="button" class="btn btn-sm btn-icon btn-danger-light btn-delete-product"
                                            data-name="${escapeHtml(row.name)}"
                                            data-url="${row.destroy_url}"
                                            title="Hapus Produk">
                                        <i class="ri-delete-bin-line"></i>
                                    </button>
                                `;
                            }

                            return `
                                <div class="d-flex align-items-center justify-content-center gap-1">
                                    <a href="${row.show_url}" class="btn btn-sm btn-icon btn-primary-light" title="Lihat Detail & Performa Produk">
                                        <i class="ri-eye-line"></i>
                                    </a>
                                    <a href="${row.edit_url}" class="btn btn-sm btn-icon btn-secondary-light" title="Edit Produk">
                                        <i class="ri-edit-line"></i>
                                    </a>
                                    ${deleteBtn}
                                </div>
                            `;
                        }
                    }
                ],
                order: [[0, 'desc']],
                dom: "<'row'<'col-12'tr>>" +
                     "<'row align-items-center mt-3 pt-3 border-top g-2'<'col-sm-12 col-md-6 d-flex align-items-center gap-2 justify-content-sm-start justify-content-center'l i><'col-sm-12 col-md-6 d-flex justify-content-sm-end justify-content-center'p>>",
                language: {
                    processing: '<div class="spinner-border text-primary spinner-border-sm" role="status"><span class="visually-hidden">Memuat...</span></div> <span class="ms-1 text-muted fs-12">Memuat data...</span>',
                    lengthMenu: 'Tampilkan _MENU_ entri',
                    emptyTable: 'Tidak ada data produk investasi ditemukan',
                    zeroRecords: 'Tidak ada data produk yang cocok dengan pencarian',
                    info: 'Menampilkan _START_ sampai _END_ dari _TOTAL_ data',
                    infoEmpty: 'Menampilkan 0 sampai 0 dari 0 data',
                    infoFiltered: '(disaring dari _MAX_ total data)',
                    paginate: {
                        first: '<i class="ri-skip-back-line"></i>',
                        last: '<i class="ri-skip-forward-line"></i>',
                        next: '<i class="ri-arrow-right-s-line"></i>',
                        previous: '<i class="ri-arrow-left-s-line"></i>'
                    }
                }
            });

            // Handle klik tombol hapus yang terestriksi karena ada dana aktif
            $(document).on('click', '.btn-delete-restricted', function () {
                const productName = $(this).data('name');
                const reason = $(this).data('reason');

                Swal.fire({
                    icon: 'warning',
                    title: 'Penghapusan Dibatasi',
                    html: `
                        <div class="text-start">
                            <p class="mb-2">Produk <strong>${escapeHtml(productName)}</strong> tidak dapat dihapus demi keamanan aset.</p>
                            <div class="alert alert-warning-transparent border border-warning fs-12 mb-3">
                                <i class="ri-shield-keyhole-line me-1 fw-bold"></i>
                                <strong>Alasan Proteksi:</strong><br>
                                ${escapeHtml(reason)}
                            </div>
                            <p class="text-muted fs-12 mb-0">
                                <i class="ri-information-line me-1 text-primary"></i>
                                Produk yang masih mengelola dana atau memiliki transaksi aktif tidak boleh dihapus. Jika ingin menutup penawaran, silakan nonaktifkan switch <strong>Status Mobile</strong> produk.
                            </p>
                        </div>
                    `,
                    confirmButtonText: 'Saya Mengerti',
                    confirmButtonColor: '#0f3625'
                });
            });

            // Handle konfirmasi hapus untuk produk yang diizinkan dihapus (dana 0)
            $(document).on('click', '.btn-delete-product', function () {
                const productName = $(this).data('name');
                const deleteUrl = $(this).data('url');

                Swal.fire({
                    title: 'Hapus Produk?',
                    text: `Apakah Anda yakin ingin menghapus produk "${productName}"? Produk ini tidak memiliki dana kelolaan. Tindakan ini tidak dapat dibatalkan.`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, Hapus Produk',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        const form = $('#global-delete-form');
                        form.attr('action', deleteUrl);
                        form.submit();
                    }
                });
            });

            let searchTimeout;
            $('#product-search-input').on('keyup', function () {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(function () {
                    productDataTable.page(0).ajax.reload();
                }, 400);
            });

            $('#product-category-filter, #product-status-filter').on('change', function () {
                productDataTable.page(0).ajax.reload();
            });

            $('#btn-reset-filter').on('click', function () {
                $('#product-search-input').val('');
                $('#product-category-filter').val('all');
                $('#product-status-filter').val('all');
                productDataTable.state.clear();
                productDataTable.page(0).ajax.reload();
            });

            $(document).on('change', '.toggle-status', function () {
                const checkbox = $(this);
                const productId = checkbox.data('id');
                const label = checkbox.siblings('.status-label');

                fetch(`/investment-products/${productId}/toggle-status`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    }
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        label.text(data.is_active ? 'Aktif' : 'Nonaktif');
                    } else {
                        checkbox.prop('checked', !checkbox.prop('checked'));
                    }
                })
                .catch(err => {
                    console.error(err);
                    checkbox.prop('checked', !checkbox.prop('checked'));
                });
            });
        });
    </script>
@endsection