@php(
$headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
$title ?? '',
$subTitle ?? '',
isset($filters) ? $filters : [],
isset($advancedFilters) ? $advancedFilters : []
)
)
@php($headingOptions = [
'<div class="search-field"><input type="text" class="form-control pr-45 module-search" placeholder="Search" value="'. e(request()->input('search_text')) .'">'. ((request()->has('search_text') && request()->input('search_text')) ? '<i class="'. \Config::get('settings.icon_cross') .' search-clear-icon"></i>' : '<i class="'. \Config::get('settings.icon_search') .'"></i>') .'</div>',
\App\Helpers\Helper::configureColumnFilter('MyMerchantController', 'index'),
'<div class="d-inline-block position-relative hw-export-wrapper" data-export-wrapper data-route="'. route('my-merchants.export','__FMT__') .'">'
    .'<button type="button" class="'. \Config::get('view.buttons.primary') .' hw-export-btn" data-export-btn><i class="bx bx-download"></i> <span>Export</span></button>'
    .'<div class="hw-export-menu shadow" data-export-menu>'
        .'<button type="button" class="hw-export-item" data-format="csv">CSV</button>'
        .'<button type="button" class="hw-export-item" data-format="xlsx">XLS</button>'
        .'</div>'
    .'</div>'
])

@php($mainHeadingOptions = [
'<button type="button" class="green-btn-inner waves-effect" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRightAdvancedPrimary" aria-controls="offcanvasRightAdvancedPrimary"><i class="bx bx-filter-alt"></i> Filter <span class="filter-counter" data-filter-id="primary">(0)</span></button>',
])
@extends('admin.layouts.layout', $headerOption)
@section('content')
{{-- Phase 2 GAP-3.1: Date Range Label --}}
<x-heading-sec :module="$module" :options="$mainHeadingOptions">
    @if(!empty($dateRangeLabel))
        <span class="badge bg-teal text-white px-3 py-2 ms-2">{{ $dateRangeLabel }}</span>
    @endif
</x-heading-sec>

{{-- Phase 2 GAP-3.17: Date Range Filter Bar --}}
<div class="mb-3 d-flex flex-wrap gap-2 align-items-center">
    <form method="GET" action="{{ route('my-merchants.index') }}" class="d-flex flex-wrap gap-2 align-items-center" id="portfolio-filter-form">
        <div class="project-form mb-0">
            <label for="date_range">Date Range</label>
            <select name="date_range" id="date_range" class="form-control select2 no-search" onchange="this.form.submit()">
                <option value="this_month" {{ ($selectedDateRange??'this_month')==='this_month' ? 'selected' : '' }}>This Month</option>
                <option value="last_month" {{ ($selectedDateRange??'')==='last_month' ? 'selected' : '' }}>Last Month</option>
                <option value="last_30" {{ ($selectedDateRange??'')==='last_30' ? 'selected' : '' }}>Last 30 Days</option>
                <option value="last_90" {{ ($selectedDateRange??'')==='last_90' ? 'selected' : '' }}>Last 90 Days</option>
                <option value="this_quarter" {{ ($selectedDateRange??'')==='this_quarter' ? 'selected' : '' }}>This Quarter</option>
                <option value="this_year" {{ ($selectedDateRange??'')==='this_year' ? 'selected' : '' }}>This Year</option>
                <option value="custom" {{ ($selectedDateRange??'')==='custom' ? 'selected' : '' }}>Custom</option>
            </select>
        </div>
        @if(($selectedDateRange??'') === 'custom')
        <div class="project-form mb-0">
            <label for="date_from">From</label>
            <input type="date" name="date_from" id="date_from" class="form-control" value="{{ $dateFrom??'' }}">
        </div>
        <span class="text-muted small">to</span>
        <div class="project-form mb-0">
            <label for="date_to">To</label>
            <input type="date" name="date_to" id="date_to" class="form-control" value="{{ $dateTo??'' }}">
        </div>
        <button type="submit" class="green-btn-inner waves-effect"><i class="bx bx-check"></i></button>
        @endif
        {{-- Phase 2 GAP-3.5/3.9: Showing N Merchants counter --}}
        <span class="text-muted small ms-2">
            Showing {{ $data->count() }} of {{ $data->total() }} merchants
        </span>
    </form>
</div>

