@extends('layouts.master')
@section('content')
<style>
    .topstats {
        margin-top: 0px;
        font-size: 13px;
        margin-bottom: 15px;
    }

    .topstats .gary-box {
        line-height: 1;
        background-color: #f9f9f9;
        border-bottom: solid 1px #d1d1d1;
        padding: 10px;
    }

    .topstats .gary-box span,
    .value-sh span {
        font-family: 'Rationale', sans-serif;
        color: #0038ba;
        font-size: 20px;
        float: right;
        margin-top: -4px;
    }

    .value-sh {
        font-size: 13px;
    }

    .value-sh span {
        font-size: 18px;
    }

    .value-sec {
        background-color: #f9f9f9;
        border: solid 1px #e6e6e6;
        padding-top: 10px;
        padding-bottom: 4px;
    }

    .head-div {
        border: solid 1px #e6e6e6;
        border-bottom: none;
        background: none !important;
        padding: 10px 20px !important
    }

    ._cust_filter {
        width: 250px;
        padding-top: 0
    }

    .Product-row {
        padding: 5px 8px;
        margin-bottom: -1px;
        box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
    }

    .Product-row-title {
        padding: 10px 8px;
        background-color: #f9f9f9;
        color: #282828;
        text-transform: none !important;
    }

    .Product-IMG {
        margin-bottom: -5px
    }

    .Product-IMG img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: solid 1px #333;
    }

    .Product-Name {
        color: #808080;
        line-height: 1
    }

    .Product-Name strong {
        color: #282828;
        padding-bottom: 3px;
        display: block
    }

    ._ITEMNAME {
        height: auto;
    }

    .font-no {
        font-size: 20px;
        line-height: 1
    }

    .font-no {
        font-size: 20px;
        line-height: 1;
        font-family: 'Rationale', sans-serif !important;
    }

    .r-location {
        display: block;
        color: #a0a0a0;
        font-size: 13px
    }

    .executed-st {
        color: #06C420;
        font-size: 12px
    }

    .cancel-st {
        color: #C40606;
        font-size: 12px
    }

    .pending-st {
        color: #D9A20A;
        font-size: 12px
    }

    .date-order {
        width: 200px;
        position: relative;
        float: left;
        padding-right: 15px;
    }

    .date-order input {
        height: 32px;
        border: solid 1px #dedede;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        date-order;
        padding-left: 15px;
        font-size: 13px;
        letter-spacing: 1px;
    }
    ._cust_filter .form-s2 .select2-container .select2-selection--single, ._cust_filter .form-s2 .select2-container--default .select2-selection--single .select2-selection__arrow{height:32px !important}
    ._cust_filter .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:31px;}
</style>


<div class="row mt-1 mb-0">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <h2 class="_head01">Booking <span> vs Execution</span></h2>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6">
        <ol class="breadcrumb">
            <li><a href="#"><span>Orders</span></a></li>
            <li><span>Booking vs Execution</span></li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="Product-Filter">
            <div class="row">
                <div class="col-12 p-0">

                    <div class="date-order ml-15">
                        <input type="text" class="form-control datepicker comparison_date" id="" placeholder="Select Date">
                    </div>

                    <input hidden class='current_distributor_id' type='text' value="{{isset($distributor_id) ? $distributor_id : 0}}"/>

                    <div class="_cust_filter">
                        <div class="form-s2">
                            <select class="form-control formselect comparison_distributor_id" placeholder="Select All"
                                style="width: 100%!important">
                                <option selected disabled value="0">Select Distributor</option>
                                @foreach ($distributors as $data)
                                    <option value="{{$data->id}}">{{$data->distributor_name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="_cust_filter">
                        <div class="form-s2">
                            <select class="form-control formselect comparison_booker_id" placeholder="Select All"
                                style="width: 100%!important">
                                <option selected disabled value="0">Order Booker</option>
                            </select>
                        </div>
                    </div>

                    <div class="date-order">
                        <button class="btn btn-primary ml-0 fetch_comparison">Fetch</button>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card p-15">
            <div class="topstats">
                <div class="row m-0">
                    <div class="col pl-0 pr-0">
                        <div class="gary-box"><strong>Order Booker:</strong> <span class="booker_name">--</span></div>
                    </div>
                    <div class="col pr-0">
                        <div class="gary-box"><strong>Date:</strong> <span class="booking_date">--</span></div>
                    </div>
                    <div class="col pr-0">
                        <div class="gary-box"><strong>Total Booking:</strong> <span class="ttl_booking_amount">Rs. --</span></div>
                    </div>
                    <div class="col pr-0">
                        <div class="gary-box"><strong>Total Execution:</strong> <span class="ttl_execution_amount">Rs. --</span></div>
                    </div>

                </div>
            </div>

            <div class="row m-0">
                <div class="col-6">
                    <div class="row">
                        <div class="col-12 header head-div">
                            <h2>Booking</h2>
                        </div>
                        <div class="col-12 value-sec">
                            <div class="row">
                                <div class="col-6 value-sh"><strong>Total Booking:</strong> <span class="ttl_booking">--</span>
                                </div>
                                <div class="col-6 value-sh"><strong>Total Booked Orders:</strong> <span class="ttl_booked_orders">--</span></div>
                                <div class="col-6 value-sh"><strong>Total Shop Visited:</strong> <span class="ttl_visited_shops">--</span></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-6">
                    <div class="row">
                        <div class="col-12 header head-div border-left-0">
                            <h2>Execution</h2>
                        </div>
                        <div class="col-12 value-sec border-left-0">
                            <div class="row">
                                <div class="col-6 value-sh"><strong>Total Execution:</strong> <span class="ttl_executions">--</span>
                                </div>
                                <div class="col-6 value-sh"><strong>Total Orders Executed:</strong> <span class="ttl_orders_exected">--</span>
                                </div>
                                <div class="col-6 value-sh"><strong>Total Cancel Orders:</strong> <span class="ttl_cancel_orders">--</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 p-0 PT-20">

                <div class="Product-row-title">
                    <div class="row">
                        <div class="col colStyle h-auto" style="max-width:255px">Retailer Name</div>
                        <div class="col colStyle h-auto" style="max-width:159px">Booked Products</div>
                        <div class="col colStyle h-auto" style="max-width:172px">Executed Products</div>
                        <div class="col colStyle h-auto" style="max-width:135px">Booking Value</div>
                        <div class="col colStyle h-auto" style="max-width:150px">Execution Value</div>
                        <div class="col colStyle h-auto" style="max-width:127px">Order Status</div>
                        <div class="col colStyle h-auto" style="max-width:115px">Action</div>
                    </div>
                </div>

                <div class="booking_rows">
                </div>

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

</div>
@endsection