@extends('admin.setting.index')

@section('sub_content')
    <div class="company-detail-body">
        <div class="company-detail-top-bar py-3 d-flex justify-content-end gap-2">
            <button class="btn btn--sm btn--base me-1" data-bs-toggle="modal" data-bs-target="#bugModal"><i class="las la-bug"></i> @lang('Report a bug')</button>
            <a href="https://viserlab.com/support" target="_blank" class="btn btn--sm btn--secondary"><i class="las la-headset"></i> @lang('Request for Support')</a>
        </div>

        <div class="company-detail-body-inner p-0">
            <div class="table-scroller">
                <table class="table">
                    <thead>
                        <tr>
                            <th>@lang('Type')</th>
                            <th>@lang('Message')</th>
                            <th>@lang('Status')</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($reports as $report)
                            <tr>
                                <td>{{ isset($report->req_type) ? $report->req_type : '' }}</td>
                                <td class="text-center white-space-wrap">{{ isset($report->message) ? $report->message : '' }}</td>
                                <td><span class="badge badge--{{ isset($report->status_class) ? $report->status_class : '' }}">{{ isset($report->status_text) ? $report->status_text : '' }}</span></td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="100%">
                                    <x-empty-message message="No data found" />
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table><!-- table end -->
            </div>
        </div>
       
    </div>

    <div class="modal custom--modal fade" id="bugModal" tabindex="-1" role="dialog" aria-labelledby="bugModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="bugModalLabel">@lang('Report & Request')</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>
                <form class="disableSubmission" method="post">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="form--label style-two">@lang('Type')</label>
                            <select class="form--control md-style" name="type" required>
                                <option value="bug" @selected(old('type') == 'bug')>@lang('Report Bug')</option>
                                <option value="feature" @selected(old('type') == 'feature')>@lang('Feature Request')</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form--label style-two">@lang('Message')</label>
                            <textarea class="form--control md-style" name="message" rows="5" required>{{ old('message') }}</textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn--base btn--md w-100">@lang('Submit')</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection


@push('script')
    <script>
        (function($) {
            "use strict";


        })(jQuery);
    </script>
@endpush

@push('style')
    <style>
        textarea.langKeys {
            height: 400px;
        }

        .flag-wrapper-thumb {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .flag-wrapper-thumb img {
            height: 40px;
            width: 40px;
            border-radius: 50%;
            overflow: hidden;
        }

        .table-scroller {
            height: auto;
        }

        .table-scroller .table {
            min-width: 500px;
        }
    </style>
@endpush
