@extends('admin.include.master')

@section('content')
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1 id="page-title">Create Admin Profile</h1>
        </div>
        <div class="col-md-6 text-right">
          <a href="{{ url('all-admin') }}" class="btn btn-outline-info btn-sm"
            rel="noopener noreferrer">Admin List <i class="fas fa-long-arrow-alt-right"></i></a>
        </div>
      </div>
    </div><!-- /.container-fluid -->
  </section>

  <!-- Main content -->
  <section class="content">
    <div class="row justify-content-center">
      <div class="col-md-11">
        <div class="card card-primary">
          <div class="card-header">
            <h3 class="card-title">Admin's Primary Detail</h3>
          </div>
          <div class="card-body">
            <form id="AddAdminProfileForm">
              @csrf
              <input type="hidden" name="_token" id="token_admin" value="{{ csrf_token() }}">
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group mb-2">
                    <label class="mb-0" for="FirstName">First Name <span class="text-danger">*</span></label>
                    <input type="text" id="FirstName" name="FirstName" class="form-control form-control-sm">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group mb-2">
                    <label class="mb-0" for="MiddleName">Middle Name </label>
                    <input type="text" id="MiddleName" name="MiddleName" class="form-control form-control-sm">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group mb-2">
                    <label class="mb-0" for="LastName">Last Name <span
                        class="text-danger">*</span></label>
                    <input type="text" id="LastName" name="LastName"
                      class="form-control form-control-sm">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group mb-2">
                    <label class="mb-0" for="Email">Email <span
                        class="text-danger">*</span></label>
                  <input type="text" id="Email" name="Email" class="form-control form-control-sm">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group mb-2">
                    <label class="mb-0" for="Mobile">Mobile </label>
                    <input type="text" id="Mobile" name="Mobile" class="form-control form-control-sm">
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group mb-2">
                    <label class="mb-0" for="Password">Password <span
                        class="text-danger">*</span></label>
                    <input type="text" id="Password" name="Password" class="form-control form-control-sm">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group mb-2">
                  <label class="mb-0">Actual Work Place</label>
                    <select class="form-control form-control-sm select2" style="width: 100%;" aria-hidden="true" name="WorkPlace" id="WorkPlace" data-placeholder="Place Name">
                      <option value="" selected disabled>Place Name</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group mb-2">
                    <label class="mb-0" for="Password">Profiles <span
                        class="text-danger">*</span></label>
                        <select class="form-control form-control-sm select2" style="width: 100%;" aria-hidden="true"
                      name="ProfileId" id="ProfileId" data-placeholder="Profile Name">
                      <option value="" selected disabled>Profile Name</option>
                        </select>
                  </div>
                </div>
              </div>
            </div>
          </div>
              <div class="row justify-content-end mt-2">
                <div class="col-md-12 text-right">
                  <button type="button" onclick="formReset()" class="btn btn-dark mx-2">Reset</button>
                  <button type="submit" class="btn btn-primary">Save Profile</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section><br />
  <!-- /.content -->
</div>
<!-- /.content-wrapper -->

{{-- JS Start Here --}}

{{-- Reset Form Button --}}
<script>
  function formReset()
  { 
    Swal.fire({
            title: 'Do you want to reset form?',
            text: "Are you sure you want to reset this form!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, reset it!'
        }).then(function() {
            $('form#AddAdminProfileForm').each(function() {
                this.reset();
            });
                $('.select2').val(null).trigger('change');
            });
  }
</script>

{{-- Form Validation and Store Record --}}
<script>
  $(function () {
    $.validator.setDefaults({
      submitHandler: function () {
          event.preventDefault();
          // Get Form Data
        var token = $("#token_admin").val();

        var FirstName = $('#FirstName').val();
        var MiddleName = $('#MiddleName').val();
        var LastName = $('#LastName').val();
        var Email = $('#Email').val();
        var Mobile = $('#Mobile').val();
        var Password = $('#Password').val();
        var WorkPlace = $('#WorkPlace').val();
        var ProfileId = $('#ProfileId').val();
        
      
      var fd = new FormData();
            fd.append('_token',token);
            fd.append('FirstName',FirstName);
            fd.append('MiddleName',MiddleName);
            fd.append('LastName',LastName);
            fd.append('Email',Email);
            fd.append('Mobile',Mobile);
            fd.append('Password',Password);
            fd.append('Office',WorkPlace);
            fd.append('ProfileId',ProfileId);

      $.ajax({
              type: "post",
              url: "{{ url('store-admin') }}",
              data: fd,
              contentType: false,
              processData: false,
              success: function(response) {
                const Toast = Swal.mixin({
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 2000,
                    timerProgressBar: true,
                    didOpen: (toast) => {
                      toast.addEventListener('mouseenter', Swal.stopTimer)
                      toast.addEventListener('mouseleave', Swal.resumeTimer)
                    }
                  })
                  Toast.fire({
                    icon: 'success',
                    title: 'Admin Profile created successfully!'
                  });
                  $('form#AddAdminProfileForm').each(function() {
                    this.reset();
                    $('.select2').val(null).trigger('change');
                  });
                  setTimeout(function(){
                  window.location.reload(1);
                }, 2000);
              },
              error: function(data) {
                const Toast = Swal.mixin({
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 2000,
                    timerProgressBar: true,
                    didOpen: (toast) => {
                      toast.addEventListener('mouseenter', Swal.stopTimer)
                      toast.addEventListener('mouseleave', Swal.resumeTimer)
                    }
                  })
                  Toast.fire({
                    icon: 'error',
                    title: 'Something went wrong!'
                  });
              }
          });
      }
    });
    $('#AddAdminProfileForm').validate({
      rules: {
        FirstName: {
          required: true,
        },
        // MiddleName: {
        //   required: true,
        //   pattern: '[a-z A-Z]+'
        // },
        LastName: {
         required: true,
        },
        Email: {
         required: true,
           remote: {
            type: "POST",
            url:'{{ url("/") }}/check-duplicate-email',
            data: {
              Email: function() {
                return $( "#Email" ).val();
              },
              '_token':$('meta[name="csrf-token"]').attr('content')
            }
          }
        },
        Password: {
          required: true,
        },
        // Mobile: {
        //   required: true,
        //   pattern: '^([0-9]){10}$',
        //   remote: {
        //     type: "POST",
        //     url:'{{ url("/") }}/check-duplicate-mobile',
        //     data: {
        //       Mobile: function() {
        //         return $( "#Mobile" ).val();
        //       },
        //       '_token':$('meta[name="csrf-token"]').attr('content')
        //     }
        //   }
        // },
      },
      messages: {
        FirstName: {
          required: "Please enter first name.",
        },
        // MiddleName: {
        //   required: "Please enter middle name.",
        // },
        LastName: {
          required: "Please enter last name.",
        },
        Email: {
        required: "Please enter email address.",
        email: "Please enter a valid email address.",
        remote: "Email already taken."
        },   
        // Mobile: { 
        //   required:"Mobile no. is required.",
        //   remote:"This Mobile no. is already exist."
        // },
         Password: {
          required: "Please enter password.",
        }, 
      },
      errorElement: 'span',
      errorPlacement: function (error, element) {
        error.addClass('invalid-feedback');
        element.closest('.form-group').append(error);
      },
      highlight: function (element, errorClass, validClass) {
        $(element).addClass('is-invalid');
      },
      unhighlight: function (element, errorClass, validClass) {
        $(element).removeClass('is-invalid');
      }
    });
  });
</script>

{{-- Actual Work Place List --}}
<script>
  $(document).ready(function() {
        $.ajax({
          type: "GET",
          url: "{{ url('/actual-work-place-list') }}",
          dataType: "json",
          success: function(response) {
            var json = response.AWPList;
            $.each(json, function(i, AWPList) {
              $("#WorkPlace").append("<option value='" + AWPList.ActualWorkPlaceId + "'>" + AWPList.ActualWorkPlaceName + "</option>");
              $('#WorkPlace').trigger('change');
            });
          }
        });
      });
</script>

{{-- Profile List --}}
<script>
  $(document).ready(function() {
        $.ajax({
          type: "GET",
          url: "{{ url('/profile-list') }}",
          dataType: "json",
          success: function(response) {
            var json = response.ProfileList;
            
            $.each(json, function(i, ProfileList) {
              if(ProfileList.ProfileId == 'kPpUNPQgaJngyUNr7iRIXbcalSfm6PQAw1010')
              {
                $("#ProfileId").append("<option selected='selected' value='" + ProfileList.ProfileId + "'>" + ProfileList.ProfileName + "</option>");
              }
              else
              {
                $("#ProfileId").append("<option value='" + ProfileList.ProfileId + "'>" + ProfileList.ProfileName + "</option>");
              }
              $('#ProfileId').trigger('change');
            });
          }
        });
      });
</script>

@endsection