@php
    $headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
        $title ?? 'Residuals',
        $subTitle ?? 'Manage Report Mapping',
        isset($filters) ? $filters : [],
        isset($advancedFilters) ? $advancedFilters : []
    );
@endphp
@extends('admin.layouts.layout', $headerOption)

@section('content')
<div class="container-fluid mt-4">

    {{-- Advanced Options --}}
    <div class="project-box p-3 mb-3">
        <h6 class="fw-bold mb-2" style="color: var(--header-color, #16C4C0);">Advanced Options</h6>
        <div class="row">
            <div class="col-md-3">
                <div class="form-check mb-2">
                    <input class="form-check-input" type="checkbox" id="optVantiv" {{ ($editMapping && ($editMapping->advanced_options['is_vantiv'] ?? false)) ? 'checked' : '' }}>
                    <label class="form-check-label" for="optVantiv">Is this a Vantiv (WorldPay) report?</label>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-check mb-2">
                    <input class="form-check-input" type="checkbox" id="optFirstDataNorth" {{ ($editMapping && ($editMapping->advanced_options['is_first_data_north'] ?? false)) ? 'checked' : '' }}>
                    <label class="form-check-label" for="optFirstDataNorth">Is this a First Data North report?</label>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-check mb-2">
                    <input class="form-check-input" type="checkbox" id="optFirstDataOmaha" {{ ($editMapping && ($editMapping->advanced_options['is_first_data_omaha'] ?? false)) ? 'checked' : '' }}>
                    <label class="form-check-label" for="optFirstDataOmaha">Is this a First Data Omaha report?</label>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-check mb-2">
                    <input class="form-check-input" type="checkbox" id="optDisplayAll" checked>
                    <label class="form-check-label" for="optDisplayAll">Display report to all assigned users?</label>
                </div>
            </div>
        </div>
    </div>

    {{-- Action Buttons Row --}}
    <div class="d-flex gap-2 mb-3">
        <button type="button" class="btn green-btn-inner" id="btnCopyFromPrevious">
            <i class="bx bx-copy me-1"></i> Copy From Previous Mapping
        </button>
        <button type="button" class="btn btn-info text-white" id="btnColumnsRowsSettings">
            <i class="bx bx-cog me-1"></i> Detail Columns and Rows Settings
        </button>
    </div>

    {{-- Missing Columns Notice --}}
    <div class="d-none mb-3" id="missingColumnsNotice">
        <div class="alert alert-warning mb-0">
            <p class="mb-1"><strong>Please review the mapping for your residual report.</strong> One or more columns are missing from the current report and have been removed. Here is a list of the missing columns:</p>
            <p class="small text-muted mb-0" id="missingColumnsList"></p>
        </div>
    </div>

    {{-- Two Column Mapping Area --}}
    <div class="row">
        {{-- LEFT: Report Use Fields --}}
        <div class="col-md-8">
            <div class="project-box p-3">
                <div class="row mb-2">
                    <div class="col-6"><strong class="text-white badge" style="background: var(--header-color, #16C4C0);">Report Use</strong></div>
                    <div class="col-6"><strong class="text-white badge" style="background: #6c757d;">File Column</strong></div>
                </div>

                @foreach($reportFields ?? [] as $key => $field)
                <div class="mapping-row border-bottom py-2" data-field-key="{{ $key }}" data-field-name="{{ $field['field'] }}" data-field-type="{{ $field['type'] }}">
                    <div class="row align-items-center">
                        <div class="col-5">
                            <span class="fw-bold">{{ $field['label'] }}</span>
                            @if(!empty($field['required']))
                                <span class="text-danger">*</span>
                            @endif
                            @if(!empty($field['info']))
                                <i class="bx bx-info-circle text-info" data-bs-toggle="tooltip" title="{{ $field['info'] }}"></i>
                            @endif
                        </div>
                        <div class="col-7">
                            @if($field['type'] === 'single')
                                <div class="mapping-dropzone border rounded p-2 text-center text-muted"
                                     data-key="{{ $key }}" data-accept="single"
                                     style="min-height: 38px; background: #f8f9fa; cursor: pointer;">
                                    <span class="dropzone-placeholder">Drag a file column here or click to select</span>
                                </div>
                            @elseif($field['type'] === 'dual')
                                <div class="d-flex gap-2 align-items-center">
                                    <div class="mapping-dropzone border rounded p-2 text-center text-muted flex-grow-1"
                                         data-key="{{ $key }}_plus" data-accept="single"
                                         style="min-height: 38px; background: #f8f9fa; cursor: pointer;">
                                        <span class="text-success fw-bold me-1">+</span>
                                        <span class="dropzone-placeholder">Plus column</span>
                                    </div>
                                    <div class="mapping-dropzone border rounded p-2 text-center text-muted flex-grow-1"
                                         data-key="{{ $key }}_minus" data-accept="single"
                                         style="min-height: 38px; background: #f8f9fa; cursor: pointer;">
                                        <span class="text-danger fw-bold me-1">-</span>
                                        <span class="dropzone-placeholder">Minus column</span>
                                    </div>
                                </div>
                            @elseif($field['type'] === 'multi')
                                <div class="multi-mapping-container" data-key="{{ $key }}">
                                    <div class="multi-items"></div>
                                    <button type="button" class="btn btn-sm btn-success btn-add-multi mt-1" data-key="{{ $key }}">
                                        <i class="bx bx-plus"></i> Add
                                    </button>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
                @endforeach

            </div>
        </div>

        {{-- RIGHT: Available File Columns --}}
        <div class="col-md-4">
            <div class="project-box p-3" style="position: sticky; top: 80px;">
                <div class="mb-2">
                    <input type="text" class="form-control form-control-sm" id="filterFileColumns" placeholder="Filter available fields">
                </div>
                <div id="fileColumnsList" style="max-height: 600px; overflow-y: auto;">
                    @foreach($fileColumns ?? [] as $col)
                    <div class="file-column-item d-flex align-items-center justify-content-between py-1 px-2 mb-1 border rounded"
                         data-column="{{ $col }}" draggable="true"
                         style="cursor: grab; background: #fff;">
                        <span class="column-name">{{ $col }}</span>
                        <span class="badge bg-info text-white" style="font-size: 10px;">FILE</span>
                    </div>
                    @endforeach

                    @if(empty($fileColumns))
                        <p class="text-muted text-center py-3">No file columns available</p>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Footer Buttons --}}
    <div class="d-flex justify-content-center gap-2 my-4">
        <button type="button" class="btn btn-secondary" id="btnPreviewMapping">
            <i class="bx bx-show me-1"></i> Preview
        </button>
        <button type="button" class="btn green-btn-inner" id="btnSubmitMapping">
            <i class="bx bx-check me-1"></i> Submit
        </button>
    </div>

