@extends('layouts.master')
@section('content')
    <div class="container"
         style="max-width: 80% !important; margin: 30px auto; padding: 20px; background: #f9f9f9; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border-radius: 8px;">
        <div style="text-align: center; margin-bottom: 20px;">
            <h2 style="margin: 0; font-family: Arial, sans-serif; color: #333;">Customer Request Form</h2>
        </div>
        <form action="{{ route('create_customer_support_email') }}" method="POST" style="font-family: Arial, sans-serif; color: #555;">
            @csrf
            <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
                <div style="flex: 1; margin-right: 10px;">
                    <label for="name" style="display: block; margin-bottom: 5px;">Name:</label>
                    <input type="text" id="name" name="name" required
                           style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
                </div>
                <div style="flex: 1; margin-left: 10px;">
                    <label for="email" style="display: block; margin-bottom: 5px;">Email:</label>
                    <input type="email" id="email" name="email" required
                           style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
                </div>
            </div>
            <div style="margin-bottom: 20px;">
                <label for="subject" style="display: block; margin-bottom: 5px;">Subject:</label>
                <input type="text" id="subject" name="subject" required
                       style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
            </div>
            <div style="margin-bottom: 20px;">
                <label for="body" style="display: block; margin-bottom: 5px;">Message:</label>
                <textarea id="body" name="body" required
                          style="width: 100%; height: 120px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;"></textarea>
            </div>
            <input type="submit" value="Submit">
        </form>
    </div>
@endsection