@extends('layouts/contentNavbarLayout')

@section('title', 'Internal Users for Community')

@section('page-style')
  <link rel="stylesheet" href="/assets/css/strength.css" />
@endsection

@section('content')
<h4 class="py-3 mb-4"><span class="text-muted fw-light">Home /</span> Internal Users for Community</h4>
<!-- Basic Layout & Basic with Icons -->
<div class="row">
  <!-- Basic Layout -->
  <div class="col-xxl">
    <div class="card mb-4">
      <div class="d-flex justify-content-between align-items-center flex-wrap mt-2 mb-1">
        <h5 class="m-0 me-2"></h5>
        <div class="mx-3">
          <a class="fw-medium btn btn-warning" href="/internal-users">
            Back </a>
        </div>
      </div>

        @isset($user)
          {!! Form::model($user, ['route' => ['internal-users.update', Crypt::encrypt($user->id)], 'method' => 'put', 'class' => 'p-4 progress-form', 'id' => 'progress-form', 'files' => true]) !!}
        @else
          {!! Form::open(['url' => '/internal-users', 'class' => 'p-4 progress-form', 'id' => 'progress-form', 'lang' => 'en', 'files' => true]) !!}
        @endisset

          <div class="col-md">
            <div class="card mb-4">
              <h5 class="card-header">Personal Information</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-6">
                      {!! Form::label('name', 'Full Name', ['class' => 'form-label']) !!}
                      {!! Form::text('name', @$user->name, ['class' => 'form-control', 'id' => 'name', 'placeholder' => 'john bell']) !!}
                  </div>

                  <div class="col-sm-6">
                      {!! Form::label('username', 'Username', ['class' => 'form-label']) !!}
                      {!! Form::text('username', null, ['class' => 'form-control', 'id' => 'username', 'placeholder' => 'Username']) !!}
                  </div>

                  <div class="col-sm-6">
                      {!! Form::label('phone_number', 'Phone Number', ['class' => 'form-label']) !!}
                      {!! Form::tel('phone_number', @$user->phone_number, ['class' => 'form-control', 'id' => 'phone_number', 'placeholder' => '1231231231']) !!}
                  </div>

                  <div class="col-sm-6">
                      {!! Form::label('profile_pic', 'Profile Picture:', ['class' => 'form-label']) !!}
                      @if(@$user->profile_pic)
                        <a href="#" id="openModal" data-toggle="modal" data-target="#profilePicModal" data-image-url="/{{@$user->profile_pic}}">Open Image</a>
                        | <a href="#" onclick="deleteProfilePic(`{{@$user->profile_pic}}`)" >Delete Profile Pic</a>
                      @endif
                      {!! Form::file('profile_pic', ['class' => 'form-control', 'id' => 'profile_pic']) !!}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md">
            <div class="card mb-4">
              <h5 class="card-header">Login Credentials</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-6">
                      {!! Form::label('email', 'Email Address', ['class' => 'form-label']) !!}
                      {!! Form::email('email', @$user->email, ['class' => 'form-control', 'id' => 'email', 'placeholder' => 'abc@xyz.com']) !!}
                  </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        {!! Form::label('password', 'Password', ['class' => 'form-label']) !!}
                        {!! Form::password('password', ['class' => 'form-control', 'id' => 'myPassword', 'placeholder' => 'Password']) !!}
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        {!! Form::label('password_confirmation', 'Confirm Password', ['class' => 'form-label']) !!}
                        {!! Form::password('password_confirmation', ['class' => 'form-control', 'id' => 'confirmPassword', 'placeholder' => 'Confirm Password']) !!}
                    </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md">
            <div class="card mb-4">
              <h5 class="card-header">Role and Permissions</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-6">
                      {!! Form::label('user_type', 'Role', ['class' => 'form-label']) !!}
                      {!! Form::select('user_type', ['' => 'Select Role', '4' => 'Security Guard', '3' => 'Maintenance Staff', '2' => 'Assistant Manager'],
                        @$user->user_type, ['id' => 'largeSelect', 'class' => 'form-select form-select-lg', 'required']) !!}
                  </div>
              </div>
              {{-- <div class="row">
                  <div class="col-sm-6">
                      {!! Form::label('permissions', 'Permissions', ['class' => 'form-label']) !!}
                  </div>
              </div> --}}
              {{-- <div class="row">
                  <div class="col-sm-4">
                      {!! Form::checkbox('permissions[]', 'scan QR codes') !!} Scan QR codes
                  </div>
                  <div class="col-sm-4">
                      {!! Form::checkbox('permissions[]', 'update vehicle information') !!} Update vehicle information
                  </div>
                  <div class="col-sm-4">
                      {!! Form::checkbox('permissions[]', 'view resident details') !!} View resident details
                  </div>
              </div> --}}
              </div>
            </div>
          </div>

          <div class="col-md">
            <div class="card mb-4">
              <h5 class="card-header">Work Information</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-4">
                      {!! Form::label('department_section', 'Department/Section', ['class' => 'form-label']) !!}
                      {!! Form::select('department_section', ['' => 'Select Role', 'Security' => 'Security', 'Maintenance' => 'Maintenance'], @$user->department_section, ['id' => 'largeSelect', 'class' => 'form-select form-select-lg']) !!}
                  </div>
                  <div class="col-sm-4">
                      {!! Form::label('employee_resident_id', 'Employee ID', ['class' => 'form-label']) !!}
                      {!! Form::text('employee_resident_id', $employee_id, ['class' => 'form-control', 'id' => 'employee_resident_id', 'placeholder' => 'Employee ID', 'readonly']) !!}
                  </div>
                  <div class="col-sm-4">
                      {!! Form::label('office_location', 'Office Location', ['class' => 'form-label']) !!}
                      {!! Form::text('office_location', @$user->office_location, ['class' => 'form-control', 'id' => 'office_location', 'placeholder' => 'Office Location']) !!}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md">
            <div class="card mb-4">
              <h5 class="card-header">Emergency Contact</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-6">
                      {!! Form::label('contact_name', 'Contact Name', ['class' => 'form-label']) !!}
                      {!! Form::text('contact_name', @$user->contact_name, ['class' => 'form-control', 'id' => 'contact_name', 'placeholder' => 'Contact Name']) !!}
                  </div>
                  <div class="col-sm-6">
                      {!! Form::label('contact_relationship', 'Contact Relationship', ['class' => 'form-label']) !!}
                      {!! Form::text('contact_relationship', @$user->contact_relationship, ['class' => 'form-control', 'id' => 'contact_relationship', 'placeholder' => 'Contact Relationship']) !!}
                  </div>
                  <div class="col-sm-6">
                      {!! Form::label('emergency_contact_number', 'Contact Phone', ['class' => 'form-label']) !!}
                      {!! Form::tel('emergency_contact_number', @$user->emergency_contact_number, ['class' => 'form-control', 'id' => 'emergency_contact_number', 'placeholder' => 'Contact Phone']) !!}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md">
            <div class="card mb-4">
              <h5 class="card-header">Account Status</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-6">
                      <div class="form-check form-switch mb-2">
                          {!! Form::label('status', 'Active User', ['class' => 'form-check-label']) !!}
                          {!! Form::checkbox('status', 1, @$user->status, ['class' => 'form-check-input', 'id' => 'status']) !!}
                      </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md">
            <div class="card mb-4">
              <h5 class="card-header">Notes</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-6">
                    <div class="col-sm-12">
                      {!! Form::textarea('notes', @$user->notes, ['class' => 'form-control', 'placeholder' => "John Doe's note", 'aria-label' => "With textarea", 'style' => 'height: 120px;']) !!}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>


          <div class="d-flex justify-center sm:justify-end mt-4 sm:mt-5 float-end">

            <!-- Assuming you want to clear the form with JavaScript -->
            <button type="button" class="fw-medium btn btn-warning" style="margin-right: 10px" onclick="clearForm()">Clear</button>

            <!-- This button is for submitting the form -->
            {!! Form::button('Submit', ['type' => 'submit', 'class' => 'btn btn-primary']) !!}

          </div>

        {!! Form::close() !!}
    </div>
  </div>
</div>
@include('utils.profile_pic')
@endsection

@section('page-script')
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script src="/assets/js/strength.js"></script>
  <script>
    $(document).ready(function($) {
      $('#myPassword').strength({
          strengthClass: 'strength',
          strengthMeterClass: 'strength_meter',
          strengthButtonClass: 'button_strength',
          strengthButtonTextToggle: 'Hide Password'
        });

        $('#openModal').on('click', function() {
          var imageUrl = $(this).data('image-url');
          $('#modalImage').attr('src', imageUrl);
        });
      });

      function deleteProfilePic(path) {
        $.ajax({
          url: '/delete-file', // The URL to your endpoint that returns the number of items
          type: 'GET', // or 'POST', depending on your requirements
          data: {
            path: path,
            type: 'profile_pic',
            utils_id: {!! json_encode(@$user->id) !!}
          },
          success: function(response) {
            location.reload();
          },
          error: function(xhr, status, error) {
              // Handle any errors
              console.log("Error: " + error);
          }
        });
      }
  </script>
@endsection