@extends('layouts.app')

@section('content')
<div class="container-wrapper">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card border-0 shadow-sm rounded-3">
                <div class="card-header bg-white border-0 py-3 border-bottom d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0 fw-bold">Import Bank Statement</h5>
                    <a href="{{ route('banking.dashboard') }}" class="btn-close"></a>
                </div>
                <div class="card-body p-4">
                    <form action="{{ route('banking.transactions.map') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-4">
                            <label class="form-label fw-bold">Select Bank Account <span class="text-danger">*</span></label>
                            <select name="bank_account_id" class="form-select @error('bank_account_id') is-invalid @enderror" required>
                                <option value="">Select Account</option>
                                @foreach($accounts as $account)
                                    <option value="{{ $account->id }}" {{ request('bank_account_id') == $account->id ? 'selected' : '' }}>
                                        {{ $account->name }} ({{ strtoupper($account->currency) }})
                                    </option>
                                @endforeach
                            </select>
                            @error('bank_account_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-bold">Upload Statement (.csv) <span class="text-danger">*</span></label>
                            <div class="p-5 border-2 border-dashed rounded-3 text-center bg-light hover-shadow" id="drop-area" style="border-style: dashed !important;">
                                <i class="fas fa-file-csv fa-3x text-primary mb-3"></i>
                                <h6 class="fw-bold">Drag and drop your file here</h6>
                                <p class="text-muted small">Only .csv files are supported for now.</p>
                                <input type="file" name="statement_file" id="statement_file" class="d-none" accept=".csv" required>
                                <button type="button" class="btn btn-sm btn-primary px-4" onclick="document.getElementById('statement_file').click()">Select File</button>
                                <div id="file-name" class="mt-2 fw-bold text-success small"></div>
                            </div>
                        </div>

                        <div class="bg-light p-3 rounded-3 mb-4">
                            <h6 class="fw-bold small mb-2"><i class="fas fa-info-circle text-primary me-2"></i> Important Note:</h6>
                            <ul class="small text-muted mb-0 ps-3">
                                <li>Ensure the first row of your CSV contains column headers.</li>
                                <li>Maximum file size allowed is 5MB.</li>
                                <li>You will be able to map your columns in the next step.</li>
                            </ul>
                        </div>

                        <div class="d-flex justify-content-end gap-2 border-top pt-4">
                            <a href="{{ route('banking.dashboard') }}" class="btn btn-light border px-4 rounded-3">Cancel</a>
                            <button type="submit" class="btn btn-primary px-4 rounded-3">Next: Map Columns</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById('statement_file').addEventListener('change', function(e) {
        if (e.target.files.length > 0) {
            document.getElementById('file-name').textContent = 'Selected: ' + e.target.files[0].name;
        }
    });

    const dropArea = document.getElementById('drop-area');
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, preventDefaults, false);
    });

    function preventDefaults (e) {
        e.preventDefault();
        e.stopPropagation();
    }

    ['dragenter', 'dragover'].forEach(eventName => {
        dropArea.addEventListener(eventName, () => dropArea.classList.add('bg-white', 'border-primary'), false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, () => dropArea.classList.remove('bg-white', 'border-primary'), false);
    });

    dropArea.addEventListener('drop', handleDrop, false);

    function handleDrop(e) {
        let dt = e.dataTransfer;
        let files = dt.files;
        document.getElementById('statement_file').files = files;
        document.getElementById('file-name').textContent = 'Selected: ' + files[0].name;
    }
</script>
@endsection