@extends('Admin.layout')

@section('navlink')
    <a href="{{ route('dashboard') }}" class="link-secondary text-decoration-none">
        Home
    </a>
    / <span>Level Master</span>
@endsection

@section('content')

<div class="d-flex flex-wrap justify-content-between align-items-end gap-3 mb-4">
    <div>
        <h1 class="h3 mb-1">Level Master</h1>
        <p class="text-muted mb-0 small">
            Manage level income percentages
        </p>
    </div>

   
</div>

<div class="card card-animated-border mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="h6 mb-0 text-gold">
            Level Master
        </h3>
    </div>

    <div class="card-body">
        <div class="table-responsive">
            <table class="table mb-0" id="levelMasterTable">
                <thead>
                    <tr>
                        <th style="width: 100px;">S.No</th>
                        <th>Level</th>
                        <th>Percentage</th>
                        <th class="text-end" style="width: 150px;">Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

{{-- Edit Level Modal --}}
<div class="modal fade" id="editLevelModal" tabindex="-1"
     aria-labelledby="editLevelModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editLevelModalLabel">
                    Edit Level
                </h5>
                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Close">
                </button>
            </div>

            <form action="#" method="POST" id="editLevelForm">
                @csrf

                <div class="modal-body">
                    <input type="hidden" name="level" id="edit_level">

                    <div class="mb-3">
                        <label for="edit_level_name" class="form-label">
                            Level
                        </label>
                        <input type="text"
                               class="form-control"
                               id="edit_level_name"
                               readonly>
                    </div>

                    <div class="mb-3">
                        <label for="edit_percentage" class="form-label">
                            Income Percentage
                        </label>
                        <div class="input-group">
                            <input type="number"
                                   class="form-control"
                                   name="percentage"
                                   id="edit_percentage"
                                   min="0"
                                   step="0.01"
                                   required>
                            <span class="input-group-text">%</span>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-secondary"
                            data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit" class="btn btn-primary">
                        Update
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
    .level-percentage {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 70px;
        padding: 5px 12px;
        border-radius: 6px;
        background: rgba(25, 157, 221, 0.10);
        color: #29b6f6;
        font-weight: 700;
        font-size: 14px;
    }

    .editLevelBtn {
        min-width: 80px;
    }
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/2.3.4/js/dataTables.min.js"></script>
<script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {

    const data = [
        { id: 1,  level: 'Level 1',  percentage: 4 },
        { id: 2,  level: 'Level 2',  percentage: 2 },
        { id: 3,  level: 'Level 3',  percentage: 1 },
        { id: 4,  level: 'Level 4',  percentage: 0.50 },
        { id: 5,  level: 'Level 5',  percentage: 0.50 },
        { id: 6,  level: 'Level 6',  percentage: 0.50 },
        { id: 7,  level: 'Level 7',  percentage: 0.25 },
        { id: 8,  level: 'Level 8',  percentage: 0.25 },
        { id: 9,  level: 'Level 9',  percentage: 0.25 },
        { id: 10, level: 'Level 10', percentage: 0.25 },
        { id: 11, level: 'Level 11', percentage: 0.25 },
        { id: 12, level: 'Level 12', percentage: 0.25 }
    ];

    const table = $('#levelMasterTable').DataTable({
        data: data,
        pageLength: 12,
        lengthChange: false,
        searching: false,
        ordering: false,
        info: false,
        autoWidth: false,
        columns: [
            {
                data: null,
                render: function (data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {
                data: 'level',
                render: function (data, type) {
                    if (type !== 'display') return data;

                    return `<span class="fw-semibold">${data}</span>`;
                }
            },
            {
                data: 'percentage',
                render: function (data, type) {
                    const value = Number(data).toFixed(2).replace(/\.?0+$/, '');

                    if (type !== 'display') return value;

                    return `
                        <span class="level-percentage">
                            ${value}%
                        </span>
                    `;
                }
            },
            {
                data: null,
                className: 'text-end',
                orderable: false,
                searchable: false,
                render: function (data, type, row) {
                    if (type !== 'display') return '';

                    return `
                        <button
                            type="button"
                            class="btn btn-sm btn-primary editLevelBtn"
                            data-id="${row.id}"
                            data-level="${row.level}"
                            data-percentage="${row.percentage}">
                            <i class="bi bi-pencil-square me-1"></i>
                            Edit
                        </button>
                    `;
                }
            }
        ]
    });

    // Edit button
    $('#levelMasterTable').on('click', '.editLevelBtn', function () {
        const id = $(this).data('id');
        const level = $(this).data('level');
        const percentage = $(this).data('percentage');

        $('#edit_level').val(id);
        $('#edit_level_name').val(level);
        $('#edit_percentage').val(percentage);

        const modalElement = document.getElementById('editLevelModal');
        bootstrap.Modal.getOrCreateInstance(modalElement).show();
    });

});
</script>

@endsection