@extends('frontEnd.layouts.master')
@section('title','Submit a Complaint')

@section('content')
<style>
    .complaint-wrapper {
        padding: 80px 20px;
        background-color: #f8fafc;
        min-height: 80vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .complaint-card {
        background: #ffffff;
        border-radius: 20px;
        box-shadow: 0 15px 50px rgba(0,0,0,0.05);
        width: 100%;
        max-width: 600px;
        padding: 50px;
        border: 1px solid #f1f5f9;
    }

    .complaint-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .complaint-icon {
        width: 70px;
        height: 70px;
        background: rgba(227, 16, 25, 0.05);
        color: #E31019;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        margin: 0 auto 20px;
        font-size: 30px;
    }

    .complaint-header h2 {
        font-size: 26px;
        font-weight: 800;
        color: #1e293b;
        margin-bottom: 10px;
    }

    .complaint-header p {
        color: #64748b;
        font-size: 15px;
    }

    .form-group-custom {
        margin-bottom: 25px;
    }

    .form-group-custom label {
        display: block;
        font-weight: 700;
        font-size: 13px;
        color: #334155;
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .modern-input {
        width: 100%;
        padding: 15px 20px;
        border: 1.5px solid #e2e8f0;
        border-radius: 12px;
        font-size: 15px;
        transition: all 0.3s;
        background: #fdfdfd;
    }

    .modern-input:focus {
        border-color: #E31019;
        outline: none;
        box-shadow: 0 0 0 4px rgba(227, 16, 25, 0.1);
        background: #fff;
    }

    .submit-btn {
        width: 100%;
        padding: 16px;
        background: #E31019;
        color: #fff;
        border: none;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        transition: 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .submit-btn:hover {
        background: #c20d15;
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(227, 16, 25, 0.2);
    }

    .info-footer {
        margin-top: 30px;
        padding-top: 20px;
        border-top: 1px solid #f1f5f9;
        display: flex;
        justify-content: center;
        gap: 20px;
        color: #94a3b8;
        font-size: 13px;
    }

    .info-footer span i {
        color: #E31019;
        margin-right: 5px;
    }

    @media (max-width: 576px) {
        .complaint-card { padding: 30px 20px; }
    }
</style>

<div class="complaint-wrapper">
    <div class="complaint-card">
        <div class="complaint-header">
            <div class="complaint-icon">
                <i class="fa-solid fa-circle-exclamation"></i>
            </div>
            <h2>Submit a Complaint</h2>
            <p>আমাদের সেবা নিয়ে কোনো অভিযোগ থাকলে আমাদের জানান।</p>
        </div>

        @if(session('success'))
            <div class="alert alert-success border-0 shadow-sm mb-4" style="border-radius: 12px;">
                {{ session('success') }}
            </div>
        @endif

        <form action="{{ route('complaint.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group-custom">
                        <label>Name</label>
                        <input type="text" name="name" class="modern-input" placeholder="আপনার নাম" required>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group-custom">
                        <label>Phone</label>
                        <input type="tel" name="phone" class="modern-input" placeholder="০১xxx-xxxxxx" required maxlength="11" oninput="this.value = this.value.replace(/[^0-9]/g,'')">
                    </div>
                </div>
            </div>

            <div class="form-group-custom">
                <label>Order ID (Optional)</label>
                <input type="number" name="order_id" class="modern-input" placeholder="অর্ডার আইডি লিখুন">
            </div>

            <div class="form-group-custom">
                <label>Description</label>
                <textarea name="description" class="modern-input" rows="4" placeholder="আপনার সমস্যাটি বিস্তারিত লিখুন..." required></textarea>
            </div>

            <div class="form-group-custom">
                <label>Attachment (Optional)</label>
                <input type="file" name="image" class="modern-input" style="padding: 10px;">
                <small style="color: #94a3b8; font-size: 12px; display: block; mt-1">স্ক্রিনশট বা ছবি যুক্ত করতে পারেন।</small>
            </div>

            <button type="submit" class="submit-btn">
                জমা দিন <i class="fa-solid fa-paper-plane"></i>
            </button>
        </form>

        <div class="info-footer">
            <span><i class="fa-solid fa-shield-halved"></i> 100% Secure</span>
            <span><i class="fa-solid fa-clock"></i> 24-48h Response</span>
        </div>
    </div>
</div>
@endsection

@push('script')
<script src="https://unpkg.com/feather-icons"></script>
<script>
    feather.replace();
</script>
@endpush
