@extends('layouts.admin')

@section('content')

<div class="container-fluid">
    <div class="well white">
        <legend><b>LOGISTICS SCORECARD<b></legend>
        <div class="formswrap">
            <section class="forms-basic logistic_form">
                <form id="scord-card-submit" method="post" action="" class="row form-floating form-validate">
                    {{ csrf_field() }}
                    <div class="form-group col-md-12">
                        <label for="search_pod_users" class="control-label normal"
                            style="margin-top:10px;margin-left:15px;">POD/USERS</label>
                        <div class="radio-inline">
                            <label class="filled">
                                <input type="radio" name="search_user_pod" id="users" value="users"
                                    data-validation="required" checked> USERS </label>
                        </div>
                        <div class="radio-inline">
                            <label class="filled">
                                <input type="radio" name="search_user_pod" id="pod" value="pod"
                                    data-validation="required"> PODS</label>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-6" id="pod_div">
                                <div class="form-group">
                                    <label for="search_pod" class="control-label normal"
                                        style="margin-top:10px;">POD</label>
                                    <select name="search_pod" id="search_pod" class="select2 form-control">
                                        {!! FormField::dropDownOptions('search_pod', $pods, ((isset($searchData['pod']))
                                        ? $searchData['pod'] :
                                        null)) !!}
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6" id="users_div">
                                <div class="form-group">
                                    <label for="search_users" class="control-label normal"
                                        style="margin-top:10px;">USERS</label>
                                    <select name="search_users" id="search_users" class="select2 form-control">
                                        <option>Please select the user</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-6" id="podOne_div">
                                <div class="form-group">
                                    <label for="search_pod" class="control-label normal"
                                        style="margin-top:10px;">POD</label>
                                    <select name="search_pod" id="search_pod_two" class="select2 form-control">
                                        {!! FormField::dropDownOptions('search_pod', $pods, ((isset($searchData['pod']))
                                        ? $searchData['pod'] :
                                        null)) !!}
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6" id="client_div">
                                <div class="form-group">
                                    <label for="search_clinets" class="control-label normal"
                                        style="margin-top:10px;">CLIENT</label>
                                    <select name="search_clinets" id="search_clinets" class="select2 form-control">
                                        <option>Please select the Client</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="search_time" class="control-label normal"
                                        style="margin-top:10px;">Time</label>
                                    <select name="search_time" id="search_time" class="select2 form-control">
                                        <option value=''>Select</option>
                                        <option value="today">Today</option>
                                        <option value="current_week">Current Week</option>
                                        <option value="current_month">Current Month</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="from_date" class="control-label normal" style="margin-top:10px;">From
                                        Date</label>
                                    <input type="text" id="from_date" name="from_date" class="form-control datepicker">
                                    <input type="hidden" name="min_date" id="min_date"
                                        value="{{ date('Y-m-d', strtotime($starting_date)) }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="to_date" class="control-label normal" style="margin-top:10px;">To
                                        Date</label>
                                    <input type="text" id="to_date" name="to_date" class="form-control datepicker">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <button type="submit" class="btn btn-danger">Search</button>
                        <button type="button" id="clear" class="btn btn-danger">Clear</button>
                    </div>

                </form>
            </section>
        </div>
    </div>
</div>

<div class="container-fluid">
    <hr />
</div>
<div class="container-fluid scm_scroll_cards">
    <div class="row">
        <div class="col-lg-4 col-md-6">
            <div class="card">
                <div class="card-header">
                    <b>Rank</b>
                </div>
                <div class="card-content" id="rankCard">

                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6">
            <div class="card">
                <div class="card-header">
                    <b>Revenue</b>
                    <b class="float-right">Daily Avg.</b>
                </div>
                <div class="card-content" id="revenueCard">
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6">
            <div class="card">
                <div class="card-header">
                    <b>Net</b>
                    <b class="float-right">Daily Avg.</b>
                </div>
                <div class="card-content" id="neRevenueCard">

                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6">
            <div class="card">
                <div class="card-header">
                    <b>Margin</b>
                </div>
                <div class="card-content" id="marginCard">

                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6">
            <div class="card">
                <div class="card-header">
                    <b>Average Margin</b>
                </div>
                <div class="card-content" id="emailCard">

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

        <!-- </div>
    </div>     
    
    <div class="container-fluid scm_scroll_cards">
        <div class="row"> -->
        <div class="col-lg-4 col-md-6">
            <div class="card">
                <div class="card-header">
                    <b>Accesorials </b>
                </div>
                <div class="card-content" id="accessorialCard">

                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6">
            <div class="card">
                <div class="card-header">
                    <b>Loads Dispatched</b>
                </div>
                <div class="card-content" id="dispatchedLoadesCard">

                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6">
            <div class="card">
                <div class="card-header">
                    <b>Loads Dropped</b>
                </div>
                <div class="card-content" id="dropedLoadsCard">

                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6">
            <div class="card">
                <div class="card-header">
                    <b>Success Ratio</b>
                </div>
                <div class="card-content" id="successRatioCard">

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

        <!-- </div>    
    </div>
    <div class="container-fluid scm_scroll_cards">
        <div class="row"> -->
        <div class="col-lg-4 col-md-6">
            <div class="card">
                <div class="card-header">
                    <b>Repeat Carriers</b>
                </div>
                <div class="card-content" id="repeateCarrierCard">

                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6">
            <div class="card">
                <div class="card-header">
                    <b>Customer Diversity Score</b>
                </div>
                <div class="card-content" id="diversityScoreCard">

                </div>
            </div>
        </div>
        <!-- <div class="col-lg-4 col-md-6">
            <div class="card">
                <div class="card-header">
                    <b>Phone Calls</b>
                </div>
                <div class="card-content" id="phoneCard">

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


        <div class="col-lg-4 col-md-6">
            <div class="card">
                <div class="card-header">
                    <b>Vendor Diversity Score</b>
                </div>
                <div class="card-content" id="vendorDiversityScoreCard">

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

    </div>
</div>

<!-- add to bid action modal -->
<div class="modal fade" id="addBidOrderModal" role="dialog">
    <div class="modal-dialog" style="width:400px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title firstTime name_size" id="marktitle"></h4>
            </div>
            <div class="modal-body">
                <div class="col-md-12 custom_pop_scroll">
                    <div class="card">
                        <div class="card-content" id="vendorDiversityScoreCarrierCard">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer firstTime_footer">
            </div>
        </div>
    </div>
</div>

<style>
#searchclient,
#searchpo,
#searchnumber,
#searchpickup {
    display: none;
}
</style>
@endsection

@section('scripts')
<script charset="utf-8" src="{{asset('backend/js/services/scorecard.js?v=1.2')}}"></script>
@endsection