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

  <div id="blureEffct" class="container">

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


            <div class="row">
                <div class="col-lg-12">
                    <div class="header-tabs mb-10" style="min-height:47px">
                        <div class="row">
                            <div class="col">
                                <div class="CL-Product"><i class="fa fa-search"></i>
                                    <input type="text" class="form-control" id="" placeholder="Search">
                                </div>
                            </div>



                            <div class="col-auto"><div class="dash-filter"><img src="{!! asset('images/report-filters.svg') !!}" alt=""></div>	</div>

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

            <div class="row">
                <div class="col-md-12 PT-10">

                    <div class="row">

                        <div class="col-3">
                            <a href="#" class="employeecard"><span class="emp-sno">01</span>
                                <img style="position:absolute;width:auto;height:25px;top:15px;right:10px" src="{!! asset('images/badge-icon.svg') !!}" alt="">

                                <span class="row m-0"><div class="col-12"><h4>Shahdra Town, Block a -1</h4></div></span>
                                <div class="row">
                                    <div class="col-12" style="padding:0px 30px 15px 30px;font-size:13px;"><strong>Region: </strong> Shahdra</div>
                                    <div class="col-12"><div class="empsale">Rs. <span>2,000,000</span></div></div>
                                    <div class="col-12">
                                        <div class="row m-0">
                                            <div class="col-4 sale-pu">Cartons <span>20,000</span></div>
                                            <div class="col-4 sale-pu border-left border-right">Dozen <span>20,000</span></div>
                                            <div class="col-4 sale-pu">Half Dozen <span>20,000</span></div>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="row m-0 empvisits">
                                            <div class="col-6">Total Visits: <span>35</span></div>
                                            <div class="col-6">Total Orders: <span>42</span></div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>

                    </div>

                    <script>
                        var apiData;
                        var alldata = '';
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            type: 'get',
                            url: '{{URL::to("/dashboard-daily-booking-dis-api")}}', // This is what I have updated
                        }).done(function (msg) {
                            apiData = JSON.parse(msg);


                            for(var i = 0; i < apiData.regions.length; i++) {

                                var count =i+1;
                                var dz = 0;
                                var hdz = 0;
                                var ctn = 0;
                                for(var j = 0; j < apiData.regions[i].primary_units.length; j++) {
                                    var shortname = apiData.regions[i].primary_units[j].unit_short_name;
                                    var sold = apiData.regions[i].primary_units[j].sold;
                                    if (shortname == "Dz")
                                        dz = sold;
                                    else if (shortname == 'HDoz')
                                        hdz = sold;
                                    else if (shortname == 'CTN')
                                        ctn = sold;
                                }

                                alldata = alldata + '<div class="col-3">\n' +
                                    '                                <a href="live-report-region-detail/'+apiData.regions[i].id+'" class="employeecard"><span class="emp-sno">'+count+'</span>\n' +
                                    '                                    <img style="position:absolute;width:auto;height:25px;top:15px;right:10px" src="{!! asset('theme/images/badge-icon.svg') !!}" alt="">\n' +
                                    '\n' +
                                    '                                    <span class="row m-0"><div class="col-12"><h4>'+apiData.regions[i].region_name+'</h4></div></span>\n' +
                                    '                                    <div class="row">\n' +
                                    '                                        <div class="col-12" style="padding:0px 30px 5px 30px;font-size:13px;"><strong>RSM:</strong> '+apiData.regions[i].rsm+'</div>\n' +
                                    '                                        <div class="col-12"><div class="empsale">Rs. <span> '+apiData.regions[i].revenue+'</span></div></div>\n' +
                                    '                                        <div class="col-12">\n' +
                                    '                                            <div class="row m-0">\n' +
                                    '                                                <div class="col-4 sale-pu">Cartons <span>'+ctn+'</span></div>\n' +
                                    '                                                <div class="col-4 sale-pu border-left border-right">Dozen <span>'+dz+'</span></div>\n' +
                                    '                                                <div class="col-4 sale-pu">Half Dozen <span>'+hdz+'</span></div>\n' +
                                    '                                            </div>\n' +
                                    '                                        </div>\n' +
                                    '                                        <div class="col-12">\n' +
                                    '                                            <div class="row m-0 empvisits">\n' +
                                    '                                                <div class="col-6">Total Visits: <span>'+apiData.regions[i].visits+'</span></div>\n' +
                                    '                                                <div class="col-6">Total Orders: <span>'+apiData.regions[i].orders+'</span></div>\n' +
                                    '                                            </div>\n' +
                                    '                                        </div>\n' +
                                    '                                    </div>\n' +
                                    '                                </a>\n' +
                                    '                            </div>';

                            }
                            document.getElementById('regions-data').innerHTML = alldata;

                        });
                    </script>



                </div>


            </div>


        </div>



@endsection()