@extends('layouts.app')

@section('title', 'Import Customers - Step 2')

@section('content')
<div class="mb-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('customers.index') }}">Customers</a></li>
            <li class="breadcrumb-item active">Import Customers</li>
        </ol>
    </nav>
    <h2 class="h4">Map Fields</h2>
</div>

<!-- Progress Indicator -->
<div class="d-flex justify-content-center align-items-center mb-5 gap-3">
    <div class="d-flex align-items-center gap-2 text-success">
        <i class="fas fa-check-circle fs-4"></i>
        <span class="fw-bold small">Configure</span>
    </div>
    <div class="border-top" style="width: 50px;"></div>
    <div class="d-flex align-items-center gap-2 text-primary">
        <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 28px; height: 28px; font-size: 0.8rem;">2</div>
        <span class="fw-bold small">Map Fields</span>
    </div>
    <div class="border-top" style="width: 50px;"></div>
    <div class="d-flex align-items-center gap-2 text-muted">
        <div class="bg-white border-2 border text-muted rounded-circle d-flex align-items-center justify-content-center" style="width: 28px; height: 28px; font-size: 0.8rem;">3</div>
        <span class="fw-bold small">Preview</span>
    </div>
</div>

<form action="{{ route('customers.import.step3') }}" method="POST">
    @csrf
    <div class="card border-0 shadow-sm rounded-4 mb-4">
        <div class="card-body p-4">
            <h5 class="fw-bold mb-4">Step 2: Field Mapping</h5>
            
            <p class="text-muted small mb-4">Select the corresponding CSV column for each system field. Fields marked with <span class="text-danger">*</span> are mandatory.</p>

            <div class="table-responsive">
                <table class="table align-middle border-top">
                    <thead class="table-light">
                        <tr>
                            <th class="ps-4" style="width: 40%;">Zoho Books Field</th>
                            <th class="ps-3">Imported File Headers</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($fields as $groupName => $groupFields)
                            <tr class="table-light">
                                <td colspan="2" class="ps-4 fw-bold text-primary small text-uppercase py-2" style="letter-spacing: 0.05em; background-color: #f8fbff;">
                                    {{ $groupName }}
                                </td>
                            </tr>
                            @foreach($groupFields as $id => $label)
                                <tr>
                                    <td class="ps-4 py-3">
                                        <span class="fw-medium">{{ $label }}</span>
                                        @if($id == 'name' || $id == 'display_name') <span class="text-danger">*</span> @endif
                                    </td>
                                    <td class="pe-4">
                                        <select name="mapping[{{ $id }}]" class="form-select form-select-sm border-0 bg-light rounded-3">
                                            <option value="">-- Skip this field --</option>
                                            @foreach($headers as $index => $header)
                                                @php
                                                    // Intelligent auto-mapping
                                                    $selected = false;
                                                    $h = strtolower(trim($header));
                                                    $l = strtolower(trim($label));
                                                    $id_match = strtolower(trim($id));
                                                    
                                                    if ($h == $l || $h == $id_match || strpos($h, $id_match) !== false || strpos($id_match, $h) !== false) {
                                                        $selected = true;
                                                    }
                                                    
                                                    // Special matches for Zoho headers
                                                    if ($id == 'email' && ($h == 'emailid' || $h == 'email address')) $selected = true;
                                                    if ($id == 'name' && ($h == 'full name' || $h == 'customer name')) $selected = true;
                                                @endphp
                                                <option value="{{ $index }}" {{ $selected ? 'selected' : '' }}>{{ $header }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                </tr>
                            @endforeach
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="mt-4 border-top pt-4">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="1" id="save_selections">
                    <label class="form-check-label text-muted small" for="save_selections">
                        Save these selections for use during future imports.
                    </label>
                </div>
                <p class="text-muted x-small mt-2 mb-0"><i class="fas fa-info-circle me-1"></i> Note: This will not save your duplicate handling preferences.</p>
            </div>
        </div>
    </div>

    <div class="d-flex gap-2 mb-5">
        <button type="submit" class="btn btn-primary px-5 rounded-pill">Next: Preview <i class="fas fa-arrow-right ms-2"></i></button>
        <a href="{{ route('customers.import.step1') }}" class="btn btn-light px-5 rounded-pill border">Back</a>
    </div>
</form>
@endsection