@extends(auth()->user()->hasRole('Търговски представител') || auth()->user()->hasRole('Външен търговски представител') ? 'layouts.app_mobile' : 'layouts.app')

@section('link')
    <link href="{{ asset('css/theme.default.css') }}" rel="stylesheet">
    <link href="{{ asset('css/chosen.min.css') }}" rel="stylesheet">
    <link href="{{ asset('css/style.css') }}" rel="stylesheet">
    
    <link href="{{ asset('css/bootstrap-datepicker.css') }}" rel="stylesheet">
    <link href="{{ asset('css/jquery.businessHours.css') }}" rel="stylesheet">
    <link href="{{ asset('css/jquery.timepicker.css') }}" rel="stylesheet">
@endsection

@section('style')
<style>
    #mymap {
        border:1px solid red;
        width: 100%;
        height: 600px;
    }
    
    .promotion_descr{
        max-width: 500px;
        text-align: center;
        margin: 40px auto;
    }
    
    .btn-me {
        width: 156px;
        margin-bottom: 3px;
    }
    
    .chosen-container{
        width: 100% !important;
    }
    
    .btn-black {
        color: #fff;
        background-color: #000;
        border-color: #000;
    }
    
    .btn-dark_danger {
        color: #fff;
        background-color: #d95351;
        border-color: #c85652;
    }
    
    .hidden{
        display:nonte !important;
    }
    
    .btn-wrapper{
        width:60%;
        margin:auto;
    }
    
    @media (max-width: 768px) {
        .btn-wrapper{
            width:100%;
            margin:auto;
        }
    }

</style>
@endsection