<div class="row mb-4">
    <div class="col-5">
        <div class="project-box h-100">
            <div class="heading-btn-sec">
                <h3 class="mb-0">Totals by Card Type</h3>
            </div>
            <div class="table-responsive project-table">
                <table class="table">
                    <thead class="thead-light ">
                        <tr>
                            <th></th>
                            <th>Card Type</th>
                            <th class="text-end">Total</th>
                            <th class="text-end">Transactions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if(isset($cardTypesSummery) && count($cardTypesSummery) > 0)
                        @foreach($cardTypesSummery as $index => $cardTypeData )
                        <tr>
                            <td class="py-1">
                                {{-- Phase 2 GAP-3.2: Bootstrap form-switch --}}
                                <div class="form-check form-switch pr-input mb-0">
                                    <input class="form-check-input transaction_card_type" type="checkbox" role="switch"
                                        name="card_type[]" value="{{ $cardTypeData->card_type }}"
                                        id="all_card_type_{{ $index }}" checked>
                                </div>
                            </td>
                            {{-- Phase 2 GAP-3.3: Card brand logos --}}
                            <td class="py-1">
                                {!! \App\Helpers\Helper::cardImgTag($cardTypeData->card_type, 'img-fluid me-1', 'height:22px') !!}
                                <span class="small">{{ strtoupper($cardTypeData->card_type) }}</span>
                            </td>
                            <td class="text-end py-1">${{ number_format($cardTypeData->total_amount, 2) }}</td>
                            <td class="text-end py-1">{{ number_format($cardTypeData->total_count) }}</td>
                        </tr>
                        @endforeach
                        <tr class="table-total-row">
                            <td colspan="2">
                                <strong>Total
                                    <i class="fa fa-question-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="Total amount for all card types"></i>
                                </strong>
                            </td>
                            <td class="text-end">
                                <strong>
                                    ${{
                                        isset($cardTypesSummery)
                                        ? number_format(collect($cardTypesSummery)->sum('total_amount'), 2)
                                        : '0.00'
                                    }}
                                </strong>
                            </td>
                            <td class="text-end">
                                <strong>
                                    {{
                                        isset($cardTypesSummery)
                                        ? number_format(collect($cardTypesSummery)->sum('total_count'))
                                        : '0'
                                    }}
                                </strong>
                            </td>
                        </tr>
                        @else
                        <tr class="text-center">
                            <td colspan="4">No data available</td>
                        </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-7">
        <div class="project-box h-100">
            <div class="heading-btn-sec">
                <h3 class="mb-0">Portfolio Breakdown</h3>
            </div>
            @php(
            $portfolioBreakdown = $portfolioBreakdown ?? [
            'processing' => 0,
            'not_processing' => 0,
            'closed' => 0,
            ]
            )
            <div class="portfolio-breakdown-wrapper d-flex flex-row flex-wrap align-items-center">
                @if(isset($portfolioBreakdown) && ($portfolioBreakdown['processing'] + $portfolioBreakdown['closed']) == 0)
                <div class="text-center w-100 mt-5">No data available for portfolio breakdown.</div>
                @else
                <div id="portfolio-breakdown-chart" class="portfolio-breakdown-chart" style="min-height:230px"></div>
                <ul class="list-unstyled d-flex flex-column gap-1 mb-0 portfolio-legend ms-1" data-legend>
                    <li class="d-flex align-items-center justify-content-between gap-2" style="min-width:260px" data-key="processing">
                        <div class="d-flex align-items-center gap-2">
                            <span class="color-dot" style="background:#34c38f"></span>
                            <span>Processing (<span data-count>{{ $portfolioBreakdown['processing'] }}</span>)</span>
                            <span><i class="fa fa-question-circle" title="Merchants with a settled batch within the last 14 days."></i></span>
                        </div>
                        {{-- Phase 2 GAP-3.2: Bootstrap form-switch --}}
                        <div class="form-check form-switch pr-input mb-0">
                            <input class="form-check-input" type="checkbox" role="switch"
                                name="portfolio_segments[]" value="1"
                                id="portfolio-seg-processing" checked
                                data-toggle-segment data-segment="processing">
                        </div>
                    </li>
                    {{-- Phase 2 GAP-3.6: Not Processing segment (uncommented) --}}
                    <li class="d-flex align-items-center justify-content-between gap-2" style="min-width:260px" data-key="not_processing">
                        <div class="d-flex align-items-center gap-2">
                            <span class="color-dot" style="background:#f1b44c"></span>
                            <span>Not Processing (<span data-count>{{ $portfolioBreakdown['not_processing'] ?? 0 }}</span>)</span>
                            <span><i class="fa fa-question-circle" title="Merchants without a settled batch within the last 14 days."></i></span>
                        </div>
                        <div class="form-check form-switch pr-input mb-0">
                            <input class="form-check-input" type="checkbox" role="switch"
                                name="portfolio_segments[]" value="not_processing"
                                id="portfolio-seg-not_processing" checked
                                data-toggle-segment data-segment="not_processing">
                        </div>
                    </li>
                    <li class="d-flex align-items-center justify-content-between gap-2" style="min-width:260px" data-key="closed">
                        <div class="d-flex align-items-center gap-2">
                            <span class="color-dot" style="background:#f46a6a"></span>
                            <span>Closed (<span data-count>{{ $portfolioBreakdown['closed'] }}</span>)</span>
                            <span><i class="fa fa-question-circle" title="Merchants reported as closed, deactivated, or not enabled for reporting."></i></span>
                        </div>
                        <div class="form-check form-switch pr-input mb-0">
                            <input class="form-check-input" type="checkbox" role="switch"
                                name="portfolio_segments[]" value="4"
                                id="portfolio-seg-closed" checked
                                data-toggle-segment data-segment="closed">
                        </div>
                    </li>
                </ul>
                @endif
            </div>
        </div>
    </div>
