@php
    $status = [
        0 => ['text' => 'Open', 'class' => 'badge badge-info badge-pill', 'btn-class' => 'info'],
        1 => ['text' => 'In Progress', 'class' => 'badge badge-warning badge-pill', 'btn-class' => 'warning'],
        2 => ['text' => 'Closed', 'class' => 'badge badge-dark badge-pill', 'btn-class' => 'dark'],
        3 => ['text' => 'Resolved', 'class' => 'badge badge-success badge-pill', 'btn-class' => 'success'],
        4 => ['text' => 'Reopened', 'class' => 'badge badge-primary badge-pill', 'btn-class' => 'primary'],
        5 => ['text' => 'Cancelled', 'class' => 'badge badge-danger badge-pill', 'btn-class' => 'danger'],
    ];

    $currentStatus = $status[$ticket->status] ?? [
        'text' => 'Unknown',
        'class' => 'badge rounded-pill bg-secondary',
        'btn-class' => 'secondary',
    ];
@endphp

@extends('admin.layouts.layouts')

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

@section('page-css')
    <style>
        .details-table tr {
            border-bottom: 1px solid #e0e0ef;
        }

        .details-table th {
            width: 30%;
        }

        .details-table audio {
            height: 35px;
            width: 80%;
        }

        .ticket-images {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
            gap: 10px;
        }

        .ticket-img,
        .ticket-no-img {
            width: 100%;
            aspect-ratio: 1/1;
            border-radius: 5px;
            box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
            overflow: hidden;
        }

        .ticket-img img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover;
            border-radius: 5px !important;
        }

        .ticket-no-img {
            background: #392c70;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .ticket-no-img i {
            font-size: 30px;
            color: #ffffff;
        }

        .user-img {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 50% !important;
        }
    </style>
@endsection

@section('content')
    {{-- Image View Modal --}}
    <div id="imageModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageModalLabel">Image Preview</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <img src="" id="modalImage" class="img-fluid" alt="Image Preview">
                </div>
            </div>
        </div>
    </div>

    <div class="page-header">
        <h3 class="page-title">
            Employee Ticket
        </h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('employee-ticket-list.index') }}">Employee Tickets</a></li>
                <li class="breadcrumb-item active" aria-current="page">Details</li>
            </ol>
        </nav>
    </div>

    <div class="container py-4">
        <div class="card shadow-sm rounded border-0">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold">🎫 Employee Ticket Details</h5>
                <a href="{{ route('employee-ticket-list.index') }}" class="btn btn-primary btn-sm">
                    <i class="fa fa-arrow-left"></i> Back
                </a>
            </div>
            <div class="card-body bg-white">
                <div class="row">
                    <div class="col-md-6">
                        <div class="table-responsive">
                            <table class="table details-table">
                                <tbody>
                                    <tr>
                                        <th>Ticket ID:</th>
                                        <td>{{ $ticket->id ?? '' }}</td>
                                    </tr>
                                    <tr>
                                        <th>Category:</th>
                                        <td>{{ $ticket->ticketCategory->name ?? '-' }}</td>
                                    </tr>
                                    <tr>
                                        <th>Department:</th>
                                        <td>{{ $ticket->ticketCategory->employeeDepartment->name ?? '-' }}</td>
                                    </tr>
                                    <tr>
                                        <th>Created By:</th>
                                        <td>{{ $ticket->users->name ?? '' }}</td>
                                    </tr>
                                    <tr>
                                        <th>Created Date:</th>
                                        <td>{{ $ticket->created_at->format('d-m-Y h:i A') ?? '' }}</td>
                                    </tr>
                                    @can('employee-ticket-status')
                                        <tr>
                                            <th>Status:</th>
                                            <td>
                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-{{ $currentStatus['btn-class'] }}"
                                                        {{ $ticket->status == 5 ? 'disabled' : '' }}>{{ $currentStatus['text'] }}</button>
                                                    <button type="button"
                                                        class="btn btn-{{ $currentStatus['btn-class'] }} dropdown-toggle dropdown-toggle-split"
                                                        id="dropdownMenuSplitButton5" data-toggle="dropdown"
                                                        aria-haspopup="true" aria-expanded="false"
                                                        {{ $ticket->status == 5 ? 'disabled' : '' }}>
                                                        <span class="sr-only">Toggle Dropdown</span>
                                                    </button>
                                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuSplitButton5">
                                                        <h5 class="dropdown-header">Select Status</h5>
                                                        @foreach ($status as $key => $val)
                                                            <a class="dropdown-item set-status" href="#"
                                                                data-status="{{ $key }}">{{ $val['text'] }}</a>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @endcan
                                    <tr>
                                        <th>Description:</th>
                                        <td>{{ $ticket->description ?? '' }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="table-responsive">
                            <table class="table details-table">
                                <tbody>
                                    @if (isset($ticket->voice_recording) && !empty($ticket->voice_recording))
                                    <tr>
                                        <th>Voice Recording</th>
                                        <td>
                                            <audio controls>
                                                <source src="{{ asset('storage/' . $ticket->voice_recording) }}"
                                                    type="audio/mpeg">
                                                Your browser does not support the audio element.
                                            </audio>
                                        </td>
                                    </tr>
                                    @endif
                                    @if (isset($ticket->ticketImages) && count($ticket->ticketImages) > 0)
                                    <tr>
                                        <th>Ticket Images</th>
                                        <td>
                                            @if (isset($ticket->ticketImages) && count($ticket->ticketImages) > 0)
                                                <div class="ticket-image-main">
                                                    <div class="ticket-images">
                                                        @foreach ($ticket->ticketImages as $ticketImage)
                                                            @if (!empty($ticketImage->image))
                                                                @if ($ticketImage->extension == '.heic' || $ticketImage->extension == '.heif')
                                                                    <a href="{{ asset('storage/' . $ticketImage->image) }}"
                                                                        download>
                                                                        <div class="ticket-no-img">
                                                                            <i class="fa fa-download"></i>
                                                                        </div>
                                                                    </a>
                                                                @else
                                                                    <div class="ticket-img">
                                                                        @if (file_exists('storage/' . $ticketImage->image))
                                                                            <img
                                                                                src="{{ asset('storage/' . $ticketImage->image) }}" class="gallery-img" data-src="{{ asset('storage/' . $ticketImage->image) }}" style="cursor: pointer;">
                                                                        @else
                                                                            <img src="{{ asset('assets/images/noimage/no-image.jpeg') }}"
                                                                                alt="">
                                                                        @endif
                                                                    </div>
                                                                @endif
                                                            @endif
                                                        @endforeach
                                                    </div>
                                                </div>
                                            @endif
                                        </td>
                                    </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @can('employee-ticket-reply')
        <div class="container py-4">
            <div class="card shadow-sm rounded border-0">
                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 fw-bold">🎫 Ticket Reply</h5>
                </div>
                <div class="card-body bg-white">
                    <form id="replyTicketForm" action="{{ route('ticket-reply-store') }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="ticket_id" value="{{ $ticket->id }}">
                        <div class="form-group">
                            <label for="reply" class="form-label">Message</label>
                            <textarea class="form-control" id="reply_message" name="reply_message" rows="5"
                                placeholder="Write your message here..." data-parsley-trigger="keyup" data-parsley-required
                                data-parsley-required-message='Please enter message.' maxlength="1000" data-parsley-maxlength="1000"
                                data-parsley-maxlength-message="Message may not be greater than 1000 character"
                                data-parsley-errors-container='#reply_message_error'></textarea>
                            <span class="text-danger" id="reply_message_error">{{ $errors->first('reply_message') }}</span>
                        </div>
                        <div class="form-group">
                            <label for="attachment" class="form-label">Attach Files</label>
                            <input type="file" class="form-control" id="attachment" name="attachment[]"
                                data-parsley-trigger="keyup" data-parsley-max-file-count="5"
                                data-parsley-filetype="jpg,jpeg,png,pdf,mpeg,mp3,mp4,wav,ogg"
                                data-parsley-errors-container='#attachment_error' multiple>
                            <span class="text-danger" id="attachment_error">{{ $errors->first('attachment') }}</span>
                        </div>
                        <div class="d-flex justify-content-end mt-3">
                            <button type="submit" class="btn btn-primary" id="submitReplyBtn">
                                Reply
                            </button>
                        </div>
                    </form>

                    <hr class="my-4">

                    <div id="reply-list">
                        @include('admin.ticket-management.ajax_ticket_reply')
                    </div>
                </div>
            </div>
        </div>
    @endcan

@endsection
@section('page-js')
    <script type="text/javascript">
        var ticketId = "{{ $ticket->id }}";
        var ticketReplyAjaxList = "{{ route('ticket-reply-list') }}";
        var ticketReplyStore = "{{ route('ticket-reply-store') }}";
        var ticketStatus = "{{ route('ticket-management.status') }}";
    </script>
    <script src="{{ asset('assets/js/admin/ticket-management.js') }}"></script>
@endsection