</div>

{{-- Unable to Import Section (shown after submit if no MIDs) --}}
<div class="d-none" id="unableToImport">
    <div class="project-box p-4 mt-3">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <button type="button" class="btn btn-secondary" id="btnBackToConfigure">
                <i class="bx bx-left-arrow-alt me-1"></i> Back to Configure
            </button>
            <button type="button" class="btn btn-success" id="btnRetryImport">
                <i class="bx bx-right-arrow-alt me-1"></i> Import
            </button>
        </div>
        <div class="text-center py-4">
            <h5 class="fw-bold">Unable to Import Report</h5>
            <p class="text-muted">No information about merchant MIDs was found in the report.</p>
            <p class="text-muted">Most likely the MID column is empty or contains incorrect values.</p>
            <p class="text-muted">Please check the imported file or the mapping used.</p>
        </div>
    </div>
</div>
@endsection

@push('modals')
{{-- Columns and Rows Settings Modal --}}
<div class="modal fade" id="columnsRowsSettingsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">Columns and Rows Settings</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="form-check mb-2">
                    <input class="form-check-input" type="checkbox" id="settingCombineMerchants">
                    <label class="form-check-label" for="settingCombineMerchants">Combine multiple merchant records into one</label>
                </div>
                <div class="form-check mb-3">
                    <input class="form-check-input" type="checkbox" id="settingKeepColumnOrder">
                    <label class="form-check-label" for="settingKeepColumnOrder">Keep column order</label>
                </div>
                <div class="mb-3">
                    <input type="text" class="form-control form-control-sm" id="filterSettingsFields" placeholder="Filter available fields">
                </div>
                <div id="settingsFieldsList">
                    @foreach($allDataFields ?? [] as $field)
                    <div class="settings-field-item d-flex align-items-center justify-content-between py-2 px-2 border-bottom"
                         data-field="{{ $field }}">
                        <span>{{ $field }}</span>
                        <div class="d-flex align-items-center gap-2">
                            <button type="button" class="btn btn-sm btn-outline-secondary btn-toggle-hide" data-field="{{ $field }}">
                                Hide
                            </button>
                            <span class="badge bg-info text-white" style="font-size: 10px;">FILE</span>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="bx bx-x"></i> Cancel</button>
                <button type="button" class="btn green-btn-inner" id="btnSaveSettings"><i class="bx bx-check"></i> Save</button>
            </div>
        </div>
    </div>