@section('content')
<div class="container">
    @include('shared.messages')
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="panel panel-default">

                <div class="panel-heading">
                    <h3 class="panel-title">{{__('texte.representatives_arr.objects.list.all_objects')}}</h3>
                </div>

                <div class="panel-body" style="text-align: center;">
                    <div class='btn-wrapper'>
                        
                       <a class="btn btn-danger btn-block" type="button" href="{{route('representatives.daily_route',$representative->id)}}">{{__('texte.representatives_arr.objects.list.to_route')}}</a>
                       <h2>{{__('texte.representatives_arr.objects.list.all_objects')}}</h2>
                        @if(count($representative_objects)>0)
                            @foreach($representative_objects as $representative_object)
                                <button class="btn btn-success btn-block btn-object" style="margin-bottom:2px;" data-object_id="{{$representative_object->id}}" id="btn-object{{$representative_object->id}}" type="button">{{$representative_object->contragent->company_name ?? $representative_object->contragent->user->name}} - {{$representative_object->user->name}}</button>
                                <div id="container_{{$representative_object->id}}" class="object_container " style="display: none;">
                                    <div class="gap-15"></div>
                                    <a href="{{route('representatives.create_order',[$representative->id,$representative_object->id])}}" class="btn btn-me btn-primary">{{__('texte.representatives_arr.objects.list.make_order')}}</a>
                                    <a type='button' class="btn btn-me btn-success btn-promo" data-id='{{$representative_object->id}}' title='{{__('texte.representatives_arr.objects.list.promotions')}}' data-target='#modal-promotions' data-toggle='modal'>{{__('texte.representatives_arr.objects.list.promotions')}}</a>
                                    <a href="{{route('objects.edit',[$representative_object->id,$representative->id])}}" class="btn btn-me btn-warning btn-update">{{__('texte.representatives_arr.objects.list.edit_object')}}</a>
                                    <button class="btn btn-me btn-danger btn-note" data-object_id="{{$representative_object->id}}" data-target='#modal-create_note' data-toggle='modal'>{{__('texte.representatives_arr.objects.list.create_note')}}</button>
                                    <button class="btn btn-me btn-dark_danger btn-show_note {{count($representative_object->notes)==0 ? 'hidden' : ''}}" data-object_id="{{$representative_object->id}}" data-target='#modal-show_notes' data-toggle='modal'>{{__('texte.representatives_arr.objects.list.show_notes')}}</button>
                                    <button class="btn btn-me btn-alt btn-navigate" data-lat="{{$representative_object->gps_lat}}" data-lng="{{$representative_object->gps_lng}}">{{__('texte.representatives_arr.objects.list.navigate')}}</button>
                                    <div class="gap-15"></div>
                                    
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group" style="color:#676a6c">
                                            <b>{{__('texte.representatives_arr.objects.list.due_amount')}}:</b> <span class="debt_money"> 0.00000</span> {{__('texte.representatives_arr.objects.list.bgn')}}.
                                        </div>
                                    </div>

                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group" style="color:#676a6c">
                                            <b>{{__('texte.representatives_arr.objects.list.orders_amount')}}:</b> <span class="orders_amount"> 0.00000</span> {{__('texte.representatives_arr.objects.list.bgn')}}.
                                        </div>
                                    </div>

                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group" style="color:#676a6c">
                                            <b>{{__('texte.representatives_arr.objects.list.due_wrappage')}}:</b> <span class="debt_packaging"> 0.00000</span> {{__('texte.representatives_arr.objects.list.bgn')}}.
                                        </div>
                                    </div>

                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <b>{{__('texte.representatives_arr.objects.list.credit_limit')}}:</b> <span class="limit"> 0.00000</span> {{__('texte.representatives_arr.objects.list.bgn')}}.
                                        </div>
                                    </div>

                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group" style="color:#676a6c">
                                            <b>{{__('texte.representatives_arr.objects.list.overdue_amount')}}:</b> <span class="overdue_amount">0.00000</span> {{__('texte.representatives_arr.objects.list.bgn')}}.
                                        </div>
                                    </div>

                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <b>{{__('texte.representatives_arr.objects.list.min_order_amount')}}:</b> <span class="min_amount" data-min_amount="{{$representative_object->subtype->min_amount}}"> 0.00000</span> {{__('texte.representatives_arr.objects.list.bgn')}}.
                                        </div>
                                    </div>

                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <b>{{__('texte.representatives_arr.objects.list.free_delivery_amount')}}:</b> <span class="transport_amount" data-free_delivery_amount="{{$representative_object->subtype->free_delivery_amount}}"> 0.00000</span> {{__('texte.representatives_arr.objects.list.bgn')}}.
                                        </div>
                                    </div>

                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <b>{{__('texte.representatives_arr.objects.list.contragent')}}:</b> {{$representative_object->contragent->company_name ?? $representative_object->contragent->user->name}}
                                        </div>
                                    </div>                                        
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <b>{{__('texte.representatives_arr.objects.list.object')}}:</b> {{$representative_object->user->name}}
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <b>{{__('texte.representatives_arr.objects.list.object_type')}}:</b> {{$representative_object->subtype->type->name}}, {{$representative_object->subtype->name}}
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <b>{{__('texte.representatives_arr.objects.list.location')}}:</b> {{$representative_object->location->area->name}}, {{$representative_object->location->name}}
                                        </div>
                                    </div>

                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <b>{{__('texte.representatives_arr.objects.list.region')}}:</b> {{$representative_object->subregion->region->name}}, {{$representative_object->subregion->name}}
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <b>{{__('texte.representatives_arr.objects.list.address')}}:</b> {{$representative_object->delivery_address}}
                                        </div>
                                    </div>     
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <b>{{__('texte.representatives_arr.objects.list.email')}}:</b> {{$representative_object->user->email}}
                                        </div>
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <b>{{__('texte.representatives_arr.objects.list.phone')}}:</b> {{$representative_object->user->mobile}}
                                        </div>
                                    </div>                                        
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <b>{{__('texte.representatives_arr.objects.list.contact_person')}}:</b> {{$representative_object->contact_person}}
                                        </div>
                                    </div>                                        
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <b>{{__('texte.representatives_arr.objects.list.payment')}}:</b> {{$representative_object->payment_type==0 ? __('texte.representatives_arr.objects.list.cash') : __('texte.representatives_arr.objects.list.bank_payment')}}
                                        </div>
                                    </div>
                                    @foreach ($filters as $filter)
                                        @if ($filter->type == 2 && $filter->options->isNotEmpty())
                                        <div class="col-xs-12 col-sm-12 col-md-12">
                                            <div class="form-group">
                                                <b>{{$filter->title}}:</b>
                                                @foreach($filter->options as $option)
                                                    {{isset(json_decode($representative_object->filters, true)[$filter->name]) && in_array($option->id, json_decode($representative_object->filters,true)[$filter->name]) ? $option->title.', ' : ''}}
                                                @endforeach
                                            </div>
                                        </div>
                                        @endif

                                        @if ($filter->type == 1 && $filter->options->isNotEmpty())
                                        <div class="col-xs-12 col-sm-12 col-md-12">
                                            <div class="form-group">
                                                <b>{{$filter->title}}:</b>
                                                @foreach ($filter->options as $option)
                                                        @if ($option->active)
                                                            {{(isset(json_decode($representative_object->filters,true)[$filter->name]) && $option->id == json_decode($representative_object->filters, true)[$filter->name]) ? $option->title : ''}}
                                                        @endif
                                                @endforeach
                                            </div>
                                        </div>
                                        @endif

                                        @if ($filter->type == 0)
                                        <div class="col-xs-12 col-sm-12 col-md-12">
                                            <div class="form-group">
                                                <b>{{$filter->title}}:</b>
                                                {{json_decode($representative_object->filters, true)[$filter->name] ?? ''}}
                                            </div>
                                        </div>
                                        @endif
                                    @endforeach

                                    <div class="form-group">
                                        <b>{{__('texte.representatives_arr.objects.list.working_time')}}</b>
                                        <input type="hidden" class="working_time" name="working_time" value="{{ old('working_time', $representative_object->working_time) }}" />
                                        <div id="workingTimeContainer_{{$representative_object->id}}" data-id="{{$representative_object->id}}" class="workingTimeContainer input-group col-xs-12 col-sm-12 col-md-12" style="margin-left:28px;margin-top:5px;"></div>
                                    </div>

                                    <div class="form-group">
                                        <b>{{__('texte.representatives_arr.objects.list.visit_days')}}</b>
                                        <input type="hidden" class="visit_days" name="visit_days" value="{{ old('visit_days', $representative_object->visit_days) }}" />
                                        <div id="visitDaysContainer_{{$representative_object->id}}" data-id="{{$representative_object->id}}" class="visitDaysContainer input-group col-xs-12 col-sm-12 col-md-12" style="margin-left:28px;margin-top:5px;"></div>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <div class="form-group">
                                    <h3>{{__('texte.representatives_arr.objects.list.no_objects_added')}}</h3>
                                </div>
                            </div>
                        @endif
                    </div>                    
                </div>
                <div id="modal-promotions" class="modal inmodal" tabindex="-1" role="dialog" aria-labelledby="modal-label">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content animated flipInY">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 id="modal-label" class="modal-title">{{__('texte.representatives_arr.objects.list.promotions')}}</h4>
                            </div>
                            <div class="modal-body" id='promotions_div'></div>
                        </div>
                    </div>
                </div>

                <!-- Modal create note-->
                <div id="modal-create_note" class="modal inmodal" tabindex="-1" role="dialog" aria-labelledby="modal-label">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content animated flipInY">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 id="modal-label" class="modal-title">{{__('texte.representatives_arr.objects.list.note')}}</h4>
                            </div>
                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="note" class="control-label col-xs-3 col-sm-3 col-md-3">{{__('texte.representatives_arr.objects.list.note')}}</label>
                                    <div class="input-group col-xs-8 col-sm-8 col-md-8">
                                        <textarea id='note' class='note' placeholder='{{__('texte.representatives_arr.objects.list.note')}}' rows="5" style='width:80%;'></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="important" class="control-label col-xs-3 col-sm-3 col-md-3">{{__('texte.representatives_arr.objects.list.important')}}</label>
                                    <div class="input-group col-xs-4 col-sm-4 col-md-4">
                                        <select name='important' id='important'>
                                            <option value='0' selected>{{__('texte.representatives_arr.objects.list.no')}}</option>
                                            <option value='1'>{{__('texte.representatives_arr.objects.list.yes')}}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type='button' class='btn btn-primary btn-send_note' data-object_id=''>{{__('texte.representatives_arr.objects.list.send')}}</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Modal show notes-->
                <div id="modal-show_notes" class="modal inmodal" tabindex="-1" role="dialog" aria-labelledby="modal-label">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content animated flipInY">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 id="modal-label" class="modal-title">{{__('texte.representatives_arr.objects.list.notes')}}</h4>
                            </div>
                            <div class="modal-body">
                                <table id="show_notes_table" class="table table-striped table-bordered">
                                    <thead>
                                        <th>{{__('texte.representatives_arr.objects.list.from')}}</th>
                                        <th>{{__('texte.representatives_arr.objects.list.note')}}</th>
                                        <th>{{__('texte.representatives_arr.objects.list.date')}}</th>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                            <div class="modal-footer"></div>
                        </div>
                    </div>
                </div>
                <div class="panel-footer"></div>
            </div>
        </div>
    </div>
