@extends('layouts/contentNavbarLayout')

@section('title', 'Dashboard - Analytics')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/apex-charts/apex-charts.css') }}">
@endsection

@section('vendor-script')
    <script src="{{ asset('assets/vendor/libs/apex-charts/apexcharts.js') }}"></script>
@endsection

@section('page-script')
    <script src="{{ asset('assets/js/dashboards-analytics.js') }}"></script>
@endsection

@section('content')
<div class="card">
    <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
        <span>KYC Flow</span>
    </div>
    <div class="card-body">
        <div style="margin-top: 20px;">
            <strong>Total Charges: ₹<span id="total-charges">0</span></strong>
        </div>
        <div class="container" style="display: flex; gap: 20px;">
            <!-- Left side: Services list -->
            <div id="available-services" class="card" style="width: 300px; padding: 10px; border: 1px solid #ccc;">
                <h4>Available Services</h4>
                <ul id="service-list" class="sortable" style="list-style: none; padding-left: 0;"></ul>
            </div>

            <!-- Right side: Flow builder -->
            <div id="service-flow" class="card droppable" style="width: 300px; min-height: 200px; padding: 10px; border: 2px dashed #aaa;">
                <h4>Service Flow</h4>
                <ul id="flow-list" style="list-style: none; padding-left: 0;"></ul>
            </div>
        </div>
    </div>
</div>

@endsection
@section('js')
<script>
 $(document).ready(function () {
    let servicesData = {};

    $.get('/get-active-service', function (services) {
        servicesData = services;

        $.each(services, function (key, data) {
            const li = `
                <li class="draggable" data-key="${key}" data-charge="${data.charge}" style="padding: 5px; border: 1px solid #ccc; margin: 5px 0; background: #f9f9f9; cursor: move;">
                    <label>
                        <input type="checkbox" disabled> ${data.label} (₹${data.charge})
                    </label>
                </li>`;
            $('#service-list').append(li);
        });

        makeDraggable();
    });

    function makeDraggable() {
        $(".draggable").draggable({
            helper: "clone",
            revert: "invalid"
        });

        $("#flow-list").droppable({
            accept: ".draggable",
            drop: function (event, ui) {
                const key = ui.helper.data("key");
                const charge = parseFloat(ui.helper.data("charge"));

                if ($(this).find(`[data-key="${key}"]`).length === 0) {
                    const item = ui.helper.clone();
                    item.find('input[type="checkbox"]').prop('checked', true);
                    $(this).append(item);

                    updateTotalCharges();
                }
            }
        });
    }

    function updateTotalCharges() {
        let total = 0;
        $("#flow-list li").each(function () {
            total += parseFloat($(this).data("charge"));
        });
        $("#total-charges").text(total.toFixed(2));
    }
});
</script>

@endsection