@extends('layouts.app')
@section('title', 'Raise ticket')

@section('content')
    <div class="page-head">
        <div><h1>Raise a support ticket</h1>
            <p>SLA clocks start automatically from the category policy.</p></div>
        <a href="{{ route('tickets.index') }}" class="btn secondary">&larr; Back to tickets</a>
    </div>

    <form method="POST" action="{{ route('tickets.store') }}">
        @csrf
        <div class="card">
            <div class="card-head"><h3>Ticket details</h3></div>
            <div class="card-body">
                <div class="form-grid">
                    <div class="field span-2">
                        <label>Customer <span class="req">*</span></label>
                        <select name="customer_id" required>
                            <option value="">Select a customer…</option>
                            @foreach ($customers as $customer)
                                <option value="{{ $customer->id }}" @selected(old('customer_id', request('customer')) == $customer->id)>
                                    {{ $customer->customer_number }} — {{ $customer->display_name }} ({{ $customer->phone }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field">
                        <label>Service (optional)</label>
                        <select name="service_id">
                            <option value="">Not linked to a service</option>
                            @foreach ($services as $service)
                                <option value="{{ $service->id }}" @selected(old('service_id') == $service->id)>
                                    {{ $service->service_number }} — {{ $service->plan?->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field">
                        <label>Category <span class="req">*</span></label>
                        <select name="category_id" required>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}" @selected(old('category_id') == $category->id)>
                                    {{ $category->name }}
                                    @if ($category->sla_first_response_min)
                                        ({{ (int) $category->sla_first_response_min / 60 }}h response)
                                    @endif
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field">
                        <label>Priority <span class="req">*</span></label>
                        <select name="priority" required>
                            @foreach (['low','normal','high','urgent'] as $p)
                                <option value="{{ $p }}" @selected(old('priority', 'normal') === $p)>{{ title_case_words($p) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field">
                        <label>Channel <span class="req">*</span></label>
                        <select name="channel" required>
                            @foreach (['phone','email','walk_in','web','sms','social','internal'] as $c)
                                <option value="{{ $c }}" @selected(old('channel', 'phone') === $c)>{{ title_case_words($c) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field span-2">
                        <label>Subject <span class="req">*</span></label>
                        <input type="text" name="subject" required value="{{ old('subject') }}"
                               placeholder="e.g. No internet since this morning">
                    </div>
                    <div class="field full">
                        <label>Description <span class="req">*</span></label>
                        <textarea name="description" rows="6" required placeholder="What did the customer report? What troubleshooting has been tried?">{{ old('description') }}</textarea>
                    </div>
                    <div class="field">
                        <label>Assign to</label>
                        <select name="assigned_to">
                            <option value="">Unassigned (queue)</option>
                            @foreach ($assignees as $assignee)
                                <option value="{{ $assignee->id }}" @selected(old('assigned_to') == $assignee->id)>{{ $assignee->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field">
                        <label>Linked alert</label>
                        <select name="alert_id">
                            <option value="">None</option>
                            @foreach ($alerts as $alert)
                                <option value="{{ $alert->id }}">{{ $alert->title }} ({{ $alert->severity }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field">
                        <label>&nbsp;</label>
                        <label class="check"><input type="checkbox" name="dispatch_field" value="1">
                            Also create a field work order</label>
                    </div>
                </div>
            </div>
            <div class="card-foot flex-between">
                <span class="small muted">An initial reply is logged automatically and the first-response clock starts now.</span>
                <div class="btn-group">
                    <a href="{{ route('tickets.index') }}" class="btn secondary">Cancel</a>
                    <button type="submit" class="btn">Raise ticket</button>
                </div>
            </div>
        </div>
    </form>
@endsection