@extends('layouts.cdb')

@section('content')
    @php
        $userPermission = \Session::get('userPermission');
    @endphp
    <div class="nk-block-head nk-block-head-sm">
        <div class="nk-block-between">
            <div class="nk-block-head-content">
                <h3 class="nk-block-title page-title">Dealers</h3>
                <p>You have total <span class="record_count">{{ $dealersCount }}</span> dealers.</p>
            </div><!-- .nk-block-head-content -->
            <div class="nk-block-head-content">
                <div class="toggle-wrap nk-block-tools-toggle">
                    <a href="#" class="btn btn-icon btn-trigger toggle-expand mr-n1" data-target="more-options"><em
                            class="icon ni ni-more-v"></em></a>
                    <div class="toggle-expand-content" data-content="more-options">
                        <ul class="nk-block-tools g-3">
                            {{-- <li>
                                <a href="#" class="btn btn-trigger btn-icon dropdown-toggle" data-toggle="modal"
                                    title="filter" data-target="#modalFilterUser">
                                    <div class="dot dot-primary"></div>
                                    <em class="icon ni ni-filter-alt"></em>
                                </a>
                            </li> --}}

                            <li>
                                <div class="dropdown">
                                    <a href="#" class="btn btn-trigger btn-icon dropdown-toggle"
                                        data-toggle="dropdown">
                                        <em class="icon ni ni-setting"></em>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-xs dropdown-menu-right">
                                        <ul class="link-check">
                                            <li><span>Actions</span></li>
                                            <li><a href="{{ url('cdbdealer/export') }}"><em class="icon ni ni-download m-r10"></em> Export</a></li>
                                            {{-- <li><a href="{{ url('user/import') }}"><em class="icon ni ni-upload m-r10"></em>
                                                    Import</a></li> --}}
                                        </ul>
                                    </div>
                                </div>
                            </li>

                            <li class="nk-block-tools-opt">
                                {{-- <a href="{{ url('/user/create-staff') }}" class="btn btn-icon btn-primary d-md-none"><em
                                        class="icon ni ni-plus"></em></a> --}}
                                <a href="{{ url('/cdbdealer/create') }}" class="btn btn-primary d-none d-md-inline-flex"><em
                                        class="icon ni ni-plus"></em><span>Add Dealer</span></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div><!-- .nk-block-between -->
    </div><!-- .nk-block-head -->

    <div class="nk-block table-compact pt-28">
        <!--  Filter Tag List -->
        <div id="filter_tag_list" class="filter-tag-list"></div>
        <!-- -->
        <div class="nk-tb-list is-separate mb-3">
            <table class="broadcast-init nowrap nk-tb-list is-separate" data-auto-responsive="false">
                <thead>
                    <tr class="nk-tb-item nk-tb-head">
                        <!-- <th class="nk-tb-col nk-tb-col-check">
                                                <div class="custom-control custom-control-sm custom-checkbox notext">
                                                    <input type="checkbox" class="custom-control-input" id="check-all" name="check_all"><label class="custom-control-label" for="check-all"></label>
                                                </div>
                                            </th> -->
                        <th class="nk-tb-col tb-col-mb"><span class="sub-text">Dealer Name</span></th>
                        <th class="nk-tb-col tb-col-mb"><span class="sub-text">Center Name</span></th>
                        <th class="nk-tb-col tb-col-mb"><span class="sub-text">Private Service Dealer</span></th>
                        <th class="nk-tb-col tb-col-mb"><span class="sub-text">Contact Number</span></th>
                        <th class="nk-tb-col tb-col-mb"><span class="sub-text">Email</span></th>
                        <th class="nk-tb-col tb-col-mb"><span class="sub-text">Contact Person</span></th>
                        <th class="nk-tb-col tb-col-mb"><span class="sub-text">Region</span></th>
                        <th class="nk-tb-col tb-col-mb"><span class="sub-text">State</span></th>
                        <th class="nk-tb-col tb-col-mb"><span class="sub-text">Area</span></th>
                        <th class="nk-tb-col tb-col-mb"><span class="sub-text">City</span></th>
                        <th class="nk-tb-col tb-col-mb"><span class="sub-text">Role</span></th>
                        <th class="nk-tb-col tb-col-md w-1 text-center"><span class="sub-text">Exists In</span>
                        <th class="nk-tb-col tb-col-md w-1 text-center" nowrap="true"><span class="sub-text">Status</span>
                        </th>
                        <th class="nk-tb-col tb-col-md w-1" nowrap="true"><span class="sub-text">Created At</span></th>
                        <th class="nk-tb-col tb-col-md w-1" nowrap="true"><span class="sub-text">Updated At</span></th>
                        <th class="nk-tb-col nk-tb-col-tools text-right w-1" nowrap="true">
                            <span class="sub-text">Action</span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

        </div><!-- .nk-block -->
        <div class="modal fade zoom" tabindex="-1" id="modalFilterUser">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Filter</h5>
                        <a href="#" class="close" data-dismiss="modal" aria-label="Close">
                            <em class="icon ni ni-cross"></em>
                        </a>
                    </div>
                    <form role="form" class="mb-0" method="get" action="#">
                        @csrf
                        <div class="modal-body modal-body-lg">
                            <div class="gy-3">
                                <div class="row g-3 align-center">
                                    <div class="col-lg-5">
                                        <x-inputs.verticalFormLabel label="Service Center Name" for="service_center_name"
                                            suggestion="Specify the service center name ." />
                                    </div>
                                    <div class="col-lg-7">
                                        <x-inputs.text value="" for="service_center_name" icon="user"
                                            placeholder="Service Center Name" name="service_center_name" />
                                    </div>
                                </div>

                                <div class="row g-3 align-center">
                                    <div class="col-lg-5">
                                        <x-inputs.verticalFormLabel label="Mobile Number" for="contact_number"
                                            suggestion="Specify the mobile number of the user." />
                                    </div>
                                    <div class="col-lg-7">
                                        <x-inputs.text value="" for="contact_number" icon="call"
                                            placeholder="Mobile Number" name="contact_number"
                                            data-parsley-pattern="{{ \Config::get('constants.REGEX.VALIDATE_MOBILE_NUMBER_LENGTH') }}" />
                                    </div>
                                </div>
                                <div class="row g-3 align-center">
                                    <div class="col-lg-5">
                                        <x-inputs.verticalFormLabel label="Created at" for="createdAt"
                                            suggestion="Select the dates of created at." />
                                    </div>
                                    <div class="col-lg-7">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="form-control-wrap">
                                                    <div class="form-icon form-icon-left">
                                                        <em class="icon ni ni-calendar"></em>
                                                    </div>
                                                    <input type="text" class="form-control date-picker"
                                                        placeholder="Form Date" data-date-format="yyyy-mm-dd"
                                                        id="fromDate" name="fromDate">
                                                </div>
                                                <!-- <div class="form-note mt-0">Form Date</div> -->
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-control-wrap">
                                                    <div class="form-icon form-icon-left">
                                                        <em class="icon ni ni-calendar"></em>
                                                    </div>
                                                    <input type="text" class="form-control date-picker"
                                                        placeholder="To Date" data-date-format="yyyy-mm-dd"
                                                        id="toDate" name="toDate">
                                                </div>
                                                <!-- <div class="form-note mt-0">To Date</div> -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" id="userId" name="user_id" value="0">
                        <div class="modal-footer bg-light">
                            <div class="row">
                                <div class="col-lg-12 p-0 text-right">
                                    <button class="btn btn-outline-light" data-dismiss="modal"
                                        aria-label="Close">Cancel</button>
                                    <button class="btn btn-danger resetFilter" data-dismiss="modal"
                                        aria-label="Close">Clear Filter</button>
                                    <button class="btn btn-primary submitBtn" type="button">Submit</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>




    </div>
@endsection
@push('footerScripts')
    <script src="{{ url('js/tableFlow.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js"></script>
    <script type="text/javascript">
        $(function() {
            function decodeEntities(encodedString) {
                const textArea = document.createElement('textarea');
                textArea.innerHTML = encodedString;
                return textArea.value;
            }
            var root_url = "