<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<script src="<?= getBaseUrl() ?>assets/common/plugins/jquery/jquery.min.js"></script>

<!-- Content Header (Page header) -->
<?php App\Controllers\BackendController::createService()->showBreadCrumbs($arrmixBreadCrumbData) ?>
<!-- /.content-header -->

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="js-show-alert-message">
            <?php App\Controllers\BackendController::createService()->showAlertMessage($arrmixFlashData) ?>
        </div>

        <div class="card card-info">
            <div class="card-header">
                <h3 class="card-title"><?= $strCardTitle; ?></h3>
            </div>
            <form role="form" method="post" name="form" id="js-form-user-profile" action="<?= getBaseUrl() ?>users/<?= true == isset( $arrmixUserDetails ) ? 'edit?user_id=' . $arrmixUserDetails['user_id'] : 'add' ?>">
                <div class="card-body">
                    <?php 
                        // This will for future.
                        if( false ) { 
                    ?>
                        <div class="row">
                            <div class="col-4 form-group">
                                <label class="control-label label-required" for="js-user-type-id">User Type</label>
                                <?php if (false == isset( $arrmixUserDetails['user_type_id'])) { ?>
                                    <select class="form-control js-select2" name="user_type_id">
                                        <option selected="selected" disabled="disabled">Select Option</option>
                                        <?php foreach( getUserTypesByUserTypeId( App\Controllers\BackendController::$s_arrmixBackendSessionDetails['user_type_id'] ) as $intUserTypeId => $strUserTypeName ) { ?>
                                            <option value="<?= $intUserTypeId ?>" <?= set_select( 'user_type_id', $intUserTypeId); ?>><?= $strUserTypeName ?></option>
                                        <?php } ?>
                                    </select>
                                    <?= getValidationError( 'user_type_id' ) ?>
                                <?php } else { ?>
                                    <p><?= getUserTypeName($arrmixUserDetails['user_type_id']) ?>
                                    <?php } ?>
                            </div>
                        </div>
                    <?php } ?>    

                    <div class="row">
                        <div class="col-4 form-group">
                            <label class="control-label label-required" for="js-first-name">First Name</label>
                            <input type="text" class="form-control" id="js-first-name" name="first_name" placeholder="First Name" value="<?= ( true == isset( $arrmixUserDetails ) ) ? $arrmixUserDetails['first_name'] : set_value( 'first_name' ) ?>">
                            <?= getValidationError( 'first_name' ) ?>
                        </div>

                        <div class="col-4 form-group">
                            <label class="control-label label-required" for="js-last-name">Last Name</label>
                            <input type="text" class="form-control" id="js-last-name" name="last_name" placeholder="Last Name" value="<?= ( true == isset( $arrmixUserDetails ) ) ? $arrmixUserDetails['last_name'] : set_value( 'last_name' ) ?>">
                            <?= getValidationError( 'last_name' ) ?>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-4 form-group">
                            <label class="control-label label-required" for="js-email-id">Email Id</label>
                            <input type="email" class="form-control" id="js-email-id" name="email_id" placeholder="Email Id" value="<?= ( true == isset( $arrmixUserDetails ) ) ? $arrmixUserDetails['email_id'] : set_value( 'email_id' ) ?>">
                            <?= getValidationError( 'email_id' ) ?>
                        </div>

                        <div class="col-4 form-group">
                            <label class="control-label label-required" for="js-mobile-no">Mobile Number</label>
                            <input type="text" class="form-control" id="js-mobile-no" name="mobile_number" placeholder="Mobile Number" value="<?= ( true == isset( $arrmixUserDetails ) ) ? $arrmixUserDetails['mobile_number'] : set_value( 'mobile_number' ) ?>">
                            <?= getValidationError( 'mobile_number' ) ?>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-4 form-group">
                            <label class="control-label" for="js-gender-label">Gender</label><br>
                            <div class="custom-control custom-radio d-inline">
                                <input class="custom-control-input custom-control-input-success custom-control-input-outline" type="radio" id="js-gender-male" name="gender" value="<?= GENDER_MALE ?>" <?= ( true == isset( $arrmixUserDetails ) && GENDER_MALE == $arrmixUserDetails['gender'] ) ? 'checked' : '' ?>>
                                <label for="js-gender-male" class="custom-control-label">Male</label>
                            </div>
                            <div class="custom-control custom-radio d-inline">
                                <input class="custom-control-input custom-control-input-success custom-control-input-outline" type="radio" id="js-gender-female" name="gender" value="<?= GENDER_FEMALE ?>" <?= ( true == isset( $arrmixUserDetails ) && GENDER_FEMALE == $arrmixUserDetails['gender'] ) ? 'checked' : '' ?>>
                                <label for="js-gender-female" class="custom-control-label">Female</label>
                            </div>
                            <?= getValidationError( 'gender' ) ?>
                        </div>
                        <div class="col-4 form-group">
                            <label class="control-label" for="js-date-of-birth">Date of Birth</label>
                            <div class="input-group date js-date-picker" id="js-date-of-birth" data-target-input="nearest">
                                <input type="text" class="form-control datetimepicker-input" data-target="#js-date-of-birth" name="date_of_birth" value="<?= ( true == isset( $arrmixUserDetails ) ) ? date( 'd-m-Y', strtotime( $arrmixUserDetails['date_of_birth'] ) ) : set_value( 'date_of_birth' ) ?>">
                                <div class="input-group-append" data-target="#js-date-of-birth" data-toggle="datetimepicker">
                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                </div>
                            </div>
                            <?= getValidationError( 'date_of_birth' ) ?>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12 form-group">
                            <label class="control-label label-required" for="js-address">Address</label>
                            <input type="text" class="form-control" id="js-address" name="address" placeholder="Address" value="<?= ( true == isset( $arrmixUserDetails ) ) ? $arrmixUserDetails['address'] : set_value( 'address' ) ?>">
                            <?= getValidationError( 'address' ) ?>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-4 form-group">
                            <label class="control-label label-required" for="js-state-id">State</label>
                            <select class="form-control js-select2" name="state_id" id="js-state-id">
                                <option selected="selected" disabled="disabled">Select State</option>
                                <?php
                                foreach( $arrmixStateList as $arrmixStateDetails ) {
                                    $strSelected = '';
                                    if ( true == isset( $arrmixUserDetails) && $arrmixUserDetails['state_id'] == $arrmixStateDetails['state_id']) {
                                        $strSelected = 'selected="selected"';
                                    }
                                ?>
                                    <option value="<?= $arrmixStateDetails['state_id'] ?>" <?= set_select( 'state_id', $arrmixStateDetails['state_id']);  ?> <?= $strSelected ?>><?= $arrmixStateDetails['state_name'] ?></option>
                                <?php } ?>
                            </select>
                            <?= getValidationError( 'state_id' ) ?>
                        </div>

                        <div class="col-4 form-group">
                            <label class="control-label label-required" for="js-city-id">City</label>
                            <select class="form-control js-select2" name="city_id" id="js-city-id">
                                <option selected="selected" disabled="disabled">Select City</option>
                            </select>
                            <?= getValidationError( 'city_id' ) ?>
                        </div>

                        <div class="col-4 form-group">
                            <label class="control-label label-required" for="js-pincode">Pincode</label>
                            <input type="text" class="form-control" id="js-pincode" name="pincode" placeholder="Pincode" value="<?= ( true == isset( $arrmixUserDetails ) ) ? $arrmixUserDetails['pincode'] : set_value( 'pincode' ) ?>">
                            <?= getValidationError( 'pincode' ) ?>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-4 form-group">
                            <label class="control-label label-required" for="js-username">Username</label>
                            <?php if( false == isset( $arrmixUserDetails['username'] ) ) { ?>
                                <input type="text" class="form-control" id="js-username" name="username" placeholder="Username" value="<?= ( true == isset( $arrmixUserDetails ) ) ? $arrmixUserDetails['username'] : set_value( 'username' ) ?>">
                                <?= getValidationError( 'username' ) ?>
                            <?php } else { ?>
                                <p><?= $arrmixUserDetails['username']; ?></p>
                            <?php } ?>
                        </div>
                        <div class="col-4 form-group">
                            <label class="control-label" for="js-password">Password</label>
                            <input type="password" class="form-control" id="js-password" name="password" placeholder="Password" value="<?= set_value( 'password' ) ?>">
                            <?= getValidationError( 'password' ) ?>
                        </div>
                        <div class="col-4 form-group">
                            <label class="control-label" for="js-confirm-password">Confirm Password</label>
                            <input type="password" class="form-control" id="js-confirm-password" name="confirm_password" placeholder="Password" value="<?= set_value( 'confirm_password' ) ?>">
                            <?= getValidationError( 'confirm_password' ) ?>
                        </div>
                    </div>
    
                    <?php if( true == isset( $arrmixUserDetails ) ) { ?>
                        <input type="hidden" name="user_id" value="<?= $arrmixUserDetails['user_id']; ?>">
                        <input type="hidden" value="<?= $arrmixUserDetails['city_id'] ?>" id="js-hidden-city-id">
                    <?php } ?>
                    <!-- /.card-body -->
                </div>    
                <!-- /.card-body -->

                <div class="card-footer">
                    <button type="submit" class="btn btn-outline-success">Submit</button>
                    <a href="<?= getBaseUrl() ?>users/list" class="btn btn-outline-danger"> Cancel</a>
                </div>
            </form>
        </div>
            
    </div><!-- /.container-fluid -->
</section>

<script>
    $(document).ready(function() {
        var intStateId = $("#js-state-id").val();
        
        if (true == validateInt(intStateId)) {
            var intHiddenCityId = $('#js-hidden-city-id').val();
            getCityListByStateId(intStateId, intHiddenCityId);
        }

        $("#js-state-id").on('change', function() {
            var intStateId = $("#js-state-id").val();
            getCityListByStateId(intStateId);
        });
    });

</script>