@extends('frontend.layouts.app')

@push('style')
    <style>
        .support-form-container {
            background: #ffffff;
            border: 1px solid #e9ecef;
            border-radius: 0.5rem;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            padding: 30px;
            margin: 30px auto;
            max-width: 800px;
        }

        .support-form-container h4 {
            font-weight: 600;
            margin-bottom: 20px;
        }

        .support-form-container .form-label {
            font-weight: 500;
        }

        .support-form-container .btn-primary {
            background-color: #007bff;
            border: none;
            padding: 10px 20px;
            font-weight: 500;
        }

        .support-form-container .btn-primary:hover {
            background-color: #0069d9;
        }

        @media (max-width: 767px) {
            .support-form-container {
                margin: 0;
                border-radius: 0;
                box-shadow: none;
                border: none;
                padding: 15px;
            }
        }
    </style>
@endpush

@section('content')
    <div class="container">


        <div class="support-form-container mb-4 mt-3">
            @if (session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif
            <form method="GET" action="{{ route('support.status') }}" class="row g-2 align-items-center">
                <div class="col-12 col-md-9">
                    <input type="text" name="ticket_number"
                        class="form-control @error('ticket_number') is-invalid @enderror"
                        placeholder="Enter your 10-digit Ticket ID">
                    @error('ticket_number')
                        <div class="text-danger small">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-12 col-md-3 d-grid">
                    <button type="submit" class="btn btn-outline-primary w-100">Check Ticket Status</button>
                </div>
            </form>
        </div>


        <div class="support-form-container mb-3">

            @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif

            <h4>Submit a Support Ticket</h4>

            <form method="POST" action="{{ route('support.store') }}">
                @csrf

                <div class="mb-3">
                    <label class="form-label">Your Name</label>
                    <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                        value="{{ old('name') }}">
                    @error('name')
                        <div class="text-danger small">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label class="form-label">Mobile</label>
                    <input type="text" name="mobile" class="form-control @error('mobile') is-invalid @enderror"
                        value="{{ old('mobile') }}">
                    @error('mobile')
                        <div class="text-danger small">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label class="form-label">Email</label>
                    <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                        value="{{ old('email') }}">
                    @error('email')
                        <div class="text-danger small">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label class="form-label">Address</label>
                    <textarea name="address" class="form-control @error('address') is-invalid @enderror">{{ old('address') }}</textarea>
                    @error('address')
                        <div class="text-danger small">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label class="form-label">Ticket Subject</label>
                    <input type="text" name="subject" class="form-control @error('subject') is-invalid @enderror"
                        value="{{ old('subject') }}">
                    @error('subject')
                        <div class="text-danger small">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label class="form-label">Ticket Details</label>
                    <textarea name="details" class="form-control @error('details') is-invalid @enderror" rows="5">{{ old('details') }}</textarea>
                    @error('details')
                        <div class="text-danger small">{{ $message }}</div>
                    @enderror
                </div>

                <button type="submit" class="btn btn-primary w-100">Submit Ticket</button>
            </form>

        </div>
    </div>
@endsection