</div>
<script src="{{ asset('js/jquery.businessHours.min.js') }}"></script>
<script src="{{ asset('js/jquery.timepicker.min.js') }}"></script>
<script src="{{ asset('js/chosen.js') }}"></script>

<script type="text/javascript">
    
    $('#important').chosen();
     
    $(document).ready(function(){
        /*$('.workingTimeContainer').each(function(){
            var id = $(this).attr('data-id');
            working_time(this,id);
        });
        $('.visitDaysContainer').each(function(){
            var id = $(this).attr('data-id');
            visit_days(this,id);
        });*/
        $('.invisible').remove();
        
        $('.btn-object').on('click', function(){
            
            var object = $(this).attr('data-object_id');
            
            if($('#container_'+object).is(':hidden')){
                $.ajax({
                    headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            url: '/get_object_data',
                            type: 'POST',
                    data: { 'object' : object},
                    success: function(response){
                        
                        if(response.object.debt_money!=='0.00000'){                            
                            $('#container_'+object).find('.debt_money').closest('.form-group').css('color','red');
                            $('#container_'+object).find('.debt_money').text(response.object.debt_money);
                        }
                        
                        if(response.object.orders_amount!=='0.00000'){                            
                            $('#container_'+object).find('.orders_amount').closest('.form-group').css('color','red');
                            $('#container_'+object).find('.orders_amount').text(response.object.orders_amount);
                        }

                        if(response.object.debt_packaging!=='0.00000'){                            
                            $('#container_'+object).find('.debt_packaging').closest('.form-group').css('color','red');
                            $('#container_'+object).find('.debt_packaging').text(response.object.debt_packaging);
                        }
                        
                        $('#container_'+object).find('.limit').text(response.object.limit);
                        
                        if(response.object.debt_packaging!=='0.00000'){
                            $('#container_'+object).find('.overdue_amount').closest('.form-group').css('color','red');
                            $('#container_'+object).find('.overdue_amount').text(response.object.overdue_amount);
                        }
                        
                        if(response.object.min_order_amount===1){
                            $('#container_'+object).find('.min_amount').text($('#container_'+object).find('.min_amount').attr('data-min_amount'));
                        }
                        
                        if(response.object.transport_amount===1){
                            $('#container_'+object).find('.transport_amount').text($('#container_'+object).find('.transport_amount').attr('data-free_delivery_amount'));
                        }
                        
                        
                        working_time($('#workingTimeContainer_'+object),object);
                        visit_days($('#visitDaysContainer_'+object),object);        
                        
                        $('#container_'+object).toggle();
                    }
                }); 
            }
            else{
                $('#container_'+object).toggle();
            }            
        });
    });
    
    $(document).on('click','.btn-promo',function(){
        var object_id = $(this).attr('data-id');
        var user_type = 'repr';
        
        $.ajax({
            headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: '/get_object_promotions',
                    type: 'POST',
                    async: false,
            data: { 'object_id' : object_id,
                    'user_type' : user_type},
            success: function(response){
                var html='';
                for(var i in response){
                    html+= "<div class='promotion_descr'><h4>" + response[i].title + "</h4>" + response[i].promotion_description + "</div>";
                }
                
                if(html==''){
                    html+='<p>Не са намерени промоции за този обект</p>';
                }
                $('#promotions_div').html(html);
            }
        });
    }); 
    
    function working_time(element,id) {
        
        var working_time_old = jQuery.parseJSON($(element).closest('.form-group').find('.working_time').val());
        var working_time = $("#workingTimeContainer_"+id).businessHours({
            operationTime: working_time_old,
            postInit:function() {
                $('.operationTimeFrom, .operationTimeTill').timepicker({
                    'timeFormat': 'H:i',
                    'step': 15
                });
            },
            dayTmpl:'<div class="dayContainer" style="width: 80px;">' +
                    '<div data-original-title="" class="colorBox"><input class="invisible operationState" type="checkbox" disabled></div>' +
                    '<div class="weekday"></div>' +
                    '<div class="operationDayTimeContainer">' +
                    '<div class="operationTime input-group"><span class="input-group-addon"><i class="fa fa-sun-o"></i></span><input name="startTime" class="mini-time form-control operationTimeFrom" value="" type="text"></div>' +
                    '<div class="operationTime input-group"><span class="input-group-addon"><i class="fa fa-moon-o"></i></span><input name="endTime" class="mini-time form-control operationTimeTill" value="" type="text"></div>' +
                    '</div></div>'
        });
    }
    
    function visit_days(element,id){
        var visit_days_old = jQuery.parseJSON($(element).closest('.form-group').find('.visit_days').val());
        var visit_days = $("#visitDaysContainer_"+id).businessHours({
            operationTime: visit_days_old,
            dayTmpl:'<div class="dayContainer" style="width: 80px;">' +
                    '<div data-original-title="" class="colorBox"><input class="invisible operationState" type="checkbox"></div>' +
                    '<div class="weekday"></div></div>'
        });
    }
    
    $('.btn-note').on('click', function(){
        $('#note').val('');
        $('.btn-send_note').attr('data-id',$(this).attr('data-object_id'));        
    });
    
     $('.btn-send_note').on('click', function(){
         var object_id = $(this).attr('data-id');
         var user_id = {!!auth()->user()->id!!}; 
         var note = $('#note').val();
         var important = $('#important').val();
                 
         $.ajax({
             headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: '/create_object_note',
                    type: 'POST',
                    async: false,
            data: { 'object_id' : object_id,
                    'user_id' : user_id,
                    'note' : note,
                    'important' : important},
            success: function(response){
                $("button[data-dismiss=\"modal\"]").click();
                if(response.warning){
                    alert(response.warning);
                }
                else{
                    alert(response.success);
                }
                $('.btn-show_note[data-object_id="'+object_id+'"]').removeClass('hidden');
            }
         });
     });
     
     $('.btn-show_note').on('click', function(){
        var object_id = $(this).attr('data-object_id');
        $('#show_notes_table > tbody >tr').remove();
        $.ajax({
             headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: '/get_object_notes',
                    type: 'POST',
            data: { 'object_id' : object_id},
            success: function(response){
                for(var i in response){
                    var row = "<tr><td>" + response[i].user_name + "</td><td>" + response[i].note + "</td><td>" + response[i].date + "</td></tr>";
                    $('#show_notes_table > tbody').append(row);
                }
            }
         });        
    });
	
    $('.btn-navigate').on('click', function(){
        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            var lat = $(this).attr('data-lat');
            var lng = $(this).attr('data-lng');
            window.open("google.navigation:q="+lat+","+lng+"" , '_system');
        }
        else{
            alert('Тази опция работи само на мобилни устройства!');
        }
    });
    
</script>
@endsection