@extends('layouts.app')
<!-- BEGIN CONTENT -->
@section('content')
    <div class="page-content-wrapper">
        <!-- BEGIN CONTENT BODY -->
        <div class="top_bar page-content">
            <div class="top_status_bar">
                <div id="top_progress_bar" class="progress_bar">
                </div>
            </div>
            <div class="breadcrumbs">
                <ul>
                    <li><a  href="{{ route('admin.dashboard') }}">Home</a></li>
                    <li><a href="#">Customers</a></li>
                </ul>
                <button class="btn btn-large pull-right help theme_btn help_btn">?</button>
            </div>
        </div>
        <div class="page-content">
            <div class="portlet">
                <!-- BEGIN PAGE HEADER-->
                <div class="portlet-title page_heading">
                    <div class="row">
                        <div class="col-md-9">
                            <div class="caption">
                                <h2 style="font-weight: 600; margin-top: 0;"> Customer List</h2>
                                <span class="subtitle"> All existing customers including qualified and converted
                                leads in SalesSoft.</span>
                            </div>
                        </div>
                        @php
                            $get_permission = permission('customer','full-permission');
                        @endphp
                        <div class="col-md-3 text-right">
                            @if($get_permission)
                            <button type="button" class="btn theme_btn_round add_new_customer">Add New</button>
                            @endif
                        </div>
                    </div>
                </div>
                <!-- BEGIN PAGE BAR -->
                <div class="row">
                    <div class="col-md-12">
                        <!--THIS IS CONTENT DIV START-->
                        <div class="portlet-body flip-scroll">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="table-container">
                                        <table class="table table-striped table-bordered table-hover datatables_simple customer_table">
                                            <thead class="flip-content thead">
                                            <tr>
                                                <th></th>
                                                <th>Customer Name</th>
                                                <th>Business Name</th>
                                                <!--<th>Customer TRN</th>-->
                                                <th>Email</th>
                                                <th>Phone</th>
                                                <th style="position: relative; width: 25px;">
                                                    <img class="dots_menu_grey" style="width: inherit"
                                                         src="{{asset('assets/global/img/dots_menu_grey.png')}}"></th>
                                                {{--  <th>City</th>  --}}
                                            </tr>
                                            </thead>

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

                        <!--THIS IS CONTENT DIV END-->
                    </div>
                </div>
            </div>
        </div>
    </div>
{{--    {{route('admin.supplier.image.store.session')}}--}}
    <div class="modal fade bs-modal right modal-fullscreen" id="new_customer_model" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    </div>
    <div class="modal fade bs-modal right modal-fullscreen" id="customer_model_update" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    </div>
    <div class="modal fade uplaod_wrap" id="modal_image_uplaod">
        <div class="modal-dialog modal-content uplodImg" style="width: 390px;">
            <form id="upload_pr_pc" class="modal-content" action="{{route('admin.customers.image.store.session') }}
                " enctype="multipart/form-data" method="POST">
                <input type="hidden" name="_token" value="">            <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">Upload Photo</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12 text-center">
                            <div id="upload-demo" style="width: 360px; position: relative;">
                                <button style="font-size:24px; position: absolute; top: 30px; right: 30px; z-index: 9999;" id="upload1"><i class="fa fa-upload"></i></button>
                            </div>
                            <input type="file" id="upload" value="" name="image" style="display: none;">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left"  data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success upload-customer-image">Upload Image</button>
                </div>
            </form>
        </div>
    </div>

<!-- //SWEET_ALERT START// -->
<div id="sweetalert_wrap" class="sweet_alert_wrap">
    <!-- Sweet alert -->
    <div class="sweet-alert showSweetAlert" data-custom-class="" data-has-cancel-button="true" data-has-confirm-button="true" data-allow-outside-click="false" data-has-done-function="true" data-animation="pop" data-timer="null" >
        <div class="sa-icon sa-warning pulseWarning" style="display: block;">
            <span class="sa-body pulseWarningIns"></span>
            <span class="sa-dot pulseWarningIns"></span>
        </div>
       <h2>Do you want to delete?</h2>
        <div class="sa-button-container">
            <button class="cancel" tabindex="2">Cancel</button>
            <div class="sa-confirm-button-container">
                <button class="confirm" tabindex="1">Confirm</button>
            </div>
        </div>
    </div>
</div>
<!-- //SWEET_ALERT END// -->

@endsection
@section('admin_css')
    <link href="{{asset('assets/global/plugins/select2/css/select2.min.css')}}" rel="stylesheet" type="text/css" />
    <link href="{{asset('assets/global/plugins/select2/css/select2-bootstrap.min.css')}}" rel="stylesheet"
          type="text/css" />
    <link href="{{asset('assets/global/plugins/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('css/custom.css') }}" rel="stylesheet" type="text/css"/>
    <link href="{{asset('css/croppie.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{asset('css/sweetalert.css')}}" rel="stylesheet" type="text/css"/>

    <style>
        .table-container {
            padding: 50px 0 0;
        }
        span.select2-selection__clear{
        display: none;
     }
     
.display_pic:hover .overlay-img {
    display: block;
}

.display_pic .overlay-img {
    position: absolute;
    background: #eee;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    opacity: 0.7;
    text-align: center;
    padding: 58px 0;
    display: none;
}

.display_pic .overlay-img {
    color: #999;
    font-size: 30px;
}
.modal .right_side_task {
    border-left: 2px solid #f1f1f1 !important;
}

.select2-container--bootstrap .select2-selection--single .select2-selection__arrow b {
    left: 18px;
    border-color: black transparent transparent transparent !important;
}

.select2-container--bootstrap .select2-selection--single .select2-selection__arrow {
    padding: 0 16px;
    border: 1px solid #c6c8cc;
    right: 0;
    border-radius: 0 4px 4px 0;
    background: #ececec;
}

.select2-container--bootstrap.select2-container--open .select2-selection__arrow b {
    border-color: transparent transparent black !important;
}
    </style>
@stop
@section('admin_js')
    <script src="{{asset('assets/global/plugins/select2/js/select2.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('assets/global/plugins/datatables/datatables.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js')}}"></script>
    <script src="{{asset('js/general.js')}}"></script>
    <script src="{{asset('js/croppie.js')}}"></script>
    @include('admin.js.customer')
   
@stop