@extends('layouts.master')

@push('head-css')
    <style>
        .link-stats{
            cursor: pointer;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('assets/css/jquery-ui.min.css') }}">
@endpush

@section('content')
    <div id="bookingReminderSendAlert"></div>
    <div class="row mb-2">

        {{-- @if (!$user->mobile_verified && $smsSettings->nexmo_status == 'active')
            <div id="verify-mobile-info" class="col-md-12">
                <div class="alert alert-info col-md-12" role="alert">
                    <div class="row">
                        <div class="col-md-10 d-flex align-items-center">
                            <i class="fa fa-info fa-3x mr-2"></i>
                            @lang('messages.info.verifyAlert')
                        </div>
                        <div class="col-md-2 d-flex align-items-center justify-content-end">
                            <a href="{{ route('admin.profile.index') }}" class="btn btn-warning">
                                @lang('menu.profile')
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        @endif --}}

        @if (strlen($smsSettings->nexmo_from) > 18)
            <div id="brand-length" class="col-md-12">
                <div class="alert alert-danger col-md-12" role="alert">
                    <div class="row">
                        <div class="col-md-10 d-flex align-items-center">
                            <i class="fa fa-exclamation-triangle fa-3x mr-2"></i>
                            @lang('messages.info.smsNameAlert')
                        </div>
                        <div class="col-md-2 d-flex align-items-center justify-content-end">
                            <a href="{{ route('admin.settings.index').'#sms-settings' }}" class="btn btn-info">
                                @lang('menu.settings')
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>

    <div class="row {{($user->is_customer)?'d-none':''}}">
		<div class="col-md-12">
			<div class="met-card gutter-b">
				<div class="met-card-header">
					<h3 class="met-card-title">@lang('app.dateRange')</h3>
				</div>
				<div class="met-card-body pt-0 pb-2">
					<div class="row met-grey-inputs">
						<div class="col-md-2">
							<div class="form-group">
                				<input type="text" class="form-control datepicker" name="start_date" id="start-date" placeholder="@lang('app.startDate')" value="">
							</div>
						</div>
						<div class="col-md-2">
							<div class="form-group">
                				<input type="text" class="form-control datepicker" name="end_date" id="end-date" placeholder="@lang('app.endDate')" value="">
            				</div>
						</div>
						<div class="col-md-2 {{($user->is_customer)?'d-none':''}}">
							<div class="form-group">
								<select class="form-control select2" name="location_id" id="location_id">
									<option value="">All @lang('app.locations')</option>
									@foreach ($locations as $service)
										<option value="{{$service->id}}">{{$service->name}}</option>
									@endforeach
								</select>
							</div>
						</div>
						<div class="col-md-2 {{($user->is_customer)?'d-none':''}}">
							<div class="form-group">
								<select class="form-control select2" name="service_id" id="service_id">
									<option value="">All @lang('app.services')</option>
									@foreach ($services as $service)
										<option value="{{$service->id}}">{{$service->name}}</option>
									@endforeach
								</select>
							</div>
						</div>
						<div class="col-md-2">
							<div class="form-group">
								<button type="button" id="apply-filter" class="btn btn-success btn-block">
									<i class="fa fa-check"></i> @lang('app.apply')
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
    </div>
    <div class="met-card gutter-b" id="count_by_location_heading" style="display:none" >
        <div class="met-card-header">
            <h3 class="met-card-title "></h3>
        </div>
	</div>

    <div class="row met-bg-wrap">
        @if(!$user->is_customer)
		<div class="col-md-4 col-sm-6 col-12">
			<div class="met-card gutter-b met-card-padd bg-orange met-dflex-row met-link" onclick="location.href='{{ route('admin.bookings.index') }}'">
				<span class="met-flex-one">
					<span class="met-dblock met-wid-title" id="total-booking">0</span>
					<span class="met-wid-subtitle">@lang('modules.dashboard.totalBooking')</span>
				</span>
				<span class="met-wid-icon"><i class="fa fa-calendar"></i></span>
			</div>
		</div>
        @endif
		<div class="col-md-4 col-sm-6 col-12">
			<div class="met-card gutter-b met-card-padd bg-info met-dflex-row met-link" onclick="location.href='{{ route('admin.bookings.index') }}'">
				<span class="met-flex-one">
					<span class="met-dblock met-wid-title" id="upcoming-booking">0</span>
					<span class="met-wid-subtitle">@lang('modules.dashboard.upcomingBooking')</span>
				</span>
				<span class="met-wid-icon"><i class="fa fa-calendar"></i></span>
			</div>
		</div>
        @if(!$user->is_customer)
		<div class="col-md-4 col-sm-6 col-12">
			<div class="met-card gutter-b met-card-padd bg-warning met-dflex-row met-link" onclick="location.href='{{ route('admin.bookings.index', 'status=completed') }}'">
				<span class="met-flex-one">
					<span class="met-dblock met-wid-title" id="completed-booking">0</span>
					<span class="met-wid-subtitle">@lang('modules.dashboard.completedBooking')</span>
				</span>
				<span class="met-wid-icon"><i class="fa fa-calendar"></i></span>
			</div>
		</div>
        @endif
		<div class="col-md-4 col-sm-6 col-12">
			<div class="met-card gutter-b met-card-padd bg-success met-dflex-row met-link" onclick="location.href='{{ route('admin.bookings.index', 'status=canceled') }}'">
				<span class="met-flex-one">
					<span class="met-dblock met-wid-title" id="canceled-booking">0</span>
					<span class="met-wid-subtitle">@lang('modules.dashboard.canceledBooking')</span>
				</span>
				<span class="met-wid-icon"><i class="fa fa-calendar"></i></span>
			</div>
		</div>
		@if($user->is_admin)
		<div class="col-md-4 col-sm-6 col-12">
			<div class="met-card gutter-b met-card-padd bg-primary met-dflex-row met-link" onclick="location.href='{{ url('account/locations') }}'">
				<span class="met-flex-one">
					<span class="met-dblock met-wid-title" id="total-centers">0</span>
					<span class="met-wid-subtitle">@lang('modules.dashboard.totalCenters')</span>
				</span>
				<span class="met-wid-icon"><i class="nav-icon icon-map-alt"></i></span>
			</div>
		</div>
		<div class="col-md-4 col-sm-6 col-12">
			<div class="met-card gutter-b met-card-padd bg-orange met-dflex-row met-link" onclick="location.href='{{ url('account/customers') }}'">
				<span class="met-flex-one">
					<span class="met-dblock met-wid-title" id="total-customers">0</span>
					<span class="met-wid-subtitle">@lang('modules.dashboard.totalCustomers')</span>
				</span>
				<span class="met-wid-icon"><i class="fa fa-users"></i></span>
			</div>
		</div>
		@endif
    </div>
    
    @if ($user->is_admin)
    <div class="row">
		<div class="col-md-12">
			<div class="met-card gutter-b">
				<div class="met-card-header">
					<h3 class="met-card-title float-left">@lang('modules.dashboard.upcomingBooking')</h3>

                    <select class="select2 float-right title-location-filter" name="upcoming_location_id" id="upcoming_location_id">
                        <option value="">All @lang('app.locations')</option>
                        @foreach ($locations as $location)
                            <option value="{{$location->id}}">{{$location->name}} , {{$location->city}}</option>
                        @endforeach
                    </select>
				</div>
				<div class="met-card-body table-responsive">
					<table class="table m-0 upcoming-booking-list">
                        
                    </table>
				</div>
			</div>
		</div>
	</div>
    @endif

    @if ($user->is_admin)
    <div class="row">
		<div class="col-md-12">
			<div class="met-card gutter-b">
				<div class="met-card-header">
					<h3 class="met-card-title">@lang('modules.dashboard.recentBookings')</h3>

                    <select class="select2 float-right title-location-filter" name="recent_location_id" id="recent_location_id">
                        <option value="">All @lang('app.locations')</option>
                        @foreach ($locations as $location)
                            <option value="{{$location->id}}">{{$location->name}} , {{$location->city}}</option>
                        @endforeach
                    </select>

				</div>
				<div class="met-card-body table-responsive">
					<table class="table mb-0 recent-booking-list">
                        
                    </table>
				</div>
			</div>
		</div>
	</div>
    @endif

    @if ($user->is_customer)
    <div id="services" class="row">
        @foreach ($services as $service)
            <div class="col-lg-3 col-md-6 col-12 mb-3 services-list service-category-{{ $service->category_id }}">
                <a href="javascript:;" class="add-to-cart"
                            data-service-price="{{ $service->discounted_price }}"
                            data-service-id="{{ $service->id }}"
                            data-service-name="{{ ucwords($service->name) }}"
                            aria-expanded="false">
                    <div class="listing-item">
                        <div class="img-holder" style="background-image: url('{{ $service->service_image_url }}')"></div>
                        <div class="list-content">
                            <h5 class="mb-2 pb-2">
                                {{ ucwords($service->name) }}
                            </h5>
                            <button class="btn-custom btn-next-green ">
                                @lang('app.choose') @lang('app.service')
                                <span class="fa fa-plus"></span>
                            </button>
                        </div>
                    </div>
                </a>
            </div>
        @endforeach
    </div>
    @endif
