@php(
    $headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
        $title ?? '',
        $subTitle ?? '',
        isset($filters) ? $filters : [],
        isset($advancedFilters) ? $advancedFilters : []
    )
)
@php($headingOptions = [
    '<a href="' . route('my-merchants.index') . '" class="'. \Config::get('view.buttons.secondary') .'"><i class="bx bx-arrow-back"></i> My Merchants</a>',
])
@extends('admin.layouts.layout', $headerOption)
@section('content')
<div class="col-12">
    <x-heading-sec :module="'Dispute Reporting'" :options="$headingOptions" />

    {{-- Tag-pill filter bar --}}
    <div class="project-box mb-3 p-3">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-md-3">
                <div class="project-form mb-0">
                    <label class="form-label mb-0">Search</label>
                    <input type="text" name="search_text" class="form-control form-control-sm" placeholder="Cardholder, case number, DBA..."
                        value="{{ request('search_text') }}">
                </div>
            </div>
            <div class="col-md-2">
                <div class="project-form mb-0">
                    <label class="form-label mb-0">Date From</label>
                    <input type="date" name="date_from" class="form-control form-control-sm" value="{{ request('date_from') }}">
                </div>
            </div>
            <div class="col-md-2">
                <div class="project-form mb-0">
                    <label class="form-label mb-0">Date To</label>
                    <input type="date" name="date_to" class="form-control form-control-sm" value="{{ request('date_to') }}">
                </div>
            </div>
            <div class="col-auto d-flex gap-2">
                <button type="submit" class="green-btn-inner waves-effect"><i class="bx bx-filter-alt me-1"></i>Apply</button>
                <a href="{{ route('merchants.dispute-reporting') }}" class="black-btn-inner waves-effect"><i class="bx bx-x me-1"></i>Clear</a>
            </div>
            <div class="col-12">
                <div class="d-flex flex-wrap gap-2 align-items-center" id="active-filters">
                    @if(request('search_text'))
                        <span class="badge bg-primary-subtle text-primary px-3 py-2">
                            Search: {{ request('search_text') }}
                            <a href="{{ request()->fullUrlWithQuery(['search_text' => null]) }}" class="ms-1 text-primary"><i class="bx bx-x"></i></a>
                        </span>
                    @endif
                </div>
            </div>
        </form>
    </div>

    <div class="project-box p-3">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h6 class="fw-semibold mb-0">Disputes
                @if(isset($data))
                    <span class="text-muted small ms-2">({{ $data->total() ?? 0 }} total)</span>
                @endif
            </h6>
            <a href="{{ route('my-merchants.export', 'csv') }}?type=disputes" class="btn btn-sm btn-outline-secondary">
                <i class="bx bx-download me-1"></i>CSV
            </a>
        </div>
        <div class="table-responsive project-table">
            <table class="table table-bordered table-hover mb-0" id="dispute-table">
                <thead>
                <tr>
                    <th><div class="form-check project-checkbox"><input type="checkbox" id="select-all-disputes" class="form-check-input"></div></th>
                    <th>Merchant</th>
                    <th>MID</th>
                    <th>Chargeback Date</th>
                    <th>Transaction Date</th>
                    <th>Amount</th>
                    <th>Cardholder</th>
                    <th>Account (Last 4)</th>
                    <th>Case #</th>
                    <th>Reason Code</th>
                    <th>Currency</th>
                    <th>Card Type</th>
                    <th>Auth Code</th>
                    <th>Status</th>
                </tr>
                </thead>
                <tbody>
                @forelse($data ?? [] as $row)
                <tr class="dispute-row" data-id="{{ $row->id }}" style="cursor:pointer">
                    <td><div class="form-check project-checkbox"><input type="checkbox" class="form-check-input dispute-select" value="{{ $row->id }}"></div></td>
                    <td>{{ $row->merchant_dba ?? '—' }}</td>
                    <td><code>{{ $row->merchant_mid ?? '—' }}</code></td>
                    <td>{{ $row->chargeback_date ? \App\Helpers\Helper::showdate($row->chargeback_date, false) : '—' }}</td>
                    <td>{{ $row->transaction_date ? \App\Helpers\Helper::showdate($row->transaction_date, false) : '—' }}</td>
                    <td>${{ number_format($row->amount ?? 0, 2) }}</td>
                    <td>{{ $row->cardholder_name ?? '—' }}</td>
                    <td>{{ $row->masked_cardholder_account ?? '—' }}</td>
                    <td>{{ $row->case_number ?? '—' }}</td>
                    <td>{{ $row->reason_code ?? '—' }}</td>
                    <td>{{ $row->currency_code ?? '—' }}</td>
                    <td>
                        @if($row->card_type)
                            {!! \App\Helpers\Helper::cardImgTag($row->card_type) !!}
                        @else —
                        @endif
                    </td>
                    <td>{{ $row->auth_code ?? '—' }}</td>
                    <td><span class="badge bg-warning text-dark">Open</span></td>
                </tr>
                @empty
                <tr><td colspan="14" class="text-center py-4">No disputes found for the selected filters.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
        @if(isset($data) && is_object($data) && method_exists($data, 'links'))
            @include('admin.components.pagination-inner')
        @endif
    </div>
</div>
@endsection
@push('page_script')
<script src="{{ asset('assets/js/common.js') }}"></script>
<script>
(function($){
    // Row click selects row (green highlight)
    $(document).on('click', '.dispute-row', function(e){
        if ($(e.target).is('input[type="checkbox"]')) return;
        $(this).toggleClass('table-success');
        const $cb = $(this).find('.dispute-select');
        $cb.prop('checked', !$cb.prop('checked'));
    });
    // Select all
    $('#select-all-disputes').on('change', function(){
        const checked = $(this).is(':checked');
        $('.dispute-select').prop('checked', checked);
        $('.dispute-row').toggleClass('table-success', checked);
    });
})(jQuery);
</script>
@endpush