@extends('layouts.master')

@section('data-sidebar')

@endsection

@section('content')

    <style>
        .pocPROFILE {
            font-size: 14px;
            padding: 15px 20px;
            line-height: 22px
        }
        .pocPROFILE h3 {
            font-size: 18px;
            margin: 0
        }
        .pocPROFILE h2 {
            font-size: 15px
        }
        .pocPic img {
            position: relative;
            width: 70px;
            height: 70px;
            height: auto;
            border-radius: 50%;
            -webkit-box-shadow: 0 0 20px 0 rgba(103,92,139,.25);
            box-shadow: 0 0 20px 0 rgba(103,92,139,.25);
        }
        .pocPROFILE .rightCont {
            letter-spacing: 1px;
            text-align: right
        }
        .pocPROFILE .rightCont .POCPH {
            font-size: 16px;
            display: block
        }
        .pocPROFILE .rightCont .POCPH strong {
            width: 108px;
            display: inline-block
        }
        .rightCont a {
            color: #0038ba
        }
        .rightCont a:HOVER {
            text-decoration: underline
        }
        .pocPROFILE .form-control {
            box-shadow: none;
            height: 33px;
        }
        .pocPROFILE .infoDiv {
            background-color: #f9f9f9;
            padding: 5px;
            margin-bottom: 8px;
        }
        .pocPROFILE .infoDiv .control-label {
            font-size: 13px;
            color: #7d7d7d!important; line-height: normal;
            margin-bottom: 0
        }
        .pocPROFILE .infoDiv p {
            font-size: 14px;
            color: #282828; line-height: normal;
            margin-bottom: 0
        }
        .pocPROFILE .p-col-L {
            padding-right: 4px
        }
        .pocPROFILE .p-col-R {
            padding-left: 4px
        }
        .ADD-border {
            border: solid 1px #ededed;
            padding: 10px 10px 4px 10px
        }
        .pocPROFILE .header {
            color: #424242;
            padding: 20px 0px;
            position: relative;
            box-shadow: none;
            background: none;
            border-bottom: solid 2px #ededed;
            margin-bottom: 5px;
            padding: 10px 0px;
        }
        .pocPROFILE .fa {
            color: #0038ba
        }
        .POCBCard {
            width: 310px;
            height: auto
        }
        .PT-25 {
            padding-top: 25px!important
        }
        .pocPROFILE .dropify-wrapper {
            height: 130px;
            width: 130px;
        }
        .label-update {
            background: #0038ba;
            color: #fff;
            text-align: center;
            font-size: 11px;
            line-height: 1;
            padding: 3px;
            margin-top: -24px; margin-left:7px;
            z-index: 5;
            position: relative; width: 50px
        }
        .pocPROFILE .dropify-message p {
            letter-spacing: 0;
        }
        ._ch-pass {
            padding-top: 28px
        }
        .pocPROFILE .btn-primary, .pocPROFILE .btn-cancel {
            font-size: 13px
        }
        .change-password {
            box-shadow: none;
            padding: 15px;
            border: 1px solid rgba(0,0,0,.1);
        }
        .cp-close {
            line-height: 1;
            padding: 5px;
            position: absolute;
            right: -5px;
            top: -4px;
            opacity: .4;
            filter: grayscale(1)
        }
        .nam-title{font-size: 18px; margin-top: 15px; display: inline-block; letter-spacing: 1px}
        .con_info p{margin: 0; letter-spacing: 1.2px}
        .btn-edit-p{padding: 6px 14px 6px 14px;letter-spacing: 1px;font-size: 13px;line-height: 1; margin-top: -5px; float: right; margin-left: 10px}
        .btn-edit-line {
            color: #0038ba;
            background: #fff;
            border: 1px solid #0038ba;
        }
        .link-doc{border-bottom: solid 1px #EBEBEB; color: #282828; display:block; padding-top:5px; padding-bottom:5px;text-decoration:underline}
        .link-doc p{line-height:1.3rem; height:1.3rem; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:1; font-size:13px; font-: 		;weight:normal; margin-bottom: 0px
        }
        .link-doc p img	{width:18px; height:18px; filter: invert(); margin-right:8px; opacity: 0.5}
        .btn-primary{letter-spacing: 1px}

    </style>


    <div class="modal fade" id="approveModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content top_border">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel" align="center">Distributor <span>Approve</span></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body confir_pay">
                    <div class="check_mark">
                        <div class="sa-icon sa-success animate">
                            <span class="sa-line sa-tip animateSuccessTip"></span>
                            <span class="sa-line sa-long animateSuccessLong"></span>
                            <div class="sa-placeholder"></div>
                            <div class="sa-fix"></div>
                        </div>
                    </div>

                    <p align="center"><strong>Are you sure you want to approve distributor?</strong></p>
                </div>
                <div class="modal-footer border-0">
                    <div style="display: block; text-align: center; margin: auto">
                        <button type="button" onclick="updateApproveStatus()" data-dismiss="modal" class="btn btn-primary">Yes</button>
                        <button type="submit" class="btn btn-cancel" data-dismiss="modal" aria-label="Close">No</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


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

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


    <div class="row">

        <div class="col-md-4">
            <div class="card">
                <div class="body pocPROFILE">

                    <div class="row">
                        <div class="col-12">
                            <div class="header pt-0">
                                <h2>POC <span>Details</span></h2>
                            </div>
                        </div>

                        <div class="col-12 mb-15">
                            <div class="form-wrap p-0">
                                <div class="row">
                                    <div class="col-md-6 p-col-L">
                                        <div class="infoDiv">
                                            <label class="control-label mb-5">POC Name</label>
                                            <p><strong>{{($distributor)? $distributor->distributor_poc:''}}</strong></p>
                                        </div>
                                    </div>
                                    <div class="col-md-6 p-col-R">
                                        <div class="infoDiv">
                                            <label class="control-label mb-5">POC Phone No.</label>
                                            <p><strong>{{($distributor)? $distributor->distributor_poc_phone:''}}</strong></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="header">
                                <h2>POC CNIC <span>Details</span></h2>
                            </div>
                        </div>

                        <div class="col-md-12 mb-15">
                            <div class="infoDiv">
                                <label class="control-label mb-5">POC CNIC No.</label>
                                <p><strong>{{($distributor)? $distributor->poc_cnic_number:''}}</strong></p>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="header">
                                <h2>CNIC <span>Frontside</span></h2>
                            </div>
                        </div>
{{--{{dd($distributor)}}--}}
                        <div class="col-md-12 mb-20"><img style="width: 100%; height: 190px" src="{{($distributor)? (json_decode($distributor->poc_cnic_images))? json_decode($distributor->poc_cnic_images)->front:'':''}}" alt=""></div>
                        <div class="col-12">
                            <div class="header">
                                <h2>CNIC <span>Backside</span></h2>
                            </div>
                        </div>
                        <div class="col-md-12"><img style="width: 100%; height: 190px" src="{{($distributor)? (json_decode($distributor->poc_cnic_images))? json_decode($distributor->poc_cnic_images)->back:'':''}}" alt=""></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8">

            <div class="card">
                <div class="body pocPROFILE">


                    <div class="row">

                        <div class="col-12">
                            <div class="header pt-0">
                                <h2>Distributor: <span>{{($distributor)? $distributor->distributor_name:''}}</span></h2>
                                <a href="/edit_distributor/{{($distributor)? $distributor->id:''}}"  class="btn btn-primary btn-edit-p btn-edit-line">Edit Profile</a>
{{--                                @if($distributor->is_approved == 0)--}}
{{--                                <button data-toggle="modal" onclick="addAprroveID({{$distributor->id}})" data-target="#approveModal" class="btn btn-primary btn-edit-p">Approve</button>--}}
{{--                                @endif--}}
                            </div>
                        </div>
                        <div class="col-12 mb-15"><img style="width:100%; height:320px" src="{{($distributor)? $distributor->distributor_profile_picture:''}}" alt=""></div>

                        <div class="col-12">
                            <div class="header">
                                <h2>Distributor <span>Details</span></h2>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-wrap p-0">
                                <div class="row">
                                    <div class="col-md-6 p-col-L">
                                        <div class="infoDiv">
                                            <label class="control-label mb-5">Phone No</label>
                                            <p><strong>{{($distributor)? $distributor->distributor_phone:''}}</strong></p>
                                        </div>
                                    </div>
                                    <div class="col-md-6 p-col-R">
                                        <div class="infoDiv">
                                            <label class="control-label mb-5">Email ID</label>
                                            <p><strong>{{($distributor)? $distributor->distributor_email:''}}</strong></p>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 p-col-L">
                                        <div class="infoDiv">
                                            <label class="control-label mb-5">Distributor Type</label>
                                            <p><strong>{{($distributor_type)? $distributor_type->distributor_type_name:''}}</strong></p>
                                        </div>
                                    </div>
                                    <div class="col-md-6 p-col-R">
                                        <div class="infoDiv">
                                            <label class="control-label mb-5">Distributor Region</label>
                                            <p><strong>{{($distributor)? $distributor->region_name:''}}</strong></p>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 p-col-L">
                                        <div class="infoDiv">
                                            <label class="control-label mb-5">Distributor Area</label>
                                            <p><strong>{{($distributor)? $distributor->area_name:''}}</strong></p>
                                        </div>
                                    </div>

                                    <div class="col-md-6 p-col-R">
                                        <div class="infoDiv">
                                            <label class="control-label mb-5">Distributor Territory</label>
                                            <p><strong>{{($distributor)? $distributor->territory_name:''}}</strong></p>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="infoDiv">
                                            <label class="control-label mb-5">Address</label>
                                            <p><strong>{{($distributor)? $distributor->distributor_address:''}}</strong></p>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 p-col-L">
                                        <div class="infoDiv">
                                            <label class="control-label mb-5">Lead Time</label>
                                            <p><strong>{{($distributor)? $distributor->lead_time:''}}</strong></p>
                                        </div>
                                    </div>

                                    <div class="col-md-6 p-col-R">
                                        <div class="infoDiv">
                                            <label class="control-label mb-5">Order Fulfillment</label>
                                            <p><strong>{{($distributor)? ($distributor->fulfilment_by==1)? 'Company':'Sole Distributor':''}}</strong></p>
                                        </div>
                                    </div>
                                </div>


                            </div>
                        </div>


                        <div class="col-md-12">
                            <div class="row PT-10">
                                <div class="col-12">
                                    <div class="header">
                                        <h2 id="geoloaction-id" map-lat="{{$distributor->distributor_lats}}" map-lng="{{$distributor->distributor_longs}}">Geolocation <span></span></h2>
                                    </div>
                                </div>
                                <div class="col-12 mb-15">
                                    <input type="hidden">
                                    <div id="map-div"  style="height: 300px;"><img style="width: 100%; height: auto" src="{!! asset('images/map.jpg') !!}" alt=""></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="header">
                                <h2>Additional <span>Details</span></h2>
                            </div>
                        </div>
                        <div class="col-12 mb-15">
                            <div class="form-wrap p-0">
                                <div class="row">
                                    <div class="col-md-6 p-col-L">
                                        <div class="infoDiv">
                                            <label class="control-label mb-5">NTN</label>
                                            <p><strong>{{($distributor)? $distributor->ntn:''}}</strong></p>
                                        </div>
                                    </div>
                                    <div class="col-md-6 p-col-R">
                                        <div class="infoDiv">
                                            <label class="control-label mb-5">STRN</label>
                                            <p><strong>{{($distributor)? $distributor->strn:''}}</strong></p>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 p-col-L">
                                        <div class="infoDiv">
                                            <label class="control-label mb-5">Payment Terms</label>
                                            <p><strong>{{($distributor)? $distributor->distributor_payment_type:''}}</strong></p>
                                        </div>
                                    </div>

                                    <div class="col-md-6 p-col-R">
                                        @if($distributor->distributor_type_id == 7)
                                        <div class="infoDiv">
                                            <label class="control-label mb-5">Parent Distributor</label>
                                            <p><strong>{{($parent_distributor)? $parent_distributor->distributor_name:''}}</strong></p>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="header">
                                <h2>Warehouse <span>Images</span></h2>
                            </div>
                        </div>

                        <div class="col-12 mb-15">

                            <div class="row">
                                @foreach($warehouse_images as $warehouse_image)
                                    <div class="col-md-3 p-10"><img style="width:100%; height: 120px; display:block" src="{{$warehouse_image->image}}" alt=""></div>
                                @endforeach

                            </div>

                        </div>

                        <div class="col-12">
                            <div class="header">
                                <h2>MOU <span>Images</span></h2>
                            </div>
                        </div>

                        <div class="col-12 mb-15">

                            <div class="row">
                                @foreach($mou_images as $mou_image)
                                    <div class="col-md-3 p-10"><img style="width:100%; height: 120px; display:block" src="{{$mou_image->image}}" alt=""></div>
                                @endforeach

                            </div>

                        </div>

                        <div class="col-12">
                            <div class="header">
                                <h2>DAF <span>Images</span></h2>
                            </div>
                        </div>

                        <div class="col-12 mb-15">

                            <div class="row">
                                @foreach($daf_images as $daf_image)
                                    <div class="col-md-3 p-10"><img style="width:100%; height: 120px; display:block" src="{{$daf_image->image}}" alt=""></div>
                                @endforeach

                            </div>

                        </div>



                        {{-- <div class="col-12" >
                              <div class="header">
                                  <h2>Additional <span>Documents</span></h2>
                              </div>
                          </div>--}}

                       {{-- <div class="col-12 mb-15">

                            <div class="row PT-10">
                                <div class="col-md-6">
                                    <a href="#" class="link-doc">
                                        <p><img src="images/activity-icon.svg" alt="">document-file-name-45454-54.jpg</p>
                                    </a>
                                </div>
                                <div class="col-md-6">
                                    <a href="#" class="link-doc">
                                        <p><img src="images/activity-icon.svg" alt="">document-file-name-name-here.jpg</p>
                                    </a>
                                </div>
                                <div class="col-md-6">
                                    <a href="#" class="link-doc">
                                        <p><img src="images/activity-icon.svg" alt="">document-file-name-45454-54.jpg</p>
                                    </a>
                                </div>
                                <div class="col-md-6">
                                    <a href="#" class="link-doc">
                                        <p><img src="images/activity-icon.svg" alt="">document-file-name-name-here.jpg</p>
                                    </a>
                                </div>

                            </div>

                        </div>

--}}
                    </div>

                </div>
            </div>
        </div>
        <input type="hidden" id="approve_id" value="">

        <div class="col-md-12 text-right PT-30">
            @if($distributor->is_approved == 0)
            <button data-toggle="modal" data-target="#approveModal" onclick="addAprroveID({{$distributor->id}})" type="submit" class="btn btn-primary mr-2">Approve</button>
            @endif
                <a href="/edit_distributor/{{$distributor->id}}" type="submit" class="btn btn-primary mr-2">Edit Profile</a>
{{--            <button type="submit" class="btn btn-cancel">Cancel</button>--}}

        </div>
    </div>

@endsection
@section('scripts')
    <script src="{{env('GOOGLE_MAP_URL')}}" async></script>
    <script>
        $(document).ready(function () {
            var latitude    =   parseFloat($('#geoloaction-id').attr('map-lat'));
            var longitude    =   parseFloat($('#geoloaction-id').attr('map-lng'));
            if($('#geoloaction-id').attr('map-lat') != '' && $('#geoloaction-id').attr('map-lng') != ''){
                const myLatLng = { lat: latitude, lng: longitude};
                const map = new google.maps.Map(document.getElementById("map-div"), {
                    zoom: 10,
                    center: myLatLng,
                });
                new google.maps.Marker({
                    position: myLatLng,
                    map,

                    title: "Distributor Location",
                });
            }
        });
        function addAprroveID(id){
            $('#approve_id').val(id);
        }

        function updateApproveStatus(){
            var id= document.getElementById('approve_id').value;
            var url = '/approve-distributor/'+id;
            http('POST', url).then((e) => {
                if(JSON.parse(e) =="success"){
                    self.notification('success', 'Successfully Updated!');
                }else if(JSON.parse(e) =="territory_missing"){
                    self.notification('error', 'Territory Missing!');
                }else{
                    self.notification('error', 'Some Error Occured, please try again!');
                }
            });
        }

        function notification(type, message) {
            var bgColor = (type == 'error') ? 'red' : 'green';
            var el = $('#notifDiv');
            el.fadeIn();
            el.css('background', bgColor);
            el.text(message);
            setTimeout(() => {
                el.fadeOut();
            }, 3000);
        }

        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