@extends('admin.layouts.form')

@section('custom_page_style')
    <style>

        .table-container {
            position: relative;
            overflow-y: auto;
            max-height: calc(100vh - 120px); /* Adjust based on your layout */
        }

        .table thead th {
            position: sticky;
            top: 0; /* Adjust to align with the main header */
            z-index: 1000;
            background-color: #008080; /* Match your header color */
            color: white;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

    </style>
@endsection

@section('content')
    <div class="container-fluid">
        <div class="block-header">
            <!-- Add any alerts or messages here -->
            @if(session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif
        </div>

        <div class="row clearfix">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="card">
                    <div class="header clearfix">
                        <h2 class="pull-left">
                            <i class="material-icons btn btn-sm btn-warning">create</i> <span> &nbsp; Revenue Input History</span>
                        </h2>
                        <a href="{!! URL::to('module/revenue/create') !!}" class="pull-right">Create Revenue Input</a>
                    </div>

                    <div class="body">
                        @if(session('message'))
                            <div class="alert alert-success">
                                {{ session('message') }}
                            </div>
                        @endif

                        <p>TOTAL : {!! $results->total() !!}</p>
                        <div class="table-container">
                            <table class="table table-striped table-bordered table-hover">
                                <thead class="bg-teal">
                                <tr>
                                    <th>Restaurant</th>
                                    <th>Date</th>
                                    <th>Portal</th>
                                    <th>No of transaction</th>
                                    <th>Online Revenue</th>
                                    <th>Revenue after commission</th>
                                    <th>Option</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($results as $i=>$result)
                                    <tr class="font-12">
                                        <td>{!! $result->restaurant->name !!}</td>
                                        <td>{!! $result->revenue_date !!}</td>
                                        <td>{!! $result->sales_portal->name !!}</td>
                                        <td>{!! $result->number_of_transaction !!}</td>
                                        <td>{!! $result->online_revenue !!}</td>
                                        <td>{!! $result->revenue_after_commission !!}</td>

                                        <td>
                                            <a data-toggle="tooltip" data-title="Edit & Preview" class="btn btn-xs btn-warning" href="{!! URL::to('module/revenue/'.$result->id,'edit') !!}"><i class="material-icons">edit</i></a>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                        {!! $results->links() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('custom_page_script')
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            const tableHeader = document.querySelector('.table thead th');
            const mainHeader = document.querySelector('.navbar'); // Adjust the selector to your main header class

            if (mainHeader && tableHeader) {
                const headerOffset = mainHeader.offsetHeight;

                document.querySelectorAll('.table thead th').forEach((th) => {
                    th.style.top = `${headerOffset}px`;
                });
            }
        });
    </script>
@endsection