@extends('layouts.master')
@section('data-sidebar')
    <div id="product-cl-sec">
        <a id="pl-close" class="close-btn-pl"></a>
        <div class="pro-header-text">Retailer <span>List</span></div>
        <div class="se_cus-type form-wrap p-10">
            <div class="row">
                <div class="col-md-3 pr-0">
                    <div class="custom-control custom-radio">
                        <input class="custom-control-input" type="radio" name="retail_check" id="Retail-transfer"
                            value="1" checked>
                        <label class="custom-control-label" for="Retail-transfer">Transfer from Another SR</label>
                    </div>
                </div>
                <div class="col-md-3 pr-0">
                    <div class="custom-control custom-radio">
                        <input class="custom-control-input" type="radio" name="retail_check" id="add-Universe"
                            value="2">
                        <label class="custom-control-label" for="add-Universe">Add From Retail Universe</label>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12 p-0">
                    <hr>
                </div>
                <div class="col another_sr">
                    <label class="font12 mb-5">Region</label>
                    <div class="form-s2">
                        <select class="form-control formselect region_list" placeholder="Select Region" style="width: 100%"
                            name="region" id="genera_region" required>
                            <option selected value="0" selected>Select Region</option>
                            @foreach($regions as $region)
                                <option value="{{$region->id}}">{{$region->region_name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <input type="hidden" id="all_distriburs_list" value="{{json_encode($distributors)}}">
                <input type="hidden" id="all_localities_list" value="{{json_encode($localities)}}">
                <div class="col pl-0 another_sr">
                    <label class="font12 mb-5">Distributor</label>
                    <div class="form-s2">
                        <select class="form-control formselect disributor_list" style="width: 100%" name="distributor">
                            <option selected value="0">Select Distributor</option>
                        </select>
                    </div>
                </div>

                <div class="col pl-0 another_sr">
                    <label class="font12 mb-5">Order Booker</label>
                    <div class="form-s2">
                        <select class="form-control formselect order_booker_list" style="width: 100%" name="order_booker">
                            <option selected value="0">Select Order Booker</option>
                        </select>
                    </div>
                </div>
                <div class="col pl-0 another_sr">
                    <label class="font12 mb-5">Order Booker Route </label>
                    <div class="form-s2">
                        <select class="form-control formselect order_booker_route" style="width: 100%" name="order_booker_route">
                            <option selected value="0">Select Route</option>
                        </select>
                    </div>
                </div>

                {{-- Retaile univese --}}
                <div class="col retail_universe">
                    <label class="font12 mb-5">Cities</label>
                    <div class="form-s2">
                        <select class="form-control formselect cities_list" placeholder="Select City" style="width: 100%"
                            name="city" id="city" required>
                            <option selected value="0" selected>Select City</option>
                            @foreach($cities as $city)
                                <option value="{{$city->id}}">{{$city->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col pl-0 retail_universe">
                    <label class="font12 mb-5">Localities</label>
                    <div class="form-s2">
                        <select class="form-control formselect locality_list" style="width: 100%" name="locality">
                            <option selected value="0">Select Locality</option>
                        </select>
                    </div>
                </div>

                <div class="col pl-0 retail_universe">
                    <label class="font12 mb-5">Neighbourhoods</label>
                    <div class="form-s2">
                        <select class="form-control formselect neighbourhood_list" style="width: 100%" name="neighbourhood">
                            <option selected value="0">Select Neighbourhood</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="pc-cartlist">
            <div class="overflow-plist">
                <div class="plist-content">
                    <div class="_left-filter pt-0">
                        <div class="container">
                            <div class="row">
                                <div class="col-12">
                                    <div class="card top_border p-15 retailer_list_check">
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="_cl-bottom">
            <!-- <button type="submit" class="btn btn-primary mr-2">Update</button> -->
            <button id="pl-close" type="submit" class="btn btn-cancel mr-2">Close</button>
        </div>
    </div>
@endsection
@section('content')
    <style>
        .routeshops .RLNO {
            background-color: #e2e2e2;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            font-size: 16px;
            text-align: center;
            font-family: 'Rationale', sans-serif;
            line-height: 1;
            padding-top: 5px;
            margin-left: 5px;
            position: relative
        }

        .routeshops tr:HOVER .RLNO::after {
            content: '';
            position: absolute;
            top: -5px;
            left: -10px;
            height: 38px;
            width: 38px;
            background-image: url("images/sort_arrow-drag.svg");
            background-repeat: no-repeat;
            background-position: center center;
        }

        .routeshops td,
        .routeshops th {
            padding: 5px 5px
        }

        .action-ord {
            background-color: #f6f6f6;
            padding: 10px;
            margin-top: 15px;
            margin-left: 15px;
            margin-right: 15px;
            text-align: center;
        }

        .topsec {
            background-color: #f7f7f7;
            font-size: 14px;
            line-height: 25px;
            padding: 5px 0px;
            margin: 0;
            border-bottom: solid 1px #0038ba;
            cursor: pointer
        }

        .topsec i {
            float: right;
            font-size: 18px;
            line-height: 25px;
            color: #a4a4a4
        }

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

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

        .day {
            float: right;
            min-width: 206px;
            text-align: right;
            margin-top: -1px;
        }

        .day div {
            background-color: #fff;
            border: 1px solid #e5e5e5;
            margin-left: 3px;
            padding: 3px 5px 2px 5px;
            color: #282828;
            font-size: 10px;
            display: inline-block;
            border-radius: 0px;
        }

        .add_button {
            box-shadow: none;
            padding: 7px 10px;
            line-height: 1;
            border: solid 1px #0038ba;
            top: 16px;
            font-size: 12px;
        }

        #product-cl-sec {
            width: 980px;
        }

        .AddProductTable {
            padding: 0;
            margin: 0
        }

        .AddProductTable tr {
            border-bottom: solid 1px #eeeeee
        }

        .AddProductTable td {
            padding-bottom: 7px;
            padding-top: 7px
        }

        .se_cus-type {
            background-color: #f3f3f3;
            box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 5%);
            border-bottom: solid 1px #e8e8e8;
            font-size: 14px;
        }

        .custom-control-label::before {
            top: 2px;
        }

        .custom-control-label::after {
            top: 2px;
        }

        .se_cus-type .form-s2 .select2-container .select2-selection--single {
            height: 32px !important;
            border: 1px solid #eae9e9;
            background-color: #ffffff;
        }

        .se_cus-type .form-s2 .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 30px;
        }

        .se_cus-type .form-s2 .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 32px;
        }

        .se_cus-type hr {
            margin-top: 5px;
            margin-bottom: 5px;
        }
        .retail_universe{
            display:none;
        }
    </style>
     <div class="row mt-2 mb-2">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">Route: <span> {{@$route_shops['name']}}</span></h2>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6 text-right">
            <h2 class="_head01 font18">Order Booker: <span>{{@$route_shops['assign_to']}} </span></h2>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card PB-20">
                <div class="col-12 PT-5">
                    <div class="topstats">
                        <div class="row">
                            <div class="col pr-0">
                                <div class="gary-box"><strong>Route ID:</strong>
                                    <span>{{@$route_shops['route_id']}}</span>
                                </div>
                            </div>
                            <div class="col pr-0">
                                <div class="gary-box"><strong>Radius Lock:</strong>
                                    <span>{{@$route_shops['radius_lock']=='1' ? 'Yes' : 'No'}}</span>
                                </div>
                            </div>
                            <div class="col pr-0">
                                <div class="gary-box"><strong> Radius Value:</strong>
                                    <span>{{@$route_shops['radius']}}</span>
                                </div>
                            </div>
                            <div class="col">
                                <div class="gary-box"><strong>Shop Sequence Lock:</strong>
                                    <span>{{@$route_shops['shop_sequence_lock']=='1' ? 'Yes' : 'No'}}</span>
                                </div>
                            </div>

                        </div>
                        <div class="row">
                            <div class="col-auto pr-0">
                                <div class="gary-box m-0">
                                    <strong class="pr-10">Day:</strong>
                                    <div class="day">
                                        <div>
                                        {{
                                            ($route_shops['days']=='1'    ? 'Monday'    : ($route_shops['days']=='2' ? 'Tuesday'
                                            : ($route_shops['days']=='3'  ? 'Wednesday' : ($route_shops['days']=='4' ? 'Thursday'
                                            : ($route_shops['days']=='5'  ? 'Friday'    : ($route_shops['days']=='6' ? 'Saturday'
                                            : ($route_shops['days']=='7'  ? 'Sunday'    : 'Not Locked') ))))))
                                        }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col pr-0">
                                <div class="gary-box m-0"><strong>Area:</strong>
                                    <span>{{@$route_shops['area_name']}}</span>
                                </div>
                            </div>
                            <div class="col pr-0">
                                <div class="gary-box m-0"><strong>City:</strong>
                                    <span>{{@$route_shops['city_name']}}</span>
                                </div>
                            </div>

                            <div class="col">
                                <div class="gary-box m-0"><strong>Total Outlets:</strong>
                                    <span>{{@$route_shops['total_shops']}}</span>
                                </div>
                            </div>

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

                <div class="col-12 p-0">
                    <div class="header addPR-head">
                        <h2>Retail Shops <span> List</span></h2>
                        <button class="btn add_button" data-toggle="modal" data-target="#bd-example-modal-lg-bulk-retailers" data-  style="right: 138px;">
                            <i class="fa fa-upload"></i> Bulk Upload </a>
                        <button class="btn add_button openSidebarForAddRetailer"><i class="fa fa-plus"></i> Add Retailer </button>
                    </div>
                    <div class="loader-sell360 tblLoader">
                        <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 style="min-height: 400px" class="tblLoader">
                        <img src="/images/loader.gif" width="30px" height="auto"
                            style="position: absolute; left: 50%; top: 45%;">
                    </div> --}}
                    <div class="col-12 PT-20 routeshops">
                    </div>

                </div>

                <div class="action-ord">
                    <input type="hidden" value="{{@$route_shops['id']}}" id="r_id">
                    <input type="hidden" value="{{@$route_shops['id']}}" id="route_id">
                    <button type="submit" class="btn btn-primary mr-2 save-priority-list" id="save-priority-list">Save</button>
                    <button type="submit" class="btn btn-cancel">Cancel</button>
                </div>
            </div>
        </div>
    </div>
{{-- Bulk upload Retailers --}}
<div class="modal fade" id="bd-example-modal-lg-bulk-retailers" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content top_border">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Bulk <span> Upload</span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="col-12 bulksection p-0">
                    <div id="floating-label">
                        <div class="form-wrap p-0">
                            <a href="{{url("Retailers Sample.xlsx")}}" download> <button type="button" class="btn btn-primary font13" style="margin-bottom:15px; margin-top: 10px">Sample
                                    Download</button></a>
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="inputGroupFileAddon01">Upload Excel</span>
                                </div>
                                <div class="custom-file">
                                    <form method="POST" enctype="multipart/form-data" id="upload_excel_form">
                                        {!! Form::hidden('tokenForAjaxReq', csrf_token()) !!}
                                        @csrf
                                        <input type="hidden" name="route_id" value="{{@$route_shops['id']}}">
                                        <input type="file" name="file" class="custom-file-input excel_file_input" id="inputGroupFile02"
                                            aria-describedby="inputGroupFileAddon02" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
                                        <label class="custom-file-label file_name_items" id="custom-file-label" for="inputGroupFile02">Choose
                                            file</label>
                                                    
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="display:none" class="alert alert-danger error_message_div" role="alert"> <strong>Failed!
                        </strong> Following Retailers are not added due to wrong formatting </div>
                    <div class="table-responsive not_uploadable_retailers_table">
                    </div>
                </div>
                <div class="modal-footer  border-0 p-0">
                    <button type="button" class="btn btn-cancel close_modal" data-dismiss="modal" aria-label="Close">Close</button>
                    <button type="button" class="btn btn-primary upload_excel_file_btn">Bulk Upload</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection