
<?= $this->Form->create($Student, ['id' => 'passport_details_form', 'class'=> 'input-form-section']) ?>
<div class="container-fluid box box-primary">
    <input type="hidden" name="step" value="<?php echo (FORM_SEQUENCE)[6]?>">
    <div class="row form-group">
        <div class="col-md-4 mb-1 ">
                <label for="nationality" class="control-label">Nationality<span
                            class="text-danger">* </span></label>
                <select required name="nationality" id="nationality" class="form-control">
                    <option selected="" disabled="" value="">Select One</option>
                    <?php foreach (COUNTRIES as $key => $value): ?>
                        <option value="<?= h($key) ?>" <?= $Student->nationality == $key ? 'selected' : '' ?>><?= h($value) ?></option>
                    <?php endforeach; ?>
                </select>
        </div>
    </div>
    <div class="row form-group">
        <div class="col-md-4 mb-1">
            <label for="passport_number" class="control-label">Passport Number<span
                        class="text-danger">*</span></label>
            <input required type="text" name="passport_number" id="passport_number"
                   class="form-control" placeholder="Passport Number" value="<?= $Student->passport_number;?>">
        </div>
    </div>
    <div class="row form-group">
        <div class="col-md-4 mb-1 ">
                <label for="visa_type" class="control-label">Visa Type<span
                            class="text-danger">* </span></label>
                <select required name="visa_type" id="visa_type" class="form-control">
                    <option selected="" disabled="" value="">Select One</option>
                    <?php foreach (VISA_TYPE as $key => $value): ?>
                        <option value="<?= h($key) ?>" <?= $Student->passport_detail->visa_type == $key ? 'selected' : '' ?>><?= h($value) ?></option>
                    <?php endforeach; ?>
                </select>

        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-4 mb-1">
            <label for="verification_link" class="control-label">Verification Link<span
                        class="text-danger">*</span></label>
            <input required type="text" name="verification_link" id="verification_link"
                   class="form-control" placeholder="Verification Link" value="<?= $Student->passport_detail->verification_link;?>">
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-4 mb-1">
            <label for="living_costs" class="control-label">Living Costs<span
                        class="text-danger">*</span></label>
            <input required type="text" name="living_costs" id="living_costs"
                   class="form-control" placeholder="living costs per month" value="<?= $Student->passport_detail->living_costs;?>">
        </div>
    </div>
    <div class="row form-group">

        <div class="col-md-4 mb-1">
            <label for="duration" class="control-label">Duration<span
                        class="text-danger">*</span></label>
            <input required type="text" name="duration" id="duration"
                   class="form-control" placeholder="duration"  value="<?php echo $Student->passport_detail->duration ?>">
        </div>
    </div>
    <div class="row form-group">

        <div class="col-md-4 mb-1">
            <label for="pass_total_fees" class="control-label">Total Fees<span
                        class="text-danger">*</span></label>
            <input required type="text" name="total_fees" id="pass_total_fees"
                   class="form-control" placeholder="total fees" readonly="readonly"   value="<?php echo $Student->passport_detail->total_fees ?>">
        </div>
    </div>

    <div class="row form-group">

        <div class="col-lg-9 center-block">
            <?= $this->Form->button(__('Next'), ['class' => 'btn btn-success tab3Save pull-left btn-grid btn-flat','id'=>'submit']) ?>

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

<?= $this->Form->end() ?>
<style type="text/css">

    .error-message {
        color: #ff0000;
    }


</style>

<script>
    $('#living_costs').on('input', function() {
        let sanitized = this.value.replace(/[^0-9.]/g, '');
        sanitized = sanitized.replace(/(\..*?)\..*/g, '$1');
        this.value = sanitized;
        var value = this.value  * $('#duration').val();
        $('#pass_total_fees').val(value);
    });
    $('#duration').on('input', function() {
        let sanitized = this.value.replace(/[^0-9.]/g, '');
        sanitized = sanitized.replace(/(\..*?)\..*/g, '$1');
        this.value = sanitized;
        var value = this.value  * $('#living_costs').val();
        $('#pass_total_fees').val(value);
    });


    $('#visa_type').change(function () {
        let selectedValue = $(this).val();
        $('#verification_link').val('https://www.gov.uk/'+selectedValue);
    });


    $('#passport_details_form').validate({
        rules:{
            'nationality' :'required',
            'passport_number' :'required',
            'visa_type' :'required',
            'verification_link' :'required',
            'living_costs' :'required',


        },
        messages: {
            'nationality':{
                required: "Please select nationality"
            },
            'passport_number':{
                required: "Please enter passport_number"
            },
            'visa_type':{
                required: "Please select visa type"
            },
            'living_costs':{
                required: "Please enter living costs"
            },
            'verification_link':{
                required: "Please enter verification link"
            }


        },
        highlight: function(element) {
            $(element).parent().addClass("has-error");
        },
        submitHandler: function(form) {
            form.submit();
        }
    });


</script>


