@push('styles')
<link rel="stylesheet" href="{{asset('assets/css/tagify.css')}}">
    <!-- custom css -->
    <link rel="stylesheet" href="{{ asset('assets/css/custom.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/plugins/bootstrap-datepicker/css/1.9/bootstrap-datepicker3.min.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@endpush
<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <label for="">Fullname *</label>
            <input type="text" class="form-control" id="fullname" name="fullname" value="{{ old('fullname', $data->fullname ?? null) }}" maxlength="100" required >
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label for="">Email ID *</label>
            <input type="text" class="form-control" id="email" name="email" value="{{ old('email', $data->email ?? null) }}" maxlength="191" required>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label for="">Date of birth</label>
            <!-- <input type="text" class="form-control" id="date" name="dob" value="{{ old('dob', isset($data->dob) ? Carbon::parse($data->dob)->format('d-m-Y'):'' ?? null) }}" placeholder="DD-MM-YYYY"> -->
            <input type="text" class="form-control" id="date" name="dob" value="{{ old('dob', $data->dob ?? null) }}" placeholder="DD-MM-YYYY">
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label for="">Phone Number *</label>
            <input type="tel" class="form-control" name="phone_number" value="{{ old('phone_number', $data->phone_number ?? null) }}" required>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label for="">Gender *</label>
            <select class="form-control" name="gender" id="gender" required>
                <option value=''>Select</option>
                @foreach (\App\Models\Students::getOptionGender() as $gender)
                    <option value="{{$gender}}" @if(($data->gender ?? null) == $gender) selected @endif>{{$gender}}</option>
                @endforeach
            </select>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label for="">Age</label>
            <input type="text" class="form-control" name="age" value="{{ old('age', $data->age ?? null) }}">
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label for="">Consultant/Post-graduate</label>
            <input type="text" class="form-control" name="Consultant_Post_graduate" value="{{ old('Consultant_Post_graduate', $data->Consultant_Post_graduate ?? null) }}">
        </div>
    </div>
   <div class="col-md-6">
        <div class="form-group">
            <label for="">Medical Registration-Number</label>
            <input type="text" class="form-control" name="Medical_Registration" value="{{ old('Medical_Registration', $data->Medical_Registration ?? null) }}">
        </div>
    </div>
   <div class="col-md-6">
        <div class="form-group">
            <label for="">college Name</label>
            <input type="text" class="form-control" name="college_name" value="{{ old('college_name', $data->college_name ?? null) }}">
        </div>
    </div>
   <!-- <div class="col-md-6">
        <div class="form-group">
            <label for="">LinkedIn profile</label>
            <input type="text" class="form-control" name="linkedIn_url" value="{{ old('linkedIn_url', $data->linkedIn_url ?? null) }}">
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label for="">Twitter profile</label>
            <input type="text" class="form-control" name="twitter_url" value="{{ old('twitter_url', $data->twitter_url ?? null)}}">
        </div>
    </div> -->
    <!-- <div class="col-md-6">
        <div class="form-group">
            <label for="">Tenth Marks</label>
            <input type="number" step="any" class="form-control" min="0" max="100" name="tenth_marks" value="{{ old('tenth_marks', $data->tenth_marks ?? 0) }}" >
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label for="">Twelth Marks</label>
            <input type="number" step="any" class="form-control" min="0" max="100" name="twelth_marks" value="{{ old('twelth_marks', $data->twelth_marks ?? 0) }}">
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label for="">Diploma Marks</label>
            <input type="number" step="any" class="form-control" min="0" max="100" name="diploma_marks" value="{{ old('diploma_marks', $data->diploma_marks ?? 0) }}" >
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label for="">UG Marks</label>
            <input type="number" step="any" class="form-control" min="0" max="100" name="ug_marks" value="{{ old('ug_marks', $data->ug_marks ?? 0) }}" >
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label for="">PG Marks</label>
            <input type="number" step="any" class="form-control" min="0" max="100" name="pg_marks" value="{{ old('pg_marks', $data->pg_marks ?? 0) }}" >
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label for="">Current Backlogs</label>
            <input type="number" class="form-control" min="0" max="20" name="current_backlogs" value="{{ old('current_backlogs', $data->current_backlogs ?? 0) }}">
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label for="">Backlogs History</label>
            <input type="number" class="form-control" min="0" max="20" name="backlog_history" value="{{ old('backlog_history', $data->backlog_history ?? 0) }}">
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label for="">Interested In Placements</label>
            <select name="interested_in_placements" id="interested_in_placements" class="form-control">
                <option {{ old('interested_in_placements', $data->interested_in_placements ?? 0) == 0 ? 'selected' : '' }} value="0">No</option>
                <option {{ old('interested_in_placements', $data->interested_in_placements ?? 0) == 1 ? 'selected' : '' }} value="1">Yes</option>
            </select>
        </div> 
    </div>  -->
    <!-- <div class="col-md-6">
        <div class="form-group">
            <label for="">Avatar <small>(Type: "png,jpg,jpeg,gif" )</small></label><br>
            <input type="file" name="avatar" class="form-control" accept=".png,.jpg,.jpeg,.gif" id="avatar">
                <div>
                    <span class="text-danger" id="avatar_error" style="display:none">File size allowed is Max 2MB</span>
                </div>
            @if (!empty($data->avatar))
                <img src="{{$data->getPathAvatar()}}" style="margin-top:15px;max-height:100px;">
            @endif
        </div>
    </div>

    <div class="col-md-6">
        <div class="form-group">
            <label for="">Upload Resume <small>(Type: "pdf,docx,doc")</small></label>
            <input type="file" name="resume" class="form-control" accept=".pdf,.docx,.doc" id="resume">
                <div>
                    <span class="text-danger" id="resume_error" style="display:none">File size allowed is Max 2MB</span>
                </div>
            @if (!empty($data->resume))
                <a href="{{$data->getPathResume()}}" download target="_blank" class="btn btn-warning btn-sm">View Resume</a>
            @endif
        </div>
    </div> -->

    <div class="col-md-6">
        <div class="form-group">
            <label for="">Changes Theme</label>
            <select name="brand_colors" class="form-control form-select" onclick="console.log($(this).val())" onchange="console.log('change is firing')">
           
                <option value="default" @php echo ($data->brand_colors == 'default')?'selected':''; @endphp >Default</option>
                
                <option value="light" @php echo ($data->brand_colors == 'light')?'selected':''; @endphp >Light</option>
                
            </select>
        </div>
    </div>

    <div class="col-md-12 mt-2">
        <button type="submit" class="btn btn-primary">Update</button>
    </div>
