@extends('layouts.vertical', ['page_title' => 'Import Neblogistic 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

        <div class="row mt-3">
            <div class="col-xl-12">
                <div class="card">
                    <form method="post" action="/neblogisticreport/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="/neblogisticreports" class="btn btn-secondary waves-effect waves-light">Back to List</a>
                                        <button type="submit" class="btn btn-success waves-effect waves-light">Upload & 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>
                                            <li>Upload an Excel (.xlsx, .xls) or CSV (.csv) file</li>
                                            <li>The file must contain a column named <strong>"Connect od Order"</strong> which will be matched to update the corresponding record.</li>
                                            <li>Only the following columns will be updated if provided: <strong>ORDER NO, INVOICE NO, COURIER NAME, LR NO, LR DATE</strong></li>
                                            <li>All other columns in the file will be ignored</li>
                                            <li>Maximum file size: 10MB</li>
                                        </ul>
                                    </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({
                messages: {
                    'default': 'Drag and drop a file here or click',
                    'replace': 'Drag and drop or click to replace',
                    'remove':  'Remove',
                    'error':   'Ooops, something wrong happened.'
                }
            });
        });
    </script>
@endsection