@extends('layouts.master')
@section('content')
<style>
    .holder > li {
        padding: 5px;
        margin: 2px;
        display: inline-block;
    }
    .holder > li[data-page] {
        border: solid #dee2e6 1px;
        border-radius: 5px;
        border-radius: 0px;
        font-size: 13px;
        padding: 8px 10px;
        line-height: 1;

    }
    .holder > li.separator:before {
        content: '...';
    }
    .holder > li.active {
        background: linear-gradient(90deg, #1e54d3 0%, #0038ba 100%);
        border-color: #0038ba;
        color: #fff;
    }
    .holder > li[data-page]:hover {
        cursor: pointer;
    }
    .all-shops, .all-shops:hover{
        font-family: 'Rationale',sans-serif!important; font-size:20px; color:#0038ba; line-height: 1;
    }
     .dropdown .btn {
        padding: 4px 4px;
        font-size: 12px;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        -khtml-border-radius: 0;
        text-transform: capitalize;
        background: linear-gradient(90deg, #1b51d0 0%, #0038ba 100%);
        color: #fff;
        line-height: 1;
        letter-spacing: 1px;
    }

    .dropdown .dropdown-menu {
        min-width: 65px;
        padding: 0;
        margin: 0;
        font-size: 11px;
        border-radius: 0;
    }

    .dropdown .dropdown-item {
        color: #282828;
        padding: 6px 11px;
        letter-spacing: 1px;
        font-size: 11px;
        line-height: 1;
    }

    .dropdown .dropdown-item:HOVER {
        color: #fff;
        background: linear-gradient(90deg, #1b51d0 0%, #0038ba 100%);
        outline: none !important;
    }

    .colStyle .dropdown:hover .dropdown-menu,
    ._product-card .dropdown:hover .dropdown-menu {
        display: block;
    }
</style>
<div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <h2 class="_head01">Route <span>List</span></h2>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6">
        <ol class="breadcrumb">
            <li><a href="#"><span>Retailer</span></a></li>
            <li><span>Route List</span></li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="Product-Filter pb-15">
            <div class="row">
                <div class="col-6 pr-0">
                    <div class="CL-Product"><i class="fa fa-search"></i>
                        <input type="text" class="form-control" id="search_from_route_list" placeholder="Search">
                    </div>
                </div>
                <div class="col-6">
                    <a href="/routes" class="btn add_button" style="top: 0"><i
                            class="fa fa-plus"></i> <span>Add New Route</span></a>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">

        <div class="Product-row-title">
            <div class="row">
                <div class="col colStyle h-auto" style="max-width:305px">Route Name</div>
                <div class="col colStyle h-auto" style="max-width:240px">Area</div>
                <div class="col colStyle h-auto" style="max-width:220px">Assign To</div>
                <div class="col colStyle h-auto" style="max-width:150px">Shops</div>
                <div class="col colStyle h-auto" style="max-width:180px">Action</div>
            </div>
        </div>


        <div class="route_list_div">
        </div>



        <div class="ProductPageNav text-center">
            <div id="holder" class="holder" style="position: relative; "></div>
            {{-- <ul class="pagination justify-content-center">
            </ul> --}}
        </div>
    </div>
</div>
@endsection