@extends('layouts.master')
@section('content')

    <style>
        ._cust_filter { width: 188px; float: left; padding-right: 10px; margin-bottom: 15px;}
        .CL-Product{padding-right: 10px;}
        .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;
        }
        .table ._cust_filter{width: 140px; margin: 0}
        .table ._cust_filter .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 24px; font-size: 12px;
        }
        .table ._cust_filter .form-s2 .select2-container .select2-selection--single{height: 25px !important;}
        .table ._cust_filter .form-s2 .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 25px;
        }
        .table td{padding: 5px 1px 5px 1px; line-height: 24px;}
        .table td .btn-default{padding-top: 6px; padding-bottom: 6px; margin: 0}
         .table ._cust_filter {width: 120px !important;  margin: 0;}
    </style>

    <div class="row mt-2 mb-3">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">Distributor   <span>Management</span></h2>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6">
            <ol class="breadcrumb">
                <li><a href="#"><span>Distributor </span></a></li>
                <li><span>List</span></li>
            </ol>
        </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="distributorEditSearch"> Search</button>
                    </div>

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

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

                    <table class="table table-hover" id="DistributorsTable" style="width:100%">
                        <thead>
                        <tr>
                            <th style="width: 70px;">Dist. ID</th>
                            <th>Distributor Name</th>
                            <th>Distributor Type</th>
                            <th>Region</th>
                            <th>Zone/Area</th>
                            <th>Territory</th>
                            <th>Town</th>
                            <th>Fulfilment By</th>
                            <th>Parent Dist</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>


                </div>
            </div>

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

@endpush