@extends('Admin.layout')

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">

<style>
    /* Ensures icons align properly with text inside buttons */
    .btn i {
        vertical-align: middle;
        margin-right: 4px;
        font-size: 1.1rem;
    }
</style>

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
        <div class="col-auto">
            <h5>ROI Generation History</h5>
        </div>
        <div class="col-auto">
            <a href="{{ route('roi_generate_page') }}" class="btn btn-primary">
                <i class="ti tabler-plus"></i> Generate ROI
            </a>
        </div>
    </div>

    <div class="card p-0 m-2">
        <div class="row mb-3 align-items-center p-3 g-2">
            <div class="col-auto">
                <select id="pageLength" class="form-select">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                </select>
            </div>
            <div class="col-auto ms-auto d-flex gap-2 align-items-center">
                <input type="text" id="customSearch" class="form-control" placeholder="Search..." style="width:200px;">
            </div>
        </div>

        <div class="table-responsive p-3">
            <table id="roiTable" class="table table-bordered align-middle w-100">
                <thead>
                    <tr>
                        <th>SNO</th>
                        <th>Date</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <div class="modal fade" id="generateRoiModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="roiForm" action="{{ url('admin/roi/generate') }}" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Generate Daily ROI</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">Select Date</label>
                            <input type="date" name="roi_date" class="form-control" required value="{{ date('Y-m-d') }}">
                        </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">Submit & Generate ROI</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <h5 class="modal-title">Confirm Delete</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    Are you sure you want to delete this ROI record?
                </div>
                <div class="modal-footer border-0 justify-content-center">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
                    <form id="deleteForm" method="POST" style="display:inline;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">Yes, Delete</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

   <script>
    $(document).ready(function () {
        // Dummy data
        const dummyData = [
            { id: 15, date: "2026-03-02" },
            { id: 14, date: "2026-03-01" },
            { id: 13, date: "2026-02-28" },
            { id: 12, date: "2026-02-27" },
            { id: 11, date: "2026-02-26" },
            { id: 10, date: "2026-02-25" },
            { id: 9, date: "2026-02-24" },
            { id: 8, date: "2026-02-23" },
            { id: 7, date: "2026-02-22" },
            { id: 6, date: "2026-02-21" }
        ];

        const table = $('#roiTable').DataTable({
            data: dummyData,
            columns: [
                {
                    data: null,
                    render: (data, type, row, meta) => meta.row + meta.settings._iDisplayStart + 1
                },
                { 
                    data: "date",
                    render: (data) => {
                        const date = new Date(data);
                        return date.toLocaleDateString('en-US', { 
                            year: 'numeric', 
                            month: 'short', 
                            day: 'numeric' 
                        });
                    }
                },
                {
                    data: null,
                    orderable: false,
                    render: function (data, type, row) {
                        // Fixed Icon Class: ti ti-trash
                        return `
                            <button class="btn btn-sm btn-outline-danger delete-btn" 
                                    data-id="${row.id}" 
                                    data-bs-toggle="modal" 
                                    data-bs-target="#deleteConfirmModal">
                                <i class="ti tabler-trash"></i> Delete
                            </button>
                        `;
                    }
                }
            ],
            paging: true,
            searching: true,
            info: true,
            ordering: false,
            lengthChange: false,
            pageLength: 10
        });

        // Search Logic
        $('#customSearch').on('keyup', function () {
            table.search(this.value).draw();
        });

        // Page Length Logic
        $('#pageLength').on('change', function () {
            table.page.len(parseInt(this.value)).draw();
        });

        // Inject ID into Delete Form
        $('#roiTable').on('click', '.delete-btn', function () {
            const id = $(this).data('id');
            const deleteUrl = `{{ url('admin/roi') }}/${id}`;
            $('#deleteForm').attr('action', deleteUrl);
        });

        // Form demo
        $('#roiForm').on('submit', function(e) {
            // Keep preventDefault for testing; remove it if you want the form to actually submit to the action URL.
            // e.preventDefault(); 
            const formData = new FormData(this);
            console.log('Generating for: ' + formData.get('roi_date'));
        });
    });
    </script>
@endsection