@extends('layouts.master')
@section('content')
    <style>
        .posm-card{ padding:0; font-size: 13px;}
        .posm-card .shopname{
            line-height:20px;
            height:52px;
            overflow: hidden;
            color: #1f283b;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            position: relative;  border-top: solid 2px #0038ba; padding: 7px 10px 0px 10px; background-color: #f4f4f4; text-decoration:none; color: #282828;
        }
        .posm-card .shopname:hover, .posm-card:hover .shopname{color:#0038ba; text-decoration:underline;}
        .posm-card .PR-Thumb{margin: auto;}
        .posm-card .posm-dl{padding: 10px; color: #282828}

        .posm-card .posm-dl span{ padding-right: 5px; width: 117px; display: inline-block; opacity: 0.85}
        .posm-card .PR-Thumb {height: 196px;}
        .posm-card .PR-Thumb img {max-height: 196px;}
        .zoom-img{padding: 6px; background-color:#fff; color: #0038ba; line-height: 1; font-size: 16px; position: absolute; right: 10px; top:160px; }
        .zoom-img:hover{background-color:#0038ba}
        .zoom-img:hover i{color: #fff}
        ._cust_filter { width: 210px; float: left; padding-right: 10px; margin-bottom: 15px;}
        .CL-Product{padding-right: 10px; width: 130px}
        .btn-primary{box-shadow: none}
        .Product-Filter .form-s2 .select2-container .select2-selection--single{height: 32px !important;}
        .Product-Filter .form-s2 .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 30px;
        }
        .Product-Filter ._cust_filter .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 30px ;
        }
        .action-icon-tab .nav-link {
            padding: 6px 8px 0px 8px;
        }
        .action-icon-tab .nav {
            width: 74px;
            float: right
        }
        .action-icon-tab .nav .fa {
            color: #a6a5a5;
            font-size: 20px
        }
        .action-icon-tab .active .fa {
            color: #0038ba
        }
        .btn-addproduct {
            background-color: #a6a5a5;
        }
        .btn-addproduct:hover {
            background-color: #0038ba;
        }
        .CL-Product input{letter-spacing: normal}
        ._SNO{max-width:170px}
        ._ITEMSKU {max-width: 320px;}
        ._ITEMBRAND {max-width: 300px;}
        ._Action {max-width: 150px;}
        .Product-row-title{padding: 10px;}
        .Product-row {padding: 10px; margin-bottom: 5px;}
        .Product-IMG img {width: 35px; height: 35px; margin-right: 10px;}
        .posm-card a{text-decoration: none}
        .search-list{ margin: 0px 0 12px 0; float: right; width: 240px; padding-right:0}
        .pagination li {
            display:inline-block;
            padding:5px;
        }
        .no-result {
            display:none;
        }
        .pagination>li {
            display: inline;
            cursor: pointer;
        }
        .pagination>li>a, .pagination>li>span {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: #337ab7;
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #ddd
        }
        .pagination>li:first-child>a, .pagination>li:first-child>span {
            margin-left: 0;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px
        }
        .pagination>li:last-child>a, .pagination>li:last-child>span {
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px
        }
        .pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
            z-index: 2;
            color: #23527c;
            background-color: #eee;
            border-color: #ddd
        }
        .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
            z-index: 3;
            color: #fff;
            cursor: default;
            background-color: #0038ba;
            border-color: #0038ba;
        }
        .pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover {
            color: #2828;
            cursor: not-allowed;
            background-color: #fff;
            border-color: #ddd
        }
        .pagination-lg>li>a, .pagination-lg>li>span {
            padding: 10px 16px;
            font-size: 14px;
            line-height: 1.3333333
        }
        .pagination-lg>li:first-child>a, .pagination-lg>li:first-child>span {
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px
        }
        .pagination-lg>li:last-child>a, .pagination-lg>li:last-child>span {
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px
        }
        .pagination-sm>li>a, .pagination-sm>li>span {
            padding: 5px 10px;
            font-size: 12px;
            line-height: 1.5
        }
        .pagination-sm>li:first-child>a, .pagination-sm>li:first-child>span {
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px
        }
        .pagination-sm>li:last-child>a, .pagination-sm>li:last-child>span {
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px
        }

        @media (max-width: 1280px) {
            .CL-Product {width: 122px}
            .Product-Filter .btn-primary{padding: 4px 11px;}
            ._cust_filter {width: 205px;}
            ._ITEMSKU {max-width: 340px;}
            ._ITEMBRAND {max-width: 260px;}
        }
        ._list-total {margin-top: 2px; color: #282828}
    </style>

    <div class="row mb-2">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">Distributors <span>Management</span></h2>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6 action-icon-tab">
            <div class="nav" id="nav-tab" role="tablist">
                <a class="nav-item nav-link active" id="productthumb-tab" data-toggle="tab" href="#productthumb" role="tab" aria-controls="productthumb" aria-selected="false">
                    <i class="fa fa-th-large"></i></a>
                <a class="nav-item nav-link" id="productList-tab" data-toggle="tab" href="#productList" role="tab" aria-controls="productList" aria-selected="true">
                    <i class="fa fa-th-list"></i>
                </a>
            </div>
{{--            <button class="btn btn-addproduct float-right mb-0"><i class="fa fa-download"></i> Download Excel</button>--}}
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="Product-Filter">
                <div class="row">
                    <div class="col pr-0">
                        <div class="_cust_filter">
                            <div class="form-s2">
                                <select class="form-control formselect" onchange="fetchAllRegionAreas(this.value)" placeholder="Select Region" id="region_id" name="region_id">
                                    <option selected value="">Select Region</option>
                                    @foreach($regions as $region)
                                        <option value="{{$region->id}}">{{$region->region_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="_cust_filter">
                            <div class="form-s2">
                                <select class="form-control formselect" onchange="fetchAllAreaTerritories(this.value)" placeholder="Select Area/Zone" id="area_id" name="area_id">
                                    <option selected disabled value="0">Select Area/Zone</option>
                                </select>
                            </div>
                        </div>

                        <div class="_cust_filter">
                            <div class="form-s2">
                                <select class="form-control formselect" placeholder="Select Territory" id="territory_id" name="territory_id">
                                    <option selected disabled value="0">Select Territory</option>
                                </select>
                            </div>
                        </div>


                    </div>
                    <div class="col-auto pl-0">
                        <button class="btn btn-primary m-0" id="distributorSearch"> Search</button>
                    </div>

                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12" id="users">
            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="productthumb" role="tabpanel"
                     aria-labelledby="productthumb-tab">
                    <div class="row">
                        <div class="col-6">
                            <h2 class="font20 pt-5" style="display:inline-block">Distributors <span>List</span><div class="_list-total">Total: <span class="list_count">0</span></div></h2>
                        </div>
                        <div class="col-6">
                            <div class="CL-Product search-list"><i class="fa fa-search"></i>
                                <input class="search form-control" placeholder="Search" />	</div>
                        </div>
                    </div>
                    <div class="row list">

                    </div>
                    <!-- <div class="no-result">No Results</div>-->

                    <div class="ProductPageNav">
                        <ul class="justify-content-center pagination"></ul>
                    </div>

                </div>
                <div class="tab-pane fade" id="productList" role="tabpanel"
                         aria-labelledby="productList-tab">
                        <div class="row">
                            <div class="col-6">
                                <h2 class="font20 pt-5" style="display:inline-block">Distributors <span>List</span><div class="_list-total">Total: <span class="list_count">0</span></div></h2>
                            </div>
                            <div class="col-6">
                                <div class="CL-Product search-list"><i class="fa fa-search"></i>
                                    <input class="search form-control" placeholder="Search" />	</div>
                            </div>
                        </div>
                        <div class="Product-row-title">
                            <div class="row">
                                <div class="col colStyle h-auto _SNO">Dist. ID</div>
                                <div class="col colStyle h-auto _ITEMSKU">Distributor Name</div>
                                <div class="col colStyle h-auto _ITEMBRAND">Type</div>
                                <div class="col colStyle h-auto _ITEMBRAND">Town</div>
                            </div>
                        </div>

                    <div class="row list">

                    </div>
                    <!-- <div class="no-result">No Results</div>-->

                    <div class="ProductPageNav">
                        <ul class="justify-content-center pagination"></ul>
                    </div>

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

    </div>

@endsection

@push('scripts')
    <script src="/js/list.min.js"></script>
    <script>
    </script>
@endpush