@extends('layouts.app')

@section('title', 'View Support Ticket')

@section('page-wrapper')
    <!-- Page Header with Breadcrumb -->
    <div class="page-header d-print-none">
        <div class="container-fluid">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <!-- Breadcrumb -->
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{ route('dashboard') }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                        viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                        stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <path d="M5 12l-2 0l9 -9l9 9l-2 0" />
                                        <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
                                        <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
                                    </svg>
                                    Dashboard
                                </a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{ route('support-tickets.index') }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round"
                                        class="icon icon-tabler icons-tabler-outline icon-tabler-headset">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                        <path d="M4 14v-3a8 8 0 1 1 16 0v3" />
                                        <path d="M18 19c0 1.657 -2.686 3 -6 3" />
                                        <path
                                            d="M4 14a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-1a2 2 0 0 1 -2 -2v-3z" />
                                        <path
                                            d="M15 14a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-1a2 2 0 0 1 -2 -2v-3z" />
                                    </svg>
                                    Support Ticket
                                </a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">View</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <!-- Page Body -->
    <div class="page-body">
        <div class="container-fluid">
            <div class="row g-3">
                <!-- Disable Form -->
                <div class="col-md-6 col-12">
                    <div class="card">
                        <!-- Card Header -->
                        <div class="card-header">
                            <h3 class="card-title">View Support Ticket</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <!-- Type -->
                                <div class="mb-3 col-12">
                                    <label for="select-type" class="form-label required">Type</label>
                                    <select type="select-type" class="form-select @error('type') is-invalid @enderror"
                                        id="select-type" name="type" value="" disabled>
                                        @foreach ($type as $key => $value)
                                            <option value="{{ $key }}"
                                                {{ old('type', $supportTicket->type ?? '') == $key ? 'selected' : '' }}>
                                                {{ $value }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="row">
                                <!-- AWB -->
                                <div class="mb-3 col-12" id="awb-wrapper">
                                    <label for="awb" class="form-label required">AWB</label>
                                    <input type="text" class="form-control @error('awb') is-invalid @enderror"
                                        id="awb" name="awb" value="{{ old('awb', $supportTicket->awb ?? '') }}"
                                        placeholder="Enter awb" disabled>
                                    @error('awb')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="row">
                                <!-- Title -->
                                <div class="mb-3 col-12">
                                    <label for="title" class="form-label required">Title</label>
                                    <input type="text" class="form-control @error('title') is-invalid @enderror"
                                        id="title" name="title" value="{{ old('awb', $supportTicket->title ?? '') }}"
                                        placeholder="Enter title" disabled>
                                    @error('title')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="row">
                                <!-- Description -->
                                <div class="col-12">
                                    <label for="description" class="form-label required">Description</label>
                                    <textarea class="form-control  @error('description') is-invalid @enderror" placeholder="Enter description"
                                        id="description" name="description" rows="5" disabled>{!! $supportTicket->description !!}</textarea>
                                    @error('description')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                @if ((Auth::user()->role_id == 1 || Auth::user()->role_id == 2) && $supportTicket->status != 'Closed')
                    <!-- Add Comment -->
                    <div class="col-md-6 col-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Add Comment</h3>
                            </div>
                            <form id="adminForm" action="{{ route('support-tickets.add.comment', $supportTicket->id) }}"
                                method="POST">
                                @csrf
                                @method('PUT')
                                <div class="card-body">
                                    <div class="row">
                                        <!-- Comment -->
                                        <div class="mb-3 col-12">
                                            <label for="comments" class="form-label required">Comment</label>
                                            <textarea class="form-control  @error('comments') is-invalid @enderror" placeholder="Enter comment" id="comments"
                                                name="comments" rows="5"></textarea>
                                            @error('comments')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    @if(Auth::user()->role_id == 1)
                                    <div class="row">
                                        <!-- Type -->
                                        <div class="col-12">
                                            <label for="select-status" class="form-label ">Status</label>
                                            <select type="text"
                                                class="form-select @error('status') is-invalid @enderror"
                                                id="select-status" name="status" value="">
                                                @foreach ($status as $key => $value)
                                                    <option value="{{ $key }}"
                                                        {{ old('status', $supportTicket->status ?? '') == $key ? 'selected' : '' }}>
                                                        {{ $value }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('status')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    @endif
                                </div>
                                <!-- Card Footer -->
                                <div class="card-footer">
                                    <button type="submit" class="btn btn-primary me-3">Add</button>
                                    <a href="{{ route('support-tickets.index') }}" class="btn">Cancel</a>
                                </div>
                            </form>
                        </div>
                    </div>
                @endif

                <!-- View Comment -->
                <div class="col-md-6 col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Comments</h3>
                        </div>
                        <div class="list-group list-group-flush list-group-hoverable">
                            @foreach ($supportTicket->comments as $comment)
                                <div class="list-group-item">
                                    <div class="row">
                                        <div class="col-auto">
                                            <span
                                                class="avatar rounded-circle avatar-sm bg-primary-lt">{{ App\Helpers\DateHelper::namePrifix($comment->user->name ?? '-') }}</span>
                                        </div>
                                        <div class="col">
                                            <a href="#"
                                                class="text-body text-secondary d-block">{{ $comment->user->name ?? 'N/A' }}
                                                {{ $comment->user && $comment->user->role ? '(' . $comment->user->role->name . ')' : '' }}</a>
                                            <div class="d-block  mt-n1">
                                                {{ $comment->comments }}
                                            </div>
                                        </div>
                                        <div class="col-auto text-secondary small">
                                            {{ $comment->created_at->format('d M Y h:i A') }}
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if (session('success'))
        <script>
            // Ensure this code runs after the page is loaded
            document.addEventListener('DOMContentLoaded', function() {
                showSuccessMessage("{{ session('success') }}");
            });
        </script>
    @endif
@endsection

@section('scripts')
    <script>
        // @formatter:off
        document.addEventListener("DOMContentLoaded", function() {
            var el = document.getElementById('select-type');
            if (window.TomSelect) {
                var selectType = new TomSelect(el, {
                    copyClassesToDropdown: false,
                    dropdownParent: 'body',
                    controlInput: '<input>',
                    render: {
                        item: function(data, escape) {
                            if (data.customProperties) {
                                return '<div><span class="dropdown-item-indicator">' + data
                                    .customProperties + '</span>' + escape(data.text) +
                                    '</div>';
                            }
                            return '<div>' + escape(data.text) + '</div>';
                        },
                        option: function(data, escape) {
                            if (data.customProperties) {
                                return '<div><span class="dropdown-item-indicator">' + data
                                    .customProperties + '</span>' + escape(data.text) +
                                    '</div>';
                            }
                            return '<div>' + escape(data.text) + '</div>';
                        },
                    },
                });
                selectType.disable();
            }
        });
        // @formatter:on

        // @formatter:off
        document.addEventListener("DOMContentLoaded", function() {
            var el = document.getElementById('select-status');
            if (window.TomSelect) {
                var selectStatus = new TomSelect(el, {
                    copyClassesToDropdown: false,
                    dropdownParent: 'body',
                    controlInput: '<input>',
                    render: {
                        item: function(data, escape) {
                            if (data.customProperties) {
                                return '<div><span class="dropdown-item-indicator">' + data
                                    .customProperties + '</span>' + escape(data.text) +
                                    '</div>';
                            }
                            return '<div>' + escape(data.text) + '</div>';
                        },
                        option: function(data, escape) {
                            if (data.customProperties) {
                                return '<div><span class="dropdown-item-indicator">' + data
                                    .customProperties + '</span>' + escape(data.text) +
                                    '</div>';
                            }
                            return '<div>' + escape(data.text) + '</div>';
                        },
                    },
                });
            }
        });
        // @formatter:on

        $(document).ready(function() {

            function toggleAwbField() {
                var selectedType = $('#select-type').val();
                if (selectedType === 'Booking') {
                    $('#awb-wrapper').show();
                } else {
                    $('#awb-wrapper').hide();
                    $('#awb').val('');
                }
            }

            toggleAwbField();

            // Listen for any change in Type
            $('#select-type').change(function() {
                toggleAwbField();
            });

        });
    </script>
@endsection