</div>

{{-- Copy From Previous Mapping Modal --}}
<div class="modal fade" id="copyFromMappingModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header" style="background-color: var(--header-color, #16C4C0); color: #fff;">
                <h5 class="modal-title">Copy From Previous Mapping</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted">Select a previously imported report to copy its mapping configuration.</p>
                <div class="mb-3">
                    <label class="fw-bold mb-1">Select a mapping to copy from:</label>
                    <select class="form-select" id="copyMappingSelect">
                        <option value="">-- Choose a mapping --</option>
                        @foreach($existingMappings ?? [] as $em)
                            <option value="{{ $em->id }}" data-processor="{{ $em->processor }}">
                                {{ $em->name }} ({{ $em->processor }}) - {{ $em->updated_at ? $em->updated_at->format('m/d/Y') : '' }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <hr>
                <p class="text-muted small mb-1">Or select from recently imported reports:</p>
                <div style="max-height: 200px; overflow-y: auto;">
                    @foreach($recentReports ?? [] as $rr)
                    <div class="form-check py-1">
                        <input class="form-check-input copy-report-radio" type="radio" name="copy_report" value="{{ $rr->mapping_id }}"
                               id="copyReport{{ $rr->id }}">
                        <label class="form-check-label small" for="copyReport{{ $rr->id }}">
                            {{ $rr->file_name }} ({{ $rr->processor }}, {{ $rr->year_month }})
                        </label>
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="bx bx-x"></i> Cancel</button>
                <button type="button" class="btn green-btn-inner" id="btnApplyCopyMapping"><i class="bx bx-copy"></i> Map</button>
            </div>
        </div>
    </div>
</div>
@endpush

@push('page_script')
<script>
window.MappingConfigureConfig = {
    csrf: '{{ csrf_token() }}',
    reportId: {{ $reportId ?? 0 }},
    processor: '{{ $report->processor ?? '' }}',
    editMappingId: {{ $editMapping->id ?? 0 }},
    routes: {
        mappingStore: '{{ route("residuals.import.mappings.store") }}',
        mappingUpdate: '{{ url("admin/residuals/import/mappings") }}',
        mappingShow: '{{ url("admin/residuals/import/mappings") }}',
        process: '{{ route("residuals.import.process") }}',
        importPage: '{{ route("residuals.residuals-import") }}',
        configure: '{{ url("admin/residuals/import/configure") }}',
    },
    fileColumns: @json($fileColumns ?? []),
    existingMapping: @json($editMapping ? $editMapping->toArray() : null),
};
</script>
<script src="{{ asset('assets/js/residuals-mapping-configure.js') }}?v={{ date('YmdHis') }}"></script>
@endpush