@extend('clientarea.layout')
@section('title'){{ $ticket['tsubject'] }} - {{ beGetConfig('sitename') }}@endsection
@section('headerinclude')
<style>
.invoice-key {
    display: block;
    font-size: 18px;
    color: #464d51;
}
.invoice-val {
    display: block;
    font-size: 14px;
    color: #464d51;
}
</style>
@endsection
@section('content')
<div class="card mb-3">
    <div class="card-header">
        <div>
            <span class="card-title"><i class="ri-coupon-3-line"></i> Talep Bilgileri</span>
        </div>
    </div>
    <div class="card-content">
        <div class="row mb-5 mt-5">
            <div class="col-4 text-center my-3">
                <span class="invoice-key">Talep No</span>
                <span class="invoice-val">#{{ $ticket['tid'] }}</span>
            </div>
            <div class="col-4 text-center my-3">
                <span class="invoice-key">Talep Başlığı</span>
                <span class="invoice-val">{{ $ticket['tsubject'] }}</span>
            </div>
            <div class="col-4 text-center my-3">
                <span class="invoice-key">Departman</span>
                <span class="invoice-val">{{ $ticket['depertment']['tdname'] }}</span>
            </div>
            <div class="col-4 text-center my-3">
                <span class="invoice-key">Talep Durumu</span>
                <span class="invoice-val text-{{ $ticketstatus[$ticket['tstatus']][1] }}">{{ $ticketstatus[$ticket['tstatus']][0] }}</span>
            </div>
            <div class="col-4 text-center my-3">
                <span class="invoice-key">Cevap Durumu</span>
                <span class="invoice-val text-{{ $ticketreplystatus[$ticket['tlastreply']][1] }}">{{ $ticketreplystatus[$ticket['tlastreply']][0] }}</span>
            </div>
            <div class="col-4 text-center my-3">
                <span class="invoice-key">Oluşturulma Tarihi</span>
                <span class="invoice-val">{{ beSpecialTime($ticket['tdateline']) }}</span>
            </div>
        </div>
    </div>
</div>
<div class="card mb-3">
    <div class="card-header">
        <div>
            <span class="card-title"><i class="ri-coupon-3-line"></i> Talebi Cevapla</span>
        </div>
        <div>
            <i class="ri-add-line ticket-reply" role="button"></i>
        </div>
    </div>
    <div class="card-content no-p reply-ticket">
        <form id="beTicketForm">
            <div class="row p-3">
                <div class="col-12 mb-3">
                    <textarea class="form-control" name="message" id="messageArea" rows="8" placeholder="Talep içeriğini giriniz"></textarea>
                </div>
                <div class="col-12 mb-3 row-center row-flex">
                    <a href="#" class="btn btn-special beSendReply">Cevapla</a>
                </div>
                @if($ticket_user_files)
                <div class="col-12">
                    <div class="form-group">
                        <label for="#">Dosya Yükle</label>
                        <input type="file" id="fileUpload" multiple>
                    </div>
                    <div class="row flex-column p-3" id="uploadList">

                    </div>
                </div>
                @endif
            </div>
        </form>
    </div>
</div>
{{ $posts }}
@endsection
@section('js')
<script src="assets/plugins/custom/tinymce/tinymce.bundle.js?v=32"></script>
<script>
    var counter = 0;
    $(document).ready(function(){
        $(".reply-ticket").hide();
    });
    $(".ticket-reply").on("click",function(){
        if($(this).hasClass("ri-add-line")){
            $(this).removeClass("ri-add-line").addClass("ri-subtract-line");
            $(".reply-ticket").show("slow");
        }
        else{
            $(this).removeClass("ri-subtract-line").addClass("ri-add-line");
            $(".reply-ticket").hide("slow");
        }
    });
    $(".beSendReply").on("click", function() {
        var data = $("#beTicketForm").serialize();
        data += "&tid={{ $ticket['tid'] }}";
        for(let i = 0; i < counter+1; i++){
            var aid = $("#uploadItemProcess"+i).data("aid");
            if(aid){
                data += "&aidlist[]="+aid;
            }
        }
        beClassRequestItem($(this), "{{ beGetRoute('client.ticket.postticket.post') }}", data);
        return false;
    });
    @if($ticket_user_files)
    $("#fileUpload").change(function(e){
        uploadFiles(e.target.files);
    });
    $("#uploadList").on("click",".btnDeleteUploadItem",function(){
        var aid = $(this).data("aid");
        var key = $(this).data("key");
        $.ajax({
            url: "{{ beGetRoute('client.file.delete') }}",
            type: "post",
            async: true,
            data: {aid:aid},
            dataType: "json",
            crossDomain: true,
            success: function(response){
                if(response.status){
                    $("#uploadItem"+key).remove();
                }
                else{
                    Swal.fire("Bir Hata Oluştu",response.message,"error");
                }
            }
        });
    });
    function uploadFiles(files){
        var formdata = null;
        var length = files.length;
        var i;
        for (i = 0; i < length; i++) {
            formdata = new FormData();
            counter += 1;
            formdata.append("file",files[i]);
            uploadFile(formdata,counter);
            $("#uploadList").append('\
                <div class="card card-blue col-md-12 mb-3 p-3" id="uploadItem'+counter+'">\
                    <div>\
                        <span>'+files[i]["name"]+'<span>\
                        <span class="d-block">'+Number((files[i]["size"]/1000000).toFixed(1))+' MB<span>\
                    </div>\
                    <div>\
                        <div class="row-flex flex-column w-100">\
                            <div class="row-flex row-space mt-3 mb-2 w-100">\
                                <span class="fw-bold fs-6" id="uploadItemProgess'+counter+'">0%</span>\
                                <a data-bs-toggle="tooltip" title="Sil" class="btn btn-danger btnDeleteUploadItem" id="uploadItemProcess'+counter+'">\
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="15" fill="currentColor"><path fill="none" d="M0 0h24v24H0z"></path><path d="M7 4V2h10v2h5v2h-2v15a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6H2V4h5zM6 6v14h12V6H6zm3 3h2v8H9V9zm4 0h2v8h-2V9z"></path></svg>\
                                </a>\
                            </div>\
                        </div>\
                    </div>\
                </div>\
            ');
        }	
    }
    function uploadFile(file,i){
        $.ajax({
            url: "{{ beGetRoute('client.file.upload') }}",
            type : "post",
            data : file,
            contentType : false,
            processData : false,
            dataType : "json",
            crossDomain: true,
            xhr: function() {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener("progress",function(e){
                    if(e.lengthComputable){
                        var percentComplete = (e.loaded/e.total)*100;
                        $("#uploadItemProgess"+i).html(Number((percentComplete).toFixed())+"%");
                    }
                }, false);
                return xhr;
            },
            success:function(response){
                if(response.status){
                    $("#uploadItemProcess"+i).attr("data-aid",response.aid);
                    $("#uploadItemProcess"+i).attr("data-key",i);
                }
                else{
                    $("#uploadItem"+i).removeClass("bg-light-primary").addClass("bg-light-danger");
                    Swal.fire("Bir Hata Oluştu",response.message,"error");
                }
            }
        });
    }
    @endif
</script>
@endsection