</div>
<div class="col-12">
    <div class="project-box">
        <x-heading-sec :module="$module" :options="$headingOptions" />
        <div class="table-responsive project-table">
            <table id="datatable" class="{{ \Config::get('view.table.table_class') }}">
                @include('admin.components.form-header-fields')
                @include('admin.components.form-data-fields')
            </table>
        </div>
        @include('admin.components.pagination-inner')
    </div>
</div>
@endsection
@push('page_script')
<script src="{{ asset('assets/js/common.js') }}"></script>
<script>
    window.__PORTFOLIO_BREAKDOWN__ = @json($portfolioBreakdown);
</script>
<script src="{{ asset('assets/js/my-merchants-portfolio.js') }}"></script>
<script>
$(document).ready(function() {
    // Handle card type form-switch toggles
    $(document).on('change', '.transaction_card_type', function() {
        updateMerchantList();
    });

    // Handle portfolio segment toggles
    $(document).on('change', '[data-toggle-segment]', function() {
        updateMerchantList();
    });

    function updateMerchantList() {
        var selectedCardTypes = [];
        $('.transaction_card_type:checked').each(function() {
            selectedCardTypes.push($(this).val());
        });

        var selectedPortfolioSegments = [];
        $('[data-toggle-segment]:checked').each(function() {
            selectedPortfolioSegments.push($(this).val());
        });

        var params = new URLSearchParams(window.location.search);

        if (selectedCardTypes.length > 0) {
            params.set('card_types', selectedCardTypes.join(','));
        } else {
            params.delete('card_types');
        }

        if (selectedPortfolioSegments.length > 0) {
            params.set('portfolio_segments', selectedPortfolioSegments.join(','));
        } else {
            params.delete('portfolio_segments');
        }

        showLoading();

        $.ajax({
            url: window.location.pathname,
            type: 'GET',
            data: params.toString(),
            dataType: 'json',
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function(response) {
                if (response.status === 'success') {
                    if (response.tableHtml) {
                        $('#datatable').replaceWith(response.tableHtml);
                    }
                    if (response.paginationHtml) {
                        $('.pagination-wrapper').html(response.paginationHtml);
                    }
                    var newUrl = window.location.pathname;
                    if (params.toString()) { newUrl += '?' + params.toString(); }
                    window.history.replaceState({}, '', newUrl);
                }
            },
            error: function(xhr) { console.error('Error updating merchant list:', xhr); },
            complete: function() { hideLoading(); }
        });
    }

    function showLoading() {
        if (!$('.loading-overlay').length) {
            $('body').append('<div class="loading-overlay" style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);z-index:9999;display:flex;align-items:center;justify-content:center;"><div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div></div>');
        }
    }
    function hideLoading() { $('.loading-overlay').remove(); }
});
</script>
@endpush