@extends('layouts.app')

@section('title', 'Import Customers - Preview')

@section('content')
<div class="row justify-content-center pt-5">
    <div class="col-md-8">
        <h2 class="text-center mb-4 h4">Preview</h2>
        
        <!-- Progress Bar -->
        <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-success">
                <i class="fas fa-check-circle fs-4"></i>
                <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-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;">3</div>
                <span class="fw-bold small">Preview</span>
            </div>
        </div>

        <div class="card border-0 shadow-sm rounded-4 p-4">
            
            <!-- Overall Status Alert -->
            <div class="alert alert-primary bg-light-primary border-0 rounded-3 d-flex align-items-center p-3 mb-4">
                <i class="fas fa-info-circle text-primary me-3 fs-5"></i>
                <span class="text-dark small">All Customers in your file are ready to be imported</span>
            </div>

            <!-- Ready to Import Accordion -->
            <div class="import-section mb-3">
                <div class="d-flex justify-content-between align-items-center p-3 border rounded-3 hover-shadow cursor-pointer border-primary bg-light-primary-soft" data-bs-toggle="collapse" data-bs-target="#readyDetails">
                    <span class="fw-bold text-dark">Customers that are ready to be imported - {{ $stats['to_create'] + $stats['to_overwrite'] }}</span>
                    <button class="btn btn-link btn-sm text-primary text-decoration-none fw-bold" type="button">
                        <span class="toggle-text">Hide Details</span> <i class="fas fa-chevron-up ms-1"></i>
                    </button>
                </div>
                <div class="collapse show mt-2 ps-4" id="readyDetails">
                    <ul class="list-unstyled mb-0">
                        <li class="mb-2 small"><i class="fas fa-circle text-muted x-small me-2"></i> Customers to be created ( {{ $stats['to_create'] }} )</li>
                        <li class="mb-0 small"><i class="fas fa-circle text-muted x-small me-2"></i> Customers waiting to be overwritten ( {{ $stats['to_overwrite'] }} )</li>
                    </ul>
                </div>
            </div>

            <!-- Skipped Records Accordion -->
            <div class="import-section mb-3">
                <div class="d-flex justify-content-between align-items-center p-3 border rounded-3 hover-shadow cursor-pointer text-muted" data-bs-toggle="collapse" data-bs-target="#skippedDetails">
                    <span><i class="fas fa-exclamation-triangle text-warning me-2"></i> No. of Records skipped - {{ $stats['skipped'] }}</span>
                    <button class="btn btn-link btn-sm text-primary text-decoration-none fw-bold" type="button">
                        <span class="toggle-text">View Details</span> <i class="fas fa-chevron-down ms-1"></i>
                    </button>
                </div>
                <div class="collapse mt-2 ps-4" id="skippedDetails">
                    <p class="text-muted small mb-0">No records were skipped during validation.</p>
                </div>
            </div>

            <!-- Unmapped Fields Accordion -->
            <div class="import-section mb-4">
                <div class="d-flex justify-content-between align-items-center p-3 border rounded-3 hover-shadow cursor-pointer text-muted" data-bs-toggle="collapse" data-bs-target="#unmappedDetails">
                    <span><i class="fas fa-exclamation-triangle text-warning me-2"></i> Unmapped Fields - {{ $stats['unmapped_count'] }}</span>
                    <button class="btn btn-link btn-sm text-primary text-decoration-none fw-bold" type="button">
                        <span class="toggle-text">View Details</span> <i class="fas fa-chevron-down ms-1"></i>
                    </button>
                </div>
                <div class="collapse mt-2 ps-4" id="unmappedDetails">
                    <p class="text-muted small mb-3">The following fields in your import file have not been mapped to any Zoho Books field. The data in these fields will be ignored during the import.</p>
                    <ul class="row list-unstyled mb-0">
                        @foreach($stats['unmapped_fields'] as $field)
                            <li class="col-md-6 mb-2 small fw-bold"><i class="fas fa-circle text-muted x-small me-2"></i> {{ $field }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>

            <!-- Final Tip Alert -->
            <div class="alert alert-primary bg-light-primary border-0 rounded-3 d-flex align-items-center p-3 mb-4">
                <i class="fas fa-info-circle text-primary me-3 fs-5"></i>
                <span class="text-dark small">Click the Previous button if you want to match the above column header(s) or click the Import button to continue with the import.</span>
            </div>

            <div class="d-flex gap-3 mt-2">
                <form action="{{ route('customers.import.confirm') }}" method="POST" class="flex-grow-1">
                    @csrf
                    <button type="submit" class="btn btn-primary w-100 py-2 rounded-pill fw-bold">Import</button>
                </form>
                <a href="{{ route('customers.import.step1') }}" class="btn btn-outline-secondary px-4 py-2 rounded-pill fw-bold">Previous</a>
            </div>
        </div>
    </div>
</div>

<style>
    .bg-light-primary { background-color: #eef5ff; }
    .bg-light-primary-soft { background-color: #f8fbff; }
    .cursor-pointer { cursor: pointer; }
    .hover-shadow:hover { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); border-color: #0d6efd !important; }
    .x-small { font-size: 0.5rem; vertical-align: middle; }
    .import-section .border { transition: all 0.2s; }
    .btn-link:focus { box-shadow: none; }
    .text-dark { color: #333 !important; }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const sections = document.querySelectorAll('.collapse');
        sections.forEach(section => {
            section.addEventListener('shown.bs.collapse', function () {
                const trigger = document.querySelector(`[data-bs-target="#${this.id}"]`);
                trigger.querySelector('.toggle-text').textContent = 'Hide Details';
                trigger.querySelector('i').classList.replace('fa-chevron-down', 'fa-chevron-up');
                trigger.classList.add('border-primary');
            });
            section.addEventListener('hidden.bs.collapse', function () {
                const trigger = document.querySelector(`[data-bs-target="#${this.id}"]`);
                trigger.querySelector('.toggle-text').textContent = 'View Details';
                trigger.querySelector('i').classList.replace('fa-chevron-up', 'fa-chevron-down');
                trigger.classList.remove('border-primary');
            });
        });
    });
</script>
@endsection