@extends('admin.layouts.app')

@section('content')
    <div class="conatiner-fluid content-inner mt-n5 py-0" style="margin-top: 100px !important;">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <div class="flex-wrap d-flex justify-content-between align-items-center">
                            <div>
                                <div class="header-title">
                                    <h2 class="card-title">Letter</h2>
                                    <p>Detail data</p>
                                </div>
                            </div>
                            <div style="display: flex;">
                                <!--  <a href="{{ url("/admin/letter/".$id."/edit") }}" class="btn btn-sm btn-icon btn-warning flex-end" data-bs-toggle="tooltip" aria-label="Edit" data-bs-original-title="Edit">
                                    <span class="btn-inner">
                                        <svg class="icon-20" width="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M11.4925 2.78906H7.75349C4.67849 2.78906 2.75049 4.96606 2.75049 8.04806V16.3621C2.75049 19.4441 4.66949 21.6211 7.75349 21.6211H16.5775C19.6625 21.6211 21.5815 19.4441 21.5815 16.3621V12.3341" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M8.82812 10.921L16.3011 3.44799C17.2321 2.51799 18.7411 2.51799 19.6721 3.44799L20.8891 4.66499C21.8201 5.59599 21.8201 7.10599 20.8891 8.03599L13.3801 15.545C12.9731 15.952 12.4211 16.181 11.8451 16.181H8.09912L8.19312 12.401C8.20712 11.845 8.43412 11.315 8.82812 10.921Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                            <path d="M15.1655 4.60254L19.7315 9.16854" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        </svg>
                                    </span>
                                </a>
                                &nbsp;
                              <button onclick="removeData({{$id}})" class="btn btn-sm btn-icon btn-danger flex-end" data-bs-toggle="tooltip" aria-label="Delete" data-bs-original-title="Delete">
                                    <span class="btn-inner">
                                        <svg class="icon-20" width="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor">
                                            <path d="M19.3248 9.46826C19.3248 9.46826 18.7818 16.2033 18.4668 19.0403C18.3168 20.3953 17.4798 21.1893 16.1088 21.2143C13.4998 21.2613 10.8878 21.2643 8.27979 21.2093C6.96079 21.1823 6.13779 20.3783 5.99079 19.0473C5.67379 16.1853 5.13379 9.46826 5.13379 9.46826" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                            <path d="M20.708 6.23975H3.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                            <path d="M17.4406 6.23973C16.6556 6.23973 15.9796 5.68473 15.8256 4.91573L15.5826 3.69973C15.4326 3.13873 14.9246 2.75073 14.3456 2.75073H10.1126C9.53358 2.75073 9.02558 3.13873 8.87558 3.69973L8.63258 4.91573C8.47858 5.68473 7.80258 6.23973 7.01758 6.23973" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        </svg>
                                    </span>
                                </button>-->
                            </div>
                        </div>
                    </div>
                    <div class="card-body" id="detail-data-success" style="display: none;">
                        <div class="mt-2">
                            <h6 class="mb-1">Category</h6>
                            <p id="category"></p>
                        </div>
                        <div class="mt-2">
                            <h6 class="mb-1">From</h6>
                            <p id="from"></p>
                        </div>
                        <div class="mt-2">
                            <h6 class="mb-1">To</h6>
                            <p id="to"></p>
                        </div>
                        <div class="mt-2">
                            <h6 class="mb-1">City</h6>
                            <p id="city"></p>
                        </div>
                        <div class="mt-2">
                            <h6 class="mb-1">Date</h6>
                            <p id="date"></p>
                        </div>
                        <div class="mt-2">
                            <h6 class="mb-1">Number</h6>
                            <p id="number"></p>
                        </div>
                        <div class="mt-2">
                            <h6 class="mb-1">Signature</h6>
                            <p id="signature"></p>
                        </div>

                        <div class="mt-2">
                            <h6 class="mb-1">Content</h6>
                            <p id="content"></p>
                        </div>
                        <div class="mt-2">
                            <h6 class="mb-1">Created By</h6>
                            <p id="created_name"></p>
                        </div>
                        <div class="mt-2">
                            <h6 class="mb-1">Status Active</h6>
                            <p id="is_active"></p>
                        </div>

                        <div class="mt-2">
                            <h6 class="mb-1">Tanda Tangan</h6>
                            <p id="created_name"></p>
                            <div id="created_picture_container" class="mt-2">
                                <img id="created_picture" src="" alt="Created Picture" style="max-width: 150px; border-radius: 10px; display: none;">
                            </div>
                        </div>

                    </div>
                    <div class="card-body" id="detail-data-failed" style="display: none;">
                        <p id="message"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $("#detail-data-success").hide();
        $("#detail-data-failed").hide();

        $.ajaxSetup({
            headers:{
                'Authorization': "Bearer {{$session_token}}"
            }
        });
        $.ajax({
            url: '/api/letter/{{$id}}',
            type: "GET",
            dataType: "json",
            processData: false,
            success: function (result) {
                if(result['success'] == true) {
                    $("#detail-data-success").show();
                    $("#detail-data-failed").hide();

                    $('#category').html(result['data']['category']);
                    $('#from').html(result['data']['from']);
                    $('#to').html(result['data']['to']);
                    $('#city').html(result['data']['city']);
                    $('#date').html(convertStringToDate(result['data']['date']));
                    $('#number').html(result['data']['number']);
                    $('#signature').html(result['data']['signature']);
                    $('#created_name').html(result['data']['created_name']);
                    if(result['data']['is_active'] == true) {
                        $('#is_active').html('<span class="badge bg-success">Active</span>');
                    } else {
                        $('#is_active').html('<span class="badge bg-danger">Not Active</span>');
                    }

                    var content_json = JSON.parse(result['data']['content']);
                    var content_string = '';
                    console.log(content_json);
                    Object.keys(content_json).forEach(function(key) {
                        console.log(key);
                        console.log(content_json[key]);
                        content_string += '<b>'+key+'</b><br>';
                        content_string += content_json[key] + '<br><br>';
                    });
                    $('#content').html(content_string);


                    // Tampilkan gambar jika ada
                              if (result['data']['created_picture']) {
                        $("#created_picture").attr("src", "{{ url('/') }}/" + "uploads/800/" + result['data']['created_picture']);
                        $('#created_picture').show(); // Menampilkan gambar
                    } else {
                        $('#created_picture').hide(); // Menyembunyikan gambar jika tidak ada
                    }


                } else {
                    $("#detail-data-success").hide();
                    $("#detail-data-failed").show();

                    $('#message').html(result['message']);
                }
            },
            fail: function () {
                $("#detail-data-success").hide();
                $("#detail-data-failed").show();

                $('#message').html(result['message']);
            }
        });

        function actionLetter(id, notes) {

            var formdata = {
                'notes': notes,
                'is_active': 1
            };
            $.ajaxSetup({
                headers:{
                    'Authorization': "Bearer {{$session_token}}"
                }
            });
            $.ajax({
                url: '/api/letter/{{$id}}',
                type: "PUT",
                data: JSON.stringify(formdata),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                processData: false,
                success: function (result) {
                    if(result['success'] == true) {
                        Swal.fire({
                            icon: "success",
                            title: "Success",
                            text: result['message'],
                            confirmButtonColor: '#3A57E8',
                        }).then((result) => {
                            window.location.replace("{{ url('/admin/letter') }}");
                        });
                    } else {
                        Swal.fire({
                            icon: "error",
                            title: "Oops...",
                            text: result['message'],
                            confirmButtonColor: '#3A57E8',
                        });
                    }
                }
            });
        }

    </script>
@endsection