@extends('frontend.layouts.master')
@section('content')
    <div class="max-w-2xl mx-auto bg-white/80 rounded-xl shadow p-8 mt-8">
        <h2 class="text-2xl font-bold mb-6 text-gray-900 flex items-center gap-2">
            <i class="fas fa-life-ring text-primary"></i> {{ __('Gửi yêu cầu hỗ trợ') }}
        </h2>
        <form class="space-y-6" action="{{ route('ticket.store') }}" enctype="multipart/form-data" method="post">
            @csrf
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <flux:field>
                    <flux:label>Họ tên</flux:label>
                    <flux:input name="full_name" readonly
                        value="{{ auth()->guard('users')->user()->firstname . ' ' . auth()->guard('users')->user()->lastname }}" />
                </flux:field>
                <flux:field>
                    <flux:label>Email</flux:label>
                    <flux:input name="email" readonly value="{{ auth()->guard('users')->user()->email }}" />
                </flux:field>
            </div>
            <flux:field>
                <flux:label>Tiêu đề</flux:label>
                <flux:input name="subject" placeholder="Nhập tiêu đề" value="{{ old('subject') }}" />
            </flux:field>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <flux:field>
                    <flux:label>Phòng ban</flux:label>
                    <flux:select name="room">
                        <option value="Phòng Kỹ Thuật" @selected(old('room') === 'Phòng Kỹ Thuật')>Phòng Kỹ Thuật</option>
                        <option value="Phòng Kinh Doanh" @selected(old('room') === 'Phòng Kinh Doanh')>Phòng Kinh Doanh</option>
                        <option value="Phòng Kế Toán" @selected(old('room') === 'Phòng Kế Toán')>Phòng Kế Toán</option>
                    </flux:select>
                </flux:field>
                <flux:field>
                    <flux:label>Dịch vụ</flux:label>
                    <flux:select name="product">
                        <option value="">Chọn dịch vụ cần hỗ trợ</option>
                        @if ($itemProduct->count())
                            @foreach ($itemProduct->all() as $item)
                                <option @selected((int) old('product') === $item->GetRelidProduct()->id)
                                    value="{{ $item->GetItemProduct()->Type->id }}|{{ $item->GetRelidProduct()->id }}">
                                    {{ $item->GetItemProduct()->Type->name . ' ' . $item->GetItemProduct()->name }}
                                    ({{ $item->GetRelidProduct()->name }})
                                </option>
                            @endforeach
                        @endif
                    </flux:select>
                </flux:field>
            </div>
            <flux:field>
                <flux:label>Nội dung</flux:label>
                <div id="editor" style="min-height: 200px;"></div>
                <input type="hidden" name="description" id="description" value="{{ old('description') }}">
            </flux:field>
            <flux:field>
                <flux:label>Đính kèm File</flux:label>
                <flux:input type="file" name="fileTicket" accept="image/png, image/jpeg" />
                <div class="text-xs text-gray-500 mt-1">Hỗ trợ: .jpg, .gif, .jpeg, .png (Tối đa: 1024MB/Tệp)</div>
            </flux:field>
            <div class="flex justify-end gap-3 pt-4">

                <a href="{{ route('ticket') }}"
                    class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 transition">
                    <i class="fas fa-backward mr-2"></i> Trở về
                </a>
                <flux:button type="submit" icon:trailing="pencil" color="orange" class="px-6 py-3 font-semibold">
                    Gửi yêu cầu
                </flux:button>
            </div>
        </form>

    </div>
@endsection

@push('viewStyles')
    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />
@endpush

@push('viewScripts')
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
    <script>
        const toolbarOptions = [
            ['bold', 'italic'],
            ['link']
        ];

        const quill = new Quill('#editor', {
            theme: 'snow',
            modules: {
                toolbar: toolbarOptions
            }
        });

        const initialContent = document.getElementById('description').value;
        quill.root.innerHTML = initialContent;

        quill.on('text-change', function() {
            document.getElementById('description').value = quill.root.innerHTML;
        });
    </script>
@endpush