@extends('layouts.vertical', ['page_title' => $title ?? 'Import Titans HCP 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">
                <strong>Please fix the following:</strong>
                <ul class="mb-0 mt-2">
                    @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="/titanshcpgatheringreport/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">
                                    <div class="float-end">
                                        <a href="/titanshcpgatheringreports" class="btn btn-secondary waves-effect waves-light">Back to List</a>
                                        <button type="submit" class="btn btn-success waves-effect waves-light">Upload &amp; Import</button>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="alert alert-info">
                                        <h5><i class="mdi mdi-information-outline"></i> Import Instructions</h5>
                                        <ul class="mb-0">
                                            <li>Upload an Excel (.xlsx, .xls) or CSV (.csv) file (max 10MB).</li>
                                            <li>Select the <strong>report month</strong> for this upload. Rows are upserted by <strong>PCODE + LEGACY_CODE + month</strong>.</li>
                                            <li>Re-uploading the same month replaces existing rows for that month; other months are unchanged.</li>
                                            <li>Expected columns include S.No, ZBM, RBM, AREA, HQ, TM Name, HCP NAME, <strong>doctor_id</strong>, <strong>hierarchy_id</strong>, <strong>user_id</strong>, LEGACY_CODE, PCODE, AgreementNo, Status, EAS ID, Activity Report Status, Payment Status, Closure Done, Closure Approved, and a column containing <strong>TM Visit</strong>.</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="report_month" class="form-label">Report Month <span class="text-danger">*</span></label>
                                        <input type="month"
                                               name="report_month"
                                               id="report_month"
                                               class="form-control"
                                               value="{{ old('report_month', date('Y-m')) }}"
                                               required />
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <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 />
                                        @error('import_file')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </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