<admin-page-header [title]="'Custom Invoice Create'"></admin-page-header>

<div class="row justify-content-center">
    <div class="col-xl-12">
        <!-- <form > -->
        <form #createInvoiceData="ngForm" id="createInvoiceForm"
            (ngSubmit)="createInvoice(createInvoiceData, 'addprojects')">
            <input type="hidden" name="totalFinalPrice" id="totalFinalPrice" />
            <div class="card custom-card">

                <div class="card-header border-0 d-md-flex d-block">
                    <div class="card-title fs-24">{{'Create Invoice' | translate}}</div>
                    <div class="form-group  ms-auto">
                        <div
                            class="file-upload-box border rounded d-flex align-items-center justify-content-center mt-sm-0 mt-2">
                            <input type="file" name="invoiceLogo" id="invoiceLogo" (change)="invoiceLogoFn($event)"
                                accept="image/png, image/jpeg, image/jpg" class="file-input"
                                style='position: absolute; width: 100%; height: 100%; opacity: 0; cursor: pointer' />

                            <div class="image-preview position-relative text-center">
                                <img id="logoPreview" src="" alt="Preview" class="img-fluid d-none"
                                    style='maxWidth: 10rem; height: auto; objectFit: contain' />

                                <button id="deleteImage" type="button" (click)="resetImage()"
                                    class="btn btn-sm btn-danger position-absolute d-none"
                                    style='top: 8px; right: 9px; zIndex: 10'>&times;</button>
                            </div>

                            <div id="uploadPlaceholder" class="text-center p-3">
                                <i class="ri-upload-cloud-2-line"></i>
                                <p class="text-muted m-0">{{'Add Company Logo' | translate}}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body pt-0">
                    <div class="p-5 border rounded">
                        <div class="row">
                            <div class="col-lg-6 border-end pe-5">
                                <h5 class="mb-3 fw-bold">{{'Billing From' | translate }}</h5>
                                <div class="row">
                                    <div class="form-group col-6 errorSection">
                                        <label class="form-label">{{'Name' | translate}} <span
                                                class="text-danger">*</span></label>
                                        <input name="companyName" type="text" class="form-control required"
                                            [ngModel]="setting?.companyName" #companyName="ngModel"
                                            placeholder="Enter Company Name" />
                                        @if ((companyName.invalid && companyName.touched) ||
                                        companyName.dirty) {
                                        <div>
                                            @if (companyName.errors?.['required']) {
                                            <small class="text-danger">{{'company Name is required' |
                                                translate}}</small>
                                            }
                                        </div>
                                        }
                                    </div>

                                    <div class="form-group col-6">
                                        <label class="form-label">{{'Street Address' | translate}}</label>
                                        <input name="addressLine1" type="text" class="form-control"
                                            placeholder="Street Address" [ngModel]="setting?.addressLine1" />
                                    </div>

                                    <div class="form-group col-6">
                                        <label class="form-label">{{'Address Line 2' | translate }}</label>
                                        <input name="addressLine2" type="text" class="form-control"
                                            placeholder="Address Line 2" [ngModel]="setting?.addressLine2" />
                                    </div>

                                    <div class="form-group col-6">
                                        <label class="form-label">{{'City' | translate }}</label>
                                        <input name="cityName" type="text" class="form-control"
                                            placeholder="Enter City Name" [ngModel]="setting?.cityName" />
                                    </div>

                                    <div class="form-group col-6">
                                        <label class="form-label">{{'State' | translate }}</label>
                                        <input name="stateName" type="text" class="form-control"
                                            placeholder="Enter State Name" [ngModel]="setting?.stateName" />
                                    </div>

                                    <div class="form-group col-6">
                                        <label class="form-label">{{'Zip/Postal Code' | translate }}</label>
                                        <input name="zipPostalCode" type="text" class="form-control"
                                            placeholder="Enter Zip/Postal Code" [ngModel]="setting?.zipPostalCode" />
                                    </div>

                                    <div class="form-group col-6">
                                        <label class="form-label">{{'Country' | translate }}</label>
                                        <input name="countryName" type="text" class="form-control"
                                            placeholder="Enter Country Name" [ngModel]="setting?.countryName" />
                                    </div>


                                    <div class="form-group col-6">
                                        <label class="form-label">{{'Tax Name' | translate }}</label>
                                        <input name="taxName" type="text" class="form-control"
                                            placeholder="Enter GST / VAT" [ngModel]="setting?.taxName" />
                                    </div>

                                    <div class="form-group col-6">
                                        <label class="form-label">{{'Tax ID' | translate }}</label>
                                        <input name="taxId" type="text" class="form-control" placeholder="Enter Tax ID"
                                            [ngModel]="setting?.taxId" />
                                    </div>

                                </div>
                            </div>

                            <div class="col-lg-6 ps-5">
                                <h5>{{'Biling To' | translate}}</h5>

                                <div class="row">
                                    <div class="form-group col-6 errorSection">
                                        <label class="form-label ">{{'Select User' | translate}} <span
                                                class="text-danger">*</span></label>
                                        <ng-select class="form-control" [items]="customers" #select
                                            [placeholder]="'Select User' | translate" [virtualScroll]="true"
                                            bindLabel="username" [multiple]="false" [searchable]="true"
                                            [loading]="!customers" dropdownPosition="auto" bindValue="id" required
                                            #users="ngModel" [clearable]="false"
                                            (change)="updateUser($event)" name="customer" ngModel>
                                            <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                                                <div><span>{{item?.username}}</span></div>
                                            </ng-template>
                                        </ng-select>
                                        @if ((users.invalid && users.touched) || users.dirty) {
                                            <div>
                                              @if (users.errors?.['required']) {
                                                <small class="text-danger">{{'User is required' | translate}}</small>
                                              }
                                            </div>
                                          }
                                    </div>

                                    <div class="form-group col-6 errorSection tickets" style="display: none"
                                        #ticketSection>

                                        <label class="form-label">{{'Select Ticket' | translate}}</label>
                                        <ng-select class="form-control" [items]="ticketData" required
                                            [placeholder]="'Select Ticket' | translate" [virtualScroll]="true"
                                            bindLabel="ticket_id" [multiple]="false" [searchable]="true"
                                            [clearable]="false" [loading]="!ticketData" dropdownPosition="auto"
                                            bindValue="id" name="ticket" ngModel>
                                            <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                                                <div><span>{{item?.ticket_id}}</span></div>
                                            </ng-template>
                                        </ng-select>
                                    </div>

                                    <div class=" form-group col-6">
                                        <label htmlFor="status" class="form-label customer-field">{{'Status'|translate}}
                                            <span class="text-danger">*</span></label>
                                        <ng-select class="form-control" [items]="statusOptions" #select
                                            #status$="ngModel" [clearable]="false"
                                            [placeholder]="'Select Status' | translate" [virtualScroll]="true"
                                            (change)="updateStatus($event)" bindLabel="name" [multiple]="false"
                                            [searchable]="true" [loading]="!statusOptions" dropdownPosition="auto"
                                            bindValue="value" name="status" ngModel>
                                            <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                                                <div><span>{{item?.name}}</span></div>
                                            </ng-template>
                                        </ng-select>
                                        @if ((status$.invalid && status$.touched) || status$.dirty) {
                                            <div>
                                              @if (status$.errors?.['required']) {
                                                <small class="text-danger">{{'Status is required' | translate}}</small>
                                              }
                                            </div>
                                          }
                                    </div>

                                    <div class=" form-group col-6 datediv" style="display: none" #datediv>
                                        <label htmlFor="invoice-date-issued" class="form-label">{{'Paid Date' |
                                            translate}}</label>
                                        <input class="form-control notifydate  flatpickr-input" name="paidDate"
                                            id="paidDate" type="text" [maxDate]="today" mwlFlatpickr placeholder="Choose date" ngModel />
                                    </div>

                                    <div class="form-group col-6">
                                        <label class="form-label">{{'Email' | translate }}</label>
                                        <input name="clemail" type="text" class="form-control customer-field"
                                            [ngModel]="clemail" placeholder="Enter Client email" />
                                    </div>

                                    <div class="form-group col-6">
                                        <label class="form-label">{{'Mobile' | translate }}</label>
                                        <input name="clmobile" type="text" class="form-control customer-field"
                                            [ngModel]="clmobile" placeholder="Enter Client Mobile No." />
                                    </div>

                                    <div class="form-group col-6">
                                        <label class="form-label">{{'GST / VAT' | translate }}</label>
                                        <input name="cltaxName" type="text" class="form-control customer-field"
                                            [ngModel]="cltaxName" placeholder="Enter client GST / VAT" />
                                    </div>

                                    <div class="form-group col-6">
                                        <label class="form-label">{{'Tax ID' | translate }}</label>
                                        <input name="cltaxId" type="text" class="form-control customer-field"
                                            [ngModel]="cltaxId" placeholder="Enter client Tax ID" />
                                    </div>

                                    <div class="form-group col-6">
                                        <label class="form-label">{{'Company Name' |translate }}</label>
                                        <input name="clcompanyName" type="text" class="form-control customer-field"
                                            [ngModel]="clcompanyName" placeholder="Enter Client Company Name" />
                                    </div>

                                    <div class="form-group col-6">
                                        <label class="form-label">{{'Address' |translate }}</label>
                                        <input name="claddress" type="text" class="form-control customer-field"
                                            [ngModel]="claddress" placeholder="Enter Client address" />
                                    </div>


                                    <div class="form-group col-6">
                                        <label class="form-label">{{'Country' |translate }}</label>
                                        <input name="clcountry" type="text" class="form-control customer-field"
                                            [ngModel]="clcountry" placeholder="Enter Client country" />
                                    </div>

                                </div>

                            </div>
                        </div>

                        <div class="row gy-3">
                            <div class="col-xl-12">
                                <div class="table-responsive">

                                    <table class="table  nowrap text-nowrap border mt-3">
                                        <thead class="bg-primary-transparent">
                                            <tr>
                                                <th scope="col" class="w-25 text-dark">{{'Title'| translate}} <span
                                                        class="text-danger">*</span></th>
                                                <th scope="col" class="w-10 text-dark">{{'Price' | translate}} <span
                                                        class="text-danger">*</span></th>
                                                <th scope="col" class="w-10 text-dark">{{'Quantity' | translate}}
                                                    <span class="text-danger">*</span>
                                                </th>
                                                <th scope="col" class="w-10 text-dark">{{'Amount' | translate}}
                                                    <span class="text-danger"></span>
                                                </th>
                                                <th scope="col" class="w-10 text-dark">{{'Action' | translate}}</th>
                                            </tr>
                                        </thead>
                                        <tbody class=" invoice-body">
                                            <tr class="invoice-list">
                                                <td class="errorSection">
                                                    <input type="text" ngModel name="title" class="form-control required"
                                                        placeholder="Enter Product Name" />

                                                </td>
                                                <td class="errorSection">
                                                    <div class="input-group price-input-group">
                                                        <div class="input-group-text text-muted">
                                                            {{symbol}}</div>
                                                        <input type="number" #price="ngModel"
                                                            class="form-control price-input required w-20" min="1"
                                                            ngModel name="price" id="updateyo" defaultValue="" required
                                                            (input)="handlePriceQuantityChange($event, 'price')" />
                                                            @if ((price.invalid && price.touched) || price.dirty) {
                                                                <div>
                                                                  @if (price.errors?.['required']) {
                                                                    <small class="text-danger">{{'Price is required' | translate}}</small>
                                                                  }
                                                                </div>
                                                              }
                                                    </div>
                                                </td>
                                                <td class="errorSection">
                                                    <div class="input-group">
                                                        <input type="number" #quantity="ngModel"
                                                            class="form-control quantity-input required w-20" ngModel
                                                            min="1" name="quantity" id="quantity" defaultValue="1"
                                                            required
                                                            (input)="handlePriceQuantityChange($event, 'quantity')" />
                                                            @if ((quantity.invalid && quantity.touched) || quantity.dirty) {
                                                                <div>
                                                                  @if (quantity.errors?.['required']) {
                                                                    <small class="text-danger">{{'Quantity is required' | translate}}</small>
                                                                  }
                                                                </div>
                                                              }
                                                    </div>

                                                </td>
                                                <td class="errorSection">
                                                    <div class="input-group price-input-group">
                                                        <div class="input-group-text text-muted">
                                                            {{symbol}}</div>
                                                        <input type="number" required #amount="ngModel"
                                                            class="form-control amount-input required w-20" ngModel
                                                            name="amount" id="amount" readOnly />
                                                            @if ((amount.invalid && amount.touched) || amount.dirty) {
                                                                <div>
                                                                  @if (amount.errors?.['required']) {
                                                                    <small class="text-danger">{{'Amount is required' | translate}}</small>
                                                                  }
                                                                </div>
                                                              }
                                                    </div>
                                                </td>
                                                <td>
                                                    <button type="button" (click)="addRow()"
                                                        class="btn btn-icon btn-outline-primary invoice-add-item"><i
                                                            class="ri ri-add-line"></i></button>
                                                </td>
                                            </tr>
                                            @for (row of rows; track $index) {
                                            <tr>
                                                <td>
                                                    <input type="text" [(ngModel)]="row.title" name="title{{row.id}}"
                                                        class="form-control" placeholder="Enter Product Name"
                                                        required />
                                                </td>
                                                <td>
                                                    <div class="input-group price-input-group">
                                                        <div class="input-group-text text-muted">{{ symbol }}</div>
                                                        <input type="number" [(ngModel)]="row.price"
                                                            name="price{{row.id}}" id="updateyo{{row.id}}"
                                                            class="form-control price-input w-20" min="1" required
                                                            (input)="handlePriceQuantityChange($event, 'price', row.id)" />
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="input-group">
                                                        <input type="number" [(ngModel)]="row.quantity"
                                                            name="quantity{{row.id}}" id="quantity{{row.id}}"
                                                            class="form-control quantity-input w-20" min="1" required
                                                            (input)="handlePriceQuantityChange($event, 'quantity', row.id)" />
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="input-group price-input-group">
                                                        <div class="input-group-text text-muted">{{ symbol }}</div>
                                                        <input type="number" [(ngModel)]="row.amount"
                                                            name="amount{{row.id}}" id="amount{{row.id}}"
                                                            class="form-control amount-input w-20" readonly />
                                                    </div>
                                                </td>
                                                <td>
                                                    <button type="button"
                                                        class="btn btn-icon btn-outline-danger invoice-btn remove-row"
                                                        (click)="removeRow(row.id)">
                                                        <i class="ri-delete-bin-5-line"></i> {{"Remove" | translate}}
                                                    </button>
                                                </td>
                                            </tr>
                                            }
                                            <tr>
                                                <td>
                                                    <label class="form-label">{{'Notes' | translate}}</label>
                                                    <textarea name="invoicenote" class="form-control customer-field"
                                                        ngModel placeholder="Enter Client address"></textarea>
                                                </td>
                                                <td></td>
                                                <td></td>
                                                <td>

                                                    <input id="tax" type="text" class="form-control text-end "
                                                        [value]="'Tax:' | translate" readOnly />
                                                </td>
                                                <td>
                                                    <div class="input-group price-input-group">
                                                        <label></label>
                                                        <input name="taxPercent" id="taxPercent" type="number"
                                                            class="form-control text-start" ngModel
                                                            (input)="handleTaxPercentChange($event)"
                                                            [defaultValue]="setting?.taxPercent" />
                                                        <span class="input-group-text">%</span>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    <label class="form-label">{{'Terms & Conditions' |
                                                        translate}}</label>
                                                    <textarea name="invoicetc" class="form-control customer-field"
                                                        ngModel placeholder="Enter Client country"></textarea>
                                                </td>

                                                <td></td>
                                                <td></td>
                                                <td>
                                                    <input id="tax" type="text" class="form-control text-end "
                                                        [value]="'Sub Total:' | translate" readOnly />
                                                </td>
                                                <td>
                                                    <div class="input-group price-input-group">
                                                        <span class="input-group-text text-muted">{{symbol}}</span>
                                                        <input name="subtotal" id="subtotal" type="text" readOnly
                                                            class="form-control text-start" value={{subtotal}} />
                                                    </div>
                                                </td>

                                            </tr>

                                            <tr class="bg-primary-transparent">
                                                <td> </td>
                                                <td> </td>
                                                <td> </td>

                                                <td class="text-end text-dark fs-16 fw-semibold">{{'Total Amount:' |
                                                    translate}}</td>
                                                <td class="text-start text-dark fs-16 ps-4 fw-semibold" id="finalPrice">
                                                    {{finalPrice}}
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>



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

                </div>
                <div class="card-footer text-end">
                    <button class="btn btn-danger d-inline-flex me-1">{{'Cancel' | translate}}</button>
                    <button type="submit" id="formSubmitBtn" class="btn btn-primary d-inline-flex">{{'Create Invoice' |
                        translate}}
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>