@extends('layouts.app')

@section('content')
<div class="container-fluid content-inner py-4">
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{{ $pageTitle ?? 'Import Zoho Clients (Excel)' }}</h5>
                </div>

                <div class="card-body">
                    <form id="excelImportForm" enctype="multipart/form-data">
                        @csrf
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Select Excel File (.xlsx or .csv)</label>
                                <input type="file" name="excel_file" id="excel_file" class="form-control" accept=".xlsx,.csv" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Module</label>
                                <select name="module" id="module" class="form-select" required>
                                    @foreach($modules as $key => $label)
                                        <option value="{{ $key }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <button type="button" id="uploadBtn" class="btn btn-primary">
                            Upload & Import
                        </button>
                    </form>

                    <div class="progress mt-3" style="height: 25px; display:none;">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width:0%">0%</div>
                    </div>

                    <div id="importStatus" class="mt-4"></div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    $('#uploadBtn').on('click', function() {
        let formData = new FormData($('#excelImportForm')[0]);
        let button = $(this);
        let progressBar = $('.progress');
        let progressBarInner = $('.progress-bar');

        button.prop('disabled', true).text('Importing...');
        progressBar.show();
        progressBarInner.css('width', '0%').text('0%');

        $.ajax({
            url: "{{ route('zoho.manual.import.clients') }}",
            method: "POST",
            data: formData,
            processData: false,
            contentType: false,
            xhr: function() {
                let xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener("progress", function(evt) {
                    if (evt.lengthComputable) {
                        let percentComplete = Math.round((evt.loaded / evt.total) * 100);
                        progressBarInner.css('width', percentComplete + '%').text(percentComplete + '%');
                    }
                }, false);
                return xhr;
            },
            beforeSend: function() {
                $('#importStatus').html('<div class="alert alert-info">Processing your Excel file...</div>');
            },
            success: function(response) {
                progressBarInner.css('width', '100%').text('100%');
                if (response.status === 'success') {
                    $('#importStatus').html(`
                        <div class="alert alert-success">
                            ✅ ${response.message}<br>
                            <strong>Total Imported:</strong> ${response.total_imported ?? 0}<br>
                            <strong>Skipped:</strong> ${response.skipped ?? 0}
                        </div>
                    `);
                } else {
                    $('#importStatus').html(`
                        <div class="alert alert-warning">
                            ⚠️ ${response.message}<br>
                            Some rows may have failed. Check logs for details.
                        </div>
                    `);
                }
            },
            error: function(xhr) {
                let msg = 'Unexpected error occurred.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    msg = xhr.responseJSON.message;
                }
                $('#importStatus').html(`<div class="alert alert-danger">${msg}</div>`);
            },
            complete: function() {
                button.prop('disabled', false).text('Upload & Import');
            }
        });
    });
});
</script>
@endpush