@extends('layouts/layoutMaster')

@section('title', 'Profile')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/libs/apex-charts/apex-charts.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/swiper/swiper.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-checkboxes-jquery/datatables.checkboxes.css')}}" />
@endsection

@section('page-style')
<!-- Page -->
<link rel="stylesheet" href="{{asset('assets/vendor/css/pages/cards-advance.css')}}">
@endsection

@section('vendor-script')
<script src="{{asset('assets/vendor/libs/swiper/swiper.js')}}">
</script>
<script src="{{asset('assets/vendor/libs/apex-charts/apexcharts.js')}}"></script>
<script src="{{asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js')}}"></script>
@endsection

@section('content')
<div class="row">
	<div class="card p-3">
    <h4>Profile</h4>
    @if($data)
		 <div class="col-md-12">
        <form class="add-new-user pt-0" id="form-data" onsubmit="return false">
            @csrf
           <div class="row">
                <div class="col-md-6 mb-3">
                <label class="form-label" for="add-user-fullname"><b>Enter Name :  <span class="text-danger">*</span></b></label>
                <input type="hidden" name="id" id="id" value="{{$data->id}}" class="form-control" >
                <input type="text" name="name" id="name" value="{{$data->name}}" class="form-control" placeholder="Enter Name">
                <small id="idErr" class="text-danger"></small>
                <small id="nameErr" class="text-danger"></small>
              </div>

               <div class="col-md-6 mb-3">
                <label class="form-label" for="add-user-fullname"><b>Enter Email :  <span class="text-danger">*</span></b></label>
                <input type="email" name="email" id="email" value="{{$data->email}}" class="form-control" placeholder="Enter Email">
                
                <small id="emailErr" class="text-danger"></small>
              </div>

              <div class="col-md-6 mb-3">
                <label class="form-label" for="add-user-fullname"><b>Enter Password : </b></label>
                <input type="password" name="password" id="password"  class="form-control" placeholder="Enter Password">
                
                <small id="passwordErr" class="text-danger"></small>
              </div>
           </div>


            <div class="mb-3" style="float: left;">
              <button type="submit" class="btn btn-primary me-sm-3 me-1 waves-effect waves-light submit-btn submit-form" id="createBtn" style="background-color:  {{Config::get('app.BUTTON_COLOR')}}; color: white;">Update</button>
            </div>
          </form>  
     </div>
    @else
      <h3 class="text-center">Setting Not Avilable</h3>
    @endif
	</div>
</div>

<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = google.visualization.arrayToDataTable([
               ['Lat', 'Long', 'Name'],
               [23.8343, 80.3894, 'Katni'],
            ]);
              
            // Set chart options
            var options = {showTip: true};        

            // Instantiate and draw the chart.
            var chart = new google.visualization.Map(document.getElementById
            ('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
@include('content.Admin.Layoutes.Footer')
@endsection


@section('page-script')
<script src="{{asset('assets/js/dashboards-analytics.js')}}"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>

<script type="text/javascript">
  //Form Submit
  $(".submit-form").click(function(e) {
        EmptyError()
        e.preventDefault();
        var data = $('#form-data').serialize();
        $.ajax({
          type: 'post',
          url: "{{ route('profile.update') }}",
          data: data,
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          beforeSend: function() {
            $("#createBtn").prop('disabled', true);
            $('#createBtn').html('....Please wait');
          },
          success: function(response) {
            if ($.isEmptyObject(response.error)) {
              $("#createBtn").prop('disabled', false);
              $('#createBtn').html('Update');
              printSuccessMsg(response.msg);
            } else {
              printErrorMsg(response.error);
            }
          },
          error: function(response) { 
                EmptyError()
                $('#idErr').text(response.responseJSON.errors.id);
                $('#nameErr').text(response.responseJSON.errors.name);
                $('#emailErr').text(response.responseJSON.errors.email);
                $('#passwordErr').text(response.responseJSON.errors.password);
                $("#createBtn").prop('disabled', false);
                $('#createBtn').html('Update');
          }    
        });
    }); 

  // Empty Error
  function EmptyError(){
    $('#idErr').text('')
    $('#nameErr').text('')
    $('#emailErr').text('')
    $('#passwordErr').text('')
  }
</script>

@endsection