<admin-page-header [title]="'Chat Flow'"></admin-page-header>
<div class="row mb-2">
    <div class="col-xl-12">
        <a class="btn btn-primary float-end" routerLink="/admin/live-chat/chart-flow/null"><i
                class="fe fe-plus me-1"></i>{{'Create from scratch' | translate}}</a>
    </div>
</div>
<div class="row chatresponses mt-sm-0 mt-4">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-header border-0">
                <h4 class="mb-4 card-title">{{'Saved chats Flow' | translate}}</h4>
            </div>
            <div class="card-body">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th scope="col">{{'Name' | translate}}</th>
                            <th scope="col">{{'Active' | translate}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (data?.flow){
                        <tr>
                            @if (data?.flow?.responseName){
                            <td scope="row"><b>{{ data?.flow?.responseName }} {{ data?.flow?.timeBasedCreateAt |date :
                                    data?.setting?.original?.date_format : timezone }}</b></td>
                            }@else{
                            <td scope="row"><b>Responses {{ data?.flow?.timeBasedCreateAt |date :
                                    data?.setting?.original?.date_format : timezone }}</b></td>
                            }
                            <td class="d-flex align-items-center border-0">
                                <div>
                                    <label class="custom-switch">
                                        <input type="checkbox" name="custom-switch-checkbox1"
                                            chatFlowId="data?.flow?.id" (click)="activeSave(data?.flow?.id, false)"
                                            [checked]="data?.flow?.active == '1' ? 'true' : 'false'"
                                            class="custom-switch-input activeCheckBtn">
                                        <span class="custom-switch-indicator"></span>
                                    </label>
                                </div>
                                <div>
                                    <div class=" ms-3 d-flex">
                                        <a class="btn btn-icon me-1"
                                            [routerLink]="'/admin/live-chat/chart-flow/'+data?.flow?.id" placement="top" ngbTooltip="Edit"><i
                                                class="fe fe-edit text-muted"></i></a>
                                        <a class="btn btn-icon flowDeleteBtn" flow-Id="data?.flow?.id"
                                            (click)="deleteFlow(data?.flow?.id)"
                                            data-bs-placement="top" ngbTooltip="Remove"><i
                                                class="fe fe-trash-2 text-muted"></i> </a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        @if (data?.flow?.active_draft){
                        <tr>
                            @if (data?.flow?.responseName){
                            <td scope="row">
                                <p>{{ data?.flow?.responseName }} {{'Draft' | translate}} {{
                                    data?.flow?.timeBasedUpdatedAt | date : data?.setting?.original?.date_format :
                                    timezone }}</p>
                            </td>
                            }@else{
                            <td scope="row">
                                <p>Active Chat Draft {{ data?.flow?.timeBasedUpdatedAt | date :
                                    data?.setting?.original?.date_format : timezone }}</p>
                            </td>
                            }
                            <td>
                                <div class="ms-3 d-flex">
                                    <a class="btn btn-icon draftDeleteBtn" flow-Id="data?.flow?.id"
                                        (click)="deleteFlow(data?.flow?.id, '?active-draft-delete=true')"
                                        placement="top" ngbTooltip="Remove"><i
                                            class="fe fe-trash-2 text-muted"></i> </a>
                                </div>
                            </td>
                        </tr>
                        }
                        }

                        @if (!data?.flow){
                        <tr>
                            <td colspan="2" class="text-center">
                                {{'You currently don\'t have any saved chats Flow.' | translate}}
                            </td>
                        </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card">
            <div class="card-header border-0">
                <h4 class="card-title mb-4">{{'Draft chats Flow' | translate}}</h4>
            </div>
            <div class="card-body">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th scope="col">{{'Name' | translate}}</th>
                            <th scope="col">{{'Active' | translate}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- @php
                        $emptyConversation = true;
                    @endphp -->
                        @for(Draftflow of data?.allDraftflow; track Draftflow){
                        <tr>
                            @if (Draftflow?.responseName){
                            <td scope="row">{{ Draftflow?.responseName }} {{ Draftflow?.timeBasedUpdatedAt |date :
                                data?.setting?.original?.date_format : timezone }}</td>
                            }@else{
                            <td scope="row">{{'Draft Responses' | translate}} {{ Draftflow?.timeBasedUpdatedAt |date :
                                data?.setting?.original?.date_format : timezone }}</td>
                            }
                            <td class="d-flex align-items-center border-0">
                                <div>
                                    <label class="custom-switch">
                                        <input type="checkbox" name="custom-switch-checkbox1"
                                            (click)="activeSave(Draftflow?.id, true)" chatFlowId="Draftflow?.id"
                                            class="custom-switch-input activeCheckBtn">
                                        <span class="custom-switch-indicator"></span>
                                    </label>
                                </div>
                                <div>
                                    <div class=" ms-3 d-flex">
                                        <a class="btn btn-icon me-1"
                                            [routerLink]="'/admin/live-chat/chart-flow/'+Draftflow?.id" placement="top" ngbTooltip="Edit"><i
                                                class="fe fe-edit text-muted"></i></a>
                                        <a class="btn btn-icon flowDeleteBtn" 
                                            flow-Id="Draftflow?.id" placement="top"
                                            (click)="deleteFlow(Draftflow?.id)" ngbTooltip="Remove"><i
                                                class="fe fe-trash-2 text-muted"></i> </a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        }

                        @if(data?.emptyConversation){
                        <tr>
                            <td colspan="2" class="text-center">
                                {{'You currently don\'t have any saved draft chats Flow.' | translate}}
                            </td>
                        </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>