<div class="contentmain">

    <div class="container-fluid p-lg-0 p-sm-0 p-md-0">
        <dvr-header></dvr-header>

    </div>


    <div class="wrapper d-flex align-items-stretch">
        <nav id="sidebar" style="background:#f0ebeb;box-shadow:7px 7px 13px #d1cece">
            <div class="custom-menu">

            </div>

            <ul class="list-unstyled components mb-5">
                <li class="active" style="text-align:center">
                    <a routerLink="/home"><span class="fa fa-home "></span>
                        <p style="font-size:15px;margin-bottom: 0px;"> Home</p>
                    </a>
                </li>
                <li style="text-align:center;background: #d9d5d5">
                    <a routerLink="/contactDetails"><span class="fa fa-user "></span>

                        <p style="font-size:15px;margin-bottom: 0px;">Contact</p>
                    </a>
                </li>
                <li style="text-align:center">
                    <a routerLink="/dvrentry"><span class="fa fa-file-text "></span>

                        <p style="font-size:15px;margin-bottom: 0px;"> DVR Entry</p>
                    </a>
                </li>
                <li style="text-align:center" *ngIf="role == 'admin'">
                    <a routerLink="/customer"><span class="fa fa-file-text "></span>
                        <p style="font-size:15px;margin-bottom: 0px;">Customer</p>
                    </a>
                </li>
            </ul>

        </nav>

        <!-- Page Content  -->


        <div id="content">


            <div class="row">
                <div class="col-lg-12 row formheaderrow">
                    <p class="formheader"><i class="fa fa-user" style="padding-right:10px"></i>Create new Contact</p>
                </div>
            </div>
            <div class=" p-4 p-md-5 pt-5">

                <div class="row ">

                    <div class="col-lg-12 row">
                        <div class="col-lg-2 padding0 pt-2">
                            <span style="color:#544f4f;font-size:14px">New Contact for:<span style="color: red;"> *</span></span>
                        </div>
                        <div class="col-lg-3" *ngIf="contnav_flag == true">
                            <div class="input-group">

                                <input type="text" class="form-control" name="email" [(ngModel)]="cont_name"
                                    readonly="">
                            </div>


                        </div>
                        <div class="col-lg-3" *ngIf="contnav_flag ==false">
                            <div class="input-group">
                                <select id="Axis" [(ngModel)]="mySelect" class="form-control"
                                    (ngModelChange)="modo(mySelect)">
                                    <option [ngValue]='0'>All</option>
                                    <option *ngFor="let cust of cust_data" [ngValue]="cust">
                                        {{ cust.customer_name }}
                                    </option>

                                </select>
                            </div>

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




                <div class="col-lg-12 panelcss">

                    <form [formGroup]='contactForm' (ngSubmit)="contactData(contactForm)" novalidate
                        autocomplete="false">
                        <fieldset>
                            <div class="row">
                                <div class="col-lg-6">


                                    <div class="form-group" [ngClass]="displayFieldCss('first_name')">
                                        <input type="text" class="form-control " formControlName='first_name'
                                            name="first_name" id="first_name">
                                        <label for="user" class="animated-label">First Name <span style="color: red;"> *</span></label>
                                        <app-field-error-display [displayError]="isFieldValid('first_name')"
                                            errorMsg="Please enter First Name">
                                        </app-field-error-display>
                                    </div>

                                    <!-- <div *ngIf="checkfirstnm_flag == true">
                                          Please Enter first Name
                                   </div> -->



                                </div>
                                <div class="col-lg-6">

                                    <div class="form-group" [ngClass]="displayFieldCss('last_name')">
                                        <input type="text" class="form-control" formControlName='last_name'
                                            name="last_name" id="last_name">
                                        <label for="Last Name" class="animated-label">Last Name<span style="color: red;"> *</span></label>
                                        <app-field-error-display [displayError]="isFieldValid('last_name')"
                                            errorMsg="Please enter Last Name">
                                        </app-field-error-display>
                                    </div>

                                    <!-- <div *ngIf="checklastnm_flag == true">
                                        Please Enter last Name
                                    </div> -->
                                </div>

                            </div>




                            <div class="row">
                                <div class="col-lg-3">

                                    <div class="form-group" [ngClass]="displayFieldCss('mobile_number')">
                                        <input type="text" maxlength="10" class="form-control "
                                            formControlName='mobile_number' name="mobile_number" id=""
                                            (keypress)="numberOnly($event)">
                                        <label for="Mobile" class="animated-label">Mobile Number<span style="color: red;"> *</span></label>
                                        <app-field-error-display [displayError]="isFieldValid('mobile_number')"
                                            errorMsg="Please enter Mobile number">
                                        </app-field-error-display>
                                    </div>
                                    <!-- <div *ngIf="checkmobilleno_flag == true">
                                        Please Enter Mobile Number 
                                    </div> -->

                                </div>

                                <div class="col-lg-3">

                                    <div class="form-group" [ngClass]="displayFieldCss('mob_no')">
                                        <input type="text" maxlength="10" class="form-control "
                                            formControlName='mob_no' name="mob_no" id=""
                                            (keypress)="numberOnly($event)">
                                        <label for="Mobile" class="animated-label">Alternate Mobile Number</label>
                                     
                                    </div>
                                    <!-- <div *ngIf="checkmobilleno_flag == true">
                                        Please Enter Mobile Number 
                                    </div> -->

                                </div>

                                
                                <div class="col-lg-6">

                                    <div class="form-group">
                                        <input type="text" class="form-control " formControlName='designation'
                                            name="designation">
                                        <label for="Desg." class="animated-label">Designation</label>
                                    </div>









                                </div>
                            </div>


                            <div class="row">
                                <div class="col-lg-6">

                                    <div class="form-group">
                                        <input type="email" class="form-control " formControlName='email_Id'
                                            name="email_Id" pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$">
                                        <label for="Id" class="animated-label">Email ID<span style="color: red;"> *</span></label>
                                    </div>



                                </div>
                                <div class="col-lg-3">

                                    <label class="animated-label">Department<span style="color: red;"> *</span></label>

                                    <!-- <div class="form-group">
                                        <input type="text" class="form-control " formControlName='department'
                                            name="department">
                                        <label for="Dept." class="animated-label">Department</label>
                                    </div> -->
                                    <select id="Axis" class="form-control" formControlName='department'
                                        style="margin-top: 0px;">
                                        <option value="IT">IT</option>
                                        <option value="Procurement">Procurement</option>
                                        <option value="Finance">Finance</option>
                                        <option value="Business">Business</option>
                                    </select>
                                    <app-field-error-display [displayError]="isFieldValid('department')"
                                        errorMsg="Please enter Department">
                                    </app-field-error-display>


                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <input type="text" class="form-control " formControlName='function'
                                            name="function">
                                        <label class="animated-label">Function<span style="color: red;"> *</span></label>
                                    </div>
                                    <app-field-error-display [displayError]="isFieldValid('function')"
                                        errorMsg="Please enter Functional Area">
                                    </app-field-error-display>
                                </div>
                                <hr />

                                <div class="modal" tabindex="-1" role="dialog" [ngStyle]="{'display':displayStyle}">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h4 class="modal-title">{{status_msg}}</h4>

                                            </div>
                                            <div class="modal-body">
                                                <p>{{error_msg}}</p>

                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-danger" (click)="closePopup()">
                                                    Close
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>



                            </div>

                            <br>

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

                                    <div class="col-lg-9 col-md-8">
                                    </div>

                                    <div class="col-lg-2 col-sm-12 col-md-2" style="margin-bottom:6px">



                                        <input class="submitbutton" type="submit" value="Save">
                                    </div>


                                    <div class="col-lg-1 col-sm-12 col-md-2">
                                        <input class="cancelbutton" type="reset" value="reset"
                                            (click)="(contactForm.reset({}))">
                                    </div>


                                </div>

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


                </div>



            </div>



            <div class=" p-4 p-md-5 pt-4" style="padding-top: 20px !important;">
                <div class="col-lg-12 " style="    border: 1px solid #cbcbcb;
                padding: 10px;
                border-radius: 5px;overflow: auto;"  >
                    <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger"
                        class="dataTable row-border hover display" cellspacing="0" width="100%"> 

                        <thead>
                            <tr>
                                <th style="width:15%">Customer Name</th>   
                                <th style="width:15%">First Name</th>
                                <th style="width:15%">Last Name</th>
                                <th style="width:15%">Email ID</th>
                                <th style="width:15%">Mobile Number</th>
                                <th style="width:15%">Alternate Mobile Number</th>
                                <th style="width:15%">Designation</th>
                                <th style="width:15%">Department</th>
                                <th style="width:15%">Function</th>
                                <th style="width: 15%;">Incomplte Entry</th>



                            </tr>
                        </thead>

                        <tbody>
                            <tr *ngFor="let current of contactList; let i = index">
                                <td>{{current.customer_name }}</td>
                                <td><a routerLink="/dvrentry"
                                        (click)="getContactName(current.first_name,current.last_name)">{{current.first_name
                                        }}</a></td>
                                <td>{{current.last_name }}</td>
                                <td>{{current.email_id }}</td>
                                <td>{{current.mobile_number }}</td>
                                <td>{{current.mob_no }}</td>
                                <td>{{current.designation }}</td>
                                <td>{{current.department }}</td>
                                <td>{{current.function_area }}</td>
                                <td>{{current.stage_id == 2 ? 'Yes' : 'No'}}</td>

                            </tr>
                        </tbody>
                    </table>

                  

                </div>
            </div>

        </div>
    </div>



    

    <div class="row footer">
        <p>Copyright © MindCraft Software Pvt. Ltd.</p>
    </div>

</div>