@endsection

@push('footer-js')
    <script>
        // add items to cart
        $('body').on('click', '.add-to-cart', function () {
            let serviceId = $(this).data('service-id');
            let servicePrice = $(this).data('service-price');
            let serviceName = $(this).data('service-name');

            var data = {serviceId, servicePrice, serviceName, '_token': $("meta[name='csrf-token']").attr('content')};

            $.easyAjax({
                url: '{{ route('front.addOrUpdateProduct') }}',
                type: 'POST',
                data: data,
                success: function (response) {
                    window.location = '{{ route('front.bookingPage') }}';
                }
            })
        });
    </script>
    <script src="{{ asset('assets/js/jquery-ui.min.js') }}"></script>
    <script>
        var updated = true;

       // let moment_startDate = moment().subtract(365, 'days');
       // let moment_endDate = moment().add(365, 'days');
        
       // let startDate = moment_startDate.format('YYYY-MM-DD');
       // let endDate = moment_endDate.format('YYYY-MM-DD');

        $('#start-date').datetimepicker({
            format: '{{ $date_picker_format }}',
            locale: '{{ $settings->locale }}',
            allowInputToggle: true,
           // defaultDate: moment_startDate,
            icons: {
                time: "fa fa-clock-o",
                date: "fa fa-calendar",
                up: "fa fa-arrow-up",
                down: "fa fa-arrow-down",
                previous: "fa fa-angle-double-left",
                next: "fa fa-angle-double-right",
            }
        }).on('dp.change', function(e) {
            //startDate =  moment(e.date).format('YYYY-MM-DD');
        });
        
        $('#end-date').datetimepicker({
            format: '{{ $date_picker_format }}',    
            locale: '{{ $settings->locale }}',
            allowInputToggle: true,
        //    defaultDate:moment_endDate,
            icons: {
                time: "fa fa-clock-o",
                date: "fa fa-calendar",
                up: "fa fa-arrow-up",
                down: "fa fa-arrow-down",
                previous: "fa fa-angle-double-left",
                next: "fa fa-angle-double-right",
            }
        }).on('dp.change', function(e) {
           // endDate =  moment(e.date).format('YYYY-MM-DD');
        });

        function showNewTodoForm() {
            let url = "{{ route('admin.todo-items.create') }}"

            $.ajaxModal('#application-modal', url);
        }

        function initSortable() {
            let updates = {'pending-tasks': false, 'completed-tasks': false};
            let completedFirstPosition = $('#completed-tasks').find('li.draggable').first().data('position');
            let pendingFirstPosition = $('#pending-tasks').find('li.draggable').first().data('position');

            $('#pending-tasks').sortable({
                connectWith: '#completed-tasks',
                cursor: 'move',
                handle: '.handle',
                stop: function (event, ui) {
                    const id = ui.item.data('id');
                    const oldPosition = ui.item.data('position');

                    if (updates['pending-tasks']===true && updates['completed-tasks']===true)
                    {
                        const inverseIndex =  completedFirstPosition > 0 ? completedFirstPosition - ui.item.index() + 1 : 1;
                        const newPosition = inverseIndex;

                        updateTodoItem(id, position={oldPosition, newPosition}, status='completed');

                    }
                    else if(updates['pending-tasks']===true && updates['completed-tasks']===false)
                    {
                        const newPosition = pendingFirstPosition - ui.item.index();

                        updateTodoItem(id, position={oldPosition, newPosition});
                    }

                    //finally, clear out the updates object
                    updates['pending-tasks']=false;
                    updates['completed-tasks']=false;
                },
                update: function (event, ui) {
                    updates[$(this).attr('id')] = true;
                }
            }).disableSelection();

            $('#completed-tasks').sortable({
                connectWith: '#pending-tasks',
                cursor: 'move',
                handle: '.handle',
                stop: function (event, ui) {
                    const id = ui.item.data('id');
                    const oldPosition = ui.item.data('position');

                    if (updates['pending-tasks']===true && updates['completed-tasks']===true)
                    {
                        const inverseIndex =  pendingFirstPosition > 0 ? pendingFirstPosition - ui.item.index() + 1 : 1;
                        const newPosition = inverseIndex;

                        updateTodoItem(id, position={oldPosition, newPosition}, status='pending');
                    }
                    else if(updates['pending-tasks']===false && updates['completed-tasks']===true)
                    {
                        const newPosition = completedFirstPosition - ui.item.index();

                        updateTodoItem(id, position={oldPosition, newPosition});
                    }

                    //finally, clear out the updates object
                    updates['pending-tasks']=false;
                    updates['completed-tasks']=false;
                },
                update: function (event, ui) {
                    updates[$(this).attr('id')] = true;
                }
            }).disableSelection();
        }

        function calculateStats() {
            var selected_location = $('#location_id').val();
            console.log(selected_location);                        
            $.easyAjax({
                type: 'GET',
                url: '{{ route("admin.dashboard") }}',
                data: {
                    startDate: $('#start-date').val(), 
                    endDate: $('#end-date').val(),
                    location_id: $('#location_id').val(),
                    service_id: $('#service_id').val(),
                },
                success: function (response) {
                    if (response.status == "success") {
                        $.unblockUI();
                        $('#total-booking').html(response.totalBooking)
                        $('#upcoming-booking').html(response.upcomingBooking)
                        $('#in-progress-booking').html(response.inProgressBooking)
                        $('#pending-booking').html(response.pendingBooking)
                        $('#approved-booking').html(response.approvedBooking)
                        $('#completed-booking').html(response.completedBooking)
                        $('#canceled-booking').html(response.canceledBooking)
                        $('#offline-booking').html(response.offlineBooking)
                        $('#online-booking').html(response.onlineBooking)
                        $('#total-customers').html(response.totalCustomers)
                        $('#total-earning').html(response.totalEarnings)
                        $('#total-centers').html(response.totalCenters)
                        if(selected_location != '' && selected_location !== undefined)
                        {
                            $('#count_by_location_heading h3').text($("#location_id option:selected").text())
                            $('#count_by_location_heading').show();
                        }  
                        else
                        {
                            $('#count_by_location_heading h3').text('')
                            $('#count_by_location_heading').hide();
                        }                      
                    }
                }
            });
        }

        function updateTodoItem(id, pos, status=null) {
            let data = {
                _token: '{{ csrf_token() }}',
                id: id,
                position: pos,
            };

            if (status) {
                data = {...data, status: status}
            }

            $.easyAjax({
                url: "{{ route('admin.todo-items.updateTodoItem') }}",
                type: 'POST',
                data: data,
                container: '#todo-items-list',
                success: function (response) {
                    $('#todo-items-list').html(response.view);
                    initSortable();
                }
            });
        }

        function showUpdateTodoForm(id) {
            let url = "{{ route('admin.todo-items.edit', ':id') }}"
            url = url.replace(':id', id);

            $.ajaxModal('#application-modal', url);
        }

        function deleteTodoItem(id) {
            swal({
                icon: "warning",
                buttons: ["@lang('app.cancel')", "@lang('app.ok')"],
                dangerMode: true,
                title: "@lang('errors.areYouSure')",
                text: "@lang('errors.deleteWarning')",
            })
            .then((willDelete) => {
                if (willDelete) {
                    let url = "{{ route('admin.todo-items.destroy', ':id') }}";
                    url = url.replace(':id', id);

                    let data = {
                        _token: '{{ csrf_token() }}',
                        _method: 'DELETE'
                    }

                    $.easyAjax({
                        url,
                        data,
                        type: 'POST',
                        container: '#roleMemberTable',
                        success: function (response) {
                            if (response.status == 'success') {
                                $('#todo-items-list').html(response.view);
                                initSortable();
                            }
                        }
                    })
                }
            });
        }

        

        @if ($user->is_admin || $user->is_employee)
            $('#todo-items-list').html(`{!! $todoItemsView !!}`);
        @endif

        calculateStats();

        initSortable();

        $('#apply-filter').click(function () {
            calculateStats();
        });

        $('body').on('click','.send-reminder',function () {
            let bookingId = $(this).data('booking-id');

            $.easyAjax({
                type: 'POST',
                url: '{{ route("admin.bookings.sendReminder") }}',
                data: {bookingId: bookingId, _token: '{{ csrf_token() }}'},
                success: function (response) {
                    if(response.status == 'success'){
                        $('#bookingReminderSendAlert').html('<div class="alert alert-success alert-dismissible fade show"  role="alert">@lang('messages.bookingReminderSent')<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
                        $('html, body').animate({
                            scrollTop: $('#bookingReminderSendAlert').offset().top - 70
                        }, 1000);
                    }
                }
            });
        });

        $('body').on('click', '#create-todo-item', function () {

            $.easyAjax({
                url: "{{route('admin.todo-items.store')}}",
                container: '#createTodoItem',
                type: "POST",
                data: $('#createTodoItem').serialize(),
                success: function (response) {
                    if(response.status == 'success'){
                        $('#todo-items-list').html(response.view);
                        initSortable();

                        $('#application-modal').modal('hide');
                    }
                }
            })
        });

        $('body').on('click', '#update-todo-item', function () {
            const id = $(this).data('id');
            let url = "{{route('admin.todo-items.update', ':id')}}"
            url = url.replace(':id', id);

            $.easyAjax({
                url: url,
                container: '#editTodoItem',
                type: "POST",
                data: $('#editTodoItem').serialize(),
                success: function (response) {
                    if(response.status == 'success'){
                        $('#todo-items-list').html(response.view);
                        initSortable();

                        $('#application-modal').modal('hide');
                    }
                }
            })
        });

        $('body').on('change', '#todo-items-list input[name="status"]', function () {
            const id = $(this).data('id');
            let status = 'pending';

            if ($(this).is(':checked')) {
                status = 'completed';
            }

            updateTodoItem(id, null, status);
        })

         $('body').on('change', '#upcoming_location_id', function () {
            var location_id = $(this).val();
            let url = "{{URL::to('account/upcoming/location/bookings')}}";
            $.easyAjax({
                url: url,
                type: "POST",
                data: {location_id:location_id,'_token': $("meta[name='csrf-token']").attr('content')},
                success: function (response) {
                    if(response.status == 'success'){
                       $('.upcoming-booking-list').html(response.view);
                    }
                }
            })
        })

        $('body').on('change', '#recent_location_id', function () {
            var location_id = $(this).val();
            let url = "{{URL::to('account/recent/location/bookings')}}";
            $.easyAjax({
                url: url,
                type: "POST",
                data: {location_id:location_id,'_token': $("meta[name='csrf-token']").attr('content')},
                success: function (response) {
                    if(response.status == 'success'){
                       $('.recent-booking-list').html(response.view);
                    }
                }
            })
        })

        $('#upcoming_location_id').trigger('change');
        $('#recent_location_id').trigger('change');
        
        
    </script>
@endpush