@extends('layouts.app')

@section('title', 'Request Refund')

@section('content')
<div class="container-fluid px-4">
    {{-- Page Header --}}
    <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>
                    @if($orderItem->order)
                        <li class="breadcrumb-item">
                            <a href="{{ route('account.orders.show', $orderItem->order) }}">
                                #{{ $orderItem->order->order_number }}
                            </a>
                        </li>
                    @endif
                    <li class="breadcrumb-item active" aria-current="page">Request Refund</li>
                </ol>
            </nav>
            <h1 class="h3 mb-0 fw-700">Request Refund</h1>
        </div>
        <div>
            @if($orderItem->order)
                <a href="{{ route('account.orders.show', $orderItem->order) }}"
                   class="btn btn-sm btn-outline-secondary">
                    <i class="fas fa-arrow-left me-1"></i> Back to Order
                </a>
            @endif
        </div>
    </div>

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <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>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row g-4">
        {{-- Form --}}
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body">
                    <h6 class="fw-700 mb-3">
                        <i class="fas fa-undo-alt text-primary me-2"></i>Refund Request Form
                    </h6>

                    {{-- Item Summary --}}
                    @include('account.refunds.partials.order-item-summary', ['orderItem' => $orderItem])

                    <hr>

                    <form action="{{ route('account.refunds.store', $orderItem) }}"
                          method="POST"
                          id="refundForm">
                        @csrf

                        {{-- Reason / Message --}}
                        <div class="mb-3">
                            <label for="message" class="form-label fw-600">
                                Reason for Refund <span class="text-danger">*</span>
                            </label>
                            <textarea id="message"
                                      name="message"
                                      class="form-control @error('message') is-invalid @enderror"
                                      rows="8"
                                      required
                                      minlength="10"
                                      maxlength="5000"
                                      placeholder="Please explain in detail why you are requesting a refund for this item. Include any relevant information that will help the seller review your request.">{{ old('message') }}</textarea>
                            @error('message')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="d-flex justify-content-between mt-1">
                                <small class="text-muted">
                                    <i class="fas fa-info-circle me-1"></i>
                                    Minimum 10 characters. Be specific about the issue.
                                </small>
                                <small class="text-muted">
                                    <span id="charCount">0</span> / 5,000
                                </small>
                            </div>
                        </div>

                        <div class="alert alert-info">
                            <i class="fas fa-info-circle me-2"></i>
                            <strong>What happens next:</strong>
                            <ul class="mb-0 mt-1 small">
                                <li>Your refund request will be sent to the seller for review.</li>
                                <li>The seller may ask for additional information.</li>
                                <li>Once accepted, the refund will be processed to your original payment method.</li>
                                <li>You can track the status of this request from your refunds page.</li>
                            </ul>
                        </div>

                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary" id="submitBtn">
                                <i class="fas fa-paper-plane me-1"></i> Submit Refund Request
                            </button>
                            @if($orderItem->order)
                                <a href="{{ route('account.orders.show', $orderItem->order) }}"
                                   class="btn btn-outline-secondary">
                                    Cancel
                                </a>
                            @endif
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Sidebar --}}
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm mb-3">
                <div class="card-body">
                    <h6 class="fw-700 mb-3">
                        <i class="fas fa-shield-alt text-primary me-2"></i>Refund Policy
                    </h6>
                    <ul class="small text-muted mb-0 ps-3">
                        <li class="mb-2">Refunds are only available for paid orders.</li>
                        <li class="mb-2">Items that have been shipped or completed may still be eligible.</li>
                        <li class="mb-2">Digital products may have special refund conditions.</li>
                        <li class="mb-2">The seller has the right to decline the request.</li>
                        <li>Contact support if you have further issues.</li>
                    </ul>
                </div>
            </div>

            <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle me-2"></i>
                <strong>Note:</strong> Please make sure your request is legitimate. Repeated false claims
                may affect your ability to request refunds in the future.
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .fw-600 { font-weight: 600; }
    .fw-700 { font-weight: 700; }
    textarea#message {
        min-height: 200px;
        resize: vertical;
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    var messageInput = document.getElementById('message');
    var charCount = document.getElementById('charCount');
    var form = document.getElementById('refundForm');
    var submitBtn = document.getElementById('submitBtn');

    if (messageInput && charCount) {
        var updateCount = function() {
            charCount.textContent = messageInput.value.length;
            var parent = charCount.parentElement;
            parent.classList.toggle('text-danger', messageInput.value.length > 4800);
            parent.classList.toggle('text-warning', messageInput.value.length > 4400 && messageInput.value.length <= 4800);
        };
        messageInput.addEventListener('input', updateCount);
        updateCount();
    }

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