<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;">
                    <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; background: #d9d5d5" *ngIf="role == 'admin'">
                    <a routerLink="/customer"><span class="fa fa-building"></span>
                        <p style="font-size:15px;margin-bottom: 0px;">Customer</p>
                    </a>
                </li>
            </ul>

        </nav>



        <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 Customer</p>
                </div>
            </div>
            <div class=" p-4 p-md-5 pt-5">

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

                    <form [formGroup]='customerForm' (ngSubmit)="customerData(customerForm)" novalidate
                        autocomplete="false" style="margin-top: 20px;">
                        <fieldset>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group" [ngClass]="displayFieldCss('customer_name')">
                                        <input type="text" class="form-control " formControlName='customer_name'
                                            name="customer_name" id="customer_name" style="margin-top:0px">
                                        <label for="user" class="animated-label">Customer Name</label>
                                        <app-field-error-display [displayError]="isFieldValid('customer_name')"
                                            errorMsg="Please enter Customer Name">
                                        </app-field-error-display>
                                    </div>

                                </div>

                                 <div class="col-lg-6">
                                    <div class="form-group" [ngClass]="displayFieldCss('status')">
                                        <!-- <input type="text" class="form-control " formControlName='status'
                                            name="status" id="status" style="margin-top:0px"> -->
                                        <select class="form-control" formControlName='status' style="margin-top: 0px;">
                                            <option>Active</option>
                                            <option>Inactive</option>
                                            <option>Ongoing</option>
                                        </select>
                                            
                                        <label for="user" class="animated-label">Status</label>
                                        <app-field-error-display [displayError]="isFieldValid('status')"
                                            errorMsg="Please enter Customer Status">
                                        </app-field-error-display>
                                    </div>

                                </div>

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

                                    <div class="form-group" [ngClass]="displayFieldCss('sales_person')">
                                        <select id="Axis" class="form-control" formControlName='sales_person'
                                            style="margin-top: 0px;">

                                            <option *ngFor="let item of datalist?.[0]"
                                                [ngValue]="item.first_name+ ' '+item.last_name">
                                                {{item.first_name}} {{item.last_name}}

                                            </option>
                                        </select>
                                        <label for="Last Name" class="animated-label">Sales Person Name</label>
                                        <app-field-error-display [displayError]="isFieldValid('sales_person')"
                                            errorMsg="Please enter Sales Person Name">
                                        </app-field-error-display>
                                    </div>

                                    
                                </div>

                            </div>



                            <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>
                        

                            <br>

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

                                                
                                                <div class="col-lg-1 col-sm-12 col-md-2" *ngIf="isEditMode" style="margin-bottom:6px;">
                                                    <!-- EDIT / UPDATE BUTTON -->
                                                    <button class="submitbutton" 
                                                            type="button" 
                                                            (click)="onEditButtonClick()" 
                                                            [style.background-color]="isEditMode ? '#f9b523' : 'grey'">
                                                        {{ isEditMode ? 'Add' : 'Add' }}
                                                    </button>
                                                </div>
 
                                    <div class="col-lg-1 col-sm-12 col-md-2" *ngIf="!isEditMode" style="margin-bottom:6px">

                                        <!-- <input class="submitbutton" type="submit" value="Save New Customer"
                                        [style.background-color]="!isEditMode ? '#f9b523' : 'grey'" > -->
                                        <button class="submitbutton" 
                                                            type="button" 
                                                            (click)="customerData(customerForm)" 
                                                            [style.background-color]="!isEditMode ? '#f9b523' : 'grey'">
                                                        {{ isEditMode ? 'Add' : 'Add' }}
                                                    </button>
                                    </div>


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

                                    <div class="col-lg-3 offset-lg-5 col-sm-12 col-md-2" style="margin-bottom:6px; text-align:right;">

                                                    <button class="submitbutton" 
                                                            type="button" 
                                                            (click)="onAddButtonClick()" 
                                                            [style.background-color]="isAddMode ? '#f9b523' : 'grey'">
                                                        {{ isAddMode ? 'New Mapping' : 'New Mapping' }}
                                                    </button>
                                                        <!-- Fixed message below -->
                                                    <div style="font-size:13px; margin-top:4px; color:#6c757d;">
                                                        Map existing customer to another user.
                                                    </div>
                                                </div>

                                </div>

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


                </div>



            </div>

            <!-- ADD SLIDE PANEL -->
<div class="add-panel" [class.open]="showAddBox">
    <div class="add-panel-header">
        <h5>Add Customer to User Mapping</h5>
        <button class="close-btn" (click)="closeAddPanel()">×</button>
    </div>

    <div class="add-panel-body">

        <div class="form-group">
            <label>Customers</label>
            <select class="form-control" #customerSelect>
                <option value="">Select Customer</option>
                <option *ngFor="let cust of cust_data"
                        [value]="cust.customer_id">
                    {{ cust.customer_name }}
                </option>
            </select>
        </div>

        <div class="form-group">
            <label>Users</label>
            <select class="form-control" #userSelect>
                <option value="">Select User</option>
                <option *ngFor="let item of datalist?.[0]"
                        [value]="item.user_id">
                    {{ item.first_name }} {{ item.last_name }}
                </option>
            </select>
        </div>

        <button class="submitbutton"
                (click)="addTask(customerSelect.value, userSelect.value)">
            Submit
        </button>

    </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 class="no-export" style="width:15%">Actions</th>
                                <!-- <th style="width:15%">Sr. No.</th> -->
                                <th style="width:15%">Customer Name</th>
                                <th style="width:15%">Customer Status</th>
                                <th style="width:15%;">Sales Person Name</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr *ngFor="let current of cust_data; let i = index">

                                <td class="no-export">
                                    <table>
                                        <tr>
                                            <!-- <td> -->
                                                <button class="btn btn-primary btn-sm" (click)="editCustomer(current)">
                                                    <i class="fa fa-edit"></i>
                                                </button>
                                            <!-- </td>
                                            <td>
                                                <button class="btn btn-danger btn-sm" style="margin-left: 5px;" 
                                                    (click)="deleteCustomer(current)" disabled>
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </td> -->
                                        </tr>
                                    </table>
                                </td>
                                <!-- <td>{{i+1 }}</td> -->
                                <td>{{current.customer_name }}</td>
                                <td>{{current.customer_status}}</td>
                                <td>{{current.first_name}} {{current.last_name}}</td>
                            </tr>
                        </tbody>
                    </table>
                   

                </div>
            </div>

        </div>
    </div>

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

</div>