@extends(backpack_view('blank'))
@section('content')
<div class="container-fluid">
    <h2>
      <span class="text-capitalize">Project Inspection</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 Inspection</b>    : {{ $data->count}}
                                            </span>
                                            </div>
									</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-inspection"> Load More Inspection <i class="nav-icon la la-angle-double-right"></i></button>
                        </div>
				</div>
			</div>
		</div>
	</div>
</div>


 @endsection


 @section('after_styles')
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
 <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() {
        loadInspection()
    });


    $(document).on('click','.btn-load-more-image',function(){
        let page = parseInt($(this).attr('data-page')) + 1;
        let id = $(this).attr('data-id');
        let url = ENDPOINT+ "?images=true"  +"&inspection_id=" + id + "&page=" + page  ;
        getDataWithAjax(url).done((res)=>{
            console.log(res);
            res.data.map((img) => {
                $(`<img width="36" height="36" src="${img.path}"
                   data-src="${img.path}"
                   alt="${img.location}"
                   data-sub-html="
                   <h3>
                       ${img.location}
                   </h3>
                    ">
                   `)
                .appendTo(`#img-gallery-${img.project_inspection_id}`)
             })
             //REINIZIAL LIGHTGALLERY
             $("#timeline").lightGallery();
             $("#timeline").data('lightGallery').destroy(true);
             $("#timeline").lightGallery({
                 animateThumb: true,
                 showThumbByDefault: true,
                 selector: 'img',
                 thumbnail: true,
                 exThumbImage : "src",
             });

            if(!isEmpty(res.data[0])){
                $(`#img-gallery-count-${res.data[0].project_inspection_id}`).html(res.total)
            }
            //UPDATE PAGE
            $(this).attr("data-page",page);

            if(isEmpty(res.data)){
                new Noty({
                    text: 'no more data images to loads',
                    type: "error"
                }).show();
            }
        });
    });

    $(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"  +"&inspection_id=" + id + "&page=" + page  ;
        getDataWithAjax(url).done((res)=>{
            console.log(res);
            res.data.map((remark) => {
                $(`<li>
                    <span> ${remark.created_at} </span><span class="badge badge-info"> ${remark.vendor.name} </span><br>
                    <span class="font-12">${remark.remark}</span>
                  </li>
                  `)
               .appendTo(`#remarks-inspection-id-${remark.project_inspection_id}`)
             })

            {{--  if(!isEmpty(res.data[0])){
                $(`#img-gallery-count-${res.data[0].project_inspection_id}`).html(res.total)
            }  --}}
            //UPDATE PAGE
            $(this).attr("data-page",page);

            if(isEmpty(res.data)){
                new Noty({
                    text: 'no more data images to loads',
                    type: "error"
                }).show();
            }
        });
    });

    $(document).on('click','#btn-load-more-inspection',function(){
        loadInspection();
    });
     //LOAD INSPECTION
     function loadInspection() {
        let page = parseInt($('#btn-load-more-inspection').attr('data-page'));
        let url = ENDPOINT + "?page=" + page + `&id=` + projectId;

        getDataWithAjax(url, "GET").done(
            function(res) {
                let projectId = [];
                res.data.map((data) => {
                    projectId.push(data.id);
                    let date = moment(data.created_at).format("DD/MM/YYYY");
                    $(`
                    <div class="timeline-label">
                        <span class="label label-primary arrowed-in-right label-lg">
                            <b>${date} -  <span class="badge badge-info"> ${ (data.scope_of_inspection  ? data.scope_of_inspection.name : `` )}   </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-warning  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_inspection  ? data.scope_of_inspection.name : `` )}  -  ${ (data.scope_of_work  ? data.scope_of_work.name : `` )}  </b>
                                            ${(() => {
                                                if (data.status == 'passed') {
                                                   return `<span class="badge bg-green-dark color-white">Passed</span>`
                                                }else if(data.status == 'pending'){
                                                    return `<span class="badge bg-warning color-white">Pending</span>`
                                                }else{
                                                    return `<span class="badge bg-danger color-white">Failed</span>`
                                                }
                                            })()}
                                            <br>
                                            <span class="font-12 ">
                                                Project Inspection :  ${ (data.scope_of_inspection  ? data.scope_of_inspection.name : `` )} <br>
                                                SOW :  ${ (data.scope_of_work  ? data.scope_of_work.name : `` )} <br>
                                                Vendor : ${ (data.vendor  ? data.vendor.name : `` )} <br>
                                                Created At : ${moment(data.created_at).format("DD/MM/YYYY")} <br>
                                            </span>
                                            </div>
									</div>
								</div>
							</div>
						</div>
                        <div class="timeline-item clearfix">
							<div class="timeline-info">
								<i class="timeline-indicator ace-icon fa fa-check-square btn btn-success 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>Inspection List</b></span>
                                        <div class="list-group list-custom-small">
                                            ${data.inspection_list.map((val) => `
                                                <a href="#">
                                                    <i class="fa font-14 fa-question rounded-sm shadow-xl bg-warning color-white"></i>
                                                    <span>${val.description}</span>
                                                    ${(() => {
                                                        if (val.value == 'YES') {
                                                           return `<span class="badge bg-green-dark color-white">YES</span>`
                                                        }else if(val.value == 'NO') {
                                                            return `<span class="badge bg-danger color-white">NO</span>`
                                                        }else{
                                                            return `<span class="badge bg-warning color-white">NA</span>`
                                                        }
                                                    })()}
                                                </a>
                                            `).join('')}
                                        </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-info  green"></i>
							</div>
                            <div class="widget-box transparent card card-style">

                                <div class="widget-main light-gallery" >
                                    <span class="font-14"><b>Images</b></span>
                                    <div id="img-gallery-${data.id}"></div>
                                </div>
                                <div class="widget-header widget-header-small">
                                    <span class="widget-toolbar no-border mr-1 btn-load-more-image" 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-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-inspection-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="remakar-count-${data.id}">0</span></span>
                                </div>
							</div>
						</div>
                        `
                        ).appendTo(`#timeline`)

                })

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

               /* Call Images and Remark Every Inspection ID */
                projectId.forEach((id) =>{
                    let url = ENDPOINT + "?page=0" + `&images=true` + `&inspection_id=`+ id;
                    let urlRemark =   ENDPOINT + "?page=0" + `&remarks=true` + `&inspection_id=`+ id;
                    /* Call Images and append */
                    getDataWithAjax(url).done((res)=>{
                        res.data.map((img) => {
                            $(`<img width="64" height="64" src="${img.path}"
                               data-src="${img.path}"
                               alt="${img.location}"
                               data-sub-html="
                               <h3>
                                   ${img.location ? img.location : '' }
                               </h3>
                                ">
                               `)
                            .appendTo(`#img-gallery-${img.project_inspection_id}`)
                        })
                        if(!isEmpty(res.data[0])){
                            $(`#img-gallery-count-${res.data[0].project_inspection_id}`).html(res.total)
                        }

                        $("#timeline").lightGallery();
                        $("#timeline").data('lightGallery').destroy(true);
                        $("#timeline").lightGallery({
                            animateThumb: true,
                            showThumbByDefault: true,
                            selector: 'img',
                            thumbnail: true,
                            exThumbImage : "src",
                        });
                    })
                    /* Call Remarks and append */
                    getDataWithAjax(urlRemark).done((res)=>{
                        console.log('remark',res);
                        res.data.map((remark) => {
                            $(`<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-inspection-id-${remark.project_inspection_id}`)
                        });

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

                    })


                });
            }
            /* End Load Inspection Data */


        )

     }
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 );
}
 </script>
 @endsection