@extends('backend.layouts.app')

@section('content')
    <style>
        .sorting_disabled {
            text-align: center;
        }
    </style>
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h4 class="text-themecolor">Reports Manager</h4>
        </div>
        <div class="col-md-7 align-self-center text-right">
            <div class="d-flex justify-content-end align-items-center">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item">Reports Manager</li>
                    <li class="breadcrumb-item active">Member report based on Salesman</li>
                </ol>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="content-wrapper">
            @if (session('status'))
                <div class="alert alert-success alert-dismissible fade show" role="alert"><i
                        class="far fa-check-circle"></i>
                    {{ session('status') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif
            @if (session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert"><i
                        class="far fa-check-circle"></i>
                    {{ session('error') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            <section class="content">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="form-inline">
                                    <h4>Member report based on Salesman<p style="font-size: 10px; color:gray">This report
                                            shows monthly based count of member based on salesman</p>
                                    </h4>
                                </div>
                                <div class="table-responsive">
                                    <table id="salesman-report-table" class="table table-bordered">
                                        <thead>
                                            <tr>
                                                @foreach ($columns as $colKey => $col)
                                                
                                                    <th style="text-align: center" >{{ $col->title }}</th>
                                                    {{-- <th @if($colKey>1) style="text-align: center" @endif>{{ $col->title }}</th> --}}
                                                    
                                                @endforeach
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($data as $row)
                                                <tr>
                                                    @foreach ($columns as $key =>  $col)
                                                    
                                                        @php $name = $col->name; @endphp
                                                    
                                                        <td @if($key==3) class="fw-bold" @endif @if($key==1) style="text-align: left" @else style="text-align: center" @endif>{!! $row[$name] ?? '' !!}</td>
                                                    
                                                    @endforeach
                                                </tr>
                                            @endforeach
                                        </tbody>
                                        <tfoot>
                                        <tr>
                                            <th colspan="3" style="text-align:left;">Total</th>
                                            <th class="text-center fw-bold" >{{ $totalRow['row_total'] }}</th>
                                            @foreach ($months as $month)
                                            {{-- @dd($totalRow[$month]); --}}
                                                <th class="text-center fw-bold">{{ $totalRow[$month] ?? 0 }}</th>
                                            @endforeach
                                        </tr>
                                    </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
@endsection

@push('custom-script')
 <script>
$(document).ready(function () {
    let table = $('#salesman-report-table').DataTable({
        dom: 'Bfrt',
        buttons: [
            {
                extend: 'csv',
                title: 'Member Salesman Report',
                footer: true
            }
        ],
        pageLength: -1,
        lengthMenu: [[20, 50, 100, 500, 1000, -1], [20, 50, 100, 500, 1000, 'All']],
        order: [], // Enables sorting but doesn't sort by default
        columnDefs: [
            { targets: 0, orderable: false } // Disable sorting on S.No. column
        ],
        rowCallback: function(row, data, index) {
            // Bold style for total row
            if (data[1] === "Total") {
                $(row).css({"font-weight": "bold", "background-color": "#f8f9fa"});
            }
        }
    });

    // Add index numbers (serial no) on draw
    table.on('order.dt search.dt draw', function () {
        table.column(0, {search: 'applied', order: 'applied'}).nodes().each(function (cell, i) {
            let rowData = table.row(i).data();
            if (rowData[1] !== "Total") {
                cell.innerHTML = i + 1;
            } else {
                cell.innerHTML = "";
            }
        });
    }).draw();
});
</script>

@endpush
