<back-btn></back-btn>

<div class="page-header">
     <h1 class="text-center">{{ 'personal_information'|translate|uppercase }}</h1>
</div>

<h2 class="text-center mb-3">{{ user.surname }} {{ user.name }}</h2>

<form [formGroup]="profileForm" (ngSubmit)="formSubmit()" class="row g-4 m-3">
    <div class="col-md-6">
        <label for="name" class="form-label">{{ 'name'|translate|ftitlecase }}</label>
        <input formControlName="name" autocomplete="name" type="text" class="form-control" id="name">
    </div>
    <div class="col-md-6">
        <label for="surname" class="form-label">{{ 'surname'|translate|ftitlecase }}</label>
        <input formControlName="surname" autocomplete="additional-name" type="text" class="form-control" id="surname">
    </div>

    <div class="col-md-6">
        <label for="username" class="form-label">{{ 'username'|translate|ftitlecase }}</label>
        <input formControlName="username" autocomplete="username" type="text" class="form-control" id="username">
    </div>
    <div class="col-md-6">
        <label for="ssn" class="form-label">{{ 'ssn'|translate|ftitlecase }}</label>
        <input formControlName="ssn" autocomplete="ssn" type="text" class="form-control" id="ssn">
    </div>

    <div class="col-md-6">
        <label for="birthday" class="form-label">{{ 'birthday'|translate|ftitlecase }}</label>
        <input formControlName="birthday" autocomplete="bday" type="text" class="form-control" [placeholder]="'press_to_select_a_date'|translate|ftitlecase" id="birthday" bsDatepicker [bsConfig]="{ adaptivePosition: true, dateInputFormat: 'DD/MM/YYYY' }" [maxDate]="birthdayMaxDate">
    </div>
    <div class="col-md-6">
        <label for="birthplace" class="form-label">{{ 'birthplace'|translate|ftitlecase }}</label>
        <div class="input-group" id="birthplace">
            <input formControlName="birthplace" type="text" class="form-control" [placeholder]="'place'|translate|ftitlecase">
            <input formControlName="birthplace_province" type="text" class="form-control" [placeholder]="'province'|translate|ftitlecase">
        </div>
    </div>
    <div class="col-12 m-3 mt-4">
        <button type="button" role="button" class="btn btn-primary" (click)="openResetPwdModal(resetPasswordModal)">{{ 'change_password'|translate }}</button>
    </div>

    <h2 class="text-center mt-5"><i class="fas fa-fire-extinguisher"></i> {{ 'service_information'|translate|ftitlecase }}</h2>
    <div class="col-md-12">
        <label for="course_date" class="form-label">{{ 'course_date'|translate|ftitlecase }}</label>
        <input formControlName="course_date" type="text" class="form-control" [placeholder]="'press_to_select_a_date'|translate|ftitlecase" id="course_date" bsDatepicker [bsConfig]="{ adaptivePosition: true, dateInputFormat: 'DD/MM/YYYY' }" [maxDate]="birthdayMaxDate">
    </div>

    <div class="col-md-6">
        <label for="driver" class="form-label">{{ 'driver'|translate|ftitlecase }}</label>
        <div class="form-check form-switch">
            <input formControlName="driver" class="form-check-input custom-check-input" type="checkbox" role="switch" id="driver">
        </div>
    </div>
    <div class="col-md-6">
        <label for="chief" class="form-label">{{ 'chief'|translate|ftitlecase }}</label>
        <div class="form-check form-switch">
            <input formControlName="chief" class="form-check-input custom-check-input" type="checkbox" role="switch" id="chief">
        </div>
    </div>

    <div class="col-md-6">
        <label for="banned" class="form-label">{{ 'banned'|translate|ftitlecase }}</label>
        <div class="form-check form-switch">
            <input formControlName="banned" class="form-check-input custom-check-input" type="checkbox" role="switch" id="banned">
        </div>
    </div>
    <div class="col-md-6">
        <label for="hidden" class="form-label">{{ 'hidden'|translate|ftitlecase }}</label>
        <div class="form-check form-switch">
            <input formControlName="hidden" class="form-check-input custom-check-input" type="checkbox" role="switch" id="hidden">
        </div>
    </div>

    <div class="col-md-6">
        <label for="creation_date" class="form-label">{{ 'edit_user.creation_date'|translate|ftitlecase }}</label>
        <input type="text" class="form-control" disabled id="creation_date" [value]="creation_date">
    </div>
    <div class="col-md-6">
        <label for="update_date" class="form-label">{{ 'edit_user.last_update'|translate|ftitlecase }}</label>
        <input type="text" class="form-control" disabled id="update_date" [value]="update_date">
    </div>
    <div class="col-md-12">
        <label for="last_access_date" class="form-label">{{ 'edit_user.last_access'|translate|ftitlecase }}</label>
        <input type="text" class="form-control" disabled id="last_access_date" [value]="last_access_date">
    </div>

    <h2 class="text-center mt-5"><i class="fas fa-phone"></i> {{ 'contact_information'|translate|ftitlecase }}</h2>
    <div class="col-md-8">
        <label for="address" class="form-label">{{ 'address'|translate|ftitlecase }}</label>
        <input formControlName="address" type="text" class="form-control" id="address">
    </div>
    <div class="col-md-4">
        <label for="address_zip_code" class="form-label">{{ 'zip_code'|translate|ftitlecase }}</label>
        <input formControlName="address_zip_code" type="number" class="form-control" id="address_zip_code" placeholder="12345">
    </div>

    <div class="col-md-6">
        <label for="phone_number" class="form-label">{{ 'phone_number'|translate|ftitlecase }}</label>
        <input formControlName="phone_number" type="number" class="form-control" id="phone_number">
    </div>

    <div class="col-md-6">
        <label for="email" class="form-label">{{ 'email'|translate|ftitlecase }}</label>
        <input formControlName="email" type="email" class="form-control" id="email">
    </div>

    <h2 class="text-center mt-5"><i class="fas fa-id-card"></i> {{ 'documents'|translate|ftitlecase }}</h2>
    <ng-container formGroupName="driving_license">
        <h3 class="text-center mt-3">{{ 'driving_license'|translate|ftitlecase }} <i class="fas fa-car-side"></i></h3>
        <div class="col-md-12" *ngIf="dlCurrScanUrl !== null">
            <img [src]="dlCurrScanUrl" class="img-fluid rounded mx-auto d-block w-50">
        </div>
        <div class="col-md-6">
            <label for="dl_number" class="form-label">{{ 'driving_license_number'|translate|ftitlecase }}</label>
            <input formControlName="number" autocomplete="dl-number" type="text" class="form-control" id="dl_number" placeholder="AB1234567">
        </div>
        <div class="col-md-6">
            <label for="dl_type" class="form-label">{{ 'driving_license_type'|translate|ftitlecase }}</label>
            <input formControlName="type" autocomplete="dl-type" type="text" class="form-control" id="dl_type">
        </div>
        <div class="col-md-6">
            <label for="dl_expiration_date" class="form-label">{{ 'driving_license_expiration_date'|translate|ftitlecase }}</label>
            <input formControlName="expiration_date" autocomplete="dl-expiration-date" type="text" class="form-control" [placeholder]="'press_to_select_a_date'|translate|ftitlecase" id="dl_expiration_date" bsDatepicker [bsConfig]="{ adaptivePosition: true, dateInputFormat: 'DD/MM/YYYY' }" [minDate]="dlExpirationMinDate">
        </div>
        <div class="col-md-6">
            <label for="dl_scan" class="form-label">{{ 'driving_license_scan'|translate|ftitlecase }}</label>
            <input class="form-control" type="file" id="dl_scan" (change)="onDrivingLicenseScanSelected($event)" #drivingLicenseFileUpload>
            <div *ngIf="tmpDrivingLicenseImgData !== null">
                <img [src]="tmpDrivingLicenseImgData" class="img-fluid p-1 w-75">
                <button type="button" class="btn btn-primary" *ngIf="dlScanNotUploadedYet" (click)="uploadDrivingLicenseScan(drivingLicenseFileUpload)">
                    <i class="fas fa-upload"></i> {{ 'upload_scan'|translate|ftitlecase }}
                </button>
            </div>
        </div>
    </ng-container>

    <h2 class="text-center mt-5"><i class="fas fa-tshirt"></i> {{ 'clothings'|translate|ftitlecase }}</h2>
    <div class="col-md-6">
        <label for="suit_size" class="form-label">{{ 'suit_size'|translate|ftitlecase }}</label>
        <input formControlName="suit_size" type="text" class="form-control" id="suit_size" placeholder="M, L, XL...">
    </div>
    <div class="col-md-6">
        <label for="boot_size" class="form-label">{{ 'boot_size'|translate|ftitlecase }}</label>
        <input formControlName="boot_size" type="text" class="form-control" id="boot_size" placeholder="41, 42, 43...">
    </div>

    <div class="col-12 m-3 mt-4">
        <button type="submit" class="btn btn-lg btn-primary">{{ 'update'|translate|ftitlecase }}</button>
    </div>
