@extends('layouts.master')
@section('content')
<style>
    ._PR_filter {
        margin-top: -2px;
        width: 300px !important;
        float: left
    }

    ._PR_filter .form-s2 .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 30px !important;
        font-family: 'proximanova-light', sans-serif !important;
        font-size: 13px !important;
    }

    ._PR_filter .form-s2 .select2-container .select2-selection--single,
    ._PR_filter .form-s2 .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 31px !important;
    }

    .addPR-head h3 {
        font-size: 14px;
        padding-right: 10px;
        line-height: 2;
        margin: 0
    }



    ._PR_filter input {
        box-shadow: none;
        font-size: 13px;
        height: 31px;
        border-color: #eae9e9;
    }

    .report_value {
        background-color: #fff;
        font-size: 14px;
        position: relative;
        padding: 10px 0px;
        letter-spacing: 0.5px;
        margin-bottom: 0px;
        margin-top: 0px;
        line-height: 1;
        border-bottom: solid 1px #eae9e9
    }

    .report_value span {
        font-family: 'Rationale', sans-serif;
        line-height: 1;
        font-size: 18px;
        float: right;
        margin-top: -2px;
    }

</style>

<div class="row mt-2 mb-3">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <h2 class="_head01">Spot <span> Sales Report</span></h2>
    </div>

    <div class="col-lg-6 col-md-6 col-sm-6">
        <ol class="breadcrumb">
            <li><a href="#"><span>Orders Management</span></a></li>
            <li><span>Spot Sale Report</span></li>
        </ol>
    </div>
</div>

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

            <div class="header addPR-head">
                <div class="float-left">
                    <h3>Select Date</h3>
                </div>
                <div class="_PR_filter pr-15" style="width: 170px!important;">
                    <div class="form-group mb-0" style="height: auto">
                        <input type="text" id="" class="form-control datepicker precessed_date_spot_sale" placeholder="">
                    </div>
                </div>
                <div class="float-left">
                    <h3>Select Salesman</h3>
                </div>
                <div class="_PR_filter pr-15">
                    <div class="form-s2">
                        <select class="form-control formselect spot_sale_salesman_id" placeholder="Select Salesman"
                            style="width: 100%!important">
                            <option value="0" selected disabled> Select Salesman</option>
                            <option value="counter_sale"> Counter Sale</option>
                            @foreach ($sales_man as $data)
                            <option value="{{$data->id}}">{{$data->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>


            <div class="loader-sell360 loader_div" style="display: none">
            <div class="loader"> <span class="box-icon"></span> <span class="box-icon"></span>
                <div class="loader-img"> <img src="/images/sell-360-logo.svg" alt=""> </div>
                <span class="txt"><span></span> LOADING...</span> </div>
            </div>


            <div class="body pb-0 spot_sale_page_data" style="display:none">
                <div class="spotSaleDiv">
                    <table class="table table-hover dt-responsive nowrap" id="example" style="width:100%">
                        <thead>
                            <tr>
                                <th>ORDER ID</th>
                                <th>RETAILER NAME</th>
                                <th>SEGMENT</th>
                                <th>ROUTE</th>
                                <th>ORDER BOOKER</th>
                                <th>SALES MAN</th>
                                <th>ORDER VALUE</th>
                                <th>VIEW DATA</th>
                            </tr>
                        </thead>
                        <tbody id="spotSaleTable">

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


                <div class="row">
                    <div class="col-md-12 text-right" style="background-color: #f3f3f3; padding: 10px 15px; margin-top: 5px; margin-bottom: 5px;">
                        <a class="btn btn-primary generate_spot_sale_btn" rel="noopener noreferrer" target="_blank">Generate Sales Spot</a>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection