{{-- resources/views/support/create.blade.php --}}
@extends('layouts.app')
@section('title', 'New Support Ticket')
@section('page_title', 'New Support Ticket')
@section('page_subtitle', 'Get help from our team')

@section('content')

<div class="row justify-content-center">
<div class="col-xl-7">

<div class="d-flex gap-2 mb-3">
    <a href="{{ tenant_route('support.index') }}"
       class="btn btn-sm btn-outline-secondary">← Back</a>
</div>

<div class="row g-3">

    {{-- Form --}}
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-headset me-2"
                       style="color:var(--clay)"></i>
                    Describe Your Issue
                </span>
            </div>
            <div class="card-body">
                <form method="POST"
                      action="{{ tenant_route('support.store') }}"
                      enctype="multipart/form-data">
                    @csrf

                    <div class="row g-3">

                        <div class="col-12">
                            <label class="form-label fw-semibold">
                                Subject <span class="text-danger">*</span>
                            </label>
                            <input type="text" name="subject"
                                   class="form-control @error('subject') is-invalid @enderror"
                                   value="{{ old('subject') }}"
                                   placeholder="Brief description of the issue"
                                   required>
                            @error('subject')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">
                                Category <span class="text-danger">*</span>
                            </label>
                            <select name="category"
                                    class="form-select @error('category') is-invalid @enderror"
                                    required>
                                <option value="">Select category</option>
                                @foreach([
                                    'billing'          => 'Billing & Payments',
                                    'technical'        => 'Technical Issue',
                                    'reservations'     => 'Reservations',
                                    'account'          => 'Account & Settings',
                                    'feature_request'  => 'Feature Request',
                                    'training'         => 'Training & How-To',
                                    'other'            => 'Other',
                                ] as $val => $label)
                                    <option value="{{ $val }}"
                                            {{ old('category') === $val ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                            @error('category')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-semibold">
                                Priority <span class="text-danger">*</span>
                            </label>
                            <select name="priority"
                                    class="form-select @error('priority') is-invalid @enderror"
                                    required>
                                @foreach([
                                    'low'    => 'Low — minor inconvenience',
                                    'medium' => 'Medium — affecting my work',
                                    'high'   => 'High — urgent issue',
                                    'urgent' => 'Urgent — system down',
                                ] as $val => $label)
                                    <option value="{{ $val }}"
                                            {{ old('priority', 'medium') === $val ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                            @error('priority')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12">
                            <label class="form-label fw-semibold">
                                Describe the Issue
                                <span class="text-danger">*</span>
                            </label>
                            <textarea name="body" rows="6"
                                      class="form-control @error('body') is-invalid @enderror"
                                      placeholder="Please describe the issue in detail. Include what you were trying to do, what happened, and any error messages you saw..."
                                      required>{{ old('body') }}</textarea>
                            @error('body')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12">
                            <label class="form-label fw-semibold">
                                Attachments
                            </label>
                            <input type="file" name="attachments[]"
                                   multiple
                                   class="form-control"
                                   accept=".pdf,.jpg,.jpeg,.png,.webp,.txt">
                            <div style="font-size:.7rem;color:var(--muted);
                                        margin-top:4px;">
                                Screenshots, PDFs or text files. Max 5MB each.
                            </div>
                        </div>

                        <div class="col-12 d-flex gap-2 pt-2">
                            <button type="submit"
                                    class="btn btn-primary">
                                <i class="bi bi-send me-1"></i>
                                Submit Ticket
                            </button>
                            <a href="{{ tenant_route('support.index') }}"
                               class="btn btn-outline-secondary">
                                Cancel
                            </a>
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Tips --}}
    <div class="col-md-4">
        <div class="card mb-3">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-info-circle me-2"
                       style="color:var(--clay)"></i>
                    Before you submit
                </span>
            </div>
            <div class="card-body">
                <div style="display:flex;flex-direction:column;
                            gap:10px;font-size:.78rem;color:var(--muted);">
                    <div style="display:flex;gap:8px;">
                        <i class="bi bi-check-circle"
                           style="color:var(--success);flex-shrink:0;
                                  margin-top:1px;"></i>
                        Include as much detail as possible
                    </div>
                    <div style="display:flex;gap:8px;">
                        <i class="bi bi-check-circle"
                           style="color:var(--success);flex-shrink:0;
                                  margin-top:1px;"></i>
                        Attach screenshots if relevant
                    </div>
                    <div style="display:flex;gap:8px;">
                        <i class="bi bi-check-circle"
                           style="color:var(--success);flex-shrink:0;
                                  margin-top:1px;"></i>
                        Include reservation or invoice numbers
                    </div>
                    <div style="display:flex;gap:8px;">
                        <i class="bi bi-check-circle"
                           style="color:var(--success);flex-shrink:0;
                                  margin-top:1px;"></i>
                        Describe the steps to reproduce the issue
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header">
                <span class="card-title">Response Times</span>
            </div>
            <div class="card-body">
                <div style="display:flex;flex-direction:column;gap:8px;">
                    @foreach([
                        ['Urgent',  '#991b1b', '< 2 hours'],
                        ['High',    '#ef4444', '< 8 hours'],
                        ['Medium',  '#f59e0b', '< 24 hours'],
                        ['Low',     '#64748b', '< 48 hours'],
                    ] as [$label, $color, $time])
                        <div style="display:flex;justify-content:space-between;
                                    align-items:center;font-size:.78rem;">
                            <div style="display:flex;align-items:center;gap:6px;">
                                <span style="width:8px;height:8px;border-radius:50%;
                                             background:{{ $color }};
                                             display:inline-block;"></span>
                                {{ $label }}
                            </div>
                            <span style="color:var(--muted);">{{ $time }}</span>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body text-center"
                 style="padding:16px;">
                <div style="font-size:.75rem;color:var(--muted);
                            margin-bottom:10px;">
                    Need immediate help?
                </div>
                <a href="mailto:support@kubhuka.com"
                   class="btn btn-outline-secondary btn-sm w-100 mb-2">
                    <i class="bi bi-envelope me-1"></i>
                    support@kubhuka.com
                </a>
                <a href="https://wa.me/263777000000"
                   target="_blank"
                   class="btn btn-outline-success btn-sm w-100">
                    <i class="bi bi-whatsapp me-1"></i>
                    WhatsApp Support
                </a>
            </div>
        </div>
    </div>

</div>

</div>
</div>

@endsection