@extends('client.layouts.app')

@section('content')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <style>

        .section-padding { padding: 50px 0; }
        .text-green { color: green; }
        .hidden { display: none; }
        .komplain-card {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .komplain-header {
            background-color: rgba(255,255,255,0.7);
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            margin-bottom:10px;
        }
        .komplain-title {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 0;
        }
        .komplain-meta {
            font-size: 0.9rem;
            color: #666;
        }
        .komplain-body {
            background-color: rgba(255,255,255,0.7);
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            margin-bottom:10px;
        }
        .komplain-deskripsi{
            margin-bottom:15px
        }
        .tindak-lanjut-container {
            background-color: #e0f7fa;
            border-left: 4px solid #0056b3;
            padding: 15px;
            margin-top: 20px;
        }
        .tindak-lanjut-title {
            font-weight: bold;
            color: #0056b3;
            margin-bottom: 5px;
        }

        .rating {
            display: inline-block;
            position: relative;
            height: 25px;
            line-height: 25px;
            font-size: 25px;
        }

        .rating label {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            cursor: pointer;
        }

        .rating label:last-child {
            position: static;
        }

        .rating label:nth-child(1) {
            z-index: 5;
        }

        .rating label:nth-child(2) {
            z-index: 4;
        }

        .rating label:nth-child(3) {
            z-index: 3;
        }

        .rating label:nth-child(4) {
            z-index: 2;
        }

        .rating label:nth-child(5) {
            z-index: 1;
        }

        .rating label input {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
        }

        .rating label .icon {
            float: right;
            color: transparent;
        }

        .rating label:last-child .icon {
            color: #000;
        }

        .rating:not(:hover) label input:checked ~ .icon,
        .rating:hover label:hover ~ .icon {
            color: #FFD700;
        }

        .rating label input:focus:not(:checked) ~ .icon:last-child {
            color: #000;
            text-shadow: 0 0 5px #FFD700;
        }
            .rating-container {
            margin-top: 20px;
            text-align: center;
        }


        .loading-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            display: none;
        }

        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        th {
            white-space: unset !important;
            vertical-align: top;
        }

        .rounded-corner {
            border-radius: 15px;
            width: 100%;
            max-width: 300px;
        }

        .btn .btn-primary {
            border-color: black !important;
        }


        .timeline {
            width: 85%;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-direction: column;
            padding: 32px 0px 0px 32px;
            border-left: 2px solid #999;
            font-size: 1.125rem;
        }

        .timeline-item {
            display: flex;
            gap: 24px;
            & + * {
                margin-top: 24px;
            }
            & + .extra-space {
                margin-top: 48px;
            }
        }

        .timeline-item-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-left: -52px;
            flex-shrink: 0;
            overflow: hidden;
            /* box-shadow: 0 0 0 6px #fff; */
            svg {
                width: 20px;
                height: 20px;
            }

            &.faded-icon {
                background-color: #ccc;
                color: var(--c-grey-400);
            }

            &.filled-icon {
                background-color: var(--c-blue-500);
                color: #fff;
            }
        }

        .avatar {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            overflow: hidden;
            aspect-ratio: 1 / 1;
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            &.small {
                width: 28px;
                height: 28px;
            }

            img {
                object-fit: cover;
            }
        }

        .comment {
            /* margin-top: 12px; */
            color: var(--c-grey-500);
            border: 1px solid var(--c-grey-200);
            box-shadow: 0 4px 4px 0 var(--c-grey-100);
            border-radius: 6px;
            padding: 10px;
            font-size: 1rem;
        }


        .avatar-list {
            display: flex;
            align-items: center;
            & > * {
                position: relative;
                box-shadow: 0 0 0 2px #fff;
                margin-right: -8px;
            }
        }

        .star-rating {
            direction: rtl;
            display: inline-block;
            cursor: pointer;
        }

        .star-rating input {
            display: none;
        }

        .star-rating label {
            color: #ddd;
            font-size: 24px;
            padding: 0 2px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .star-rating label:hover,
        .star-rating label:hover~label,
        .star-rating input:checked~label {
            color: #ffc107;
        }

    </style>

    <div class="loading-container" id="loadingIndicator">
        <div class="spinner"></div>
    </div>

    <div class="section-padding">
        <div class="container">

            <div class="row">
                <div class="col-md-12 col-lg-6">
                    <h2 class="mb-4" style="color:#28A6DE">Cek Status Komplain</h2>
                    <img src="{{ asset('assets/assets/images/auth/cek status@512p-25fps.gif') }}" alt="" class="img-fluid" loading="lazy" style="width:90%">
                </div>

                <div class="col-md-12 col-lg-6 mt-4 mt-md-0">

                    <form id="komplainForm">
                        <div class="form-group">
                            <label for="jenis-identifikasi" class="form-label">Jenis Identifikasi</label>
                            <select class="form-select" id="jenis-identifikasi" name="jenis_identifikasi">
                                <option value="id">ID Komplain</option>
                                <option value="phone">Nomor HP</option>
                                <option value="email">Email</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="id-komplain" class="form-label">Masukkan Data</label>

                            <input type="text" class="form-control" id="id-komplain" name="id_komplain" placeholder="Masukan ID/No. HP/Email">
                        </div>
                        <button type="submit" class="btn btn-primary" style="border-color: black !important;">Submit</button>
                    </form>

                    <div id="detailKomplain" class="mt-4 hidden">
                        <div class="accordion" id="accordionExample">
                        </div>
                    </div>

                    <div id="notFound" class="mt-4 hidden">
                        <p class="alert alert-danger">Komplain tidak ditemukan.</p>
                    </div>

                </div>
            </div>

        </div>
    </div>

    <script>
        // document.getElementById('komplainForm').submit(false);
        $('#komplainForm').submit(false);
        $("#komplainForm").submit( function () {
            document.getElementById('loadingIndicator').style.display = 'flex';
            const jenisIdentifikasi = document.getElementById('jenis-identifikasi').value;
            const idKomplainInput = document.getElementById('id-komplain').value;

            $.ajaxSetup({
                headers:{}
            });
            $.ajax({
                url: '/api/complain-search?where='+jenisIdentifikasi+'&search='+idKomplainInput,
                type: "GET",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                processData: false,
                success: function (result) {
                    document.getElementById('loadingIndicator').style.display = 'none';
                    if(result['success'] == true) {

                        const detailKomplainDiv = document.getElementById('detailKomplain');
                        detailKomplainDiv.classList.remove('hidden');

                        $("#accordionExample").html('');

                        var len = '';
                        if(result['data'].length == 1) {
                            len = 'show';
                        }
                        result['data'].forEach((element, index) => {
                            var accordionItemHeader = `
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="heading`+index+`">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse`+index+`" aria-expanded="true" aria-controls="collapse`+index+`">
                                            Komplain ID #`+element.id+` (`+convertStringToDateTime(element.created_at)+`) <br>
                                        </button>
                                    </h2>
                                    <div id="collapse`+index+`" class="accordion-collapse collapse `+len+`" aria-labelledby="heading`+index+`" data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                            `;
                            var accordionItemTable = `
                                <div class="komplain-header">
                                    <table>
                                        <tr>
                                            <th width="30%">Nama:</th>
                                            <td width="70%">`+element.name+`</span></td>
                                        </tr>
                                        <tr>
                                            <th>Email:</th>
                                            <td>`+element.email+`</td>
                                        </tr>
                                        <tr>
                                            <th>No HP:</th>
                                            <td>`+element.phone+`</td>
                                        </tr>
                                        <tr>
                                            <th>Kategori:</th>
                                            <td>`+element.complain_category_name+`</td>
                                        </tr>
                                        <tr>
                                            <th>Prioritas:</th>
                                            <td>`+element.priority+`</td>
                                        </tr>
                                        <tr>
                                            <th>Subjek:</th>
                                            <td>`+element.subject+`</td>
                                        </tr>
                                        <tr>
                                            <th>Deskripsi:</th>
                                            <td><span style="white-space: normal;">`+element.description+`</span></td>
                                        </tr>
                                        <tr>
                                            <th>Lampiran:</th>
                                            <td><img class="rounded-corner" src="/uploads/300/`+element.attachment+`" ></td>
                                        </tr>
                                        <tr>
                                            <th>Status:</th>
                                            <td>`+element.status+`</td>
                                        </tr>
                                    </table>
                                </div>
                            `;

                            var accordionItemLog = `
                                <div class="komplain-header">
                                    <ol class="timeline">
                            `;
                            element['log'].forEach(row => {
                                accordionItemLog += `
                                    <li class="timeline-item">
                                        <span class="timeline-item-icon | faded-icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                                                <path fill="none" d="M0 0h24v24H0z" />
                                                <path fill="currentColor" d="M12 13H4v-2h8V4l8 8-8 8z" />
                                            </svg>
                                        </span>
                                        <div class="timeline-item-description">
                                            <span><b>`+row['user_name']+`</b> - `+convertStringToDateTime(row.datetime)+`</span>
                                            <div class="comment">
                                                <p>`+row.status+` - `+row.notes+`</p>
                                            </div>
                                        </div>
                                    </li>
                                `;
                            });
                            accordionItemLog += `
                                    </ol>
                                </div>
                            `;

                            var accordionItemFooter = `
                                        </div>
                                    </div>
                                </div>
                            `;
                            var accordionItem = accordionItemHeader + accordionItemTable + accordionItemLog + accordionItemFooter;

                            $("#accordionExample").append(accordionItem);
                        });

                        var rating = `
                            <div class="rating-container" style="margin-top: 20px">
                                <div class="star-rating animated-stars">
                                    <input type="radio" id="star5" name="rating" value="5" onclick="submitRating(this);">
                                    <label for="star5" class="bi bi-star-fill"></label>
                                    <input type="radio" id="star4" name="rating" value="4" onclick="submitRating(this);">
                                    <label for="star4" class="bi bi-star-fill"></label>
                                    <input type="radio" id="star3" name="rating" value="3" onclick="submitRating(this);">
                                    <label for="star3" class="bi bi-star-fill"></label>
                                    <input type="radio" id="star2" name="rating" value="2" onclick="submitRating(this);">
                                    <label for="star2" class="bi bi-star-fill"></label>
                                    <input type="radio" id="star1" name="rating" value="1" onclick="submitRating(this);">
                                    <label for="star1" class="bi bi-star-fill"></label>
                                </div>
                                <p class="text-muted mt-2">Click untuk memberi penilaian</p>
                            </div>
                        `;
                        $("#accordionExample").append(rating);


                    } else {
                        Swal.fire({
                            icon: "error",
                            title: "Oops...",
                            text: result['message'],
                            confirmButtonColor: '#3A57E8',
                        });
                    }
                }
            });

            return false;
        });

        function submitRating(myRadio) {
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            var datetime = `${year}-${month}-${day}`;

            const jenisIdentifikasi = document.getElementById('jenis-identifikasi').value;
            const idKomplainInput = document.getElementById('id-komplain').value;

            var jsonData = {
                'datetime': datetime,
                'rating': myRadio.value,
                'search': jenisIdentifikasi,
                'complain_id': idKomplainInput,
            };
            $.ajaxSetup({
                    headers:{}
                });
                $.ajax({
                    url: '/api/rating',
                    type: "POST",
                    data: JSON.stringify(jsonData),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    processData: false,
                    success: function (result) {
                        if(result['success'] == true) {
                            Swal.fire({
                                icon: "success",
                                // title: "Komplain berhasil tersimpan.",
                                html: 'Terima kasih, rating anda berhasil tersimpan',
                                confirmButtonColor: '#3A57E8',
                            }).then((result) => {
                                window.location.replace("{{ url('/status') }}");
                            });
                        } else {
                            Swal.fire({
                                icon: "error",
                                title: "Oops...",
                                text: result['message'],
                                confirmButtonColor: '#3A57E8',
                            });
                        }
                    }
                });
        }

    </script>
@endsection