@extends(backpack_view('blank'))
@section('content')
<style>


</style>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container-fluid">
    <h2>
      <span class="text-capitalize">Project Defect</span>
      <small  class="animated fadeIn" style="display: inline-flex;">
        <a href="{{ route('project.index')}}" class="ml-1">
            Back to all projects</a></small>
    </h2>
  </div>
<div class="container">
    <div id="timeline-1" class="">
		<div class="row">
			<div class="col-xs-12 col-sm-10 col-sm-offset-1">
				<div class="timeline-container" >
                    <div class="timeline-items">
						<div class="timeline-item clearfix">
							<div class="timeline-info">
                                <i class="timeline-indicator ace-icon fa fa-qrcode btn btn-facebook green text-white"></i>
							</div>
							<div class="widget-box transparent card-style card">

                                <div class="widget-body">
									<div class="widget-main ml-3">
                                            <span class="font-14"><b>Project Info</b> <br>
                                                <b>Project Name</b>    : {{ $data->name }} <br>
                                                <b>Address</b>         : {{ $data->block_no }} {{ $data->road_no }}  {{ $data->road_name }}  {{ $data->residence }}  {{ $data->country_name }} {{ $data->postal_code }} <br>
                                                <b>Created At</b>      : {{ date("d-m-Y", strtotime($data->created_at)) }} <br>
                                                <b>Total Defect</b>    : {{ $data->count}}
                                            </span>
                                            </div>
									</div>
                                    <div class="d-flex justify-content-end">
                                        <a href="{{ Request::url()}}/print" target="_blank">  <span class="widget-toolbar no-border mr-1" ><button class="badge bg-info color-white px-5" style="border:none">Print Out <i class="nav-icon la la-print"></i></button> </span></a>
                                    </div>
								</div>
							</div>
						</div>

                        <div id="timeline">

                        </div>
                        <div class="d-flex justify-content-center ml-5 mt-5">
                            <button class="btn  btn-github rounded-pill btn-sm mx-auto" data-page="1" id="btn-load-more-defect"> Load More  <i class="nav-icon la la-angle-double-right"></i></button>
                        </div>
				</div>
			</div>
		</div>
	</div>
