@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">Permit</h2>
                                    <p>Detail data</p>
                                </div>
                            </div>
                            <div style="display: flex;">
                                <!--  <a href="{{ url("/admin/permit/".$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">Name</h6>
                            <p id="user_name"></p>
                        </div>
                        <div class="mt-2">
                            <h6 class="mb-1">Role</h6>
                            <p id="role_name"></p>
                        </div>
                        <div class="mt-2">
                            <h6 class="mb-1">Division</h6>
                            <p id="division_name"></p>
                        </div>
                        <div class="mt-2">
                            <h6 class="mb-1">Level</h6>
                            <p id="level_name"></p>
                        </div>
                        <div class="mt-2">
                            <hr style="height: 2px">
                        </div>
                        <div class="mt-2">
                            <h6 class="mb-1">Date</h6>
                            <p id="date"></p>
                        </div>
                        <div class="mt-2">
                            <h6 class="mb-1">Category</h6>
                            <p id="category"></p>
                        </div>
                        <div class="mt-2">
                            <h6 class="mb-1">Description</h6>
                            <p id="description"></p>
                        </div>
                        <div class="mt-2">
                            <h6 class="mb-1">Notes</h6>
                            <p id="notes"></p>
                        </div>
                        <div class="mt-2">
                            <h6 class="mb-1">Status</h6>
                            <p id="status"></p>
                        </div>
                        <div class="mt-2">
                            <h6 class="mb-1">Image</h6>
                            <img id="picture" width="300px" style="border-radius: 2%;">
                        </div>
                        <div class="mt-2">
                            <h6 class="mb-1">Pengajuan</h6>
                            <p id="created_at"></p>
                        </div>
                        <div class="mt-4">
                            <button type="button" class="btn btn-success" onclick="actionPermit({{$id}}, 'Disetujui')">Setujui</button>
                            <button type="button" class="btn btn-danger" onclick="actionPermit({{$id}}, 'Ditolak')">Tolak</button>
                        </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/permit/{{$id}}',
            type: "GET",
            dataType: "json",
            processData: false,
            success: function (result) {
                if(result['success'] == true) {
                    $("#detail-data-success").show();
                    $("#detail-data-failed").hide();

                    $('#user_name').html(result['data']['user_name']);
                    $('#role_name').html(result['data']['role_name']);
                    $('#division_name').html(result['data']['division_name']);
                    $('#level_name').html(result['data']['level_name']);
                    $('#date').html(convertStringToDate(result['data']['date']));
                    $('#notes').html(result['data']['notes']);
                    $("#picture").attr("src", "{{ url('/') }}/" + "uploads/800/" + result['data']['image']);
                    $('#created_at').html(convertStringToDateTime(result['data']['created_at']));

                    if (result['data']['category'].includes('Keterlambatan')) {
                        $('#category').html('<span class="badge bg-warning">'+result['data']['category']+'</span>');
                    } else if (result['data']['category'].includes('Ketidakhadiran')) {
                        $('#category').html('<span class="badge bg-danger">'+result['data']['category']+'</span>');
                    } else {
                        $('#category').html('<span class="badge bg-gray">'+result['data']['category']+'</span>');
                    }

                    if (result['data']['description'].includes('Izin')) {
                        $('#description').html('<span class="badge bg-warning">'+result['data']['description']+'</span>');
                    } else if (result['data']['description'].includes('Cuti')) {
                        $('#description').html('<span class="badge bg-danger">'+result['data']['description']+'</span>');
                    } else {
                        $('#description').html('<span class="badge bg-gray">'+result['data']['description']+'</span>');
                    }

                    if (result['data']['status'].includes('Disetujui')) {
                        $('#status').html('<span class="badge bg-success">'+result['data']['status']+'</span>');
                    } else if (result['data']['status'].includes('Ditolak')) {
                        $('#status').html('<span class="badge bg-danger">'+result['data']['status']+'</span>');
                    } else {
                        $('#status').html('<span class="badge bg-gray">'+result['data']['status']+'</span>');
                    }

                } 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 actionPermit(id, notes) {

            var formdata = {
                'notes': notes,
                'is_active': 1
            };
            $.ajaxSetup({
                headers:{
                    'Authorization': "Bearer {{$session_token}}"
                }
            });
            $.ajax({
                url: '/api/permit/{{$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/permit') }}");
                        });
                    } else {
                        Swal.fire({
                            icon: "error",
                            title: "Oops...",
                            text: result['message'],
                            confirmButtonColor: '#3A57E8',
                        });
                    }
                }
            });
        }

    </script>
@endsection