@extends('layouts.app')

@section('title', 'Submit Bank Transfer Receipt')

@section('content')
<div class="container-fluid px-4">
    {{-- Breadcrumb --}}
    <div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item"><a href="{{ route('account.dashboard') }}">Account</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('account.orders.index') }}">Orders</a></li>
                    <li class="breadcrumb-item">
                        <a href="{{ route('account.orders.show', $order) }}">#{{ $order->order_number }}</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">Bank Transfer</li>
                </ol>
            </nav>
            <h1 class="h3 mb-0 fw-700">Submit Bank Transfer</h1>
        </div>
        <div>
            <a href="{{ route('account.orders.show', $order) }}" class="btn btn-sm btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i> Back to Order
            </a>
        </div>
    </div>

    {{-- Order Summary --}}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <div class="row g-3 align-items-center">
                <div class="col-md-6">
                    <div class="d-flex align-items-center gap-3">
                        <div class="rounded-circle bg-primary bg-opacity-10 d-flex align-items-center justify-content-center"
                             style="width:48px;height:48px;">
                            <i class="fas fa-file-invoice text-primary fs-5"></i>
                        </div>
                        <div>
                            <div class="text-muted small">Order Number</div>
                            <div class="fw-700">#{{ $order->order_number }}</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="text-muted small">Amount Due</div>
                    <div class="fw-700 fs-5 text-primary">
                        {{ $order->price_currency ?? '' }}
                        {{ number_format((float) $order->price_total, 2) }}
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="text-muted small">Payment Status</div>
                    <span class="badge bg-warning text-dark">
                        <i class="fas fa-clock me-1"></i> Awaiting Payment
                    </span>
                </div>
            </div>
        </div>
    </div>

    {{-- Instruction Steps --}}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <h6 class="fw-700 mb-3">
                <i class="fas fa-list-ol text-primary me-2"></i>How It Works
            </h6>
            <div class="row g-3">
                <div class="col-md-3">
                    <div class="d-flex align-items-start gap-2">
                        <span class="badge bg-primary rounded-circle p-2" style="width:26px;height:26px;">1</span>
                        <small>Transfer the exact amount to one of the accounts below</small>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="d-flex align-items-start gap-2">
                        <span class="badge bg-primary rounded-circle p-2" style="width:26px;height:26px;">2</span>
                        <small>Take a screenshot or photo of your payment receipt</small>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="d-flex align-items-start gap-2">
                        <span class="badge bg-primary rounded-circle p-2" style="width:26px;height:26px;">3</span>
                        <small>Upload the receipt and add an optional payment note</small>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="d-flex align-items-start gap-2">
                        <span class="badge bg-primary rounded-circle p-2" style="width:26px;height:26px;">4</span>
                        <small>Wait for admin approval — your order will be fulfilled</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Existing Transfer Info --}}
    @if($transfer)
        @include('account.bank-transfers.partials.existing-transfer', ['transfer' => $transfer, 'order' => $order])
    @endif

    {{-- Bank Accounts --}}
    @include('account.bank-transfers.partials.bank-accounts', ['accounts' => $accounts, 'order' => $order])

    {{-- Submit Form --}}
    @if($canResubmit)
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body">
                <h6 class="fw-700 mb-3">
                    <i class="fas fa-upload text-primary me-2"></i>
                    {{ $transfer ? 'Replace Receipt' : 'Upload Your Receipt' }}
                </h6>

                {{-- Error Alert --}}
                @if($errors->any())
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-circle me-2"></i>
                        <strong>Please fix the following errors:</strong>
                        <ul class="mb-0 mt-1">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form
                    action="{{ route('account.bank-transfers.store', $order) }}"
                    method="POST"
                    enctype="multipart/form-data"
                    id="bankTransferForm"
                >
                    @csrf

                    {{-- Payment Note --}}
                    <div class="mb-3">
                        <label for="payment_note" class="form-label fw-600">
                            Payment Note <span class="text-muted small">(optional)</span>
                        </label>
                        <textarea id="payment_note"
                                  name="payment_note"
                                  class="form-control @error('payment_note') is-invalid @enderror"
                                  rows="3"
                                  maxlength="500"
                                  placeholder="e.g. Paid from GTBank account ending in 1234, transaction reference ABC123...">{{ old('payment_note', $transfer?->payment_note) }}</textarea>
                        @error('payment_note')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">
                            Include any details that help us identify your payment.
                        </small>
                    </div>

                    {{-- Receipt File --}}
                    <div class="mb-3">
                        <label for="receipt" class="form-label fw-600">
                            Receipt File <span class="text-danger">*</span>
                        </label>
                        <input type="file"
                               id="receipt"
                               name="receipt"
                               class="form-control @error('receipt') is-invalid @enderror"
                               accept=".jpg,.jpeg,.png,.webp,.pdf"
                               required>
                        @error('receipt')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">
                            Accepted: JPG, JPEG, PNG, WebP, PDF. Maximum size per file applies.
                        </small>
                    </div>

                    {{-- Preview Area --}}
                    <div id="receiptPreview" class="mb-3" style="display:none;">
                        <label class="form-label fw-600 small">Preview:</label>
                        <div class="border rounded p-2 bg-light">
                            <div id="previewContent"></div>
                        </div>
                    </div>

                    {{-- Warning --}}
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        Your receipt will be stored privately and only visible to administrators.
                        It will be reviewed within 1-2 business days.
                    </div>

                    {{-- Submit --}}
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary" id="submitBtn">
                            <i class="fas fa-paper-plane me-1"></i>
                            {{ $transfer ? 'Resubmit Receipt' : 'Submit Receipt' }}
                        </button>
                        <a href="{{ route('account.orders.show', $order) }}" class="btn btn-outline-secondary">
                            Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    @else
        <div class="alert alert-success">
            <i class="fas fa-check-circle me-2"></i>
            <strong>Receipt already submitted.</strong>
            Your bank transfer is under review and cannot be replaced at this time.
        </div>
    @endif
