@extends('layouts.master')
@section('content')
    <style>
        .productSearch {
            position: relative;
        }
        .productSearch input {
            height: 32px;
            border: solid 1px #eae9e9;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            padding-left: 30px;
            font-size: 13px;
            letter-spacing: 1px;
        }
        .productSearch .fa {
            position: absolute;
            top: 8px;
            left: 8px;
            color: #b5b5b5;
        }
        .se_cus-type .form-control {
            border: 1px solid #eeeeee;
            background-color: #fff;
        }
        .wbtn{background: linear-gradient(90deg, #ffffff 0%, #ffffff 100%); color: #0038ba!important; right: 140px; border: solid 1px #0038ba; border-radius: 0; margin-top: 27px; box-shadow:none; padding:10px 32px;line-height:1; font-size: 14px}
        .wbtn:hover{background: linear-gradient(90deg, #1e54d3 0%, #0038ba 100%); color: #ffffff!important;}
        .ProList-div tr:HOVER{background-color: #f3f2f2!important}

        .sec-div {background: #fff;  padding: 0px 10px 10px 10px; border: solid 1px #dddddd; min-height: 100%}
        .sec-div .form-control {box-shadow: none; border: solid 1px #dddddd; font-size: 14px; height: 28px;}
        .sec-div hr{margin-top: 10px; margin-bottom: 10px}

    </style>

    <div class="row mt-2 mb-3">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">Create <span> Route</span></h2>
        </div>

        <div class="col-lg-6 col-md-6 col-sm-6">
            <ol class="breadcrumb">
                <li><a href="#"><span>New</span></a></li>
                <li><span>Route</span></li>
            </ol>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <form method="post" action="/save_new_route{{($id)? '/'.$id:''}}" >
                @CSRF
                <div class="card PB-20">


                    <div class="header addPR-head">
                        <h2>New <span> Route</span></h2>
                    </div>
                    <div class="row m-0" id="floating-label">
                        <div class="col-md-4 PT-20">
                            <div class="form-group">
                                <label class="control-label mb-10">Route ID</label>
                                <input type="text" @if(isset($route)) value="{{$route->route_id}}" @endif name="route_id" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="col-md-4 PT-20 pl-0">
                            <div class="form-group">
                                <label class="control-label mb-10">Route Name</label>
                                <input type="text" @if(isset($route)) value="{{$route->name}}" @endif name="route_name" class="form-control" placeholder="" required>
                            </div>
                        </div>

                        {{--<div class="col-md-4 PT-10 pl-0">
                            <label class="font12 mb-5">Select Route Type</label>
                            <div class="form-s2">
                                <select class="form-control formselect" placeholder="Select Route Type">
                                    <option>Route Type</option>
                                    <option>Route Type</option>
                                </select>
                            </div>
                        </div>--}}

                        <div class="col-md-4 PT-10 pl-0">
                            <label class="font12 mb-5">Select Area</label>
                            <div class="form-s2">
                                <select class="form-control formselect" name="area" onChange="fetchCities(this.value),fetchOB(this.value)" placeholder="Select Area" required>
                                    <option value="">Select Area</option>
                                    @foreach($areas as $area)
                                        <option value="{{$area->id}}" @if(isset($route)) @if($route->area_id == $area->id) selected @endif @endif>{{$area->area_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="font12 mb-5">Select Town</label>
                            <div class="form-s2">
                                <select class="form-control formselect" name="town" id="towns" placeholder="Select Town" required>
                                    <option value="">Select Town</option>
                                    @foreach($cities as $city)
                                        <option value="{{$city->city_id}}" @if(isset($route)) @if($route->town_id == $city->city_id) selected @endif @endif>{{$city->city_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-4 pl-0">
                            <label class="font12 mb-5">Select Route Day</label>
                            <div class="form-s2">
                                <select class="form-control formselect" name="days" id="days" placeholder="Select Route Day"  @if(isset($route)) @if($route->day_lock == 1) required="required" @endif @endif >
                                    <option value="">Select Route Day</option>
                                    <option {{$route->days == 1 ? "selected='selected'":''}} value="1">Monday</option>
                                    <option {{$route->days == 2 ? "selected='selected'":''}} value="2">Tuesday</option>
                                    <option {{$route->days == 3 ? "selected='selected'":''}} value="3">Wednesday</option>
                                    <option {{$route->days == 4 ? "selected='selected'":''}} value="4">Thursday</option>
                                    <option {{$route->days == 5 ? "selected='selected'":''}} value="5">Friday</option>
                                    <option {{$route->days == 6 ? "selected='selected'":''}} value="6">Saturday</option>
                                    <option {{$route->days == 7 ? "selected='selected'":''}} value="7">Sunday</option>
                                    <option {{$route->days == 8 ? "selected='selected'":''}} value="8">Fortnightly</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row m-0">
                        <div class="col-md-4 PT-30">
                            <div class="sec-div">

                                <div class="header addPR-head" style="margin: 0 -10px 10px -10px">
                                    <h2>Route <span> Basic Settings</span></h2>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 font13">Radius Lock</div>
                                    <div class="col-md-6 PT-5">
                                        <label class="switch">
                                            <input type="checkbox" name="radius_lock" value="1" @if(isset($route)) @if($route->radius_lock == 1) checked @endif @endif >
                                            <span class="slider round"></span> </label>
                                    </div>
                                    <div class="col-md-12">
                                        <hr class="mt-5 mb-5">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 font13 pt-10">
                                        Enter Radius in Meteres
                                    </div>
                                    <div class="col-md-6"><input type="text" id="radius_meters" @if(isset($route)) value="{{$route->radius}}" @endif oninput="checkRadius(this.value)" name="radius_meters" class="form-control" placeholder="Greater then 50">
                                    </div>

                                    <div class="col-md-12">
                                        <hr class="mt-5 mb-5">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 font13 PT-5">Shop Sequence Lock</div>
                                    <div class="col-md-6 PT-5 PT-5">
                                        <label class="switch">
                                            <input type="checkbox" name="sequence" value="1" @if(isset($route)) @if($route->shop_sequence_lock == 1) checked @endif @endif>
                                            <span class="slider round"></span> </label>
                                    </div>
                                    <div class="col-md-12">
                                        <hr class="mt-5 mb-5">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 font13 PT-5">New Shop Approval Process</div>
                                    <div class="col-md-6 PT-5">
                                        <label class="switch">
                                            <input type="checkbox" name="approval" value="1" @if(isset($route)) @if($route->shop_approval_process == 1) checked @endif @endif>
                                            <span class="slider round"></span> </label>
                                    </div>
                                    <div class="col-md-12">
                                        <hr class="mt-5 mb-5">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 font13 PT-5">Auto Complete</div>
                                    <div class="col-md-6 PT-5">
                                        <label class="switch">
                                            <input type="checkbox" name="auto_complete" value="1" @if(isset($route)) @if($route->auto_complete == 1) checked @endif @endif>
                                            <span class="slider round"></span> </label>
                                    </div>
                                    <div class="col-md-12">
                                        <hr class="mt-5 mb-5">
                                    </div>
                                </div>
{{--                                <div class="row">--}}
{{--                                    <div class="col-md-12">--}}
{{--                                        <div class="form-s2">--}}
{{--                                            <label class="m-0 font13">Select Day Lock</label>--}}
{{--                                            <select class="form-control formselect" name="day" placeholder="select Day">--}}
{{--                                                <option value="0">Select Day</option>--}}
{{--                                                <option value="1">Monday</option>--}}
{{--                                                <option value="1">Tuesday</option>--}}
{{--                                                <option value="1">Wednesday</option>--}}
{{--                                                <option value="1">Thursday</option>--}}
{{--                                                <option value="1">Friday</option>--}}
{{--                                                <option value="1">Saturday</option>--}}
{{--                                            </select>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                </div>--}}


                                <div class="row">
                                    <div class="col-md-6 font13 PT-5">Day Lock</div>
                                    <div class="col-md-6 PT-5">
                                        <label class="switch">
                                            <input type="checkbox"  class="" name="day_lock"  @if(isset($route)) @if($route->days == 8) disabled @endif @endif  id="day_lock" value="1" @if(isset($route)) @if($route->day_lock == 1) checked @endif @endif>
                                            <span class="slider round"></span> </label>
                                    </div>
                                    <div class="col-md-12">
                                        <hr class="mt-5 mb-5">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4 PT-30 pl-0">
                            <div class="sec-div">

                                <div class="header addPR-head" style="margin: 0 -10px 10px -10px">
                                    <h2>Additional <span> Info</span></h2>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 font13 pt-10">
                                        G.S. Shops
                                    </div>
                                    <div class="col-md-6"><input type="number" @if(isset($route)) value="{{$route->GS_shops}}" @endif name="gs_shops" id="gs_shops" oninput="calculateShops(this.value)" value="0" class="form-control" placeholder="">
                                    </div>
                                    <div class="col-md-12">
                                        <hr>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 font13 pt-10">W.S. Shops
                                    </div>
                                    <div class="col-md-6"><input type="number" id="ws_shops" @if(isset($route)) value="{{$route->WS_shops}}" @endif name="ws_shops" oninput="calculateShops(this.value)" value="0" class="form-control" placeholder="">
                                    </div>
                                    <div class="col-md-12">
                                        <hr>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 font13 pt-10">Total Shops
                                    </div>
                                    <div class="col-md-6"><input type="number" id="total_shops" name="total_shops" @if(isset($route)) value="{{$route->total_shops}}" @endif class="form-control" placeholder="" value="0" readonly>
                                    </div>
                                    <div class="col-md-12">
                                        <hr>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 font13 pt-10">First Shop
                                    </div>
                                    <div class="col-md-6"><input type="text" id="first_shop" @if(isset($route)) value="{{$route->first_shop}}" @endif name="first_shop" value="0" class="form-control" placeholder="">
                                    </div>
                                    <div class="col-md-12">
                                        <hr>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 font13 pt-10">Last Shop
                                    </div>
                                    <div class="col-md-6"><input type="text" id="last_shop" @if(isset($route)) value="{{$route->last_shop}}" @endif name="last_shop" value="0" class="form-control" placeholder="">
                                    </div>

                                </div>

                            </div>
                        </div>

                        <div class="col-md-4 PT-30 pl-0">
                            <div class="sec-div">

                                <div class="header addPR-head" style="margin: 0 -10px 10px -10px">
                                    <h2>Assign To <span> Employee</span></h2>
                                </div>

                                <div class="row">
                                    <div class="col-md-12 ">
                                        <label class="font12 mb-5">Select Sale Agent</label>
                                        <div class="form-s2">
                                            <select class="form-control formselect" name="sale_agent" id="sale_agent" placeholder="select Sale Agent" style="width:100%!important" required>
                                                <option value="">Select Sale Agent</option>
                                                @foreach($orderBookers as $order_booker)
                                                    <option data-test="{{@$routeAssignment->employee_id}}" value="{{$order_booker->employee_id}}" {{ @$routeAssignment->employee_id == $order_booker->employee_id ? "selected":"" }}>{{$order_booker->employee_name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 text-right PT-15">
                        <button type="submit" class="btn btn-primary mr-2" id="create_route">@if(isset($route) && @$route->id > 0) Update @else Create @endif Route</button>
    {{--                    <button type="submit" class="btn btn-cancel">Cancel</button>--}}
                    </div>

                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <script>

        $(document).on('change','#days',function() {
            if($(this).val() == 8){
                $("#day_lock").prop("checked", false);
                $('#day_lock').attr("disabled", "disabled");
            }else{
                $('#day_lock').removeAttr("disabled");
            }
        });

        $(document).on('click','#day_lock',function() {
            if($(this).is(':checked')){
                $('#days').attr("required", "required");
            }else{
                $('#days').removeAttr("required");
            }
        });

        function checkRadius(value){
            if(value<50) {
                document.getElementById('create_route').disabled= true;
                document.getElementById('radius_meters').style.borderColor = 'red';
            }else {
                document.getElementById('create_route').disabled= false;
                document.getElementById('radius_meters').style.borderColor = '#dddddd';
            }
        }

        function calculateShops(value){
            var gs = $('#gs_shops').val()? $('#gs_shops').val():0;
            var ws = $('#ws_shops').val()? $('#ws_shops').val():0;
            var first = $('#first_shop').val()? $('#first_shop').val():0;
            // var last = $('#last_shop').val()? $('#last_shop').val():0;
            var total = parseInt(gs)+parseInt(ws);

            $('#total_shops').val(total);
        }


        function fetchCities(value){
            http('GET', '/getCitiesFromArea?area_id='+value).then((e) => {
                $('#towns').html(`<option selected value="">Select Town</option>`);
                if(e){
                    if(e.length>0){
                        e.forEach(element => {
                            $('#towns').append(`<option value="${element.city_id}">${element.city_name}</option>`);
                        });
                    }
                }
            });
        }

        function fetchOB(value){
            http('GET', '/getOBFromArea?area_id='+value).then((e) => {
                $('#sale_agent').html(`<option selected value="">Select Sale Agent</option>`);
                if(e){
                    if(e.length>0){
                        e.forEach(element => {
                            $('#sale_agent').append(`<option value="${element.employee_id}">${element.employee_name}</option>`);
                        });
                    }
                }
            });
        }

        function http(type, url, formData) {
            var self = this;
            return new Promise(function(resolve, reject) {
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                    },
                    url: url,
                    type: type,
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: formData,
                    success: function(e) {
                        resolve(e);
                    },
                    error: function(err) {
                        console.log(err);
                        if (err.status == 422 || err.status == 500) {
                            self.notification('error', 'Some Error Occured, please try again.');
                        }
                    }
                });
            });
        }

    </script>
@endsection