</div>


 @endsection


 @section('after_styles')

 <link rel="stylesheet" href="{{ asset('css/project.css')}}">
 <link rel="stylesheet" href="{{ asset('vendors/lightgallery/lightgallery.min.css')}}">
     <link rel="stylesheet" href="{{ asset('packages/backpack/crud/css/crud.css').'?v='.config('backpack.base.cachebusting_string') }}">
     <link rel="stylesheet" href="{{ asset('packages/backpack/crud/css/show.css').'?v='.config('backpack.base.cachebusting_string') }}">
 @endsection

 @section('after_scripts')
 <script src="{{ asset('vendors/moment.min.js')}}"></script>
 <script src="{{ asset('vendors/lightgallery/lightgallery.min.js')}}"></script>
 <script src="{{ asset('vendors/lightgallery/jquery.mousewheel.min.js')}}"></script>
 <script src="{{ asset('vendors/lightgallery/lg-thumbnail.min.js')}}"></script>
 <script src="{{ asset('vendors/lightgallery/lg-fullscreen.min.js')}}"></script>
 <script>
         //INSIAL PAGE AND ENDPOINT
    var ENDPOINT = "{{ Request::url()}}";
    var BASEURL = "{{ url('/') }}";
    var projectId = "{{ $data->id }}";

    $(".light-gallery").lightGallery(
        {
            animateThumb: true,
            showThumbByDefault: true,
            selector: 'img',
            thumbnail: true,
            exThumbImage : "src",
        }
    );



    $( document ).ready(function() {
        loadDefect()
    });



    $(document).on('click','.btn-load-more-image',function(){
        let page = parseInt($(this).attr('data-page')) + 1;
        let id = $(this).attr('data-id');
        let type = $(this).attr('data-type');
        let url ;
        if(type == 'BEFORE'){
            url = ENDPOINT + "?page="+ page + `&images=true` +`&before=true` + `&project_defect_id=`+ id;
        }else{
            url = ENDPOINT + "?page="+ page + `&images=true` +`&after=true` + `&project_defect_id=`+ id;
        }
        getDataWithAjax(url).done((res)=>{
            res.data.map((img) => {
                $(`<img width="36" height="36" src="${img.path}"
                   data-src="${img.path}"
                   alt="${img.location}"
                   data-sub-html="
                   <p> ${img.type} </p>
                   <h3>
                         ${img.location}
                   </h3>
                   <p> Capture Time : ${moment(img.capture_time).format("DD/MM/YYYY, h:mm:ss a")} </p>
                   <p> ${img.comments} </p>
                    ">
                   `)
                .appendTo(`#img-gallery-${type.toLowerCase()}-${img.project_defect_id}`)
            })
            $("#timeline").lightGallery();
            $("#timeline").data('lightGallery').destroy(true);
            $("#timeline").lightGallery({
                animateThumb: true,
                showThumbByDefault: true,
                selector: 'img',
                thumbnail: true,
                exThumbImage : "src",
            });
            $(this).attr("data-page",page);
            if(!isEmpty(res.data[0])){
                $(`#img-gallery-${type.toLowerCase()}-count-${res.data[0].project_defect_id}`).html(res.total)
            }
            if(isEmpty(res.data)){
                new Noty({
                    text: 'no more data remark to loads',
                    type: "error"
                }).show();
            }

        });
    });

 //LOAD MORE REMARK
    $(document).on('click','.btn-load-remark',function(){
        let page = parseInt($(this).attr('data-page')) + 1;
        let id = $(this).attr('data-id');
        let url = ENDPOINT+ "?remarks=true"  +"&project_defect_id=" + id + "&page=" + page  ;
        getDataWithAjax(url).done((res)=>{
            res.data.map((remark) => {
                $(`<li>
                     <span> ${moment(remark.created_at).format("DD/MM/YYYY, h:mm:ss a")} </span>
                     <span class="badge badge-info">  ${ (remark.vendor  ? remark.vendor.name : `` )}  </span><br>
                     <span class="font-12">${remark.remark}</span>
                   </li>
                   `)
                .appendTo(`#remarks-defect-id-${remark.project_defect_id}`)
            });
            $(this).attr("data-page",page);
            if(!isEmpty(res.data[0])){
                $(`#remark-count-${res.data[0].project_defect_id}`).html(res.total)
            }
            //NOTIFY IF DATA IS NOT EXIST
            if(isEmpty(res.data)){
                new Noty({
                    text: 'no more data remark to loads',
                    type: "error"
                }).show();
            }
        });
    });