</div>
@endsection

@push('styles')
<style>
    .fw-600 { font-weight: 600; }
    .fw-700 { font-weight: 700; }
    .bank-account-card {
        transition: all 0.2s ease;
    }
    .bank-account-card:hover {
        border-color: var(--bs-primary) !important;
        box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15) !important;
    }
    .copy-btn {
        transition: all 0.15s ease;
    }
    .copy-btn.copied {
        background-color: var(--bs-success);
        color: #fff;
        border-color: var(--bs-success);
    }
    #previewContent img {
        max-width: 100%;
        max-height: 300px;
        border-radius: 0.375rem;
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    var receiptInput = document.getElementById('receipt');
    var preview = document.getElementById('receiptPreview');
    var previewContent = document.getElementById('previewContent');
    var form = document.getElementById('bankTransferForm');
    var submitBtn = document.getElementById('submitBtn');

    // Live preview of receipt
    if (receiptInput && preview) {
        receiptInput.addEventListener('change', function() {
            var file = this.files[0];
            if (!file) {
                preview.style.display = 'none';
                return;
            }

            // Size check
            var maxSize = 5 * 1024 * 1024;
            if (file.size > maxSize) {
                alert('File is too large. Maximum size is 5MB.');
                this.value = '';
                preview.style.display = 'none';
                return;
            }

            var ext = file.name.split('.').pop().toLowerCase();
            preview.style.display = 'block';

            if (['jpg', 'jpeg', 'png', 'webp'].includes(ext)) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    previewContent.innerHTML =
                        '<img src="' + e.target.result + '" alt="Receipt preview" class="d-block mx-auto">' +
                        '<div class="text-center small text-muted mt-2">' +
                        file.name + ' · ' + (file.size / 1024).toFixed(1) + ' KB' +
                        '</div>';
                };
                reader.readAsDataURL(file);
            } else if (ext === 'pdf') {
                previewContent.innerHTML =
                    '<div class="text-center py-3">' +
                    '<i class="fas fa-file-pdf fa-3x text-danger mb-2"></i>' +
                    '<div class="fw-600">' + file.name + '</div>' +
                    '<small class="text-muted">' + (file.size / 1024).toFixed(1) + ' KB · PDF document</small>' +
                    '</div>';
            } else {
                previewContent.innerHTML =
                    '<div class="text-center py-3 text-muted">' +
                    '<i class="fas fa-file fa-2x mb-2"></i>' +
                    '<div>' + file.name + '</div>' +
                    '</div>';
            }
        });
    }

    // Prevent double submission
    if (form && submitBtn) {
        form.addEventListener('submit', function() {
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Uploading...';
        });
    }
});

// Copy to clipboard utility
function copyAccountInfo(text, buttonEl) {
    if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(text).then(function() {
            markCopied(buttonEl);
        }).catch(function() {
            fallbackCopy(text, buttonEl);
        });
    } else {
        fallbackCopy(text, buttonEl);
    }
}

function fallbackCopy(text, buttonEl) {
    var textarea = document.createElement('textarea');
    textarea.value = text;
    textarea.style.position = 'fixed';
    textarea.style.opacity = '0';
    document.body.appendChild(textarea);
    textarea.select();
    try {
        document.execCommand('copy');
        markCopied(buttonEl);
    } catch (e) {
        alert('Failed to copy. Please copy manually.');
    }
    document.body.removeChild(textarea);
}

function markCopied(buttonEl) {
    if (!buttonEl) return;
    var original = buttonEl.innerHTML;
    buttonEl.classList.add('copied');
    buttonEl.innerHTML = '<i class="fas fa-check me-1"></i> Copied';
    setTimeout(function() {
        buttonEl.classList.remove('copied');
        buttonEl.innerHTML = original;
    }, 2000);
}
</script>
@endpush