@extends('layout.app')
@section('title', ' Waiting Room | Bugs Listing')

@section('custom-css')
    <style>
    </style>
@endsection

@section('content')
    <div class="row page-titles">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active"><a href="{{ route('dashboard') }}">{{ __('translations.Dashboard') }}</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0)">{{ __('translations.Bugs Listing') }}</a></li>
        </ol>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between" style="width: 100%">
                        <h4 class="card-title" style="direction: ltr; align-content: center">
                            {{ __('translations.Bugs Listing') }}</h4>
                        <button type="button" class="btn btn-primary mb-2" data-bs-toggle="modal"
                            data-bs-target="#reportBug">{{ __('translations.Report Bug') }}</button>
                    </div>

                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table wrap mb-4" id="example">
                            <thead>
                                <tr>

                                    <th>{{ __('translations.No.') }}</th>
                                    <th>{{ __('translations.Bug Title') }}</th>
                                    <th>{{ __('translations.Description') }}</th>
                                    <th>{{ __('translations.Attachments') }}</th>
                                    <th>{{ __('translations.Priority') }}</th>
                                    <th>{{ __('translations.Status') }}</th>
                                    <th>{{ __('translations.Reported Date') }}</th>

                                </tr>
                            </thead>

                            <tbody>
                                <tr>

                                    <td>1</td>
                                    <td>{{ __('translations.Unable to Report a bug') }}</td>
                                    <td>{{ __('translations.Unable to report a bug, Form Submission is not working') }}
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="icon-img-bx sm me-2">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="53" height="53"
                                                    viewBox="0 0 53 53">
                                                    <g transform="translate(0.243)">
                                                        <rect width="53" height="53" rx="12"
                                                            transform="translate(-0.243)" fill="#c5c5c5" />
                                                        <g transform="translate(-0.243)">
                                                            <rect data-name="placeholder" width="53" height="53"
                                                                rx="12" fill="#2769ee" />
                                                            <ellipse data-name="Ellipse 12" cx="13.243" cy="13.43"
                                                                rx="13.243" ry="13.43"
                                                                transform="translate(11.152 14.922)" fill="#fff" />
                                                            <ellipse data-name="Ellipse 11" cx="8.016" cy="8.207"
                                                                rx="8.016" ry="8.207"
                                                                transform="translate(27.183 11.191)" fill="#ffe70c"
                                                                style="mix-blend-mode: multiply;isolation: isolate" />
                                                        </g>
                                                    </g>
                                                </svg>
                                            </div>

                                        </div>
                                    </td>
                                    <td><span class="badge bg-warning">{{ __('translations.Medium') }}</span></td>
                                    <td><span class="badge badge-dark">{{ __('translations.Pending') }}</span></td>
                                    <td>
                                        {{ __('translations.Nov 21th 2024 09:21 AM') }}
                                    </td>


                                </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade " id="reportBug" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('translations.Report A Bug') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                    </button>
                </div>
                <div class="modal-body">
                    <form method="post" id="Report">
                        <div class="form-group mb-3">
                            <label>{{ __('translations.Title') }}</label>
                            <input class="form-control" name="title" required>
                        </div>
                        <div class="form-group mb-3">
                            <label>{{ __('translations.Description') }}</label>
                            <textarea class="form-control" name="title" rows="4"></textarea>
                        </div>
                        <div class="form-group mb-3">
                            <label>{{ __('translations.Attachments') }}</label>
                            <input class="form-control" type="file" id="formFile">
                        </div>
                        <div class="form-group mb-3">
                            <label>{{ __('translations.Priority') }}</label>
                            <select class="form-control" name="priority">
                                <option value="">-- {{ __('translations.Select') }} --</option>
                                <option value="Low">{{ __('translations.Low') }}</option>
                                <option value="Medium">{{ __('translations.Medium') }}</option>
                                <option value="High">{{ __('translations.High') }}</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger"
                        data-bs-dismiss="modal">{{ __('translations.Close') }}</button>
                    <button type="button" class="btn btn-primary">{{ __('translations.Save Changes') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('custom-script')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            document.querySelector("#saveChanges").addEventListener("click", function() {
                const form = document.getElementById("Report");
                const formData = new FormData(form);
                const saveButton = document.querySelector("#saveChanges");

                // Change button text to spinner
                saveButton.innerHTML =
                    `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>`;
                saveButton.disabled = true; // Disable button while processing

                fetch("{{ route('submit.bug') }}", {
                        method: "POST",
                        headers: {
                            "X-CSRF-TOKEN": "{{ csrf_token() }}",
                        },
                        body: formData,
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            notyf.success({
                                message: "Bug reported successfully",
                                duration: 3000
                            });
                            setTimeout(() => location.reload(), 2000);
                        } else {
                            let errorMessage = "Error reporting bug.";

                            // If validation errors exist, format and display them
                            if (data.errors) {
                                errorMessage = Object.values(data.errors).flat().join("<br>");
                            } else if (data.error) {
                                errorMessage = data.error;
                            }

                            notyf.error({
                                message: errorMessage,
                                duration: 5000
                            });

                            // Revert button back to original state
                            saveButton.innerHTML = "Save changes";
                            saveButton.disabled = false;
                        }
                    })
                    .catch(error => {
                        console.error("Fetch Error:", error);
                        notyf.error({
                            message: "Something went wrong! Please check your internet connection.",
                            duration: 4000
                        });

                        // Revert button back to original state
                        saveButton.innerHTML = "Save changes";
                        saveButton.disabled = false;
                    });
            });
        });
    </script>
@endsection