@extends('customer.layout')

@section('title','Create Ticket')

@section('content')

<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-lg-8">

            <div class="card shadow-sm">
                <div class="card-header">
                    <h5 class="mb-0">Create New Ticket</h5>
                </div>

                <div class="card-body">

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

                    {{-- ERROR MESSAGE --}}
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form method="POST"
                          action="{{ route('customer.tickets.store') }}"
                          enctype="multipart/form-data">
                        @csrf

                        {{-- SUBJECT --}}
                        <div class="mb-3">
                            <label class="form-label">Subject</label>
                            <input type="text"
                                   name="subject"
                                   class="form-control"
                                   placeholder="Enter ticket subject"
                                   value="{{ old('subject') }}"
                                   required>
                        </div>

                        {{-- PRIORITY --}}
                        <div class="mb-3">
                            <label class="form-label">Priority</label>
                            <select name="priority"
                                    class="form-select"
                                    required>
                                <option value="">Select priority</option>
                                <option value="low" {{ old('priority') == 'low' ? 'selected' : '' }}>Low</option>
                                <option value="high" {{ old('priority') == 'high' ? 'selected' : '' }}>High</option>
                                <option value="emergency" {{ old('priority') == 'emergency' ? 'selected' : '' }}>
                                    Emergency
                                </option>
                            </select>
                        </div>

                        {{-- MESSAGE --}}
                        <div class="mb-3">
                            <label class="form-label">Message</label>
                            <textarea name="message"
                                      rows="5"
                                      class="form-control"
                                      placeholder="Describe your issue"
                                      required>{{ old('message') }}</textarea>
                        </div>

                        {{-- IMAGE UPLOAD --}}
                        <div class="mb-3">
                            <label class="form-label">
                                Attachment (optional)
                            </label>
                            <input type="file"
                                   name="attachment"
                                   class="form-control"
                                   accept="image/png,image/jpeg,image/jpg">
                            <small class="text-muted">
                                JPG, PNG (max 2MB)
                            </small>
                        </div>

                        {{-- ACTION --}}
                        <div class="text-end">
                            <button type="submit" class="btn btn-primary">
                                Submit Ticket
                            </button>
                            <a href="{{ route('customer.tickets.index') }}"
                               class="btn btn-secondary">
                                Cancel
                            </a>
                        </div>

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

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

@endsection