$(document).on('click','#btn-load-more-defect',function(){
    loadDefect();
});
//LOAD DEFECT
function loadDefect() {
    let page = parseInt($('#btn-load-more-defect').attr('data-page'));
    let url = ENDPOINT + "?page=" + page + `&id=` + projectId;
    getDataWithAjax(url).done( (res) => {
        console.log(res.data);
        let projectId = [];
        res.data.map((data) => {
            projectId.push(data.id);
            $(`
            <div class="timeline-label">
                <span class="label label-primary arrowed-in-right label-lg">
                    <b>${data.create_date ? formatDate(data.create_date) : ''} - <span class="badge badge-info"> ${ (data.scope_of_work  ? data.scope_of_work.name : `` )}  </span> </b>
                </span>
            </div>
            <div class="timeline-items">
                <div class="timeline-item clearfix">
                    <div class="timeline-info">
                        <i class="timeline-indicator ace-icon fa fa-info btn btn-danger  green"></i>
                    </div>
                    <div class="widget-box transparent card-style card">
                        <div class="widget-body">
                            <div class="widget-main ml-3">
                                <span class="font-14"><b> ${ (data.scope_of_work  ? data.scope_of_work.name : `` )}  </b>
                                    ${(() => {
                                        if (data.status == 'Inactive') {
                                           return `<span class="badge bg-green-dark color-white">Inactive</span>`
                                        }else{
                                            return `<span class="badge bg-danger color-white">Active</span>`
                                        }
                                    })()}
                                    <br>
                                    <span class="font-12 ">

                                        <b>Action By</b> : <ul>
                                        ${Object.keys(data.vendors).map(function (key) {
                                            let vendor =  data.vendors[key].vendor_name ? data.vendors[key].vendor_name : data.vendors[key].vendor.name;
                                            return "<li>" + (vendor ? vendor : '')+ "</li>"
                                        }).join("")}
                                        </ul>
                                        <b>Category</b> : ${data.category} <br>
                                        <b>Area</b> :  ${ (data.area_name  ? data.area_name   : data.area.name )} <br>
                                        <b>Created Date</b> : ${data.create_date ? formatDate(data.create_date) : ''} <br>
                                        <b>Complete Date</b> : ${data.complete_date ? formatDate(data.complete_date) : 'Incomplete'} <br>
                                    </span>
                                    </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!--- Image Gallery --->
                <div class="timeline-item clearfix">
                    <div class="timeline-info">
                        <i class="timeline-indicator ace-icon fa fa-image btn btn-danger  green"></i>
                    </div>
                    <div class="widget-box transparent card card-style">
                        <div class="widget-main light-gallery" >
                            <span class="font-14"><b>Images Before</b></span>
                            <div id="img-gallery-before-${data.id}"></div>
                        </div>
                        <div class="widget-header widget-header-small">
                            <span class="widget-toolbar no-border mr-1 btn-load-more-image" data-type="BEFORE" data-id="${data.id}" data-page="1"><button class="badge bg-green-dark color-white" style="border:none">Load More <i class="nav-icon la la-angle-double-right"></i></button> </span>
                            <span class="widget-toolbar no-border mr-1 badge" >Total Image : <span id="img-gallery-before-count-${data.id}">0</span></span>
                        </div>
                    </div>
                </div>
                <div class="timeline-item clearfix">
                    <div class="timeline-info">
                        <i class="timeline-indicator ace-icon fa fa-image btn btn-success green"></i>
                    </div>
                    <div class="widget-box transparent card card-style">
                        <div class="widget-main light-gallery" >
                            <span class="font-14"><b>Images After</b></span>
                            <div id="img-gallery-after-${data.id}"></div>
                        </div>
                        <div class="widget-header widget-header-small">
                            <span class="widget-toolbar no-border mr-1 btn-load-more-image" data-type="AFTER" data-id="${data.id}" data-page="1"><button class="badge bg-green-dark color-white" style="border:none">Load More <i class="nav-icon la la-angle-double-right"></i></button> </span>
                            <span class="widget-toolbar no-border mr-1 badge" >Total Image : <span id="img-gallery-after-count-${data.id}">0</span></span>
                        </div>
                    </div>
                </div>
                <div class="timeline-item clearfix">
                    <div class="timeline-info">
                        <i class="timeline-indicator ace-icon fa fa-comment btn btn-default no-hover"></i>
                    </div>
                    <div class="widget-box transparent card card-style">
                        <div class="widget-body">
                            <div class="widget-main">
                                <span class="font-14"><b>Remarks</b></span>
                               <small>
                                <ul class="timeline" id="remarks-defect-id-${data.id}">

                                </ul>
                               </small>
                            </div>
                        </div>
                        <div class="widget-header widget-header-small">
                            <span class="widget-toolbar no-border mr-1 btn-load-remark" data-id="${data.id}" data-page="1"><button class="badge bg-green-dark color-white" style="border:none">Load More <i class="nav-icon la la-angle-double-right"></i></button> </span>
                            <span class="widget-toolbar no-border mr-1 badge" >Total Remark : <span id="remark-count-${data.id}">0</span></span>
                        </div>
                    </div>
                </div>
                `
                ).appendTo(`#timeline`)
            });


                //CALL REMARK AND IMAGES
                projectId.forEach((id) =>{
                    let urlImageBefore = ENDPOINT + "?page=0" + `&images=true` +`&before=true` + `&project_defect_id=`+ id;
                    let urlImageAfter = ENDPOINT + "?page=0" + `&images=true` +`&after=true` + `&project_defect_id=`+ id;
                    let urlRemark =   ENDPOINT + "?page=0" + `&remarks=true` + `&project_defect_id=`+ id;
                    /* Call Images and append */

                    //IMAGES BEFORE CALL AJAX
                    getDataWithAjax(urlImageBefore).done((res)=>{
                        res.data.map((img) => {
                            $(`<img width="36" height="36" src="${img.path}"
                               data-src="${img.path}"
                               alt="${img.location ? img.location : ''}"
                               data-sub-html="
                               <p> ${img.type ? img.type : ''} </p>
                               <h3>
                                     ${img.location ? img.location : ''}
                               </h3>
                               <p> Capture Time : ${moment(img.capture_time).format("DD/MM/YYYY, h:mm:ss a")} </p>
                               <p> ${img.comments ? img.comments : ''} </p>
                                ">
                               `)
                            .appendTo(`#img-gallery-before-${img.project_defect_id}`)
                        })
                        if(!isEmpty(res.data[0])){
                            $(`#img-gallery-before-count-${res.data[0].project_defect_id}`).html(res.total)
                        }
                        $("#timeline").lightGallery();
                        $("#timeline").data('lightGallery').destroy(true);
                        $("#timeline").lightGallery({
                            animateThumb: true,
                            showThumbByDefault: true,
                            selector: 'img',
                            thumbnail: true,
                            exThumbImage : "src",
                        });
                    })
                       //IMAGES AFTER CALL AJAX
                       getDataWithAjax(urlImageAfter).done((res)=>{
                        res.data.map((img) => {
                            $(`<img width="36" height="36" src="${img.path}"
                               data-src="${img.path}"
                               alt="${img.location}"
                               data-sub-html="
                               <p> ${img.type} </p>
                               <h3>
                                     ${img.location ? img.location : '' }
                               </h3>
                               <p> Capture Time : ${moment(img.capture_time).format("DD/MM/YYYY, h:mm:ss a")} </p>
                               <p> ${img.comments ? img.comments : ''} </p>
                                ">
                               `)
                            .appendTo(`#img-gallery-after-${img.project_defect_id}`)
                        })
                        if(!isEmpty(res.data[0])){
                            $(`#img-gallery-after-count-${res.data[0].project_defect_id}`).html(res.total)
                        }
                        $("#timeline").lightGallery();
                        $("#timeline").data('lightGallery').destroy(true);
                        $("#timeline").lightGallery({
                            animateThumb: true,
                            showThumbByDefault: true,
                            selector: 'img',
                            thumbnail: true,
                            exThumbImage : "src",
                        });
                    })

                    /* CALL REMARK */
                    getDataWithAjax(urlRemark).done((res)=>{
                        console.log(urlRemark)
                        res.data.map((remark) => {
                            console.log(remark.project_defect_id);
                            $(`<li>
                                 <span> ${ moment(  remark.created_at).format("DD/MM/YYYY")} </span><br>
                                 <span>Vendor(s) :
                                    ${remark.vendors.filter(item => item !== null).map((item) => `
                                        <span class="badge badge-info"> ${item} </span>
                                    `).join('')}</span><br>
                                 <span class="font-14">${remark.remark}</span>
                               </li>
                               `)
                            .appendTo(`#remarks-defect-id-${remark.project_defect_id}`)
                        });

                        if(!isEmpty(res.data[0])){
                            $(`#remark-count-${res.data[0].project_defect_id}`).html(res.total)
                        }

                    })

        })

            //DATA NOT EXIST
            if(!isEmpty(res.data)){
                let page = parseInt($('#btn-load-more-defect').attr('data-page')) + 1;
                $(`#btn-load-more-defect`).attr("data-page",page);
            }else{
                new Noty({
                    text: 'no more data to loads',
                    type: "error"
                }).show();
            }

    })


}
function getDataWithAjax(url_, method_= 'GET', data_ = [])
{
	var ajax_ = $.ajax({
		url : url_,
		method : method_,
		data : data_,
	});

	return ajax_;
}

function isEmpty(str) {
    return (!str || str.length === 0 );
}

function formatDate(date){
  let newDate =  date.substr(0,date.indexOf('T'))
  return  new Date(newDate).toDateString();
}
 </script>
 @endsection