@extends('layouts.vertical', ['page_title' => $title ?? 'Import Monsoon Yatra Activity Data'])

@section('css')
    <link href="{{ URL::asset('assets/libs/dropify/dropify.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
    <div class="container-fluid">
        @if (session()->has('message'))
            <div class="alert alert-success mt-3">{!! nl2br(e(session()->get('message'))) !!}</div>
        @endif
        @if (session()->has('error'))
            <div class="alert alert-danger mt-3">{{ session()->get('error') }}</div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger mt-3">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="row mt-3">
            <div class="col-xl-12">
                <div class="card">
                    <form method="post" action="{{ $base_url }}/import" enctype="multipart/form-data">
                        @csrf
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <h4 class="page-title">{{ $title }}</h4>
                                </div>
                                <div class="col-md-6 mb-3 text-end">
                                    <a href="{{ $base_url }}/report" class="btn btn-secondary btn-sm">View Report</a>
                                    <button type="submit" class="btn btn-success btn-sm">Upload &amp; Import</button>
                                </div>
                            </div>

                            <div class="alert alert-info">
                                <h5>Import instructions</h5>
                                <ul class="mb-0">
                                    <li>Upload Excel (.xlsx, .xls) or CSV (.csv), max 10MB.</li>
                                    <li>Expected columns: <strong>Date, State, Zone, Educator HQ, Educator Name, Educator Manager, Camp Area, Time, MSL Code, Doctor Name, Doctor Speciality, Chemist Name</strong>.</li>
                                    <li>Date format: <strong>DD/MM/YYYY</strong> (e.g. 01/07/2026 or 01/07/26).</li>
                                    <li>Rows are upserted by Date + MSL Code + Educator Name + Time.</li>
                                </ul>
                            </div>

                            <div class="mb-3">
                                <label for="import_file" class="form-label">Select file <span class="text-danger">*</span></label>
                                <input type="file" name="import_file" id="import_file" class="dropify" data-max-file-size="10M" accept=".xlsx,.xls,.csv" required>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="row mt-3">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="mb-3">Import history</h5>
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered mb-0">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>File</th>
                                        <th>Status</th>
                                        <th>Total</th>
                                        <th>Inserted</th>
                                        <th>Replaced</th>
                                        <th>Skipped</th>
                                        <th>Errors</th>
                                        <th>Uploaded</th>
                                        <th>Processed</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($imports as $import)
                                        <tr>
                                            <td>{{ $import->id }}</td>
                                            <td>{{ $import->file_name }}</td>
                                            <td>{{ $import->status }}</td>
                                            <td>{{ $import->total_rows ?? '-' }}</td>
                                            <td>{{ $import->inserted_count }}</td>
                                            <td>{{ $import->replaced_count }}</td>
                                            <td>{{ $import->skipped_count }}</td>
                                            <td>{{ $import->error_count }}</td>
                                            <td>{{ $import->created_at }}</td>
                                            <td>{{ $import->processed_at ?? '-' }}</td>
                                        </tr>
                                        @if (!empty($import->error_log))
                                            <tr>
                                                <td colspan="10" class="text-danger small">{{ Str::limit($import->error_log, 500) }}</td>
                                            </tr>
                                        @endif
                                    @empty
                                        <tr>
                                            <td colspan="10" class="text-center text-muted">No imports yet.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ URL::asset('assets/libs/dropify/dropify.min.js') }}"></script>
    <script>
        $(document).ready(function () {
            $('.dropify').dropify();
        });
    </script>
@endsection