@extends('layouts.app')

@section('title', 'Report Ad')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h4>Report Ad</h4>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('report.ad.submit') }}" method="POST">
                            @csrf
                            <input type="hidden" name="ad_id" value="{{ $ad->id }}">

                            <div class="form-group">
                                <label for="reason">Reason for Reporting:</label>
                                <select name="reason" id="reason"
                                    class="form-control @error('reason') is-invalid @enderror" required>
                                    <option value="Inappropriate Content">Inappropriate Content</option>
                                    <option value="Misleading Information">Misleading Information</option>
                                    <option value="Spam">Spam</option>
                                    <option value="Other">Other</option>
                                </select>
                                @error('reason')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="description">Additional Description (optional):</label>
                                <textarea name="description" id="description" rows="4"
                                    class="form-control @error('description') is-invalid @enderror" placeholder="Provide additional details"></textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <button type="submit" class="btn btn-danger btn-block">Submit Report</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .card-header {
            background-color: #f8d7da;
            color: #721c24;
        }

        .card-body {
            background-color: #fff3f3;
        }

        .btn-danger {
            background-color: #f44336;
            border-color: #f44336;
        }

        .btn-danger:hover {
            background-color: #e53935;
            border-color: #e53935;
        }
    </style>
@endpush