</div>



@push('script')
<script>
    $(document).ready(function (e) {
        $(function(){
            $('#status').prop('disabled', true);
            $('#email').prop('disabled', true);
          //  $('#fullname').prop('disabled', true);
           // $('#gender').prop('disabled', true);
            $('#register').prop('disabled', true);
            //$('#dob').prop('disabled', true);
        });
    });
	var uploadField = document.getElementById("avatar");

uploadField.onchange = function() {
    if(this.files[0].size > 2*1024*1024){
      $("#avatar_error").show();
       this.value = "";
    }else{
	   $("#avatar_error").hide();
	}
};
	var uploadResume = document.getElementById("resume");

uploadResume.onchange = function() {
    if(this.files[0].size > 2*1024*1024){
      $("#resume_error").show();
       this.value = "";
    }else{
	   $("#resume_error").hide();
	}
};

</script>
    <script src="{{ asset('assets/plugins/bootstrap-datepicker/js/1.9/bootstrap-datepicker.min.js') }}"></script>
<script>
$(function() {
            // [ Add phone validator ] start
            // $.validator.addMethod(
            //     'phone_format',
            //     function(value, element) {
            //         return this.optional(element) || /^[6-9]{1}[0-9]{9}$/.test(value);
            //     },
            //     'Invalid phone number.'
            // );

            // $.validator.addMethod("validation_email", function(value, element) {
            //     return this.optional(element) || validateEmail(value);
            // }, "Email Address is invalid: Please enter a valid email address.");
            $.validator.addMethod("validation_email", function(value, element) {
                return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value);
            }, "Email Address is invalid: Please enter a valid email address.");


            $.validator.addMethod("validation_fullname", function(value, element) {
                return this.optional(element) || /^[a-zA-Z .]+$/i.test(value);
            }, "Please enter alphabets space and dot(.) only.");

            // [ Initialize validation ] start
            $('#student-form').validate({
                ignore: '.ignore, .select2-input',
                focusInvalid: false,
                rules: {
                    'email': {
                        required: true,
                        email: true,
                        validation_email:true
                    },
                    // 'password': {
                    //     required: true,
                    //     minlength: 6,
                    //     maxlength: 20
                    // },
                    // 'password-confirmation': {
                    //     required: true,
                    //     minlength: 6,
                    //     equalTo: 'input[name="password"]'
                    // },
                    // 'validation-required': {
                    //     required: true
                    // },
                    'phone_number': {
                        required: true,
                        phone_format: true
                    },
                    // 'firstname': {
                    //     required: true,
                    //     minlength: 2,
                    //     validation_fullname:true
                    // },
                    // 'lastname': {
                    //     required: true,
                    //     minlength: 1,
                    //     validation_fullname:true
                    // },
                    'fullname': {
                        required: true,
                        minlength: 2,
                        validation_fullname:true
                    },
                    'dob': {
                        required: true,
                    },
                    'registration_number': {
                        required: true,
                        minlength: 3
                    },
                    'campus_id': {
                        required: true,
                    },

                    'alternate_email': {
                        validation_email:false
                    },

                    'alternate_mobile': {
                        phone_format: true,
                        required: false,
                    },

                    'year_of_admission': {
                        required: true,
                    },
                    'semester':{
                      required: true,  
                    }
                    // Checkbox groups  //
                },

                // Errors //

                errorPlacement: function errorPlacement(error, element) {
                    var $parent = $(element).parents('.form-group');

                    // Do not duplicate errors
                    if ($parent.find('.jquery-validation-error').length) {
                        return;
                    }
                    $parent.append(
                        error.addClass('jquery-validation-error small form-text invalid-feedback')
                    );
                },
                highlight: function(element) {
                    var $el = $(element);
                    var $parent = $el.parents('.form-group');

                    $el.addClass('is-invalid');

                    // Select2 and Tagsinput
                    if ($el.hasClass('select2-hidden-accessible') || $el.attr('data-role') === 'tagsinput') {
                        $el.parent().addClass('is-invalid');
                    }
                },
                unhighlight: function(element) {
                    $(element).parents('.form-group').find('.is-invalid').removeClass('is-invalid');
                }
            });

        });
        </script>

        <script>
                $(document).ready(function () {
                    $.fn.datepicker.noConflict = function () {
                        $.fn.datepicker = old;
                        return this;
                    };
                  
                    if ($('.input-date').length) {
                        $('.input-date').datepicker({					
                            todayHighlight: true,
                            autoclose: true,
                            altFormat: 'dd-mm-yyyy',
                            format: 'dd-mm-yyyy'
                        });
                    }
                   
                    if ($('.input-date-dob').length) {
                        $('.input-date-dob').datepicker({
                            format: "dd-mm-yyyy",
                            endDate: "-10y",
                            ignoreReadonly: true,
                            autoclose: true,
                            startDate: '-40y', 
                            todayHighlight: false,
                        });
                    }
                   
                });
        </script>
    
@endpush