@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')
<x-heading-sec :module="$module" :options="$mainHeadingOptions" />

<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">
                                <div class="d-flex gap-2 align-items-center ">
                                    <input type="checkbox" name="card_type[]" value="{{ $cardTypeData->card_type }}" id="all_card_type_{{ $index }}" class="transaction_card_type" switch="dark" checked >
                                    <label for="all_card_type_{{ $index }}" data-on-label="" data-off-label=""></label>
                                </div>
                            </td>
                            <td class="py-1"><img src="{{ \App\Helpers\Helper::cardImg($cardTypeData->card_type) }}" alt="{{ $cardTypeData->card_type }}" class="img-fluid" /></td>
                            <td class="text-end py-1">${{ $cardTypeData->total_amount }}</td>
                            <td class="text-end py-1">{{ $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)
                                        ? 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' => $processingCount ?? 1,
            'not_processing' => $notProcessingCount ?? 2,
            'closed' => $closedCount ?? 3,
            ]
            )
            <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 who have a setteled batch reported within the last 14 days."></i>
                            </span>
                        </div>
                        <div class="square-switchs d-flex gap-2 align-items-center mt-1">
                            <input type="checkbox" name="portfolio_segments[]" value="1" id="portfolio-seg-processing" class="enable_days" switch="dark" checked data-toggle-segment data-segment="processing">
                            <label for="portfolio-seg-processing" data-on-label="" data-off-label=""></label> 
                        </div>
                    </li>
                    <!-- <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'] }}</span>)</span>
                            <span>
                                <i class="fa fa-question-circle" title="Merchants who do not have a setteled batch reported within the last 14 days."></i>
                            </span>
                        </div>
                        <div class="square-switchs d-flex gap-2 align-items-center mt-1">
                            <input type="checkbox" name="portfolio_segments[]" value="not_processing" id="portfolio-seg-not_processing" class="enable_days" switch="dark" checked data-toggle-segment data-segment="not_processing">
                            <label for="portfolio-seg-not_processing" data-on-label="" data-off-label=""></label>
                        </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 who have been reported as closed by the processer, are deactivated, or are not enabled for processor reporting services."></i>
                            </span>
                        </div>
                        <div class="square-switchs d-flex gap-2 align-items-center mt-1">
                            <input type="checkbox" name="portfolio_segments[]" value="4" id="portfolio-seg-closed" class="enable_days" switch="dark" checked data-toggle-segment data-segment="closed">
                            <label for="portfolio-seg-closed" data-on-label="" data-off-label=""></label>
                        </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 switches
    $(document).on('change', '.transaction_card_type', function() {
        updateMerchantList();
    });

    // Handle portfolio segment switches  
    $(document).on('change', '.enable_days', function() {
        updateMerchantList();
    });

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

        // Get selected portfolio segments
        var selectedPortfolioSegments = [];
        $('.enable_days:checked').each(function() {
            selectedPortfolioSegments.push($(this).val());
        });

        // Build filter parameters
        var params = new URLSearchParams(window.location.search);
        
        // Update card types filter
        if (selectedCardTypes.length > 0) {
            params.set('card_types', selectedCardTypes.join(','));
        } else {
            params.delete('card_types');
        }

        // Update portfolio segments filter
        if (selectedPortfolioSegments.length > 0) {
            params.set('portfolio_segments', selectedPortfolioSegments.join(','));
        } else {
            params.delete('portfolio_segments');
        }

        // Show loading
        showLoading();

        // Make AJAX request
        $.ajax({
            url: window.location.pathname,
            type: 'GET',
            data: params.toString(),
            dataType: 'json',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            },
            success: function(response) {
                if (response.status === 'success') {
                    // Update the merchant table
                    if (response.tableHtml) {
                        $('#datatable').replaceWith(response.tableHtml);
                    }
                    
                    // Update pagination if provided
                    if (response.paginationHtml) {
                        $('.pagination-wrapper').html(response.paginationHtml);
                    }

                    // Update URL without page reload
                    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);
                
                // Show error message
                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Failed to update merchant list. Please try again.'
                    });
                } else {
                    alert('Failed to update merchant list. Please try again.');
                }
            },
            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