@extends('layouts.support')

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

    <!-- Breadcrumb -->
    <div class="flex md:flex-row flex-col items-center justify-between gap-2 my-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] rtl:rotate-180">arrow_back</span>
                Back to Tickets
            </a>

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

            <span class="font-semibold text-gray-900">
                Ticket #{{ $ticket->id }}
            </span>
        </div>

        <!-- Status Actions -->
        <div class="flex items-center gap-3">
            @if($ticket->status === 'open')
                <form action="{{ route('support.change-status', $ticket->id) }}" method="POST">
                    @csrf
                    <input type="hidden" name="status" value="closed">

                    <button type="submit"
                        class="h-11 px-5 rounded-xl border border-[#D7DCEC] bg-white hover:bg-red-50 hover:text-red-600 text-[#111827] font-semibold hover:bg-gray-50 transition flex items-center gap-2">
                        <span class="material-symbols-outlined text-[18px]">archive</span>
                        Close Ticket
                    </button>
                </form>
            @else
                <form action="{{ route('support.change-status', $ticket->id) }}" method="POST">
                    @csrf
                    <input type="hidden" name="status" value="open">

                    <button type="submit"
                        class="py-2 px-5 rounded-xl bg-white border border-green-500 text-green-600 hover:!text-white font-semibold hover:bg-green-600 transition">
                        Reopen Ticket
                    </button>
                </form>
            @endif

            <a href="{{ route('support.index') }}"
                class="py-2 px-5 rounded-xl bg-green-600 text-white font-semibold hover:bg-green-700 transition flex items-center justify-center">
                Back
            </a>
        </div>
    </div>

    <!-- Header -->
    <div class="flex flex-col lg:flex-row gap-6">

        <!-- LEFT CONTENT -->
        <div class="flex-1 min-w-0">

            <!-- Ticket Header -->
            <div class="mb-6">
                <div class="flex items-center md:justify-normal justify-center gap-3 mb-2">
                    <h1 class="text-[30px] leading-none font-bold text-[#111827]">
                        Ticket #{{ $ticket->id }}
                    </h1>

                    <span class="px-4 py-1 rounded-full text-sm font-semibold
                        {{ $ticket->status === 'open'
                            ? 'bg-green-50 text-green-600'
                            : 'bg-gray-200 text-gray-700' }}">
                        {{ strtoupper($ticket->status) }}
                    </span>
                </div>

                <p class="text-gray-500 italic text-lg md:text-start text-center ">
                    "{{ $ticket->subject }}"
                </p>
            </div>

            @if(session('success'))
                <div class="mb-6 rounded-2xl border border-green-200 bg-green-50 px-5 py-4 text-green-700">
                    {{ session('success') }}
                </div>
            @endif

        
            <!-- Description -->
            <div class="bg-white border border-[#D9DFEF] rounded-3xl p-6 mb-6 shadow-sm">

                <div class="flex items-center justify-between border-b border-[#E5EAF5] pb-5 mb-5">
                    <div class="flex items-center gap-2">
                        <span class="material-symbols-outlined text-green-600">
                            description
                        </span>

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

                    <p class="text-sm text-gray-500">
                        Created {{ $ticket->created_at->diffForHumans() }}
                    </p>
                </div>

                <div class="rounded-2xl border border-[#E3E8F4] bg-[#F7F8FD] p-5">
                    <p class="text-gray-700 leading-7">
                        {{ $ticket->description }}
                    </p>
                </div>

                <!-- Modules -->
                @if($ticket->module)
                    @php
                        $modules = is_string($ticket->module)
                            ? json_decode($ticket->module, true)
                            : (is_array($ticket->module) ? $ticket->module : []);
                    @endphp

                    <div class="mt-6">
                        <h4 class="text-sm font-bold uppercase tracking-wide text-gray-500 mb-3">
                            Modules
                        </h4>

                        <div class="flex flex-wrap gap-2">
                            @foreach($modules as $mod)
                                <span class="px-4 py-2 rounded-xl bg-[#EEF4FF] text-green-600 text-sm font-semibold">
                                    {{ $mod }}
                                </span>
                            @endforeach
                        </div>
                    </div>
                @endif

                <!-- Attachments -->
                @if($ticket->attachments && $ticket->attachments->count() > 0)

                    @php
                        $images = $ticket->attachments->filter(function($att) {
                            return in_array(strtolower(pathinfo($att->file_name, PATHINFO_EXTENSION)), ['jpg', 'jpeg', 'png', 'gif', 'webp']);
                        });

                        $documents = $ticket->attachments->filter(function($att) {
                            return !in_array(strtolower(pathinfo($att->file_name, PATHINFO_EXTENSION)), ['jpg', 'jpeg', 'png', 'gif', 'webp']);
                        });
                    @endphp

                    <div class="mt-8">
                        <h4 class="text-[20px] font-bold text-[#6B7280] uppercase mb-4">
                            Attachments ({{ $ticket->attachments->count() }})
                        </h4>

                        <!-- Images -->
                        @if($images->count() > 0)
                            <div class="flex flex-wrap gap-4 mb-5">
                                @foreach($images as $image)
                                    <a href="{{ asset('storage/' . $image->file_path) }}"
                                       target="_blank"
                                       class="w-[190px] rounded-2xl overflow-hidden border border-[#D8E0F0] bg-white group">

                                        <div class="h-[130px] overflow-hidden bg-[#F5F7FD]">
                                            <img src="{{ asset('storage/' . $image->file_path) }}"
                                                 alt="{{ $image->file_name }}"
                                                 class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                                        </div>

                                        <div class="flex items-center justify-between p-3">
                                            <p class="text-sm text-[#111827] truncate">
                                                {{ $image->file_name }}
                                            </p>

                                            <span class="material-symbols-outlined text-gray-500 text-[20px]">
                                                download
                                            </span>
                                        </div>
                                    </a>
                                @endforeach
                            </div>
                        @endif

                        <!-- Documents -->
                        @if($documents->count() > 0)
                            <div class="space-y-3">
                                @foreach($documents as $document)
                                    <a href="{{ asset('storage/' . $document->file_path) }}"
                                       target="_blank"
                                       class="flex items-center gap-4 rounded-2xl border border-[#E1E7F3] bg-[#FAFBFF] p-4 hover:bg-white transition">

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

                                        <div class="flex-1 min-w-0">
                                            <p class="font-semibold text-[#111827] truncate">
                                                {{ $document->file_name }}
                                            </p>

                                            <p class="text-xs text-gray-500">
                                                {{ number_format($document->file_size / 1024, 2) }} KB
                                            </p>
                                        </div>

                                        <span class="material-symbols-outlined text-gray-400">
                                            download
                                        </span>
                                    </a>
                                @endforeach
                            </div>
                        @endif
                    </div>
                @endif
            </div>

            <!-- Replies -->
            <div class="mb-6">

                <div class="flex items-center gap-2 mb-5">
                    <span class="material-symbols-outlined text-green-600">
                        forum
                    </span>

                    <h3 class="text-[24px] font-bold text-[#111827]">
                        Replies
                    </h3>
                </div>

                @if($replies->count())

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

                        @foreach($replies as $reply)

                            <div class="rounded-3xl border
                                {{ $reply->replied_by === 'admin'
                                    ? 'border-[#DCE7FF] bg-[#F8FBFF]'
                                    : 'border-[#DDF5E5] bg-white' }}
                                p-6">

                                <div class="flex items-center justify-between mb-4">

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

                                        <div class="w-11 h-11 rounded-xl flex items-center justify-center
                                            {{ $reply->replied_by === 'admin'
                                                ? 'bg-[#E7F0FF]'
                                                : 'bg-[#E8FFF0]' }}">

                                            <span class="material-symbols-outlined
                                                {{ $reply->replied_by === 'admin'
                                                    ? 'text-green-600'
                                                    : 'text-[#16A34A]' }}">
                                                {{ $reply->replied_by === 'admin'
                                                    ? 'admin_panel_settings'
                                                    : 'person' }}
                                            </span>
                                        </div>

                                        <div>
                                            @if($reply->replied_by === 'admin')
                                                <p class="font-bold text-[#111827]">
                                                    {{ $reply->admin_name }} (Admin)
                                                </p>
                                            @else
                                                <p class="font-bold text-[#111827]">
                                                    {{ $reply->company_name ?? 'You' }}
                                                </p>
                                            @endif
                                        </div>
                                    </div>

                                    <span class="text-sm text-gray-500">
                                        {{ $reply->created_at->format('M d, Y H:i') }}
                                    </span>
                                </div>

                                <p class="text-gray-700 leading-7">
                                    {{ $reply->message }}
                                </p>

                                @if($reply->attachments && $reply->attachments->count())

                                    @php
                                        $replyImages = $reply->attachments->filter(function($att) {
                                            return in_array(strtolower(pathinfo($att->file_name, PATHINFO_EXTENSION)), ['jpg', 'jpeg', 'png', 'gif', 'webp']);
                                        });

                                        $replyDocuments = $reply->attachments->filter(function($att) {
                                            return !in_array(strtolower(pathinfo($att->file_name, PATHINFO_EXTENSION)), ['jpg', 'jpeg', 'png', 'gif', 'webp']);
                                        });
                                    @endphp

                                    <div class="mt-5 pt-5 border-t border-[#E5EAF5]">

                                        <!-- Images -->
                                        @if($replyImages->count() > 0)
                                            <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
                                                @foreach($replyImages as $image)
                                                    <a href="{{ asset('storage/' . $image->file_path) }}"
                                                       target="_blank"
                                                       class="overflow-hidden rounded-2xl border border-[#DCE3F1]">

                                                        <img src="{{ asset('storage/' . $image->file_path) }}"
                                                             alt="{{ $image->file_name }}"
                                                             class="w-full h-28 object-cover hover:scale-105 transition duration-300">
                                                    </a>
                                                @endforeach
                                            </div>
                                        @endif

                                        <!-- Files -->
                                        @if($replyDocuments->count() > 0)
                                            <div class="space-y-2">
                                                @foreach($replyDocuments as $document)
                                                    <a href="{{ asset('storage/' . $document->file_path) }}"
                                                       target="_blank"
                                                       class="flex items-center gap-3 rounded-xl border border-[#E3E8F4] p-3 hover:bg-[#F8FAFF] transition">

                                                        <span class="material-symbols-outlined text-green-600">
                                                            attach_file
                                                        </span>

                                                        <div class="flex-1 min-w-0">
                                                            <p class="font-medium text-[#111827] truncate">
                                                                {{ $document->file_name }}
                                                            </p>

                                                            <p class="text-xs text-gray-500">
                                                                {{ number_format($document->file_size / 1024, 2) }} KB
                                                            </p>
                                                        </div>
                                                    </a>
                                                @endforeach
                                            </div>
                                        @endif
                                    </div>
                                @endif
                            </div>

                        @endforeach

                    </div>

                @else

                    <div class="rounded-3xl border border-dashed border-[#BFC9DC] bg-[#F9FAFD] px-8 py-16 text-center">

                        <div class="w-16 h-16 rounded-2xl border border-[#D5DEED] mx-auto mb-4 flex items-center justify-center bg-white">
                            <span class="material-symbols-outlined text-gray-500 text-[34px]">
                                chat_bubble
                            </span>
                        </div>

                        <p class="text-xl font-semibold text-[#111827] mb-1">
                            No replies yet
                        </p>

                        <p class="text-gray-500">
                            Be the first to respond to this ticket.
                        </p>
                    </div>

                @endif
            </div>

            <!-- Reply Form -->
            @if($ticket->status === 'open')

                <div class="bg-white border border-[#D9DFEF] rounded-3xl p-6 shadow-sm">

                    <h4 class="text-2xl font-bold text-[#111827] mb-5">
                        Add Reply
                    </h4>

                    <form action="{{ route('support.reply', $ticket->id) }}"
                          method="POST"
                          enctype="multipart/form-data">

                        @csrf

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

                        <textarea
                            name="message"
                            rows="5"
                            required
                            placeholder="Type your response here..."
                            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"></textarea>

                        <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mt-5">

                            <div class="flex-1">

                                <label class="inline-flex items-center gap-2 text-green-600 font-semibold cursor-pointer">

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

                                    Attach files

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

                                </label>

                                <p class="text-sm text-gray-500 mt-1">
                                    Max 2MB per file. Allowed: Images, PDF, DOC, DOCX, XLS, TXT
                                </p>

                                <!-- FILE PREVIEW -->
                                <div id="reply-file-preview" class="mt-4 space-y-3"></div>

                            </div>

                            <button type="submit"
                                class="h-12 px-7 rounded-2xl bg-green-600 hover:bg-green-700 transition text-white font-semibold flex items-center gap-2 justify-center">

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

                                Send Reply
                            </button>

                        </div>
                    </form>
                </div>

            @else

                <div class="rounded-3xl border border-[#E5E7EB] bg-[#F5F6F8] p-5 text-center text-gray-600">
                    This ticket is closed. Reopen it to add replies.
                </div>

            @endif
        </div>

        <!-- RIGHT SIDEBAR -->
        <div class="w-full lg:w-[320px] flex-shrink-0 space-y-5">

            <!-- Customer Info -->
            <div class="bg-white border border-[#D9DFEF] rounded-3xl p-6 shadow-sm">

                <h3 class="text-[20px] font-bold uppercase text-gray-700 mb-5">
                    Customer Information
                </h3>

                <div class="flex items-start gap-4 mb-6">
                    <div class="w-14 h-14 rounded-2xl bg-[#EEF4FF] 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>
                        <p class="font-bold text-[#111827]">
                            {{ $ticket->company_name ?? 'Company' }}
                        </p>

                        <p class="text-gray-500">
                            Active Organization
                        </p>
                    </div>
                </div>

                <div class="space-y-5 text-sm" data-company-card>

                    <div class="flex gap-3">
                        <span class="material-symbols-outlined text-gray-500 text-[20px]">
                            mail
                        </span>

                        <div>
                            <p class="text-gray-500 mb-1">Email Address</p>

                            <p class="font-medium text-green-600 break-all"
                               data-company-email>
                                Loading...
                            </p>
                        </div>
                    </div>

                    <div class="flex gap-3">
                        <span class="material-symbols-outlined text-gray-500 text-[20px]">
                            call
                        </span>

                        <div>
                            <p class="text-gray-500 mb-1">Contact</p>

                            <p class="font-semibold text-[#111827]" data-company-phone></p>
                        </div>
                    </div>

                    <div class="flex gap-3">
                        <span class="material-symbols-outlined text-gray-500 text-[20px]">
                            verified
                        </span>

                        <div>
                            <p class="text-gray-500 mb-1">Service Plan</p>

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

                    <div class="flex gap-3">
                        <span class="material-symbols-outlined text-gray-500 text-[20px]">
                            calendar_month
                        </span>

                        <div>
                            <p class="text-gray-500 mb-1">Expiry Date</p>

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

            <!-- Metadata -->
            <div class="bg-white border border-[#D9DFEF] rounded-3xl p-6 shadow-sm">

                <h3 class="text-[20px] font-bold uppercase text-gray-700 mb-5">
                    Metadata
                </h3>

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

                    <div class="flex items-start justify-between gap-4 pb-4 border-b border-[#E6EBF5]">
                        <span class="text-gray-500">Company</span>

                        <span class="font-bold text-right text-[#111827]">
                            {{ $ticket->company_name ?? 'Company' }}
                        </span>
                    </div>

                    <div class="flex items-start justify-between gap-4 pb-4 border-b border-[#E6EBF5]">
                        <span class="text-gray-500">Created</span>

                        <div class="text-right">
                            <p class="font-bold text-[#111827]">
                                {{ $ticket->created_at->format('M d, Y') }}
                            </p>

                            <p class="text-xs text-gray-500">
                                {{ $ticket->created_at->format('H:i') }}
                            </p>
                        </div>
                    </div>

                    <div class="flex items-start justify-between gap-4">
                        <span class="text-gray-500">Updated</span>

                        <div class="text-right">
                            <p class="font-bold text-[#111827]">
                                {{ $ticket->updated_at->format('M d, Y') }}
                            </p>

                            <p class="text-xs text-gray-500">
                                {{ $ticket->updated_at->format('H:i') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script>
    document.getElementById('reply_attachments').addEventListener('change', function () {

        const preview = document.getElementById('reply-file-preview');

        preview.innerHTML = '';

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

            const ext = file.name.split('.').pop().toLowerCase();

            const imageTypes = ['jpg', 'jpeg', 'png', 'gif', 'webp'];

            const isImage = imageTypes.includes(ext);

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

            let icon = 'description';

            if (isImage) {
                icon = 'image';
            } else if (ext === 'pdf') {
                icon = 'picture_as_pdf';
            } else if (['doc', 'docx'].includes(ext)) {
                icon = 'article';
            } else if (['xls', 'xlsx'].includes(ext)) {
                icon = 'table_chart';
            }

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

            item.className =
                'flex items-center justify-between rounded-2xl border border-green-100 bg-green-50 p-4';

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

                    <div class="w-11 h-11 rounded-xl bg-white border border-green-200 flex items-center justify-center flex-shrink-0">

                        <span class="material-symbols-outlined text-green-600 text-[20px]">
                            ${icon}
                        </span>

                    </div>

                    <div class="min-w-0">

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

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

                    </div>

                </div>

                <div class="flex items-center gap-1 text-green-600 text-sm font-semibold">

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

                    Selected

                </div>
            `;

            preview.appendChild(item);

        });

    });
</script>

@endsection