@extends('layouts.support')

@section('content')
<div class="max-w-7xl mx-auto">

    <!-- Breadcrumb -->
    <div class="flex items-center justify-between mb-8">

        <div class="flex items-center gap-2 text-sm">
            <a href="{{ route('support.index') }}"
               class="flex items-center gap-1 text-green-600 font-medium hover:opacity-80 transition">
                <span class="material-symbols-outlined text-[18px]">arrow_back</span>
                Back to Tickets
            </a>

            <span class="text-gray-400">/</span>

            <span class="font-semibold text-gray-900">
                Create Ticket
            </span>
        </div>

    </div>

    <!-- Header -->
    <div class="mb-8">
        <h1 class="text-[40px] leading-tight font-bold text-[#111827] mb-3">
            Create Support Ticket
        </h1>

        <p class="text-lg text-gray-500">
            Get help from our support team. Fill in the details below.
        </p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-[1fr_340px] gap-6">

        <!-- LEFT -->
        <div>

            @if ($errors->any())
                <div class="rounded-3xl border border-red-200 bg-red-50 p-5 mb-6">
                    <p class="font-bold text-red-700 mb-3">
                        Please fix the following errors:
                    </p>

                    <ul class="space-y-2 text-sm text-red-600">
                        @foreach ($errors->all() as $error)
                            <li class="flex items-start gap-2">
                                <span class="material-symbols-outlined text-[18px] mt-0.5">
                                    error
                                </span>

                                <span>{{ $error }}</span>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <!-- Form -->
            <form action="{{ route('support.store') }}"
                  method="POST"
                  enctype="multipart/form-data"
                  class="bg-white border border-[#D9DFEF] rounded-3xl shadow-sm overflow-hidden">

                @csrf

                <!-- Hidden Company Name -->
                <input type="hidden"
                       id="company_name_field"
                       name="company_name_from_api"
                       value="">

                <!-- Top -->
                <div class="border-b border-[#E6EBF5] px-8 py-6">

                    <div class="flex items-center gap-3 mb-2">
                        <div class="w-12 h-12 rounded-2xl bg-green-50 flex items-center justify-center">
                            <span class="material-symbols-outlined text-green-600">
                                support_agent
                            </span>
                        </div>

                        <div>
                            <h2 class="text-2xl font-bold text-[#111827]">
                                Ticket Information
                            </h2>

                            <p class="text-gray-500">
                                Submit your support request
                            </p>
                        </div>
                    </div>

                </div>

                <!-- Body -->
                <div class="p-8">

                    <!-- Subject -->
                    <div class="mb-7">
                        <label class="block text-sm font-bold text-[#111827] mb-3">
                            Subject
                            <span class="text-red-500">*</span>
                        </label>

                        <input type="text"
                               name="subject"
                               required
                               value="{{ old('subject') }}"
                               placeholder="Brief subject of your issue"
                               class="w-full h-14 rounded-2xl border border-[#D7DEED] bg-[#F7F8FD] px-5 text-[#111827] placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-green-600/20 focus:border-green-600 transition-all">

                        @error('subject')
                            <span class="text-red-600 text-sm mt-2 block">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <!-- Description -->
                    <div class="mb-7">
                        <label class="block text-sm font-bold text-[#111827] mb-3">
                            Description
                            <span class="text-red-500">*</span>
                        </label>

                        <textarea
                            name="description"
                            rows="8"
                            required
                            placeholder="Describe your issue in detail. Include any error messages or steps to reproduce the problem."
                            class="w-full rounded-2xl border border-[#D7DEED] bg-[#F7F8FD] px-5 py-4 text-[#111827] placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-green-600/20 focus:border-green-600 resize-none transition-all">{{ old('description') }}</textarea>

                        @error('description')
                            <span class="text-red-600 text-sm mt-2 block">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <!-- Modules -->
                    <div class="mb-7">
                        <label class="block text-sm font-bold text-[#111827] mb-3">
                            Modules
                            <span class="text-gray-400 font-medium">(Optional)</span>
                        </label>

                        <div class="relative">
                            <select id="module_id"
                                    name="module[]"
                                    multiple
                                    class="select2">
                            </select>
                        </div>

                        @error('module')
                            <span class="text-red-600 text-sm mt-2 block">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                    <!-- Attachments -->
                    <div class="mb-8">

                        <label class="block text-sm font-bold text-[#111827] mb-3">
                            Attachments
                            <span class="text-gray-400 font-medium">(Optional)</span>
                        </label>

                        <div onclick="document.getElementById('attachments').click()"
                             class="group rounded-3xl border-2 border-dashed border-[#D5DEED] bg-[#F8FAFF] p-10 text-center cursor-pointer hover:border-green-600 hover:bg-[#F4F7FF] transition-all">

                            <div class="w-20 h-20 rounded-3xl bg-white border border-[#E2E8F4] mx-auto flex items-center justify-center mb-5 group-hover:scale-105 transition">

                                <span class="material-symbols-outlined text-green-600 text-[40px]">
                                    cloud_upload
                                </span>

                            </div>

                            <h3 class="text-xl font-bold text-[#111827] mb-2">
                                Upload Attachments
                            </h3>

                            <p class="text-gray-500 mb-3">
                                Click to upload or drag and drop
                            </p>

                            <p class="text-sm text-gray-400">
                                Max 2MB per file • JPG, PNG, GIF, PDF, DOC, DOCX, XLS, TXT
                            </p>

                        </div>

                        <input type="file"
                               name="attachments[]"
                               id="attachments"
                               class="hidden"
                               multiple
                               accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.xlsx,.txt">

                        <!-- File List -->
                        <div id="file-list" class="mt-5 space-y-3"></div>

                        @error('attachments')
                            <span class="text-red-600 text-sm mt-2 block">
                                {{ $message }}
                            </span>
                        @enderror
                    </div>

                </div>

                <!-- Footer -->
                <div class="flex flex-col sm:flex-row items-center justify-between gap-4 border-t border-[#E6EBF5] px-8 py-6 bg-[#FBFCFF]">

                    <a href="{{ route('support.index') }}"
                       class="w-full sm:w-auto h-12 px-6 rounded-2xl border border-[#D7DEED] bg-white text-[#111827] font-semibold hover:bg-gray-50 transition flex items-center justify-center">
                        Cancel
                    </a>

                    <button type="submit"
                            class="w-full sm:w-auto h-12 px-8 rounded-2xl bg-green-600 hover:bg-green-700 text-white font-semibold transition flex items-center justify-center gap-2 shadow-lg shadow-blue-100">

                        <span class="material-symbols-outlined text-[20px]">
                            send
                        </span>

                        Create Ticket
                    </button>

                </div>

            </form>

        </div>

        <!-- RIGHT SIDEBAR -->
        <div class="space-y-5">

            <!-- Company Card -->
            <div class="bg-white border border-[#D9DFEF] rounded-3xl p-6 shadow-sm"
                 data-company-card>

                <div class="flex items-start gap-5 mb-6">

                    <div class="w-20 h-20 rounded-2xl bg-green-50 border border-[#DCE6FA] flex items-center justify-center overflow-hidden">

                        <img id="company-logo"
                             data-company-logo
                             src=""
                             alt="Company Logo"
                             style="display:none; width:100%; height:100%; object-fit:contain;" />

                        <span class="material-symbols-outlined text-green-600 text-[38px]"
                              id="company-icon">
                            business
                        </span>

                    </div>

                    <div class="min-w-0">
                        <h2 class="text-2xl font-bold text-[#111827]"
                            data-company-name>
                            Loading...
                        </h2>

                        <div class="space-y-2 mt-3 text-sm text-gray-600">

                            <p class="break-all"
                               data-company-email>
                                📧 Loading...
                            </p>

                            <p data-company-phone>
                                📞 Loading...
                            </p>

                            <p data-company-address>
                                📍 Loading...
                            </p>

                        </div>
                    </div>

                </div>

                <div class="grid grid-cols-2 gap-3">

                    <div class="rounded-2xl border border-[#E3E8F4] bg-[#F8FAFF] p-4">

                        <p class="text-xs text-gray-500 font-semibold uppercase mb-1">
                            Plan
                        </p>

                        <p class="text-lg font-bold capitalize text-[#111827]"
                           data-company-plan>
                            N/A
                        </p>

                    </div>

                    <div class="rounded-2xl border border-[#E3E8F4] bg-[#F8FAFF] p-4">

                        <p class="text-xs text-gray-500 font-semibold uppercase mb-1">
                            Expiry
                        </p>

                        <p class="text-lg font-bold text-[#111827]"
                           data-company-expiry>
                            N/A
                        </p>

                    </div>

                </div>

            </div>

            <!-- Tips -->
            <div class="bg-[#F5F7FF] border border-[#DCE4F5] rounded-3xl p-6">

                <div class="flex items-center gap-3 mb-5">

                    <div class="w-12 h-12 rounded-2xl bg-white border border-[#E1E7F3] flex items-center justify-center">
                        <span class="material-symbols-outlined text-green-600">
                            lightbulb
                        </span>
                    </div>

                    <div>
                        <h3 class="text-xl font-bold text-[#111827]">
                            Tips
                        </h3>

                        <p class="text-sm text-gray-500">
                            For faster support
                        </p>
                    </div>

                </div>

                <div class="space-y-4">

                    <div class="flex items-start gap-3">
                        <span class="material-symbols-outlined text-green-600 text-[18px] mt-0.5">
                            check_circle
                        </span>

                        <p class="text-sm text-gray-600 leading-6">
                            Add detailed information about your issue
                        </p>
                    </div>

                    <div class="flex items-start gap-3">
                        <span class="material-symbols-outlined text-green-600 text-[18px] mt-0.5">
                            check_circle
                        </span>

                        <p class="text-sm text-gray-600 leading-6">
                            Upload screenshots or documents if possible
                        </p>
                    </div>

                    <div class="flex items-start gap-3">
                        <span class="material-symbols-outlined text-green-600 text-[18px] mt-0.5">
                            check_circle
                        </span>

                        <p class="text-sm text-gray-600 leading-6">
                            Select related modules for quicker resolution
                        </p>
                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<style>
    body {
        overflow-x: hidden;
    }
    
    .select2-container {
        width: 100% !important;
    }

    .select2-selection--multiple {
        min-height: 58px !important;
        background: #F7F8FD !important;
        border: 1px solid #D7DEED !important;
        border-radius: 18px !important;
        padding: 14px !important;
    }

    .select2-container--focus .select2-selection--multiple {
        border-color: #16A34A !important;
        box-shadow: 0 0 0 4px rgba(22,163,74,.12) !important;
    }

    .select2-selection__choice {
        background: #ffffff !important;
        border: 1px solid #efefef !important;
        color: #166534 !important;
        border-radius: 6px !important;
        padding: 4px 10px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        margin: 5px 0px;
    }

    .select2-selection__choice__remove {
        border: none !important;
        color: #0f4c27ff !important;
        margin-right: 6px !important;
    }

    .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected, .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
        background: #16a34a;
    }

    .select2-dropdown {
        border: 1px solid #D7DEED !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        box-shadow: 0 10px 25px rgba(0,0,0,.08) !important;
    }

    .select2-results__option {
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    .select2-results__option--highlighted {
        background: #f4f2f2da !important;
        color: #000000 !important;
    }

    .select2-container .select2-search--inline .select2-search__field {
        background: #f5f6fb !important;
        box-shadow: none !important;
    }

    .select2-container .select2-selection--multiple .select2-selection__clear {
        display: none;
    }

</style>
<script>
    // Handle file selection display
    document.getElementById('attachments').addEventListener('change', function(e) {

        const fileList = document.getElementById('file-list');
        fileList.innerHTML = '';

        Array.from(this.files).forEach((file, index) => {

            const fileSize = (file.size / 1024 / 1024).toFixed(2);

            const fileElement = document.createElement('div');

            fileElement.className =
                'flex items-center justify-between rounded-2xl border border-[#DCE7F5] bg-[#F8FBFF] p-4';

            fileElement.innerHTML = `
                <div class="flex items-center gap-3 min-w-0">

                    <div class="w-12 h-12 rounded-xl bg-[#EAF2FF] flex items-center justify-center flex-shrink-0">
                        <span class="material-symbols-outlined text-green-600 text-[20px]">
                            description
                        </span>
                    </div>

                    <div class="min-w-0">
                        <p class="font-semibold text-[#111827] truncate">
                            ${file.name}
                        </p>

                        <p class="text-sm text-gray-500">
                            ${fileSize} MB
                        </p>
                    </div>

                </div>

                <button type="button"
                        onclick="removeFile(${index})"
                        class="w-9 h-9 rounded-xl hover:bg-red-50 text-red-500 flex items-center justify-center transition">

                    <span class="material-symbols-outlined text-[18px]">
                        close
                    </span>

                </button>
            `;

            fileList.appendChild(fileElement);

        });

    });
    
    $('#module_id').select2({
        placeholder: 'Select modules',
        width: '100%',
        theme: "bootstrap-5",
        allowClear: false
    });
</script>
@endsection