@extends('layouts.app')

@section('content')
<div class="container-wrapper">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card border-0 shadow-sm rounded-3">
                <div class="card-header bg-white border-0 py-3 border-bottom d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0 fw-bold">Map Statement Columns</h5>
                    <span class="badge bg-light text-dark border">Step 2 of 2</span>
                </div>
                <div class="card-body p-4">
                    <form action="{{ route('banking.transactions.store-import') }}" method="POST">
                        @csrf
                        <input type="hidden" name="bank_account_id" value="{{ $bank_account_id }}">
                        <input type="hidden" name="file_path" value="{{ $tempPath }}">

                        <div class="alert alert-info border-0 shadow-sm mb-4">
                            <i class="fas fa-lightbulb me-2"></i> Select which columns in your file match the required transaction fields below.
                        </div>

                        <div class="table-responsive">
                            <table class="table table-borderless align-middle">
                                <thead class="text-muted small text-uppercase">
                                    <tr>
                                        <th style="width: 40%;">Requirement</th>
                                        <th>Statement Column Header</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Date -->
                                    <tr>
                                        <td>
                                            <div class="fw-bold">Date <span class="text-danger">*</span></div>
                                            <small class="text-muted">Transaction date (e.g. 2023-01-01)</small>
                                        </td>
                                        <td>
                                            <select name="map[date]" class="form-select" required>
                                                <option value="">-- Select Column --</option>
                                                @foreach($headers as $index => $header)
                                                    <option value="{{ $index }}">{{ $header }}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                    </tr>
                                    <!-- Description -->
                                    <tr>
                                        <td>
                                            <div class="fw-bold">Description <span class="text-danger">*</span></div>
                                            <small class="text-muted">Details or payee info</small>
                                        </td>
                                        <td>
                                            <select name="map[description]" class="form-select" required>
                                                <option value="">-- Select Column --</option>
                                                @foreach($headers as $index => $header)
                                                    <option value="{{ $index }}">{{ $header }}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                    </tr>
                                    <!-- Reference -->
                                    <tr>
                                        <td>
                                            <div class="fw-bold">Reference #</div>
                                            <small class="text-muted">Cheque no, Ref no, etc.</small>
                                        </td>
                                        <td>
                                            <select name="map[reference]" class="form-select">
                                                <option value="">-- Select Column --</option>
                                                @foreach($headers as $index => $header)
                                                    <option value="{{ $index }}">{{ $header }}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                    </tr>
                                    <!-- Amount -->
                                    <tr>
                                        <td>
                                            <div class="fw-bold">Amount <span class="text-danger">*</span></div>
                                            <small class="text-muted">Transaction amount value</small>
                                        </td>
                                        <td>
                                            <select name="map[amount]" class="form-select" required>
                                                <option value="">-- Select Column --</option>
                                                @foreach($headers as $index => $header)
                                                    <option value="{{ $index }}">{{ $header }}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                    </tr>
                                    <!-- Type -->
                                    <tr>
                                        <td>
                                            <div class="fw-bold">Type (Credit/Debit)</div>
                                            <small class="text-muted">How to distinguish between In/Out</small>
                                        </td>
                                        <td>
                                            <select name="map[type]" class="form-select">
                                                <option value="">-- Select Column --</option>
                                                @foreach($headers as $index => $header)
                                                    <option value="{{ $index }}">{{ $header }}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="d-flex justify-content-end gap-2 border-top pt-4 mt-3">
                            <a href="{{ route('banking.transactions.import') }}" class="btn btn-light border px-4 rounded-3">Back</a>
                            <button type="submit" class="btn btn-success px-5 rounded-3 fw-bold">Import Transactions</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection