@extends('client.layouts.client')
@section('title', 'Hỗ trợ Ticket')

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <div class="ribbon ribbon-primary ribbon-clip">HỖ TRỢ TICKET</div>
            </div>
            <div class="card-body pc-component">

                {{-- Tabs --}}
                <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" href="#pills-home"
                            role="tab" aria-controls="pills-home" aria-selected="true">Danh sách</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" href="#pills-profile"
                            role="tab" aria-controls="pills-profile" aria-selected="false">Tạo mới</a>
                    </li>
                </ul>

                <div class="tab-content" id="pills-tabContent">
                    {{-- Danh sách --}}
                    <div class="tab-pane fade active show" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                        <form action="" class="mb-3">
                            <div class="row">
                                <div class="col-md-3 mb-3">
                                    <input type="text" class="form-control" name="search" value="{{ request('search') }}" placeholder="Tìm kiếm mã đơn hàng">
                                </div>
                                <div class="col-md-3 mb-3">
                                    <select class="form-select" name="replied_status">
                                        <option value="">Trạng thái</option>
                                        <option value="">Tất cả</option>
                                        <option value="0" {{ request('replied_status') === '0' ? 'selected' : '' }}>Chưa xử lý</option>
                                        <option value="1" {{ request('replied_status') === '1' ? 'selected' : '' }}>Đang xử lý</option>
                                        <option value="2" {{ request('replied_status') === '2' ? 'selected' : '' }}>Đã xử lý</option>
                                    </select>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <button type="submit" class="btn btn-primary"><i class="ti ti-search"></i> Tìm kiếm</button>
                                </div>
                            </div>
                        </form>

                        <div class="table-responsive">
                            <table class="table table-striped table-bordered nowrap dataTable">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Thao tác</th>
                                        <th>Mã Đơn Hàng</th>
                                        <th>Nội dung</th>
                                        <th>Độ ưu tiên</th>
                                        <th>Phản hồi</th>
                                        <th>Trạng thái</th>
                                        <th>Thời gian</th>
                                    </tr>
                                </thead>
                                <tbody class="fw-bold">
                                    @forelse ($ticket as $tickets)
                                    <tr>
                                        <td>{{ $tickets->id }}</td>
                                        <td>
                                            <!--<a href="javascript:void(0)" class="btn btn-sm btn-success btn-detail" data-id="{{ $tickets->id }}">-->
                                            <!--    <i class="ti ti-eye"></i>-->
                                            <!--</a>-->
                                        </td>
                                        <td>{{ $tickets->title }}</td>
                                        <td>{!! \Str::limit(strip_tags($tickets->body), 100) !!}</td>
                                        <td>{{ $tickets->level }}</td>
                                        <td>{!! \Str::limit(strip_tags($tickets->reply), 100) !!}</td>
                                        <td>{!! statusTicket($tickets->status) !!}</td>
                                        <td>{{ $tickets->created_at->diffForHumans() }}</td>
                                    </tr>
                                    @empty
                                    @include('admin.components.table-search-not-found', ['colspan' => 8])
                                    @endforelse
                                </tbody>
                            </table>
                            <div class="d-flex justify-content-center align-items-center">
                                {{ $ticket->appends(request()->all())->links('pagination::bootstrap-4') }}
                            </div>
                        </div>
                    </div>

                    {{-- Tạo mới --}}
                    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                        <form action="{{ route('ticket.post') }}" method="POST">
                            @csrf

                            {{-- Mã đơn hàng --}}
                            <div class="mb-3">
                                <label for="title" class="form-label fw-bold">Mã Đơn Hàng</label>
                                <input type="text" class="form-control" name="title" id="title" placeholder="Nhập mã đơn hàng" value="{{ old('title') }}">
                                @error('title')
                                    <div class="text-danger small mt-1">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Nội dung --}}
                            <div class="mb-3">
                                <label for="body" class="form-label fw-bold">Nội dung yêu cầu</label>
                                <textarea class="form-control" id="body" name="body" rows="6" placeholder="Nhập nội dung chi tiết">{{ old('body') }}</textarea>
                                @error('body')
                                    <div class="text-danger small mt-1">{{ $message }}</div>
                                @enderror
                            </div>

                            {{-- Độ ưu tiên --}}
                            <div class="mb-3">
                                <label for="level" class="form-label fw-bold">Độ ưu tiên</label>
                                <select class="form-select" name="level" id="level">
                                    <option value="Thấp" {{ old('level') == 'Thấp' ? 'selected' : '' }}>Thấp</option>
                                    <option value="Trung Bình" {{ old('level') == 'Trung Bình' ? 'selected' : '' }}>Trung Bình</option>
                                    <option value="Cao" {{ old('level') == 'Cao' ? 'selected' : '' }}>Cao</option>
                                    <option value="Khẩn Cấp" {{ old('level') == 'Khẩn Cấp' ? 'selected' : '' }}>Khẩn Cấp</option>
                                </select>
                                @error('level')
                                    <div class="text-danger small mt-1">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <button class="btn btn-primary col-12">
                                    <i class="fas fa-save"></i> Gửi yêu cầu hỗ trợ
                                </button>
                            </div>
                        </form>
                    </div>
                </div> {{-- end tab-content --}}
            </div>
        </div>
    </div>
</div>

{{-- Modal chi tiết ticket --}}
<div class="modal fade" id="ticketDetailModal" tabindex="-1" aria-labelledby="ticketDetailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Chi tiết Ticket</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Đóng"></button>
            </div>
            <div class="modal-body">
                <p><strong>Tiêu đề:</strong> <span id="modal-title"></span></p>
                <p><strong>Độ ưu tiên:</strong> <span id="modal-level"></span></p>
                <p><strong>Trạng thái:</strong> <span id="modal-status"></span></p>
                <p><strong>Thời gian tạo:</strong> <span id="modal-created"></span></p>
                <hr>
                <p><strong>Nội dung:</strong></p>
                <div id="modal-body-content" class="mb-3"></div>
                <hr>
                <p><strong>Phản hồi:</strong></p>
                <div id="modal-reply-content" class="alert alert-secondary"></div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<!-- TinyMCE -->
<script src="/assets/js/plugins/tinymce/tinymce.min.js"></script>
<script>
    tinymce.init({
        selector: '#body',
        height: 300,
        menubar: false,
        plugins: 'link image lists code preview',
        toolbar: 'undo redo | bold italic underline | bullist numlist | link image | code preview',
        content_style: 'body { font-family: Inter, sans-serif; font-size: 14px }'
    });
</script>

<!-- Toastr + jQuery -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

@if(session('success'))
<script>toastr.success("{{ session('success') }}");</script>
@endif

@if($errors->any())
<script>toastr.error("Vui lòng kiểm tra lại thông tin nhập vào.");</script>
@endif

<!-- Ajax Modal Detail -->
<script>
    $(document).on('click', '.btn-detail', function () {
        const id = $(this).data('id');
        $.ajax({
            url: `/ticket/detail/${id}`,
            type: 'GET',
            success: function (data) {
                $('#modal-title').text(data.title);
                $('#modal-level').text(data.level);
                $('#modal-status').html(data.status);
                $('#modal-created').text(data.created_at);
                $('#modal-body-content').html(data.body);
                $('#modal-reply-content').html(data.reply);
                new bootstrap.Modal(document.getElementById('ticketDetailModal')).show();
            },
            error: function () {
                toastr.error('Không thể tải chi tiết ticket. Vui lòng thử lại.');
            }
        });
    });
</script>
@endsection