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

@endsection
@section('content')

    <style>
        .posm-card {
            padding:0;
            font-size: 13px;
            margin-bottom: 0
        }
        .posm-card .shopname {
            line-height: 20px;
            height: 52px;
            overflow: hidden;
            color: #1f283b;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            position: relative;
            border-top: solid 2px #0038ba;
            padding: 7px 10px 0px 10px;
            background-color: #f4f4f4;
            text-decoration: none;
            color: #282828;
        }
        .posm-card .shopname:hover, .posm-card:hover .shopname {
            color: #0038ba;
            text-decoration: underline;
        }
        .posm-card .PR-Thumb {
            margin: auto;
        }
        .posm-card .posm-dl {
            padding: 10px;
            color: #282828
        }
        .posm-card .posm-dl span {
            padding-right: 5px;
            width: 117px;
            display: inline-block;
            opacity: 0.85
        }
        .posm-card .PR-Thumb {
            height: 196px;
        }
        .posm-card .PR-Thumb img {
            max-height: 196px;
        }
        .zoom-img{padding: 6px; background-color:#fff; color: #0038ba; line-height: 1; font-size: 16px; position: absolute; right: 10px; top:160px; }
        .zoom-img:hover{background-color:#0038ba}
        .zoom-img:hover i{color: #fff}
        ._cust_filter {
            width: 188px;
            float: left;
            padding-right: 10px;
            margin-bottom: 15px;
        }
        .CL-Product {
            padding-right: 10px;
            width: 130px
        }
        .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;
        }
        .Product-Filter ._cust_filter .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 30px;
        }
        .action-icon-tab .nav-link {
            padding: 6px 8px 0px 8px;
        }
        .action-icon-tab .nav {
            width: 74px;
            float: right
        }
        .action-icon-tab .nav .fa {
            color: #a6a5a5;
            font-size: 20px
        }
        .action-icon-tab .active .fa {
            color: #0038ba
        }
        .btn-addproduct {
            background-color: #a6a5a5;
        }
        .btn-addproduct:hover {
            background-color: #0038ba;
        }
        .CL-Product input {
            letter-spacing: normal
        }
        ._SNO {
            max-width: 85px
        }
        ._ITEMSKU {
            max-width: 90px;
        }
        ._ITEMNAME {
            max-width: 350px
        }
        ._ITEMBRAND {
            max-width: 155px;
        }
        ._Action {
            max-width: 150px;
        }
        .Product-row-title {
            padding: 10px;
        }
        .Product-row {
            padding: 10px;
            margin-bottom: 5px;
        }
        .Product-IMG img {
            width: 35px;
            height: 35px;
            margin-right: 10px;
        }

        @media (max-width: 1280px) {
            .CL-Product {
                width: 122px
            }
            .Product-Filter .btn-primary {
                padding: 4px 11px;
            }
            ._cust_filter {
                width: 177px;
            }
        }
        .overflowx {
            overflow-x: scroll;
            margin-right: 15px
        }
        .fp-overflow {
            float: left;
            width: max-content;
            padding: 0 0 12px 0;
            min-width: 100%;
        }
        .col-w-set {
            flex: none;
            float: left;
            width: 275px;
            padding-left: 8px;
            padding-right: 8px;
        }
        .topstats {
            margin-top: 15px;
            font-size: 14px;
        }
        .topstats .gary-box {
            line-height: 1;
            background-color: #f9f9f9;
            border-bottom: solid 1px #d1d1d1;
            padding: 10px 10px 8px 10px;
            letter-spacing: 1px;
        }
        .topstats .gary-box span {
            font-family: proximanova-semibold!important;
            color: #0038ba;
            float: right;
            margin-top: -2px;
            padding-left: 15px;
        }
    </style>


    {{-- Models here Start--}}


    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-full modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                            style="font-size:30px">×</button>
                </div>
                <div class="modal-body p-0">
                    <div class="container">
                        <div class="row">
                            <div class="col-12">
                                <div class="card mb-20">
                                    <div class="p-10" style="border-bottom: solid 2px #000">
                                        <div class="row m-0">
                                            <div class="col-8 OrderLogo"> <img src="images/sell-360.svg" alt=""/> </div>
                                            <div class="col-4 ord-no"> Invoice# <strong>05485</strong> </div>
                                        </div>
                                    </div>
                                    <div class="body" style="padding:15px 20px">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="form-body">
                                                    <div class="row OrderInfo">
                                                        <div class="col-md-9">
                                                            <span>Retailer Name: </span> <strong>Chohan Store Township</strong><br>
                                                            <span>Segment: </span> <strong>Sement Here</strong><br>
                                                            <span>Phone No: </span> <strong>02222222221</strong><br>
                                                            <span>Address: </span> <strong>Madina Market Township, Lahore</strong> </div>
                                                        <div class="col-md-3 p-0">
                                                            <span>Status: </span> <strong>Awaiting</strong><br>
                                                            <span>Date: </span> <strong>12/04/2020</strong><br>
                                                            <span>Order Booker: </span> <strong>Asad Ali</strong><br>
                                                            <span>Salesman: </span> <strong>Asad Ali</strong>
                                                        </div>
                                                    </div>
                                                    <div class="seprator-block"></div>
                                                    <div class="Order-Detail-table mt-20">
                                                        <table class="table">
                                                            <thead>
                                                            <tr>
                                                                <th><strong>Code</strong></th>
                                                                <th><strong>Product Name</strong></th>
                                                                <th><strong>B.QTY.</strong></th>
                                                                <th><strong>D.QTY.</strong></th>
                                                                <th><strong>E.QTY.</strong></th>
                                                                <th><strong>T.P</strong></th>
                                                                <th><strong>GR.AMNT.</strong></th>
                                                                <th><strong>T.O</strong></th>
                                                                <th><strong>T.Disc</strong></th>
                                                                <th><strong>SPC.Disc</strong></th>
                                                                <th><strong>Extra.Disc</strong></th>
                                                                <th><strong>TAX %</strong></th>
                                                                <th><strong>TAX AMNT.</strong></th>
                                                                <th><strong>Net.AMNT</strong></th>
                                                            </tr>
                                                            </thead>
                                                            <tbody class="order_items_body">
                                                            <tr>
                                                                <td>5261</td>
                                                                <td>AasPas R5 (Chocolate BTNT) (24x36)</td>
                                                                <td>0</td>
                                                                <td>1</td>
                                                                <td>4</td>
                                                                <td>5</td>
                                                                <td>0</td>
                                                                <td>0</td>
                                                                <td>0</td>
                                                                <td>-</td>
                                                                <td>-</td>
                                                                <td>-</td>
                                                                <td>-</td>
                                                                <td>100.00</td>
                                                            </tr>
                                                            <td>5261</td>
                                                            <td>AasPas R5 (Chocolate BTNT) (24x36)</td>
                                                            <td>0</td>
                                                            <td>1</td>
                                                            <td>5</td>
                                                            <td>5</td>
                                                            <td>0</td>
                                                            <td>0</td>
                                                            <td>0</td>
                                                            <td>-</td>
                                                            <td>-</td>
                                                            <td>-</td>
                                                            <td>-</td>
                                                            <td>100.00</td>
                                                            <tr>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td><strong>G.AMNT</strong></td>
                                                                <td><strong>1115.20</strong></td>
                                                            </tr>
                                                            <tr>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td><strong>T.O.Disc.</strong></td>
                                                                <td><strong>1115.20</strong></td>
                                                            </tr>
                                                            <tr>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td><strong>Trade Disc.</strong></td>
                                                                <td><strong>1115.20</strong></td>
                                                            </tr>
                                                            <tr>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td><strong>Spc. Disc.</strong></td>
                                                                <td><strong>1115.20</strong></td>
                                                            </tr>
                                                            <tr>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td><strong>Extra. Disc.</strong></td>
                                                                <td><strong>1115.20</strong></td>
                                                            </tr>
                                                            <tr>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td><strong>Discount PKR.</strong></td>
                                                                <td><strong>-40.18</strong></td>
                                                            </tr>
                                                            <tr>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td><strong>Total TAX</strong></td>
                                                                <td><strong>1115.20</strong></td>
                                                            </tr>
                                                            <tr>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td style="background-color:#dfdfdf; color:#000"><strong>Total AMNT.</strong></td>
                                                                <td style="background-color:#dfdfdf; color:#000"><strong>1075.02</strong></td>
                                                            </tr>
                                                            <tr>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td class="border-0"></td>
                                                                <td style="background-color:#dfdfdf; color:#000"><strong>Recovery AMNT.</strong></td>
                                                                <td style="background-color:#d3d3d3; color:#000"><strong>1075.02</strong></td>
                                                            </tr>
                                                            </tbody>

                                                        </table>
                                                        <div class="clearfix"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row justify-content-end">
                                            <div class="col-4 Order-Detail-table">
                                                <h3 class="font16">Payment Details</h3>
                                                <table class="table mb-0">
                                                    <tbody class="order_items_body">
                                                    <tr>
                                                        <td><strong>Cash</strong></td>
                                                        <td><strong>2545</strong></td>
                                                    </tr>
                                                    <tr>
                                                        <td><strong>Cheque</strong></td>
                                                        <td><strong>2545</strong></td>
                                                    </tr>
                                                    <tr>
                                                        <td><strong>Total Payment</strong></td>
                                                        <td><strong>2545</strong></td>
                                                    </tr>
                                                    <tr>
                                                        <td><strong>Credit</strong></td>
                                                        <td><strong>2545</strong></td>
                                                    </tr>
                                                    </tbody>

                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="DistributorOnmap" tabindex="-1" role="dialog" aria-labelledby="DetailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content top_border">
                <div class="modal-header">
                    <h5 class="modal-title" id="DetailModalLabel">Distributors <span> Location</span></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
                </div>
                <div id="floating-label" class="modal-body">
                    <div class="row">
                        <div class="col-md-12"> <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            Map Here<br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="submit" class="btn btn-cancel" data-dismiss="modal" aria-label="Close">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="ViewCNICimg" tabindex="-1" role="dialog" aria-labelledby="DetailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content top_border">
                <div class="modal-header">
                    <h5 class="modal-title" id="DetailModalLabel">Saif Ali Khan <span> CNIC Image</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">
                    <div class="col-md-12"> <strong>Frontside</strong> <img class="cnicCardimg" src="images/idcard.jpg" alt=""/> <strong>Backside</strong> <img class="cnicCardimg mb-0"  src="images/idcard.jpg" alt=""/> </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="submit" class="btn btn-cancel" data-dismiss="modal" aria-label="Close">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="ViewVISITimg" tabindex="-1" role="dialog" aria-labelledby="DetailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content top_border">
                <div class="modal-header">
                    <h5 class="modal-title" id="DetailModalLabel">Visit <span> Picture</span></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
                </div>
                <div id="floating-label" class="modal-body">
                    <div class="row">
                        <div class="col-md-12"> <img class="Visit-img" src="images/store-img.jpg" alt=""/> </div>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="submit" class="btn btn-cancel" data-dismiss="modal" aria-label="Close">Close</button>
                </div>
            </div>
        </div>
    </div>
    {{-- Models here End--}}

    <div class="container">
        <div class="row mt-2 mb-2">
            <div class="col-lg-9 col-md-9">
                <h2 class="_head01">Retailer: <span>{{$retailerData[0]->retailer_name}}</span></h2>
            </div>
            <div class="col-lg-3 col-md-3 _cust_filter">
{{--{{dd($posMaterial)}}--}}
                <div class="form-s2">
                    <select class="form-control formselect" onchange="reloadWithPOSId({{$id}}, this.value)" placeholder="Select POSM">
                        <option>Select POSM</option>
                        @foreach($posMaterial as $pos)
                            <option value="{{$pos->id}}">{{$pos->title}}</option>
                        @endforeach
                    </select>
                </div>

            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card mb-30">

                    <div class="body pt-0 PB-10">
                        <div class="row">
                            <div class="col-12 p-0 PB-15">
                                <div class="topstats">
                                    <div class="row m-0">
                                        <div class="col-3 pr-0"><div class="gary-box"><strong>Total POSM:</strong> <span>{{count(collect($data)->where('tag_type', 1))/*$retailerData[0]->total_pos*/}}</span></div></div>
                                        <div class="col-3 pr-0"><div class="gary-box"><strong>Segment:</strong> <span>{{$retailerData[0]->segment}}</span></div></div>
                                        <div class="col-3 pr-0"><div class="gary-box"><strong>Channel:</strong> <span>{{$retailerData[0]->channel}}</span></div></div>
{{--                                        <div class="col-3"><div class="gary-box"><strong>Added Date:</strong> <span>{{$retailerData[0]->total_pos}}</span></div></div>--}}
                                    </div>
                                </div>
                            </div>
{{--{{dd($data)}}--}}
                            <div class="overflowx">
                                <div class="fp-overflow">
                                @foreach($data as $key => $d)
                                    @if($d->tag_type==1)
                                    <div class="col-w-set">
                                        <div class="_product-card posm-card">
                                            <div class="PR-Thumb">
                                                <div data-src='{{$d->picture}}' style="z-index:10; cursor: pointer;" data-toggle="modal" data-target="#POSImage" class=" zoom-img view_on_map"><i class="fa fa-search-plus"></i></div>
                                                <div class="middle"><img src="{{$d->picture}}" alt="" /></div>
                                            </div>
                                            <div><a href="/retailer_profile/{{$d->retailer_id}}" target="_blank" class="shopname"> <strong>{{$d->retailer_name}}</strong></a></div>
                                            <div class="posm-dl">
                                                <div class="row">
                                                    <div class="col-6">Tag Date:</div>
                                                    <div class="col-6 text-right">{{$d->psr_date}}</div>
                                                    <div class="col-6">Activity:</div>
                                                    <div class="col-6 text-right">{{($d->tag_type==1)? 'Tag':'Visit'}}</div>
                                                    <div class="col-6">Shop ID:</div>
                                                    <div class="col-6 text-right">{{$d->retailer_id}}</div>
                                                    <div class="col-6">Segment:</div>
                                                    <div class="col-6 text-right">{{$d->segment_name}}</div>
                                                    <div class="col-6">SR Name:</div>
                                                    <div class="col-6 text-right">{{$d->order_booker}}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                @endforeach
                                </div>
                            </div>



                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="card">
                    <div class="header">
                        <h2>VISITS <span> </span> {{--<div class="_list-total">15</div>--}}</h2>
                    </div>
                    <div class="body">
                        <table class="table table-hover dt-responsive nowrap" id="example" style="width:100%">
                            <thead>
                            <tr>
                                <th>Tag Date</th>
                                <th>Asset ID</th>
                                <th>Shop ID</th>
                                <th>Shop Name</th>
                                <th>Segment</th>
                                <th>SR Name</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($data as $key => $d)
                                @if($d->tag_type==2)
                                    <tr>
                                <td>{{$d->psr_date}}</td>
                                <td>{{$d->asset_id}}</td>
                                <td>{{$d->retailer_id}}</td>
                                <td>{{$d->retailer_name}}</td>
                                <td>{{$d->segment_name}}</td>
                                <td>{{$d->order_booker}}</td>
                                <td>
                                    <a data-src='{{$d->picture}}'  data-toggle="modal" data-target="#POSImage" href="#" class="btn btn-default mb-0 view_on_map"><i class="fa fa-image"></i> View Picture</a>
                                </td>
                            </tr>
                                @endif
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>



@endsection


@section('scripts')

    <script>
        //View Retailer On Map
        $(document).on('click', '.view_on_map', function () {
            var imageSrc = $(this).attr('data-src');
            $('#posImageTag').attr('src' , imageSrc);
            return;
            var latLng = $(this).attr('name').split('-');
            var map_detail_array = [];
            $('.map_type').text('');
            $('.map_type').append(`Retailer <span> Location</span>`);
            map_detail_array.push({
                lat: latLng[0],
                lng: latLng[1],
                title: $('.retailer_name').text()
            });
            initMap(map_detail_array, 'distributor_map');
        })

        function reloadWithPOSId(id, pos_id){
            window.location.assign('/posm-profile/'+id+'/'+pos_id);
        }

        $(document).ready(function() {
            $('#example, #example2, #example3, #example4').DataTable();
        });
        $(".formselect").select2();
        $('.form-control').on('focus blur', function (e) {
            $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
        })
            .trigger('blur');

        $('#datepicker, #datepicker2').datepicker({
            autoclose: true,
            todayHighlight: true,
            toggleActive: true,
        }).on('changeDate', function (ev) {
            $(this).datepicker('hide');
        });


        $(document).ready(function () {
            $('#SN-close, .overlay-blure').on('click', function () {
                $('#_subNav-id').removeClass('active');
                $('#blureEffct').removeClass('blur-div');
                $('body').removeClass('no-scroll')
            });
            $('#sidebar-menu').on('click', function () {
                $('#_subNav-id').addClass('active');
                $('#blureEffct').addClass('blur-div');
                $('body').addClass('no-scroll')
            });


            $('#pl-close, .overlay-blure').on('click', function () {
                $('#product-cl-sec').removeClass('active');
                $('#blureEffct').removeClass('blur-div');
                $('body').removeClass('no-scroll');
            });

            $('#productlist01').on('click', function () {
                $('#product-cl-sec').addClass('active');
                $('#blureEffct').addClass('blur-div');
                $('body').addClass('no-scroll');

            });

        });

    </script>

@endsection