@extends('admin.admin_dashboard')
@section('admin')

<div class="page-content">
    <x-chm.layout.page title="New support ticket" subtitle="Describe the issue and we'll route it to the right team" icon="bx bx-plus-circle">
        <x-slot:breadcrumb>
            <x-chm.breadcrumb-item :href="route('helpdesk.tickets.index')">Tickets</x-chm.breadcrumb-item>
            <x-chm.breadcrumb-item :active="true">New ticket</x-chm.breadcrumb-item>
        </x-slot:breadcrumb>

        <x-chm.card>
            <form method="post" action="{{ route('helpdesk.tickets.store') }}" enctype="multipart/form-data">
                @csrf
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label">Title <span class="text-danger">*</span></label>
                        <input type="text" name="title" class="form-control @error('title') is-invalid @enderror" value="{{ old('title') }}" required maxlength="255">
                        @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-12">
                        <label class="form-label">Description <span class="text-danger">*</span></label>
                        <textarea name="description" rows="6" class="form-control @error('description') is-invalid @enderror" required>{{ old('description') }}</textarea>
                        @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Category</label>
                        <select name="category_id" id="category_id" class="form-select chm-select" data-placeholder="Select category">
                            <option value=""></option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->id }}" @selected(old('category_id') == $cat->id)>{{ $cat->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Subcategory</label>
                        <select name="subcategory_id" id="subcategory_id" class="form-select chm-select" data-placeholder="Select subcategory">
                            <option value=""></option>
                            @foreach($categories as $cat)
                                @foreach($cat->children as $sub)
                                    <option value="{{ $sub->id }}" data-parent="{{ $cat->id }}" @selected(old('subcategory_id') == $sub->id)>{{ $sub->name }}</option>
                                @endforeach
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Department</label>
                        <select name="department_id" class="form-select chm-select" data-placeholder="Select department" data-allow-clear="true">
                            <option value=""></option>
                            @foreach($departments as $dept)
                                <option value="{{ $dept->id }}" @selected(old('department_id') == $dept->id)>{{ $dept->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Priority <span class="text-danger">*</span></label>
                        <select name="priority" class="form-select" required>
                            @foreach($priorities as $p)
                                <option value="{{ $p->value }}" @selected(old('priority', 'medium') === $p->value)>{{ $p->label() }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Severity <span class="text-danger">*</span></label>
                        <select name="severity" class="form-select" required>
                            @foreach($severities as $s)
                                <option value="{{ $s->value }}" @selected(old('severity', 'minor') === $s->value)>{{ $s->label() }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Impact <span class="text-danger">*</span></label>
                        <select name="impact" class="form-select" required>
                            @foreach($impacts as $i)
                                <option value="{{ $i->value }}" @selected(old('impact', 'single_user') === $i->value)>{{ $i->label() }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Source</label>
                        <select name="source" class="form-select">
                            @foreach($sources as $src)
                                <option value="{{ $src->value }}" @selected(old('source', 'web') === $src->value)>{{ $src->label() }}</option>
                            @endforeach
                        </select>
                    </div>

                    @if($users->count() > 1)
                        <div class="col-md-4">
                            <label class="form-label">Requester</label>
                            <select name="requester_id" class="form-select chm-select" data-placeholder="Default: you">
                                <option value=""></option>
                                @foreach($users as $u)
                                    <option value="{{ $u->id }}" @selected(old('requester_id') == $u->id)>{{ $u->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Assign to</label>
                            <select name="assigned_to" class="form-select chm-select" data-placeholder="Unassigned" data-allow-clear="true">
                                <option value=""></option>
                                @foreach($users as $u)
                                    <option value="{{ $u->id }}" @selected(old('assigned_to') == $u->id)>{{ $u->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    @endif

                    <div class="col-md-4">
                        <label class="form-label">Branch</label>
                        <input type="text" name="branch" class="form-control" value="{{ old('branch') }}" maxlength="120">
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Module</label>
                        <input type="text" name="module" class="form-control" value="{{ old('module') }}" maxlength="120" placeholder="e.g. ERP, CFDP">
                    </div>

                    <div class="col-12">
                        <label class="form-label">Attachments</label>
                        <input type="file" name="attachments[]" class="form-control" multiple>
                        <div class="form-text">Max {{ number_format(config('helpdesk.max_upload_kb', 10240) / 1024, 0) }} MB per file. Images, PDF, Office docs, ZIP.</div>
                    </div>

                    <div class="col-12 d-flex gap-2">
                        <button type="submit" class="btn btn-primary"><i class="bx bx-send me-1"></i> Submit ticket</button>
                        <a href="{{ route('helpdesk.tickets.index') }}" class="btn btn-outline-secondary">Cancel</a>
                    </div>
                </div>
            </form>
        </x-chm.card>
    </x-chm.layout.page>
</div>

@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        if (window.ChmForms) ChmForms.init();

        const category = document.getElementById('category_id');
        const subcategory = document.getElementById('subcategory_id');
        if (category && subcategory) {
            const filterSubs = () => {
                const parentId = category.value;
                Array.from(subcategory.options).forEach(opt => {
                    if (!opt.value) return;
                    opt.hidden = opt.dataset.parent !== parentId;
                });
            };
            category.addEventListener('change', filterSubs);
            filterSubs();
        }
    });
</script>
@endpush