@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 Areas</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">
                                <h4>Member report based on Areas <p style="font-size: 10px; color:gray">This report shows
                                        monthly based count of member based on areas</p>
                                </h4>
                                <div class="form-inline">
                                    {{-- <form action="{{ route('reports.areas.members') }}" method="get" id="custom-filter-form">
                                    <div class="row">
                                        <!-- Dropdown for Area Filter -->
                                        <div class="mr-3 mb-2">
                                            <select name="area_id" id="area_id" class="form-control">
                                                <option value="">Select  Area</option>
                                                @foreach ($areas as $area)
                                                    <option value="{{ $area->id }}" >
                                                        {{ $area->code .' ( '. $area->name .')' }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <!-- Submit Button and Reload Link -->
                                        <div class="mr-3 mb-2 d-flex">
                                            <button class="btn btn-sidebar btn btn-secondary w-100" type="submit">
                                                <i class="fas fa-search fa-fw"></i>
                                            </button>
                                            <a href="{{ route('reports.areas.members') }}" class="btn btn-secondary w-100" title="Reload" id="reset-filter">
                                                <i class="fas fa-sync"></i>
                                            </a>
                                        </div>

                                    </div>
                                </form> --}}
                                </div><br>
                                <div class="table-responsive">
                                    <table id="memberareareport-table" class="table table-bordered">
                                        <thead>
                                            <tr>
                                                @foreach ($columns as $column)
                                                    <th>{{ $column->title }}</th>
                                                @endforeach
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($data as $row)
                                                <tr>
                                                    @foreach ($columns as $key => $column)
                                                        <td
                                                        @if($key == 3) class="fw-bold" @endif
                                                            @if ($key != 1 && $key != 2) style="text-align: center" @endif>
                                                            {{ $row[$column->data] ?? '' }}</td>
                                                    @endforeach
                                                </tr>
                                            @endforeach
                                        </tbody>
                                        <tfoot>
                                            <tr style="font-weight: bold; background-color: #f0f0f0;">
                                                {{-- Combine first 3 columns for "Total" label --}}
                                                <th colspan="3" style="text-align:left;">Total</th>

                                                {{-- Total column --}}
                                                <th class="text-center fw-bold">{{ $footerTotals['row_total'] ?? 0 }}</th>

                                                {{-- Monthly columns totals --}}
                                                @foreach ($columns as $col)
                                                    @php $colName = $col->data; @endphp
                                                    @if ($colName !== 'DT_RowIndex' && $colName !== 'area_code' && $colName !== 'area_name' && $colName !== 'row_total')
                                                        <th class="text-center fw-bold">{{ $footerTotals[$colName] ?? 0 }}</th>
                                                    @endif
                                                @endforeach
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
@endsection

@push('custom-script')
    {{-- {!! $dataTable->scripts() !!} --}}

    <script>
        $(document).ready(function() {
            $('#memberareareport-table').DataTable({
                paging: false,
                searching: true,
                ordering: true,
                info: false,
                dom: 'Bfrtip',
                buttons: [
                    'csv'
                ],
                // scrollY: '50vh',
                // scrollCollapse: true,
                fixedHeader: false // we use sticky footer via CSS instead
            });
        });
    </script>
@endpush
