@extends('layouts.master')
@section('content')

    <style>
        ._cust_filter { width: 188px; float: left; padding-right: 10px; margin-bottom: 15px;}
        .CL-Product{padding-right: 10px;}
        .btn-primary{box-shadow: none}
        .Product-Filter .form-s2 .select2-container .select2-selection--single{height: 32px !important;}
        .Product-Filter .form-s2 .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 30px;
        }
        .table ._cust_filter{width: 140px; margin: 0}
        .table ._cust_filter .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 24px; font-size: 12px;
        }
        .table ._cust_filter .form-s2 .select2-container .select2-selection--single{height: 25px !important;}
        .table ._cust_filter .form-s2 .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 25px;
        }
        .table td{padding: 5px 1px 5px 1px; line-height: 24px;}
        .table td .btn-default{padding-top: 6px; padding-bottom: 6px; margin: 0}
        .table ._cust_filter {width: 120px !important;  margin: 0;}
        .custom-input {
            background-color: #fff;
            border-color: #e4e4e4;
            height: 25px;
            font-size: 14px;
            box-shadow: none;
        }
        #RetailerTable .select2-results__option[aria-selected] {
            font-size: 11px;
        }
        .swal-overlay--show-modal .swal-modal {
    font-family: proximanova-semibold, sans-serif!important;
}
.swal-overlay--show-modal .swal-modal {
    opacity: 1;
    pointer-events: auto;
    box-sizing: border-box;
    -webkit-animation: showSweetAlert .3s;
    animation: showSweetAlert .3s;
    will-change: transform;
}
.swal-modal {
    border-radius: 0;
    border-top: solid 3px #f12300;
}
.swal-modal {
    width: 478px;
    opacity: 0;
    pointer-events: none;
    background-color: #fff;
    text-align: center;
    position: static;
    margin: 20px auto;
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    z-index: 10001;
    transition: opacity .2s,-webkit-transform .3s;
    transition: transform .3s,opacity .2s;
    transition: transform .3s,opacity .2s,-webkit-transform .3s;
}
.swal-title {
    font-size: 20px;
    padding: 10px 16px;
}
.swal-title {
    color: rgba(0,0,0,.65);
    font-weight: 600;
    text-transform: none;
    position: relative;
    display: block;
    line-height: normal;
    text-align: center;
}
.swal-footer {
    text-align: center;
}
.swal-footer {
    padding-top: 13px;
    margin-top: 13px;
    padding: 13px 16px;
    border-radius: inherit;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.swal-button--cancel, .swal-button--cancel:focus, .swal-button--cancel:hover {
    font-size: 14px;
    padding: 6px 20px !important;
    overflow: hidden !important;
    outline: none !important;
    box-shadow: none !important;
}
.swal-button {
    border-radius: 0;
    font-size: 14px;
    padding: 6px 20px;
    font-family: proximanova-semibold, sans-serif!important;
    outline: none !important;
    box-shadow: none !important;
}
.swal-button--cancel {
    color: #555;
    background-color: #efefef;
}
.swal-button--danger, .swal-button--danger:hover, .swal-button--danger:focus {
    background-color: #e20000 !important;
}
.swal-icon {
    width: 60px;
    height: 60px;
    border-width: 4px;
    border-style: solid;
    border-radius: 50%;
    padding: 0;
    position: relative;
    box-sizing: content-box;
    margin: 20px auto;
}
.swal-icon:first-child {
    margin-top: 32px;
}
.swal-icon--warning__body, .swal-icon--warning__dot {
    position: absolute;
    left: 50%;
    background-color: #f8bb86;
}
.swal-icon--warning__body {
    width: 5px;
    height: 28px;
    top: 10px;
    border-radius: 2px;
    margin-left: -2px;
}
    </style>

    <div class="row mt-2 mb-3">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">Retailer <span>Management</span></h2>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6">
            <ol class="breadcrumb">
                <li><a href="#"><span>Retailer </span></a></li>
                <li><span>List</span></li>
            </ol>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="Product-Filter">
                {{--<div class="row">
                    <div class="col pr-0">
                        <div class="_cust_filter">
                            <div class="form-s2">
                                <select class="form-control formselect" onchange="LoadDistributorsByRegion(this.value, 'distributor')" placeholder="Select Region" id="region_id" name="region_id">
                                    <option selected value="">Select Region</option>
                                    @foreach(($regions) as $region)
                                        <option value="{{$region->id}}">{{$region->region_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="_cust_filter">
                            <div class="form-s2">
                                <select class="form-control formselect" onchange="fetchAllAreaTerritories(this.value)" placeholder="Select Area/Zone" id="area_id" name="area_id">
                                    <option selected disabled value="0">Select Area/Zone</option>
                                </select>
                            </div>
                        </div>

                        <div class="_cust_filter">
                            <div class="form-s2">
                                <select class="form-control formselect" placeholder="Select Territory" id="territory_id" name="territory_id">
                                    <option selected disabled value="0">Select Territory</option>
                                </select>
                            </div>
                        </div>


                    </div>
                    <div class="col-auto pl-0">
                        <button class="btn btn-primary m-0" id="retailerEditSearch"> Search</button>
                    </div>

                </div>--}}
                <div class="row">
                    <div class="col-12">
                        <div class="_cust_filter">
                            <div class="form-s2">
                                <select class="form-control formselect regionListDropDown" placeholder="Select Region" style="width: 100%"
                                        name="region"  id="genera_region" required onchange="LoadDistributorsByRegion($(this).val(), 'distributor')">
                                    <option selected value="">Select Region</option>
                                </select>
                            </div>
                        </div>

                        <div class="_cust_filter">
                            <div class="form-s2">
                                <select class="form-control formselect" placeholder="Select Distributor"
                                        style="width: 100%" name="distributor" id="distributor" onchange="LoadOrderBookerByDistrobutor($(this).val(), 'order_booker')">
                                    <option selected value="0">Select Distributor</option>
                                </select>
                            </div>
                        </div>

                        <div class="_cust_filter">
                            <div class="form-s2">
                                <select class="form-control formselect" onchange="LoadRoutesByDistributor($(this).val(), 'routes')" placeholder="Select Order Booker"
                                        style="width: 100%" name="order_booker" id="order_booker">
                                    <option selected value="">All Order Bookers</option>
                                </select>
                            </div>
                        </div>

                        <div class="_cust_filter">
                            <div class="form-s2">
                                <select class="form-control formselect" placeholder="Select Route"
                                        style="width: 100%" name="route" id="routes">
                                    <option selected value="">Select Route</option>
                                </select>
                            </div>
                        </div>


                        {{--                        <button class="btn btn-primary m-0" style="padding: 6px 10px"  onclick="fetchReport()" id="posButton">Report</button>--}}
                        <div class="col-auto pl-0">
                            <button class="btn btn-primary m-0" id="retailerEditSearch"> Search</button>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="body">

                    <table class="table table-hover dt-responsive1 nowrap" id="RetailerTable" style="width:100%">
                        <thead>
                        <tr>
                            <th style="width: 70px;">R.ID</th>
                            <th>Retailer Name</th>
                            <th>Owner Name</th>
                            <th>Contact Number</th>
                            <th>Registration</th>
                            <th>NTN</th>
                            <th>STRN</th>
                            <th>Locality</th>
                            <th>Neighbourhood</th>
                            <th>Segment</th>
                            <th>Channel</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>


                </div>
            </div>

        </div>
    </div>
@endsection
@push('scripts')
    <script>
        function ReportData(){
            this.data = [];
        }
        var reportData = new ReportData();

        function GetEmployeeLinePermissions() {
            http('GET', `/GetEmployeeLinePermissions`).then((e) => {
                reportData.data = JSON.parse(e);
                SetRegionsDropDown();
            });
        }
        GetEmployeeLinePermissions ();


        function SetRegionsDropDown(){
            reportData.data.forEach(element => {
                $(`.regionListDropDown`).append(`<option value="${element.id}">${element.region_name}</option>`);
            });
        }

        function LoadDistributorsByRegion(regionId, el){
            var region = reportData.data.find(x=>x.id==regionId);
            $(`#${el}`).html(`<option selected value="">Select Distributor</option>`);
            if(region.distributors){
                if(region.distributors.length>0){
                    region.distributors.forEach(element => {
                        $(`#${el}`).append(`<option value="${element.id}">${element.distributor_name}</option>`);
                    });
                }
            }
        }

        function LoadRoutesByDistributor(empID, el){
            http('GET', '/GetEmployeeRoutes?empID='+empID).then((e) => {
                var route = JSON.parse(e);
                $(`#${el}`).html(`<option selected value="">Select Route</option>`);
                if(route.length>0){
                    route.forEach(element => {
                        $(`#${el}`).append(`<option value="${element.route_id}">${element.route_name}</option>`);
                    });
                }
            });
        }

        function LoadOrderBookerByDistrobutor(distributorId, el, type){

            $(`#${el}`).html(`<option selected value="">All Order Bookers</option>`);

            var type = 'genera_region' ;

            var regionId = $(`#${type}`).val();
            var region = reportData.data.find(x=>x.id==regionId);
            var distributor = region.distributors.find(x=>x.id==distributorId);

            if(distributor.order_bookers){
                if(distributor.order_bookers.length>0){
                    distributor.order_bookers.forEach(element => {
                        $(`#${el}`).append(`<option value="${element.employee_id}">${element.employee_first_name+' '+element.employee_last_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.');
                        }
                    }
                });
            });
        }


        $('#retailerEditSearch').click(function () {
            table = $('#RetailerTable').DataTable();
            // clear first
            if ($('#genera_region').val()=='' || $('#distributor').val()=='' || $('#order_booker').val()=='' || $('#routes').val()=='' ) {

                $('#notifDiv').css('background', 'red').text('Please select all inputs.').fadeIn();
                setTimeout(() => {
                    $('#notifDiv').fadeOut();
                }, 3000);
                return;
            }
            $(this).attr('disabled', 'disabled').text('Searching..')
            $.ajax({
                type: 'POST',
                url: `/searchRetailerBulkEdit`,
                data: {
                    _token: csrfToken,
                    region_id: $('#genera_region').val(),
                    distributor: $('#distributor').val(),
                    employee: $('#order_booker').val(),
                    route: $('#routes').val(),
                },
                success: function (response) {
                    table.destroy();
                    if (response.code == 200) {
                        $(this).text('Search')
                        $(this).removeAttr('disabled').text("Search");
                        $('#notifDiv').css('background', 'green').text(response.count +" Retailer(s) found.").fadeIn();

                        $('#RetailerTable tbody').html('');
                        var html ='';
                        for(var i=0; i<response.response.length; i++){
                            var row = response.response;
                            html += '<tr class="retailer-row-'+row[i].id+'">\n' +
                                '        <td>'+row[i].id+'</td>\n' +
                                '        <td><input class="form-control custom-input" id="retailer_name_'+i+'" value="'+ row[i].retailer_name  +'" /></td>\n' +
                                '        <td><input class="form-control custom-input" id="retailer_owner_'+i+'" value="'+ row[i].retailer_owner +'" /></td>\n' +
                                '        <td><input class="form-control custom-input" id="retailer_phone_'+i+'" value="'+ row[i].retailer_phone +'" /></td>\n' +
                                '        <td><div class="_cust_filter p-0"><div class="form-s2"><select onchange="updateNtnStrnValue(this.value,'+i+')\" class="form-control formselect " placholder="Select Registration" id="retailer_registration_'+i+'"><option value="1" ' + (row[i].retailer_register == 1 ? "selected" : "") + '>Registered</option><option value="0" ' + (row[i].retailer_register == 0 ? "selected" : "") + '>UnRegistered</option></select></div></div></td>\n' +
                                '        <td><input class="form-control custom-input" id="retailer_ntn_'+i+'" value="'+ row[i].ntn +'" ' + (row[i].retailer_register == 0 ? "readonly" : "") + '/></td>\n' +
                                '        <td><input class="form-control custom-input" id="retailer_strn_'+i+'" value="'+ row[i].strn +'" ' + (row[i].retailer_register == 0 ? "readonly" : "") + '/></td>\n' ;

                            html += '<td><div class="_cust_filter p-0">\n' +
                                '                <div class="form-s2">\n' +
                                '<select  id="locality_id_'+i+'" onchange="updateNeighbourhoods(this.value, '+i+')\" class="form-control formselect" placeholder="Select Zone/Area">\n' +
                                '                        <option value="">Select locality</option>\n';
                            for(var j=0; j<row[i].localities.length; j++) {
                                var rowLocality = row[i].localities;
                                if(rowLocality[j].id==row[i].locality_id)
                                    html += '<option value="'+rowLocality[j].id+'" selected>'+rowLocality[j].name+'</option>\n';
                                else
                                    html += '<option value="'+rowLocality[j].id+'">'+rowLocality[j].name+'</option>\n';
                            }
                            html += '</select>\n' +
                                '                </div>\n' +
                                '            </div>\n' +
                                '        </td>\n' ;

                            html += '<td><div class="_cust_filter p-0">\n' +
                                '                <div class="form-s2">\n' +
                                '<select  id="neighbourhood_id_'+i+'" class="form-control formselect" placeholder="Select Zone/Area">\n' +
                                '                        <option value="">Select Neighourhood</option>\n';
                            for(var j=0; j<row[i].neighbourhoods.length; j++) {
                                var rowNeighbourhood = row[i].neighbourhoods;
                                if(rowNeighbourhood[j].id==row[i].neighbourhood_id)
                                    html += '<option value="'+rowNeighbourhood[j].id+'" selected>'+rowNeighbourhood[j].name+'</option>\n';
                                else
                                    html += '<option value="'+rowNeighbourhood[j].id+'">'+rowNeighbourhood[j].name+'</option>\n';
                            }
                            html += '</select>\n' +
                                '                </div>\n' +
                                '            </div>\n' +
                                '        </td>\n' ;


                            html += '<td><div class="_cust_filter p-0">\n' +
                                '                <div class="form-s2">\n' +
                                '<select  id="segment_id_'+i+'" onchange="updatechannels(this.value, '+i+')" class="form-control formselect" placeholder="Select Zone/Area">\n' +
                                '                        <option value="">Select Segment</option>\n';
                            for(var j=0; j<row[i].segments.length; j++) {
                                var rowSegment = row[i].segments;

                                if(rowSegment[j].id==row[i].segment_id)
                                    html += '<option value="'+rowSegment[j].id+'" selected>'+rowSegment[j].name+'</option>\n';
                                else
                                    html += '<option value="'+rowSegment[j].id+'">'+rowSegment[j].name+'</option>\n';
                            }
                            html += '</select>\n' +
                                '                </div>\n' +
                                '            </div>\n' +
                                '        </td>\n' ;


                            html += '<td><div class="_cust_filter p-0">\n' +
                                '                <div class="form-s2">\n' +
                                '<select  id="channel_id_'+i+'" class="form-control formselect" >\n' +
                                '                        <option value="">Select Channel</option>\n';
                            for(var j=0; j<row[i].channels.length; j++) {
                                var rowChannel = row[i].channels;
                                if(rowChannel[j].id==row[i].channel_id)
                                    html += '<option value="'+rowChannel[j].id+'" selected>'+rowChannel[j].retailer_type_name+'</option>\n';
                                else
                                    html += '<option value="'+rowChannel[j].id+'">'+rowChannel[j].retailer_type_name+'</option>\n';
                            }
                            html += '</select>\n' +
                                '                </div>\n' +
                                '            </div>\n' +
                                '        </td>\n' ;

                            html +=     `<td><div class="_cust_filter p-0"><div class="form-s2">
                                            <select id="status_${i}" prev-status="${row[i].status}" class="form-control formselect retailer-status " >
                                                <option ${  row[i].status == 1 ? "selected" : ""  }  value="1" data-re-id="${row[i].id}" data-rr-id="${row[i].route_retailer_id}">Active</option>
                                                <option ${  row[i].status == 2 ? "selected" : ""  } value="2" data-re-id="${row[i].id}" data-rr-id="${row[i].route_retailer_id}">Inactive</option>
                                                <option ${  row[i].status == 3 ? "selected" : ""  } value="3" data-re-id="${row[i].id}" data-rr-id="${row[i].route_retailer_id}">Closed</option>
                                            </select></div></div>
                                            </td>`;

                            html += '    <td><a href="javascript:;"  onclick="updateRetailer('+row[i].id+', '+i+')"  class="btn btn-default bulk_update_btn" title="Update">Update</a></td>\n' +
                                '</tr>' ;

                        }


                        $('#RetailerTable tbody').html(html);
                        $(".formselect").select2();
                        $('#RetailerTable').DataTable({
                            scrollX: true,
                        });
                        setTimeout(() => {
                            $('#notifDiv').fadeOut();
                        }, 2000);
                        return
                    }
                    $(this).removeAttr('disabled').text('Search');
                    $('#notifDiv').css('background', 'red').text('Failed to Search Retailers').fadeIn();
                    console.log(response)
                    setTimeout(() => {
                        $('#notifDiv').fadeOut();
                    }, 3000);
                }.bind($(this))
            });
        });

        function updateRetailer(retailer_id, rowNum){
            var retailer_id = retailer_id;

            var retailer_name = document.getElementById('retailer_name_'+rowNum).value;
            var retailer_owner = document.getElementById('retailer_owner_'+rowNum).value;
            var retailer_phone = document.getElementById('retailer_phone_'+rowNum).value;
            var retailer_registration = document.getElementById('retailer_registration_'+rowNum).value;
            var retailer_ntn = document.getElementById('retailer_ntn_'+rowNum).value;
            var retailer_strn = document.getElementById('retailer_strn_'+rowNum).value;
            var status = document.getElementById('status_'+rowNum).value;
            var is_remove_route = document.getElementById('status_'+rowNum).getAttribute("remove-route");



            var loc = document.getElementById('locality_id_'+rowNum).value;
            var neig = document.getElementById('neighbourhood_id_'+rowNum).value;
            var seg = document.getElementById('segment_id_'+rowNum).value;
            var ch = document.getElementById('channel_id_'+rowNum).value;

            if(loc!='' && neig!='' && seg!='' && ch!='') {
                http('GET', '/updateRetailerBulkEdit?retailer_id=' + retailer_id + '&loc=' + loc + '&neig=' + neig + '&seg=' + seg + '&ch=' + ch + '&retailer_name=' + retailer_name  + '&retailer_owner=' + retailer_owner  + '&retailer_phone=' + retailer_phone + '&retailer_registration=' + retailer_registration + '&retailer_ntn=' + retailer_ntn + '&retailer_strn=' + retailer_strn  + '&status=' + status+ '&is_remove_route=' + is_remove_route).then((e) => {
                    if (e.code == 200)
                        self.notification('', 'Retailer update successfully!.');
                    else
                        self.notification('error', 'Some Error Occured, please try again.');
                });
            }else
                self.notification('error', 'Fill All Inputs!');
        }
        function updateNtnStrnValue(value, rowNum){
            if(value == 1){
                $(`#retailer_ntn_${rowNum}`).attr('readonly',false);
                $(`#retailer_strn_${rowNum}`).attr('readonly',false);
            }else{
                $(`#retailer_ntn_${rowNum}`).val(0).attr('readonly',true);
                $(`#retailer_strn_${rowNum}`).val(0).attr('readonly',true);
            }
        }
        function updateNeighbourhoods(value, rowNum){
            http('GET', '/GetNeigbourhoods?locality='+value).then((e) => {
                var data = JSON.parse(e);

                $('#neighbourhood_id_'+rowNum).html('<option selected value="">Select Neighbourhood</option>');
                if(data.length>0){
                    data.forEach(element => {
                        $('#neighbourhood_id_'+rowNum).append('<option value="'+element.id+'">'+element.name+'</option>');
                    });
                }
            });
        }

        function updatechannels(value, rowNum){
            http('GET', '/GetRetailersType?segment='+value).then((e) => {
                var data = JSON.parse(e);

                $('#channel_id_'+rowNum).html('<option selected value="">Select Channel</option>');
                if(data.length>0){
                    data.forEach(element => {
                        $('#channel_id_'+rowNum).append('<option value="'+element.id+'">'+element.retailer_type_name+'</option>');
                    });
                }
            });
        }
        $(document).on('change','.retailer-status',function(){
            let id              =   $(this).attr('id');
            let rr_id           =   $(this).find('option:selected').attr('data-rr-id');
            let re_id           =   $(this).find('option:selected').attr('data-re-id');
            let prevStatus      =   $(this).attr('prev-status');
            let currentStatus   =   $(this).val();
            $(`#${id}`).attr('remove-route',0);
            if( prevStatus !== currentStatus && ( currentStatus  == 2 || currentStatus   == 3 ) ){
                swal({
                    title: "Do you want to remove route?",
                    //text: "Once deleted, you will not be able to recover data!",
                    icon: "warning",
                    buttons: true,
                    buttons: ["No", "Yes"],
                    dangerMode: true,
                }).then((willDelete) => {
                    if (willDelete) {
                        var thisRef = $(this);
                        thisRef.attr('disabled', 'disabled');
                        thisRef.text('Processing...');
                        $.ajax({
                            type: 'POST',
                            url: '/route-retailer-delete',
                            data: {
                                _token          : $('meta[name="csrf_token"]').attr('content'),
                                id              : id,
                                rr_id           : rr_id,
                                re_id           : re_id,
                                currentStatus   : currentStatus
                            },
                            success: function (response) {
                                if (response.status == 'success') {
                                    $(`.retailer-row-${re_id}`).remove();
                                    $('#notifDiv').fadeIn();
                                    $('#notifDiv').css('background', 'green');
                                    $('#notifDiv').text('Successfully deleted.');
                                    setTimeout(() => {
                                        $('#notifDiv').fadeOut();
                                    }, 3000);
                                } else {
                                    thisRef.removeAttr('disabled');
                                    thisRef.text('Delete');
                                    $('#notifDiv').fadeIn();
                                    $('#notifDiv').css('background', 'red');
                                    $('#notifDiv').text('Unable to delete at the moment');
                                    setTimeout(() => {
                                        $('#notifDiv').fadeOut();
                                    }, 3000);
                                }
                            }
                        });
                    }
                    // if (willDelete) {
                    //     $(`#${id}`).attr('remove-route',1);
                    // } else {
                    //     $(`#${id}`).attr('remove-route',0);
                    // }
                });
            }
        });

    </script>

@endpush