@extends('user::layouts.master')
@section('breadcrumb_title', 'Add New Support Message')

@section('content')

    <div class="flex items-center justify-between mb-6">
        <h2 class="text-2xl font-semibold">Add New Support Message</h2>
        <a href="{{ route('user.conversations.index') }}" class="btn btn-primary">
            <i class="fas fa-arrow-left mr-2"></i> Back to Support
        </a>
    </div>

    <div class="card">

        <!-- send box  -->
        <form action="{{ route('user.conversations.store') }}" method="POST" id="messageForm" enctype="multipart/form-data">
            @csrf

            <div class="mb-4 input-with-label">
                <label>Subject <span class="text-red-500">*</span></label>
                <input type="text" name="subject" value="{{ old('subject') }}"
                    class="@error('subject') border-red-500 @enderror" required>
                @error('subject')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-4">
                <label class="block text-xs font-medium text-gray-700 mb-3">Message <span class="text-red-500">*</span></label>
                <div class="flex items-start w-full gap-3.5 mb-5">
                    <div
                        class="border flex items-end gap-2 flex-col sm:flex-row border-border bg-input-bg rounded-lg w-full relative">
                        <div
                            class="w-full relative flex-col flex rounded text-headiline outline-none focus:outline-none transition-all duration-300">
                            <div class="flex items-center">
                                <textarea name="message" rows="4" placeholder="Type Message Here a message"
                                    class="w-full bg-transparent text-headline leading-6 border-0 resize-none mb-2" spellcheck="false"
                                    aria-label="To enrich screen reader interactions, please activate Accessibility in Grammarly extension settings"></textarea>
                            </div>
                            <div class="flex gap-2">
                                <ul id="fileList" class="flex gap-2 flex-wrap"></ul>
                                <ul id="ImageList" class="flex gap-2 flex-wrap"></ul>
                            </div>
                        </div>
                        <div class="absolute bottom-20 right-20">
                            <div class="flex gap-3 items-center justify-end">
                                <div class="flex gap-1.5 mr-1.5 items-center">
                                    <label for="image-attach" class="text-tu-gray hover:text-tu-dark-green cursor-pointer">
                                        <svg width="19" height="23" viewBox="0 0 19 23" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M0.839138 18.8602L0.820813 18.8813C0.57342 18.2618 0.417654 17.5583 0.353516 16.7812C0.417654 17.5478 0.591745 18.2407 0.839138 18.8602Z"
                                                fill="currentcolor" stroke="#CACACA" stroke-width="0.5" />
                                            <path
                                                d="M6.72174 9.79878C7.92615 9.79878 8.90244 8.67993 8.90244 7.29978C8.90244 5.91962 7.92615 4.80078 6.72174 4.80078C5.51735 4.80078 4.54102 5.91962 4.54102 7.29978C4.54102 8.67993 5.51735 9.79878 6.72174 9.79878Z"
                                                fill="currentcolor" stroke="#CACACA" stroke-width="0.5" />
                                            <path
                                                d="M13.3104 1H5.63211C2.2969 1 0.308594 3.2785 0.308594 7.1005V15.8995C0.308594 17.044 0.482685 18.0415 0.821704 18.8815C1.6097 20.8765 3.29563 22 5.63211 22H13.3104C16.6457 22 18.634 19.7215 18.634 15.8995V13.495V7.1005C18.634 3.2785 16.6457 1 13.3104 1ZM17.1404 12.025C16.4258 11.3215 15.2713 11.3215 14.5566 12.025L10.7449 15.7735C10.0302 16.477 8.87571 16.477 8.16102 15.7735L7.84948 15.4795C7.19893 14.8285 6.16355 14.7655 5.43054 15.3325L2.00369 17.968C1.80211 17.38 1.683 16.6975 1.683 15.8995V7.1005C1.683 4.1395 3.04824 2.575 5.63211 2.575H13.3104C15.8943 2.575 17.2596 4.1395 17.2596 7.1005V12.1405L17.1404 12.025Z"
                                                fill="currentcolor" stroke="#CACACA" stroke-width="0.5" />
                                        </svg>
                                    </label>
                                    <input type="file" name="attachment[]" id="image-attach" multiple accept="image/*"
                                        class="bg-transparent outline-none focus:outline-none w-0 overflow-hidden" />
                                </div>
                                <button type="submit" class="btn-primary px-6 py-2">Send</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection