@extends('layout.layout')
@section('title')
Subject Details
@endsection
@section('backurl')
/
@endsection
@section('content')

<!--begin::Card-->
<div class="card card-custom">
    <form id="sigup_form" class="form" method="POST" action="{{ route('signup.update') }}" enctype="multipart/form-data" autocomplete="off">
        @csrf
        @method('POST')
        <input type="hidden" name="id" value="{{$id}}">
        <input type="hidden" name="status" value="{{$status}}">
       <div class="card mb-5">
            <div class="card-body border-top p-9">
                <div class="row mb-6 mt-10">
                    <div class="col-md-12">
                        <label class="form-label mb-2">Erx ID <span class="text-danger">*</span> </label>
                        <input class="form-control" type="text" disabled value="{{$participant->erxId}}" />
                    </div>
                    <div class="col-md-12">
                        <label class="form-label mb-2">Subject ID <span class="text-danger">*</span> </label>
                        <input class="form-control" type="text" disabled value="{{$participantClinicalStudy->subjectId}}" />
                    </div>
                    <div class="col-md-12">
                        <label class="form-label mb-2">Status <span class="text-danger">*</span> </label>
                        <input class="form-control" type="text" disabled value="{{$status}}" />
                    </div>
                    <div class="col-md-12">
                        <label class="form-label mb-2">Date <span class="text-danger">*</span> </label>
                        <input class="form-control datepicker" type="text" placeholder="mm/dd/yyyy" name="date" value="{{ old('date') }}" />
                        <p class="text-danger">{{ $errors->first('date') }}</p>
                    </div>
                    <div class="col-md-12">
                        <label class="form-label mb-2">Justification <span class="text-danger">*</span> </label>
                        <textarea maxlength="500" onkeyup="countChar(this)" name="justification" id="justification" class="border-2 comment form-control mb-2 mb-md-0 min-h-125px" placeholder="Max 500 characters allowed">{{ old('justification') }}</textarea>
                        <span class="d-block fs-7 mb-2 mt-2 text-muted"><span id="word_count"
                                class="text-success word-count"> {{ Str::length(old('justification')) ?? '0' }} </span>
                            characters reached</span>
                        <p class="text-danger">{{ $errors->first('justification') }}</p>
                    </div>
                </div>
            </div>

        </div>

        <div class="card-footer d-flex justify-content-end py-6 px-9">
            <a class="btn btn-secondary btn-active-light-primary me-2" href="/">Back</a>
            <button class="btn btn-primary actionBtn">
                Save
            </button>
        </div>
    </form>
</div>
<!--end::Card-->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Confirmation</h5>
        </div>
        <div class="modal-body">
          Are You Sure?
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" id="close">No</button>
          <button type="button" id="modalBtn" class="btn btn-primary" onclick="submit_form()">Yes</button>
        </div>
      </div>
    </div>
  </div>
<script>

$(document).ready(function(){
        $(".loader-fade").fadeOut();
        var error_array = @json($errors->getMessages());
        if(Object.keys(error_array).length){
            Swal.fire({
                text: "Requied fields are missing",
                icon: "error",
                buttonsStyling: false,
                confirmButtonText: "Ok, got it!",
                allowOutsideClick: false,
                customClass: {
                    confirmButton: "btn btn-primary"
                }
            }).then((result) => {  
                if (result.isConfirmed) {    
                    var error_field = '{{ array_key_first($errors->getMessages()) }}'
                    if(error_field != ""){
                        if(error_field == 'compensationType'){
                            error_field = 'payment';
                        }
                        $('html, body').animate({
                            scrollTop: $("#"+error_field).offset().top - 120
                        }, 1000);
                    }
                }
            });
        }
    });

    function submit_form(){
        $('#modalBtn').attr('disabled', true);
        $('#sigup_form').submit();
    }
    $('.actionBtn').click(function(e){

        e.preventDefault();
        $('#exampleModal').modal('show');
    });
    $('#close').click(function(){

        $('#exampleModal').modal('hide');
    });

    function countChar(text) {
        $('#word_count').html(text.value.length);
    }

</script>

@endsection