</form>

<hr>

<div class="text-center">
    <h3>{{ 'training_courses'|translate|uppercase }}</h3>
    <button *ngIf="!hideTCAddBtn" class="btn btn-sm btn-outline-success m-2" (click)="openModalAddTrainingCourse()">
        <i class="fas fa-plus"></i> {{ 'add'|translate|ftitlecase }}
    </button>
    <table class="mx-auto table table-striped table-bordered table-responsive">
        <thead>
            <tr>
                <th>{{ 'type'|translate|uppercase }}</th>
                <th>{{ 'date'|translate|uppercase }}</th>
                <th>{{ 'training_course_modal.doc_number'|translate|uppercase }}</th>
            </tr>
        </thead>

        <tbody>
            <tr *ngFor="let row of user.training_courses">
                <td>{{ row.type }}</td>
                <td>{{ row.date | date:'dd/MM/YYYY' }}</td>
                <td>
                    <ng-container *ngIf="row.doc_url">
                        <a [href]='row.doc_url' target="_blank">{{ row.doc_number }}</a>
                    </ng-container>
                    <ng-container *ngIf="!row.doc_url">
                        {{ row.doc_number }}
                    </ng-container>
                </td>
            </tr>
        </tbody>
    </table>
    <br>
</div>

<hr>

<div class="text-center">
    <h3>{{ 'medical_examinations'|translate|uppercase }}</h3>
    <button *ngIf="!hideMEAddBtn" class="btn btn-sm btn-outline-success m-2" (click)="openModalAddMedicalExamination()">
        <i class="fas fa-plus"></i> {{ 'add'|translate|ftitlecase }}
    </button>
    <table class="mx-auto table table-striped table-bordered table-responsive">
        <thead>
            <tr>
                <th>{{ 'date'|translate|uppercase }}</th>
                <th>{{ 'certifier'|translate|uppercase }}</th>
                <th>{{ 'expiration_date'|translate|uppercase }}</th>
                <th *ngIf="!hideMECertCol">{{ 'certificate_short'|translate|uppercase }}</th>
            </tr>
        </thead>

        <tbody>
            <tr *ngFor="let row of user.medical_examinations">
                <td>{{ row.date | date:'dd/MM/YYYY' }}</td>
                <td>{{ row.certifier }}</td>
                <td>{{ row.expiration_date | date:'dd/MM/YYYY' }}</td>
                <td *ngIf="!hideMECertCol">
                    <a *ngIf="row.cert_url" [href]='row.cert_url' target="_blank"><i class='fas fa-clipboard-list'></i></a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<ng-template #resetPasswordModal>
    <div class="modal-header">
        <h4 class="modal-title pull-left" translate>password_change_title</h4>
        <button
          type="button"
          class="btn-close close pull-right"
          [attr.aria-label]="'close' | translate | ftitlecase"
          (click)="resetPwdModalRef?.hide()"
        >
          <span aria-hidden="true" class="visually-hidden">&times;</span>
        </button>
    </div>
    <div class="modal-body">
      <form>
        <div class="form-group m-3">
          <label for="password">{{ 'new_password'|translate|ftitlecase }}</label>
          <input type="password" class="form-control" id="password" [(ngModel)]="newPwd" [ngModelOptions]="{standalone: true}">
        </div>
        <div class="form-group m-3 mt-4">
          <label for="confirmPassword">{{ 'confirm_password'|translate|ftitlecase }}</label>
          <input type="password" class="form-control" id="confirmPassword" [(ngModel)]="newPwdConfirm" [ngModelOptions]="{standalone: true}">
        </div>
        <div class="alert alert-warning m-4 mt-2" role="alert" *ngIf="newPwd !== newPwdConfirm && newPwd !== '' && newPwdConfirm !== ''">
          {{ 'password_not_match'|translate }}
        </div>
        <button type="submit" role="button" class="btn btn-primary mt-2" (click)="resetPwdSubmit()" [disabled]="newPwd !== newPwdConfirm && newPwd !== '' && newPwdConfirm !== ''">{{ 'update'|translate|ftitlecase }}</button>
      </form>
    </div>
  </ng-template>
