@extends('admin.layout.layout')

@section('content')
    <style>
        .custom ::-webkit-input-placeholder {
            color: #3498db;
        }

        /* Firefox */
        .custom ::-moz-placeholder {
            color: #3498db;
        }

        /* IE */
        .custom :-ms-input-placeholder {
            color: #3498db;
        }
        th.hide_me, td.hide_me {display: none;}
        /*input[type="date"]::-webkit-inner-spin-button,*/
        /*input[type="date"]::-webkit-calendar-picker-indicator {*/
        /*    display: none;*/
        /*    -webkit-appearance: none;*/
        /*}*/
        input[type="date"]::-webkit-calendar-picker-indicator {
            color: transparent;
            background: none;
            z-index: 1;
        }
        input[type="date"]{
            padding: 3px;
        }
        input[type="date"]:before {
            color: cyan;
            background: none;
            display: block;
            font-family: 'FontAwesome';
            content: '\f073';
            width: 15px;
            height: 20px;
            position: absolute;
            top: 8px;
            right: 13px;
        }
        .custom-form-control-danger:before {
            color:#FA2256 !important;
            top:6px !important;
        }
        .uil-search:before {
            position: relative;
            top: 3px !important;
        }
        .uil-microphone:before {
            content: '\e995';
            top: -11px;
            position: relative;
        }
        .owl-carousel .owl-nav.disabled {
            display: block !important;
        }
        .owl-nav {
            text-align: center;
        }
        .owl-carousel .owl-stage-outer {
        }
        .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
            padding: 7px 21px !important;
            background: #141518;
            border: 1px solid cyan;
            border-radius: 8px;
            color: cyan;
            margin:5px;
            width: 114px;
        }
        button.owl-prev::after {
            content: " Previous";
        }
        button.owl-next:before {
            content: "Next ";
        }
    </style>
    <div class="main-content">

        <div class="page-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12 text-right">
                        <p class="page-title">dnmeta / MyProfolio</p>
                    </div>
                </div>
            </div>
            <div class="container-fluid">
                <div class="row my-3">
                    <div class="col-md-4">
                        <div class="row">
                            <div class="col-md-4 text-center pr-0">
                                <div  style="position: relative;top:105px;">
                                    <img src="{{asset('assets/images')}}/zdomain/portfolio/right-bar-circle.png" alt="" class="img-fluid img-80">
                                    <div class="centered">31</div>
                                    <p class="circle-description pt-2">NOT FOR SALE</p>
                                </div>

                            </div>
                            <div class="col-md-6 text-center pl-0">
                                <div  style="position: relative">
                                    <img src="{{asset('assets/images')}}/zdomain/portfolio/left-bar-circle.png" alt="" class="img-fluid img-70">
                                    <div class="centered-for-sale">12988</div>
                                    <p class="for-sale-description pt-2">FOR SALE</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 text-center py-5">
                        <div  style="position: relative">
                            <img src="{{asset('assets/images')}}/zdomain/portfolio/total-domain-box.png" alt="" class="img-fluid img-70">
                            <div class="total-domain-centered">13228</div>
                            <div class="total-domain-text-centered">TOTAL DOMAINS</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="row">
                            <div class="col-md-2"></div>
                            <div class="col-md-6 text-center pl-0">
                                <div  style="position: relative">
                                    <img src="{{asset('assets/images')}}/zdomain/portfolio/left-bar-circle.png" alt="" class="img-fluid img-70">
                                    <div class="centered-for-sale ">236</div>
                                    <p class="for-sale-description pt-2">DN MONETIZER</p>
                                </div>
                            </div>
                            <div class="col-md-4 text-center pr-0">
                                <div  style="position: relative;top:105px;">
                                    <img src="{{asset('assets/images')}}/zdomain/portfolio/right-bar-circle.png" alt="" class="img-fluid img-80">
                                    <div class="centered">18</div>
                                    <p class="circle-description pt-2">IN DEV</p>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
                <div class="row mt-5">
                    <div class="col-md-3">
                        <div class="card dashboard-domains-card">
                            <div class="card-body  p-2">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <h4 class="my-2">Domains By </h4>
                                            <h3 class="my-2">Registrar</h3>
                                        </div>
                                        <div class="col-md-4">
                                            <img src="{{asset('assets')}}/images/zdomain/portfolio/ww.png" alt="" class="pb-1">
                                            <button class="btn btn-sm btn-view"  data-toggle="modal" data-target="#add-registrar-modal">View</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card dashboard-domains-card">
                            <div class="card-body  p-2">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <h4 class="my-2">Domains By </h4>
                                            <h3 class="my-2 tlds-text">TLD’s</h3>
                                        </div>
                                        <div class="col-md-4">
                                            <img src="{{asset('assets')}}/images/zdomain/portfolio/tld-logo.png" alt="" class="pb-1">
                                            <button class="btn btn-sm tlds-btn" data-toggle="modal" data-target="#add-tlds-modal">View</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card dashboard-domains-card">
                            <div class="card-body  p-2">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <h4 class="my-2">Domains By </h4>
                                            <h3 class="my-2 nameserver-text font-23">Nameservers</h3>
                                        </div>
                                        <div class="col-md-4">
                                            <img src="{{asset('assets')}}/images/zdomain/portfolio/nameserver-logo.png" alt="" class="pb-1">
                                            <button class="btn btn-sm nameserver-btn" data-toggle="modal" data-target="#add-nameserver-modal">View</button>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card dashboard-domains-card">
                            <div class="card-body  p-2">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <h4 class="my-2">Domains By </h4>
                                            <h3 class="my-2 more-option-text font-23">More Options</h3>
                                        </div>
                                        <div class="col-md-4">
                                            <img src="{{asset('assets')}}/images/zdomain/portfolio/more-logo.png" alt="" class="pb-1">
                                            <button class="btn btn-sm more-option-btn">View</button>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 text-right">

