@php
    $erro_heading = $erro_heading ?? "";
    $user = auth()->user()->name;
@endphp

<style>
    .custom-modal {
        border-radius: 10px !important;
        overflow: hidden;
        width: 650px;
    }

    .custom-header {
        background: #24576A;
        color: #fff;
        padding: 20px 15px 15px 15px !important;
    }

    .custom-header .close {
        color: #fff;
        opacity: 1;
    }

    .custom-error-list {
        font-size: 14px;
        color: red;
    }

    .modal-body {
        max-height: 420px;
        overflow-y: auto;
    }

    .error-table {
        width: 100%;
        border-collapse: collapse;
    }

    .error-table th,
    .error-table td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: center;
    }

    .error-table th {
        background-color: #f2f2f2;
    }

    .error-checkbox {
        text-align: center;
    }

    .modal-footer {
        display: flex;
    }
    .modal-footer div {
        flex: 1;
    }
    .modal-footer div:first-child {
        text-align: left;
    }

</style>

@if (session('errors') || session('error'))
    <div class="modal fade error-model" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content custom-modal">
                <div class="modal-header custom-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title"><i class="glyphicon glyphicon-warning-sign"></i> Errors Found</h4>
                </div>
                <div class="modal-body">
                    <table class="error-table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Error Message</th>
                                <th>✔</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $errorMessages = []; @endphp
                            @if (session('errors'))
                                @foreach (session('errors')->all() as $key => $error)
                                    @php $errorMessages[] = ($key + 1) . '. ' . $error; @endphp
                                    <tr>
                                        <td>{{ $key + 1 }}</td>
                                        <td class="custom-error-list">{{ $error }}</td>
                                        <td class="error-checkbox"><input type="checkbox"></td>
                                    </tr>
                                @endforeach
                            @endif
                            @if (session('error'))
                                @php $errorMessages[] = '1. ' . session('error'); @endphp
                                <tr>
                                    <td>1</td>
                                    <td class="custom-error-list">{{ session('error') }}</td>
                                    <td class="error-checkbox"><input type="checkbox"></td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <div>
                        <button type="button" class="btn btn-warning download-errors">
                            {{ __('lang.download_errors') }}
                        </button>
                    </div>
                    <div>
                        <button type="button" class="btn btn-primary" data-dismiss="modal">
                            {{ __('lang.close') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $(".error-model").modal("show");

            $(".error-checkbox input").css({
                "position": "static",
                "left": "auto",
                "opacity": "1"
            });

            $(".download-errors").click(function() {
                let errorHeading = @json($erro_heading);
                let userName = @json($user);
                let errorMessages = @json($errorMessages);
                if (!Array.isArray(errorMessages) || errorMessages.length === 0) {
                    alert("No errors to download.");
                    return;
                }

                let currentDate = new Date();
                let formattedDate = currentDate.toLocaleDateString();
                let formattedTime = currentDate.toLocaleTimeString();

                let fileContent = `${errorHeading}\nDownloaded by: ${userName} Date: ${formattedDate} Time: ${formattedTime}\n\n`;
                fileContent += errorMessages.join("\n");

                let sanitizedFileName = errorHeading.replace(/\s+/g, "_") + "_Errors.txt";

                let blob = new Blob([fileContent], { type: "text/plain" });
                let link = document.createElement("a");

                link.href = URL.createObjectURL(blob);
                link.download = sanitizedFileName;

                document.body.appendChild(link);
                link.click();
                link.remove();
            });

        });
    </script>
@endif