@extends('layouts.front-layout')
@section('title') AI Signals @endsection

@section('content')
    <style>
        /* Basic table styling */
        #signalsTable {
            border-collapse: collapse;
            width: 100%;
            font-family: Arial, sans-serif;
            font-size: 14px;
            color: #333;
        }

        /* Header styling */
        #signalsTable thead tr {
            background-color: #007BFF; /* Bootstrap primary blue */
            color: white;
            text-align: left;
            font-weight: bold;
        }

        /* Table cells */
        #signalsTable th, #signalsTable td {
            padding: 10px 12px;
            border: 1px solid #ddd;
        }

        /* Zebra stripes for rows */
        #signalsTable tbody tr:nth-child(odd) {
            background-color: #f9f9f9;
        }

        /* Hover highlight */
        #signalsTable tbody tr:hover {
            background-color: #e6f2ff;
            cursor: pointer;
        }

        /* Align numeric columns right */
        #signalsTable th:nth-child(n+2),
        #signalsTable td:nth-child(n+2) {
            text-align: right;
        }

    </style>

    <section class="inner-banner">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <figure>
                        <img src="{{ pagesSingleImage('AI Signals', 'top_banner_image') }}" class="img-fluid" alt="">
                    </figure>
                </div>
                <div class="col-md-6">
                    <h2>{{ $pageData['AI Signals']['top_banner_title'] ?? '' }}</h2>
                </div>
            </div>
        </div>
    </section>
    <section class="ai-signals">
        <div class="container">
            <table id="signalsTable" class="display" style="width:100%">
                <thead>
                <tr>

                    <th>INSTRUMENT NAME</th>
                    <th>SIGNAL NAME</th>
                    <th>PRICE</th>
                    <th>CHG</th>
                    <th>%CHG</th>
                    <th>VOL</th>
                </tr>
                </thead>
                <tbody>
                @php
                    $grouped = collect($signals)->groupBy(function ($item) {
                        return $item->Instrument_Name . '|' . $item->Instrument_Type . '|' . $item->Signal_Name . '|' . $item->Signal_Type;
                    });
                @endphp

                @foreach ($grouped as $group)
                    @php
                        $latest = $group->sortByDesc('Signal_Timestamp')->first();

                    @endphp
                    <tr>

                        <td>
                            {{ $latest->Instrument_Name }}
                            <button
                                class="btn btn-sm btn-primary open-details-btn"
                                data-instrument-name="{{ $latest->Instrument_Name }}"
                                data-instrument-type="{{ $latest->Instrument_Type }}"
                                data-signal-name="{{ $latest->Signal_Name }}"
                                data-signal-type="{{ $latest->Signal_Type }}"
                                data-signal-timestamp="{{ $latest->Signal_Timestamp }}"
                                data-trade-level="{{ number_format($latest->Trade_Level, 2) }}"
                                data-profit-level-a="{{ $latest->Profit_Level_A }}"
                                data-profit-level-b="{{ $latest->Profit_Level_B }}"
                                data-instructions="{{ $latest->Instructions }}"
                                data-comments="{{ $latest->Comments }}"
                                style="margin-left: 8px;"
                            >+
                            </button>
                        </td>
                        <td>{{ $latest->Signal_Name }}</td>
                        <td>{{ number_format($latest->Trade_Level, 2) }}</td>
                        <td>{{ $latest->Change ?? '-' }}</td>
                        <td>{{ $latest->PercentChange ?? '-' }}</td>
                        <td>{{ $latest->Volume ?? '-' }}</td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </section>


    <section class="market-direction ai-signals">
        <div class="container">
            <div class="row align-items-center ">
                <div class="col-md-6" data-aos="fade-up">
                    <div class="market-direct">

                        <h2 class="mainHead">{{ $pageData['AI Signals']['ai_signals_heading'] ?? '' }}</h2>
                        {!!$pageData['AI Signals']['ai_signals_description'] ?? '' !!}
                        <div class="btn-group">
                            <a href="" class="themeBtn">Join the waitlist</a>
                            <a href="" class="themeBtn bdrbtn1">Discord</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-5" data-aos="fade-up">
                    <figure class="marketimg11 tradingimgs">
                        <img src="{{ pagesSingleImage('AI Signals', 'ai_signals_image') }}" class="img-fluid" alt="">
                    </figure>
                </div>
            </div>
        </div>
    </section>

    <section class="support-sec">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-8" data-aos="fade-up">
                    <div class="supportwrap">
                        <h2 class="mainHead">
                            {!!$pageData['Home']['for_any_inquiries_section_description'] ?? ''!!}

                        </h2>
                    </div>
                </div>
                <div class="col-md-4" data-aos="fade-up">
                    <div class="phonesides">
                        <div class="phonewrap">
                            <figure>
                                <img src="{{asset('upload/images/phoneimg1.webp')}}" class="img-fluid" alt="">
                            </figure>
                            <a href="">For Call <span>(+12) 34 6754 345</span></a>
                        </div>
                        <div class="phonewrap">
                            <figure>
                                <img src="{{asset('upload/images/phoneimg2.webp')}}" class="img-fluid" alt="">
                            </figure>
                            <a href="">For Consultation<span>contact@gmail.com</span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Modal -->
    <div class="modal fade" id="signalDetailsModal" tabindex="-1" aria-labelledby="signalDetailsModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg"> <!-- wider modal -->
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="signalDetailsModalLabel">Signal Details</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered">
                        <tbody>
                        <tr>
                            <th>Instrument Name</th>
                            <td id="modalInstrumentName"></td>
                        </tr>
                        <tr>
                            <th>Instrument Type</th>
                            <td id="modalInstrumentType"></td>
                        </tr>
                        <tr>
                            <th>Signal Name</th>
                            <td id="modalSignalName"></td>
                        </tr>
                        <tr>
                            <th>Signal Type</th>
                            <td id="modalSignalType"></td>
                        </tr>
                        <tr>
                            <th>Signal Timestamp</th>
                            <td id="modalSignalTimestamp"></td>
                        </tr>
                        <tr>
                            <th>Trade Level</th>
                            <td id="modalTradeLevel"></td>
                        </tr>
                        <tr>
                            <th>Profit Level A</th>
                            <td id="modalProfitLevelA"></td>
                        </tr>
                        <tr>
                            <th>Profit Level B</th>
                            <td id="modalProfitLevelB"></td>
                        </tr>
                        <tr>
                            <th>Instructions</th>
                            <td id="modalInstructions"></td>
                        </tr>
                        <tr>
                            <th>Comments</th>
                            <td id="modalComments"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('script')
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#signalsTable').DataTable();

            $('.open-details-btn').on('click', function () {
                $('#modalInstrumentName').text($(this).data('instrument-name'));
                $('#modalInstrumentType').text($(this).data('instrument-type'));
                $('#modalSignalName').text($(this).data('signal-name'));
                $('#modalSignalType').text($(this).data('signal-type'));
                $('#modalSignalTimestamp').text($(this).data('signal-timestamp'));
                $('#modalTradeLevel').text($(this).data('trade-level'));
                $('#modalProfitLevelA').text($(this).data('profit-level-a'));
                $('#modalProfitLevelB').text($(this).data('profit-level-b'));
                $('#modalInstructions').html($(this).data('instructions'));
                $('#modalComments').html($(this).data('comments'));

                const modal = new bootstrap.Modal(document.getElementById('signalDetailsModal'));
                modal.show();
            });
        });
    </script>
    <script src="https://js.pusher.com/8.2.0/pusher.min.js"></script>
    <script>
        Pusher.logToConsole = false;

        var pusher = new Pusher("{{ env('PUSHER_APP_KEY') }}", {
            cluster: "{{ env('PUSHER_APP_CLUSTER') }}"
        });
        var channel = pusher.subscribe('signals');
        var table = $('#signalsTable').DataTable();
        channel.bind('SignalUpdated', function(data) {
            const signal = data.signal;

            const tradeLevel = parseFloat(signal.Trade_Level).toFixed(2);
            const change = signal.Change ?? '-';
            const percentChange = signal.PercentChange ?? '-';
            const volume = signal.Volume ?? '-';

            let html = `
        <tr>
            <td>
                ${signal.Instrument_Name}
                <button
                    class="btn btn-sm btn-primary open-details-btn"
                    data-instrument-name="${signal.Instrument_Name}"
                    data-instrument-type="${signal.Instrument_Type}"
                    data-signal-name="${signal.Signal_Name}"
                    data-signal-type="${signal.Signal_Type}"
                    data-signal-timestamp="${signal.Signal_Timestamp}"
                    data-trade-level="${tradeLevel}"
                    data-profit-level-a="${signal.Profit_Level_A}"
                    data-profit-level-b="${signal.Profit_Level_B}"
                    data-instructions="${signal.Instructions}"
                    data-comments="${signal.Comments}"
                    style="margin-left: 8px;"
                >+</button>
            </td>
            <td>${signal.Signal_Name}</td>
            <td>${tradeLevel}</td>
            <td>${change}</td>
            <td>${percentChange}</td>
            <td>${volume}</td>
        </tr>
        `;

            var newRow = table.row.add($(html));
            var newNode = newRow.node();
            table.draw(false);
            $(newNode).prependTo(table.table().body());

        });

        document.addEventListener('click', function (e) {
            if (e.target && e.target.classList.contains('open-details-btn')) {
                const btn = e.target;

                document.getElementById('modalInstrumentName').textContent = btn.getAttribute('data-instrument-name');
                document.getElementById('modalInstrumentType').textContent = btn.getAttribute('data-instrument-type');
                document.getElementById('modalSignalName').textContent = btn.getAttribute('data-signal-name');
                document.getElementById('modalSignalType').textContent = btn.getAttribute('data-signal-type');
                document.getElementById('modalSignalTimestamp').textContent = btn.getAttribute('data-signal-timestamp');
                document.getElementById('modalTradeLevel').textContent = btn.getAttribute('data-trade-level');
                document.getElementById('modalProfitLevelA').textContent = btn.getAttribute('data-profit-level-a');
                document.getElementById('modalProfitLevelB').textContent = btn.getAttribute('data-profit-level-b');
                document.getElementById('modalInstructions').textContent = btn.getAttribute('data-instructions');
                document.getElementById('modalComments').textContent = btn.getAttribute('data-comments');

                var myModal = new bootstrap.Modal(document.getElementById('signalDetailsModal'));
                myModal.show();
            }
        });

    </script>

@endsection