<!--                    <div class="tooltip">
                        <img src="{{asset('assets/images')}}/zdomain/domain-table-logo.png" alt="">
                        <span class="tooltiptext">ns1.DNmeta.com ns2.DNmeta.com</span>
                    </div>-->
                    </div>
                </div>
                <div class="row my-3">
                    <div class="container mb-4">
                    <div class="col-md-12 d-inline">
                        <button class="btn btn-sm cyan " data-toggle="modal" data-target="#slider-modal" >Registrar New Popup</button>
                        <button class="btn btn-sm pl-4 cyan" data-toggle="modal" data-target="#portfolio-slider-modal" >Portfolio New Popup</button>
                        <button class="btn btn-sm pl-4 cyan" data-toggle="modal" data-target="#tlds-slider-modal" >Tld's New Popup</button>
                    </div>
                    </div>
                    <div class="col-md-6">
                        <h4 class="portfolio-heading pl-4">My Portfolio</h4>
                    </div>

                    <div class="col-md-6 text-right">
                        <a href="{{asset('dashboard/admin/export/domain')}}" class="btn btn-lg bulk-export-btn"><span class="pt-1">Bulk Export</span> <span class=""><img
                                    class="download-sign ml-2"  src="{{asset('assets/images')}}/zdomain/portfolio/download-btn.png" alt=""></span></a>
                        <button class="btn btn-lg bulk-export-btn ml-3" data-toggle="modal" data-target="#bulk-import-modal"><span class="pt-1">Bulk Import </span><span class=""><img
                                    class="download-sign import-icon ml-2"  src="{{asset('assets/images')}}/zdomain/portfolio/import-icon.png" alt=""></span></button>

                    </div>

                </div>

                <div class="parent-div-datatable">
                    <div class="row">
                        <div class="col-md-6" id="datatable-top">
                            <div class="row align-self-center">
                                <div class="col-md-12 ml-3 button-page">
                                    <button class="badge badge-bg badge-bg-display m-auto  datatable-badge-active">Display</button>
                                    <button class="button-page badge badge-bg card-m-2 datatable-badge-active" id="10-pg" onclick="dataTablePage('10')">10</button>
                                    <button class="button-page badge badge-bg card-m-2" id="25-pg" onclick="dataTablePage('25')">25</button>
                                    <button class=" button-page badge badge-bg card-m-2"  id="50-pg" onclick="dataTablePage('50')">50</button>
                                    <button class="badge badge-bg card-m-2 datatable-badge-active"><img width="10px" src="{{asset('assets/images')}}/zdomain/portfolio/dt-dropdown.png" alt="" class="dt-dropdown"></button>
                                </div>
                                <div class="col-md-12 ml-3 mt-2">
                                    <p class="Royalblue pt-2 custom-font-family">2 Domains Selected</p>
                                </div>
                            </div>
                        </div>
                    </div>
{{--                        <div class="col-md-6 data-column-dropdown-div pl-5">--}}
{{--                            <div class="datatable-search pl-5 ml-3">--}}
{{--                                <form class="app-search  d-lg-block">--}}
{{--                                    <div class="position-relative">--}}
{{--                                        <div class="selectParent">--}}
{{--                                            <select type="text" class="data-columns form-control custom-font-family bg-search-text" placeholder="Data Columns">--}}
{{--                                                <option value="" select>Data Columns</option>--}}
{{--                                                <option value="">Domains</option>--}}
{{--                                            </select>--}}
{{--                                        </div>--}}
                                        <img class="uil-plus-minus" src="{{asset('assets/images')}}/zdomain/plus-minus.png">
{{--                                    </div>--}}
{{--                                </form>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
                    <!-- end page title -->
                    <div class="row" id="datatable-main">
                        <div class="col-md-12 px-0">
                            <div class="card bg_table">
                                <table id="datatable-portfolio" class="datatable-portfolio table mx-0 px-0  dt-responsive nowrap portfolio-table table-striped" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                    <thead>
                                        <tr>
                                        <th>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="grily">
                                                <label class="custom-control-label" for="grily"></label>
                                            </div>
                                        </th>
                                        <th>Domain</th>
                                        <th>Traffic</th>
                                        <th>Inquiries</th>
                                        <th>Buy It Now</th>
                                        <th>Min Offer</th>
                                        <th>Expiry Date</th>
                                        <th>Extension</th>
                                        <th>DNS</th>
                                        <th>Registrar</th>
                                            <th></th>

                                    </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div> <!-- end col-->
                    </div> <!-- end row-->

                </div>
            </div>

            </div> <!-- container-fluid -->
        </div>
        <!-- End Page-content -->
    </div>

    <!-- Domain Modal -->

{{--Registrar Modal--}}
    <div class="modal fade" id="add-registrar-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg " role="document">
            <div class="modal-content modal-lg registrar-modal">
                <div class="modal-body pb-4">
                    <div class="container">
                        <div class="row px-2 pt-4">
                            @foreach($registrars as $registrar)

                            <div class="col-md-3 text-center">
                                <div class="card registrar-parent-card">
                                    <div class="card-body registrar-card-bg py-2">
                                        @if(stripos($registrar->registrar,'Sav'))
                                            <img src="{{asset('assets/images')}}/zdomain/portfolio/reg_popup/sav.png" alt="" class="img-fluid my-1 popup-img">
                                            @endif
                                            @if(stripos($registrar->registrar,'Dynadot'))
                                                <img src="{{asset('assets/images')}}/zdomain/portfolio/reg_popup/dynadot 1.png" alt="" class="img-fluid my-1 popup-img">
                                            @else
                                                <img src="{{asset('assets/images')}}/zdomain/portfolio/reg_popup/dynadot 1.png" alt="" class="img-fluid my-1 popup-img">

                                            @endif

                                        <h5 class="registrar-number my-0">{{$registrar->registrar_count}}</h5>
                                    </div>
                                </div>
                            </div>
                            @endforeach

                            </div>
                            <div class="row">
                                <div class="col-md-12 text-right mr-2 mt-4">
                                    <button class="btn btn-popup"  data-dismiss="modal" aria-label="Close">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>

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

    {{--Tlds Modal--}}
    <div class="modal fade" id="add-tlds-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg " role="document">
            <div class="modal-content modal-lg registrar-modal">
                <div class="modal-body pb-4">
                    <div class="container">
                        <div class="row px-2 pt-4">
                            @foreach($types as $type)
                            <div class="col-md-3 text-center">
                                <div class="card registrar-card-bg">
                                    <div class="card-body registrar-card-bg py-2">
                                        <h4 class="domain-text">.{{$type->type}}</h4>
                                        <h5 class="registrar-number my-0">{{$type->total}}</h5>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                            <div class="row">
                                <div class="col-md-12 text-right">

                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 text-right mr-2 mt-4">
                                <button class="btn btn-popup"  data-dismiss="modal" aria-label="Close">Close</button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    {{--nameserver Modal--}}
    <div class="modal fade" id="add-nameserver-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg " role="document">
            <div class="modal-content modal-lg registrar-modal">
                <div class="modal-body pb-4">
                    <div class="container">
                        <div class="row px-2 pt-4">
                            @foreach($nameServers as $nameServer)
                                @php

                                    $name_server = str_replace('[','',$nameServer->name_server);
                         $name_server = str_replace(']','',$name_server);
                         $name_server = str_replace(',',' , ',$name_server);
                         $name_server = str_replace('"','',$name_server);
                         $name_server = explode(',',$name_server);
                                @endphp
                            <div class="col-md-4 text-center">
                                <div class="card registrar-card-bg name-server-modal">
                                    <div class="card-body registrar-card-bg py-2">

                                    @if(!empty($name_server))
                                            @if(count($name_server)>0)
                                        @if(stripos($name_server[0],"DAN"))
                                        <img src="{{asset('assets/images')}}/zdomain/portfolio/nameservers_popup/dan.png" alt="" class="img-fluid my-2 popup-img">
                                            @elseif(stripos($name_server[0],"INSTAWEBIZ"))
                                                <img src="{{asset('assets/images')}}/zdomain/portfolio/nameservers_popup/dan.png" alt="" class="img-fluid my-2 popup-img">

                                            @elseif(stripos($name_server[0],"HICHINA"))
                                                <img src="{{asset('assets/images')}}/zdomain/portfolio/nameservers_popup/dan.png" alt="" class="img-fluid my-2 popup-img">
                                            @elseif(stripos($name_server[0],"BODIS"))
                                                <img src="{{asset('assets/images')}}/zdomain/portfolio/nameservers_popup/dan.png" alt="" class="img-fluid my-2 popup-img">

                                            @elseif(stripos($name_server[0],"eftydns"))
                                                <img src="{{asset('assets/images')}}/zdomain/portfolio/nameservers_popup/dan.png" alt="" class="img-fluid my-2 popup-img">
                                            @elseif(stripos($name_server[0],"SEDOPARKING"))
                                                <img src="{{asset('assets/images')}}/zdomain/portfolio/nameservers_popup/sedo.png" alt="" class="img-fluid my-2 popup-img">
                                            @elseif(stripos($name_server[0],"ZDOMAINNAME"))
                                                <img src="{{asset('assets/images')}}/zdomain/portfolio/nameservers_popup/dan.png" alt="" class="img-fluid my-2 popup-img">
                                            @elseif(stripos($name_server[0],"afternic"))
                                                <img src="{{asset('assets/images')}}/zdomain/portfolio/nameservers_popup/afternic.png" alt="" class="img-fluid my-2 popup-img">
                                            @elseif(stripos($name_server[0],"CLOUDFLARE"))
                                                <img src="{{asset('assets/images')}}/zdomain/portfolio/nameservers_popup/dan.png" alt="" class="img-fluid my-2 popup-img">
                                                @else
                                                    <img src="{{asset('assets/images')}}/zdomain/portfolio/nameservers_popup/dan.png" alt="" class="img-fluid my-2 popup-img">
                                                @endif
                                        <h5 class="nameserver-number my-3">{{$nameServer->server_count}}</h5>
                                        <p class="mb-0">{{isset($name_server[0])? $name_server[0] : ''}}</p>
                                                <p class="mb-0">{{isset($name_server[1])? $name_server[1] : ''}}</p>
                                            @endif
                                            @endif
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <div class="row">
                            <div class="col-md-12 text-right mr-2 mt-4">
                                <button class="btn btn-popup"  data-dismiss="modal" aria-label="Close">Close</button>
                            </div>
                        </div>
                    </div>

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


    <div class="modal fade" id="slider-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content modal-lg">
                <div class="modal-header pb-0">
                    <h4 class="add-modal-title">My Registrars</h4>
                    <a><img src="{{asset('assets')}}/images/zdomain/portfolio/close-modal-btn.png" data-dismiss="modal" aria-label="Close" class="close-icon" ></a>
                </div>

                <div class="modal-body modal-bg pb-5">
                    <div class="container">
                        <div class="row px-5 pt-4">
                            <div class="col-md-12 px-5">
                                <form action="">
                                <div class="owl-carousel owl-theme">
                                    <div class="item">
                                        <div class="card registrar-card-bg name-server-modal">
                                            <div class="card-body registrar-card-bg">
                                                <img src="{{asset('assets')}}/images/zdomain/portfolio/slider-popups/godaddy.png" alt="" class="img-fluid popup-img">
                                                <h5 class="nameserver-number">70</h5>

                                            </div>
                                        </div>
                                        <div class="card registrar-card-bg name-server-modal">
                                            <div class="card-body registrar-card-bg">
                                                <img src="{{asset('assets')}}/images/zdomain/portfolio/slider-popups/sav.png" alt="" class="img-fluid popup-img">
                                                <h5 class="nameserver-number">70</h5>

                                            </div>
                                        </div>
                                        <div class="card registrar-card-bg name-server-modal">
                                            <div class="card-body registrar-card-bg">
                                                <img src="{{asset('assets')}}/images/zdomain/portfolio/slider-popups/name-cheap.png" alt="" class="img-fluid popup-img">
                                                <h5 class="nameserver-number">70</h5>
                                            </div>
                                        </div>
                                        <div class="card registrar-card-bg name-server-modal">
                                            <div class="card-body registrar-card-bg">
                                                <img src="{{asset('assets')}}/images/zdomain/portfolio/slider-popups/dynadot.png" alt="" class="img-fluid popup-img">
                                                <h5 class="nameserver-number">70</h5>
                                            </div>
                                        </div>
                                    </div>

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

                </div>

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


{{--    portfolio slider--}}
    <div class="modal fade" id="portfolio-slider-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content modal-lg">
                <div class="modal-header pb-0">
                    <h4 class="add-modal-title">My Nameserves</h4>
                    <a><img src="{{asset('assets')}}/images/zdomain/portfolio/close-modal-btn.png" data-dismiss="modal" aria-label="Close" class="close-icon" ></a>
                </div>
                <div class="modal-body modal-bg nameserver-slider-bg pb-5">
                    <div class="container">
                        <div class="row px-5 pt-4">
                            <div class="col-md-12 px-5">
                                <form action="">
                                <div class="owl-carousel owl-theme">
                                    <div class="item">
                                        <div class="card registrar-card-bg name-server-modal pb-0 mb-2">
                                            <div class="card-body registrar-card-bg">
                                                <img src="{{asset('assets')}}/images/zdomain/portfolio/slider-popups/tucows.png" alt="" class="img-fluid popup-img">
                                                <h5 class="nameserver-number">70</h5>
                                            </div>
                                        </div>
                                        <div class="card registrar-card-bg name-server-modal pb-0 mb-2">
                                            <div class="card-body registrar-card-bg px-0 py-2 height-63">
                                                <p class="myserver-modal-heading">ns1.namebrightdns.com
                                                    ns2.namebrightdns.com</p>
                                            </div>
                                        </div>
                                        <div class="card registrar-card-bg name-server-modal pb-0 mb-2">
                                            <div class="card-body registrar-card-bg">
                                                <img src="{{asset('assets')}}/images/zdomain/portfolio/slider-popups/godaddy.png" alt="" class="img-fluid popup-img">
                                                <h5 class="nameserver-number">70</h5>
                                            </div>
                                        </div>
                                        <div class="card registrar-card-bg name-server-modal pb-0 mb-2">
                                            <div class="card-body registrar-card-bg px-0 py-2 height-63">
                                                <p class="myserver-modal-heading">ns1.namebrightdns.com
                                                    ns2.namebrightdns.com</p>
                                            </div>
                                        </div>
                                        <div class="card registrar-card-bg name-server-modal pb-0 mb-2">
                                            <div class="card-body registrar-card-bg">
                                                <img src="{{asset('assets')}}/images/zdomain/portfolio/slider-popups/all-domains.png" alt="" class="img-fluid popup-img">
                                                <h5 class="nameserver-number">70</h5>
                                            </div>
                                        </div>
                                        <div class="card registrar-card-bg name-server-modal pb-0 mb-2">
                                            <div class="card-body registrar-card-bg px-0 py-2 height-63">
                                                <p class="myserver-modal-heading">ns1.namebrightdns.com
                                                    ns2.namebrightdns.com</p>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="item">
                                        <div class="card registrar-card-bg name-server-modal pb-0 mb-2">
                                            <div class="card-body registrar-card-bg">
                                                <img src="{{asset('assets')}}/images/zdomain/portfolio/slider-popups/protrada.png" alt="" class="img-fluid popup-img">
                                                <h5 class="nameserver-number">70</h5>
                                            </div>
                                        </div>
                                        <div class="card registrar-card-bg name-server-modal pb-0 mb-2">
                                            <div class="card-body registrar-card-bg px-0 py-2 height-63">
                                                <p class="myserver-modal-heading">ns1.namebrightdns.com
                                                    ns2.namebrightdns.com</p>
                                            </div>
                                        </div>
                                        <div class="card registrar-card-bg name-server-modal pb-0 mb-2">
                                            <div class="card-body registrar-card-bg">
                                                <img src="{{asset('assets')}}/images/zdomain/portfolio/slider-popups/epik.png" alt="" class="img-fluid popup-img">
                                                <h5 class="nameserver-number">70</h5>
                                            </div>
                                        </div>
                                        <div class="card registrar-card-bg name-server-modal pb-0 mb-2">
                                            <div class="card-body registrar-card-bg px-0 py-2 height-63">
                                                <p class="myserver-modal-heading">ns1.namebrightdns.com
                                                    ns2.namebrightdns.com</p>
                                            </div>
                                        </div>
                                        <div class="card registrar-card-bg name-server-modal pb-0 mb-2">
                                            <div class="card-body registrar-card-bg">
                                                <img src="{{asset('assets')}}/images/zdomain/portfolio/slider-popups/host-cab.png" alt="" class="img-fluid popup-img">
                                                <h5 class="nameserver-number">70</h5>
                                            </div>
                                        </div>
                                        <div class="card registrar-card-bg name-server-modal pb-0 mb-2">
                                            <div class="card-body registrar-card-bg px-0 py-2 height-63">
                                                <p class="myserver-modal-heading">ns1.namebrightdns.com
                                                    ns2.namebrightdns.com</p>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="item">
                                        <div class="card registrar-card-bg name-server-modal pb-0 mb-2">
                                            <div class="card-body registrar-card-bg">
                                                <img src="{{asset('assets')}}/images/zdomain/portfolio/slider-popups/rebel.png" alt="" class="img-fluid popup-img">
                                                <h5 class="nameserver-number">70</h5>
                                            </div>
                                        </div>
                                        <div class="card registrar-card-bg name-server-modal pb-0 mb-2">
                                            <div class="card-body registrar-card-bg px-0 py-2 height-63">
                                                <p class="myserver-modal-heading">ns1.namebrightdns.com
                                                    ns2.namebrightdns.com</p>
                                            </div>
                                        </div>
                                        <div class="card registrar-card-bg name-server-modal pb-0 mb-2">
                                            <div class="card-body registrar-card-bg">
                                                <img src="{{asset('assets')}}/images/zdomain/portfolio/slider-popups/network-solution.png" alt="" class="img-fluid popup-img">
                                                <h5 class="nameserver-number">70</h5>
                                            </div>
                                        </div>
                                        <div class="card registrar-card-bg name-server-modal pb-0 mb-2">
                                            <div class="card-body registrar-card-bg px-0 py-2 height-63">
                                                <p class="myserver-modal-heading">ns1.namebrightdns.com
                                                    ns2.namebrightdns.com</p>
                                            </div>
                                        </div>
                                        <div class="card registrar-card-bg name-server-modal pb-0 mb-2">
                                            <div class="card-body registrar-card-bg">
                                                <img src="{{asset('assets')}}/images/zdomain/portfolio/slider-popups/gandi.png" alt="" class="img-fluid popup-img">
                                                <h5 class="nameserver-number">70</h5>
                                            </div>
                                        </div>
                                        <div class="card registrar-card-bg name-server-modal pb-0 mb-2">
                                            <div class="card-body registrar-card-bg px-0 py-2 height-63">
                                                <p class="myserver-modal-heading">ns1.namebrightdns.com
                                                    ns2.namebrightdns.com</p>
                                            </div>
                                        </div>

                                    </div>


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

                </div>

            </div>
        </div>
    </div>
{{--    portfolio slider--}}

    {{--    tlds slider--}}
    <div class="modal fade" id="tlds-slider-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content modal-lg">
                <div class="modal-header pb-0">
                    <h4 class="add-modal-title">My TLD's</h4>
                    <a><img src="{{asset('assets')}}/images/zdomain/portfolio/close-modal-btn.png" data-dismiss="modal" aria-label="Close" class="close-icon" ></a>
                </div>
                <div class="modal-body modal-bg pb-5">
                    <div class="container">
                        <div class="row px-5 pt-4 pb-5">
                            <div class="col-md-12 px-5">
                                <form action="">
                                <div class="owl-carousel owl-theme">
                                    <div class="item">
                                        <div class="card registrar-card-bg name-server-modal">
                                            <div class="card-body registrar-card-bg">
                                                <h4 class="domain-text">.com</h4>
                                                <h5 class="tlds-number my-0">70</h5>
                                            </div>
                                        </div>
                                        <div class="card registrar-card-bg name-server-modal">
                                            <div class="card-body registrar-card-bg">
                                                <h4 class="domain-text">.xyz</h4>
                                                <h5 class="tlds-number my-0">1897</h5>
                                            </div>
                                        </div>
                                        <div class="card registrar-card-bg name-server-modal">
                                            <div class="card-body registrar-card-bg">
                                                <h4 class="domain-text">.fun</h4>
                                                <h5 class="tlds-number my-0">10</h5>
                                            </div>
                                        </div>
                                        <div class="card registrar-card-bg name-server-modal">
                                            <div class="card-body registrar-card-bg">
                                                <h4 class="domain-text">.pk</h4>
                                                <h5 class="tlds-number my-0">08</h5>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div class="card registrar-card-bg name-server-modal">
                                            <div class="card-body registrar-card-bg">
                                                <h4 class="domain-text">.net</h4>
                                                <h5 class="tlds-number my-0">14</h5>
                                            </div>
                                        </div>
                                        <div class="card registrar-card-bg name-server-modal">
                                            <div class="card-body registrar-card-bg">
                                                <h4 class="domain-text">.io</h4>
                                                <h5 class="tlds-number my-0">12</h5>
                                            </div>
                                        </div>
                                        <div class="card registrar-card-bg name-server-modal">
                                            <div class="card-body registrar-card-bg">
                                                <h4 class="domain-text">.vc</h4>
                                                <h5 class="tlds-number my-0">22</h5>
                                            </div>
                                        </div>
                                        <div class="card registrar-card-bg name-server-modal">
                                            <div class="card-body registrar-card-bg">
                                                <h4 class="domain-text">.info</h4>
                                                <h5 class="tlds-number my-0">01</h5>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="item">
                                        <div class="card registrar-card-bg name-server-modal">
                                            <div class="card-body registrar-card-bg">
                                                <h4 class="domain-text">.org</h4>
                                                <h5 class="tlds-number my-0">01</h5>
                                            </div>
                                        </div>
                                        <div class="card registrar-card-bg name-server-modal">
                                            <div class="card-body registrar-card-bg">
                                                <h4 class="domain-text">.ca</h4>
                                                <h5 class="tlds-number my-0">11</h5>
                                            </div>
                                        </div>
                                        <div class="card registrar-card-bg name-server-modal">
                                            <div class="card-body registrar-card-bg">
                                                <h4 class="domain-text">.info</h4>
                                                <h5 class="tlds-number my-0">12</h5>
                                            </div>
                                        </div>
                                        <div class="card registrar-card-bg name-server-modal">
                                            <div class="card-body registrar-card-bg">
                                                <h4 class="domain-text">.wiki</h4>
                                                <h5 class="tlds-number my-0">04</h5>
                                            </div>
                                        </div>
                                    </div>

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

                </div>

            </div>
        </div>
    </div>
    {{--    tlds slider--}}


    {{--bulk import modal--}}
    <div class="modal fade" id="bulk-import-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content modal-lg">
                <div class="modal-header pb-0">
                    <h4 class="add-modal-title"><span>
{{--                            <img class="title-icon" src="{{asset('assets')}}/images/zdomain/portfolio/heading-icon.png" alt=""></span>--}}
                            Bulk Import</h4>
                    <a><img src="{{asset('assets')}}/images/zdomain/portfolio/close-modal-btn.png" data-dismiss="modal" aria-label="Close" class="close-icon" ></a>
                </div>

                <div class="modal-body modal-bg pb-5">
                    <div class="container">
                        <div class="row px-5 pt-4">
                            <div class="col-md-12 px-5">
                                <form method="post" action="{{asset('dashboard/upload/domain')}}" enctype="multipart/form-data">
                                    @csrf
                                    <div class="tab-content p-3 text-muted">
                                            <div class="row">
                                                <div class="col-md-12 text-center">
                                                    <h4>Add Domains to your DN Console</h4>
                                                    <p>Add Domains on the left or upload a file on the right</p>
                                                </div>
                                                <div class="col-md-5 mt-4">
                                                    <textarea class="form-control custom-form-control custom" name="domain_name" rows="8"></textarea>
                                                    <p class="domain-bulk-textarea mt-3"><span class="steric">*</span> &nbsp Enter one domain name on each line</p>
                                                </div>
                                                <div class="col-md-2 bulk-or text-center">
                                                <span>
                                                   or

                                                </span>
                                                </div>

                                                <div class="col-md-5 bulk-check mt-4">
                                                    <div class="upload-area">

                                                        <label for="input" id="label" class="">
                                                            <ion-icon name="cloud-upload-outline"></ion-icon>
                                                            <span id="span">Select  <span class="custom-red-txt">.csv </span>file to Upload <span class="uil-top-arrow-to-top upload-icon"></span></span>
                                                            <input id="input" name="file" type="file">
                                                        </label>
                                                    </div>

                                                    <div class="custom-control custom-checkbox mb-3">
                                                        <input type="checkbox" class="custom-control-input" id="customCheck1" checked="">
                                                        <label class="custom-control-label" for="customCheck1">Override existing domains</label>
                                                    </div>
                                                    <p class="domain-bulk-textarea mt-5 pt-3">One domain per row (.xls or .csv file)</p>
                                                    <a href="{{asset('dashboard/domain/file/download')}}" class="btn btn-lg export-domain-downloadbtn"><span class="pt-1">Download a <span class="custom-red-txt"> .csv </span>template</span> <span class=""><img class="download-sign ml-2"  src="{{asset('assets/images')}}/zdomain/portfolio/download-btn.png" alt=""></span></a>
                                                </div>
                                                <div class="col-md-12 mt-3" style="padding-bottom: 84px;">
                                                    <div class="form-group row">
                                                        <label for="example-text-input" class="col-md-3 col-form-label modal-labels"></label>
                                                        <div class="col-md-8 text-right pt-4">
                                                            <button class="btn btn-modal-submit">Upload<span><span class="uil-import upload-icon"></span></span></button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>

    {{--    domains modal--}}
    <div class="modal fade" id="domain-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content modal-lg" id="domain_info">

            </div>
        </div>
    </div>
    <div class="modal fade" id="domain-delete-modal" tabindex="-1" role="dialog" aria-labelledby="update-whois-domain" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body update-whois-domain-body">
                    <div class="form-group">
                        <div class="container">
                            <form action="{{asset('dashboard/delete/domain')}}" method="post">
                                @csrf
                                <div class="row">
                                    <div class="col-md-12">

                                        <span></span><h4 class="text-center update-whois-heading">Delete</h4>
                                        <p class="text-center">Are you sure you want to delete domain</p>
                                        <input type="hidden" name="ddid" id="refresh-id" class="ddid">
                                    </div>
                                </div>
                                <div class="row mt-4">
                                    <div class="col-md-12 text-center">
                                        <button class="btn btn-blue cancel-whois-btn ml-4" data-dismiss="modal" aria-label="Close">Cancel</button>
                                        <button class="btn btn-danger sure-whois-btn" type="submit">Yes,I'm sure</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{--    domains modal--}}
@endsection
@section('script')
<script>


        $('#datatable-portfolio').dataTable({
            language: {
                searchPlaceholder: "Search Domain",
                search: "",
            },
            "bPaginate": true,
            "bLengthChange": true,
            "processing": true,
            "serverSide": true,
            dom: 'Bfrtip',
            pageLength: 10,
            buttons: [
                {
                    extend: 'colvis',
                    text: "Data Columns",
                    columns: ':not(".select-disabled")',
                }
            ],
            "aoColumnDefs": [
                { "bSortable": false, "aTargets": [ 0] },
            ],
            ajax: "{{ url('/dashboard') }}",
            columns: [
                {data: 'checkbox'},
                {data: 'domain'},
                {data: 'monthly_visitor'},
                {data: "inquiries"},
                {data: "bin_price"},
                {data: "minimum_offer"},
                {data: "expire_date"},
                {data: "type"},
                {data: "dns"},
                {data: "registrar"},
                {data: "action"},


            ]

        });
        $('#datatable-portfolio').on( 'page.dt', function () {
            $('#grily').prop("checked", false);
        } );
        $("#grily").click(function (){
            if ($("#grily").is(':checked')){
                $(".checkboxes").each(function (){
                    $(this).prop("checked", true);
                });
            }else{
                $(".checkboxes").each(function (){
                    $(this).prop("checked", false);
                });
            }
        });
        function dataTablePage(page)
        {
            $('.button-page').removeClass('datatable-badge-active');
            $('#'+page+'-pg').addClass('datatable-badge-active');
            $('#datatable-portfolio').DataTable().page.len(page).draw();
        }

        function deleteDomain(id)
        {
            $('.ddid').val(id)
            $("#domain-delete-modal").modal("show");
        }

        function domainInfo(id)
        {

            $.ajax({
                type: 'get',
                url: '{{url('dashboard/get/domain/info')}}',
                data:{
                    id:id,
                    '_token': '{{csrf_token()}}'
                },

                success: function (data) {
                    $('#domain_info').html(data);
                    $("#domain-modal").modal("show");
                }
            });

        }
        function refreshData(id)
        {

            $.ajax({
                type: 'get',
                url: '{{url('dashboard/get/domain/info')}}',
                data:{
                    id:id,
                    'getRefresh' : 'refresh',
                    '_token': '{{csrf_token()}}'
                },

                success: function (data) {
                    $('#domain_info').html(data);
                }
            });

        }
</script>
<script>

    @if(Session::has('message'))
    display_success("{{ Session::get('message')}}")
    @endif
    @if(count($errors->all()))
    @php
        $message = '';
    @endphp
    @foreach ($errors->all() as $error)
    @php
        $message = '<p>'.$message.'</p>'.'<p>'.$error.'</p>'
    @endphp
    @endforeach

    display_error('{!! $message !!}')
    @endif
    @if(Session::has('error'))
    display_error("{{ Session::get('error')}}")
    @endif

    $('.owl-carousel').owlCarousel({
        loop:true,
        margin:10,
        autoplay:true,
        nav:true,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:3
            },
            1000:{
                items:3
            }
        }


    })

</script>
@endsection