@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>Regions 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>Regions 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="dashboard-date">
                             <input type="text" id="datepicker" class="form-control" placeholder="">
                             <i class="fa fa-angle-down"></i>
                             </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" id="regions-data">

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

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

                                 count =count+1;

                                alldata = alldata + '<div class="col-3">\n' +
                                    '                                <a href="live-report-region-detail/'+apiData.geography.areas[i].area_name+'" class="employeecard"><span class="emp-sno">'+count+'</span>\n' +
                                    '                                    <img style="position:absolute;width:auto;height:25px;top:15px;right:10px" src="{!! asset('images/badge-icon.svg') !!}" alt="">\n' +
                                    '\n' +
                                    '                                    <span class="row m-0"><div class="col-12"><h4>'+apiData.geography.areas[i].area_name+'</h4></div></span>\n' +
                                    '                                    <div class="row">\n' +
                                    '                                        <div class="col-12">\n' +
                                    '                                            <div class="col-12" style="padding:0px 30px 15px 30px;font-size:13px;"><strong>RSM:</strong> '+apiData.geography.areas[i].asm+'</div>'+
                                    '                                            <div class="col-12"><div class="empsale">Rs. <span>'+apiData.geography.areas[i].revenue+'</span></div></div>'+
                                    '                                            <div class="col-12 sale-pu PB-10"><span> '+apiData.geography.areas[i].units+'<small>Units</small></span></div>'+
                                    '                                </div>\n' +
                                    '                                        <div class="col-12">\n' +
                                    '                                            <div class="row m-0 empvisits">\n' +
                                    '                                                <div class="col-6">Total Visits: <span>'+apiData.geography.areas[i].visits+'</span></div>\n' +
                                    '                                                <div class="col-6">Total Orders: <span>'+apiData.geography.areas[i].orders+'</span></div>\n' +
                                    '                                            </div>\n' +
                                    '                                        </div>\n' +
                                    '                                    </div>\n' +
                                    '                                </a>\n' +
                                    '                            </div>';

                            }

                            for(var i = 0; i < apiData.geography.territories.length; i++) {
                                 count =count+1;

                                alldata = alldata + '<div class="col-3">\n' +
                                    '                                <a href="live-report-region-detail/'+apiData.geography.territories[i].territory_name+'" class="employeecard"><span class="emp-sno">'+count+'</span>\n' +
                                    '                                    <img style="position:absolute;width:auto;height:25px;top:15px;right:10px" src="{!! asset('images/badge-icon.svg') !!}" alt="">\n' +
                                    '\n' +
                                    '                                    <span class="row m-0"><div class="col-12"><h4>'+apiData.geography.territories[i].territory_name+'</h4></div></span>\n' +
                                    '                                    <div class="row">\n' +
                                    '                                        <div class="col-12">\n' +
                                    '                                            <div class="col-12" style="padding:0px 30px 15px 30px;font-size:13px;"><strong>RSM:</strong> '+apiData.geography.territories[i].tsm+'</div>'+
                                    '                                            <div class="col-12"><div class="empsale">Rs. <span>'+apiData.geography.territories[i].revenue+'</span></div></div>'+
                                    '                                            <div class="col-12 sale-pu PB-10"><span> '+apiData.geography.territories[i].units+'<small>Units</small></span></div>'+
                                    '                                </div>\n' +
                                    '                                        <div class="col-12">\n' +
                                    '                                            <div class="row m-0 empvisits">\n' +
                                    '                                                <div class="col-6">Total Visits: <span>'+apiData.geography.territories[i].visits+'</span></div>\n' +
                                    '                                                <div class="col-6">Total Orders: <span>'+apiData.geography.territories[i].orders+'</span></div>\n' +
                                    '                                            </div>\n' +
                                    '                                        </div>\n' +
                                    '                                    </div>\n' +
                                    '                                </a>\n' +
                                    '                            </div>';

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

                        });
                    </script>
                </div>
            </div>
        </div>
    </div>
@endsection