@extends(backpack_view('blank'))
@section('content')

<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 Progress</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> </span><br>
                                            <span class="font-14 ">
                                                <b>Project Name</b>    : {{ $project->name }} <br>
                                                <b>Address</b>         : {{ $project->block_no }} {{ $project->road_no }}  {{ $project->road_name }}  {{ $project->residence }}  {{ $project->country_name }} {{ $project->postal_code }} <br>
                                                <b>Created At</b>      : {{  date("d-m-Y", strtotime($project->created_at)) }} <br>
                                            </span> <br>
                                            <b>Area</b>  :<br>
                                            <div id="areas" class="mt-3">
                                                <button data-name="" data-id="" class="btn btn-sm btn-info mb-1 select-area">All</button>
                                            </div>
                                            </div>
									</div>
								</div>
							</div>
						</div>

                        <div id="timeline">

                        </div>
                        </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-progress"> 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('js/erstudio.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 = "{{ $project->id }}";
    let areaId = '' ;
    let areaName = '';

    $(".light-gallery").lightGallery(
        {

            animateThumb: true,
            showThumbByDefault: true,
            selector: 'img',
            thumbnail: true,
            exThumbImage : "src",
        }
    );



    $( document ).ready(function() {
        $.ajax({
            url: ENDPOINT + "?areas=true",
            datatype: "JSON",
            type: "get",
        })
        .done(function (response) {
            console.log(response);
            response.map((data) => {
                console.log(data.area_name)
                $(` <button data-id="${ (data.area  ? data.area.id   : null )}" data-name="${ (data.area_name  ? data.area_name   : data.area.name )}" class="btn btn-sm btn-secondary mr-1 mb-1 select-area ">
                    ${ (data.area_name  ? data.area_name   : data.area.name )}
                </button>
                 `).appendTo(`#areas`)
            })

        })
        loadProgress()
    });

    $(document).on('click', '.select-area', function() {
        let id = $(this).data('id');
        let name = $(this).data('name');
        $('#timeline').empty();
        $(`#btn-load-more-progress`).attr("data-page",1);
        //SET PARAMS WITH SELECT AREA ID
        id == null ? areaId = '' : areaId = id;
        name == null ? areaName = '' : areaName = name;
        loadProgress();
        $('.select-area').removeClass('btn-info btn-secondary')
        $('.select-area').toggleClass('btn-secondary')
        $(this).toggleClass('btn-info');

    })



    $(document).on('click','#btn-load-more-progress',function(){
        loadProgress();
    });
     //LOAD INSPECTION
     function loadProgress() {
        let page = parseInt($('#btn-load-more-progress').attr('data-page'));
        let url = ENDPOINT + "?page=" + page + `&images=true` + `&area_id=${areaId}` + `&area_name=${areaName}`;
        /* End Load Progress Data */
        getDataWithAjax(url, "GET").done(
            function(res) {
                res.data.map((data) => {
                    $(`<div class="timeline-label">
                        <span class="label label-primary arrowed-in-right label-lg">
                            <b>${moment(data.created_at).format("DD/MM/YYYY")} </b>
                        </span>
                    </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>${ (data.scope_of_work  ? data.scope_of_work.name : `` )} </b> <span class="badge badge-info">${ (data.area  ? data.area.name : `` )}</span></span>
                                <p class="font-12"> ${ (data.comments  ? data.comments : `` )} </p>
                                <div class="img-gallery mt-2">
                                    ${data.photos.map((img) => `
                                        <img width="96" height="96" src="${img.path}"
                                        data-src="${img.path}"
                                        alt="${img.remark}"
                                        data-sub-html="
                                        <p>${moment( img.capture_on).format("DD/MM/YYYY, h:mm:ss a")}</p>
                                        <h4>${ (data.scope_of_work  ? data.scope_of_work.name : `` )} </h4>
                                        <h5>
                                            ${img.remark ? img.remark : ''}
                                        </h5>
                                        <h5>
                                            ${data.comments ? data.comments : ''}
                                        </h5>
                                         ">
                                    `).join('')}
                                </div>
                            </div>
                            <div class="widget-header widget-header-small">
                                <span class="widget-toolbar no-border mr-1 badge">Total Image : <span id="img-gallery-before-count-1">${data.photos.length}</span></span>
                            </div>
                        </div>
                    </div>
                    `).appendTo(`#timeline`);
                    $("#timeline").lightGallery();
                    $("#timeline").data('lightGallery').destroy(true);
                    $("#timeline").lightGallery({
                        animateThumb: true,
                        showThumbByDefault: true,
                        selector: 'img',
                        thumbnail: true,
                        exThumbImage : "src",
                    });
                })

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

            }
        )
        /* End Load Progress Data */

     }

 </script>
 @endsection