@extends('layouts/contentNavbarLayout')

@section('title', 'Community Create')

@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> Community Create</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="/communities">
            Back </a>
        </div>
      </div>

      @isset($community)
        {!! Form::model($community, ['route' => ['communities.update', Crypt::encrypt($community->id)], 'method' => 'put', 'class' => 'p-4 progress-form', 'id' => 'progress-form', 'files' => true]) !!}
      @else
        {!! Form::open(['url' => '/communities', '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">Details</h5>
          <div class="card-body">
            <div class="row">
              <div class="col-sm-6">
                {!! Form::label('name', 'Community Name', ['class' => 'form-label']) !!}
                {!! Form::text('name', @$community->name, ['class' => 'form-control', 'placeholder' => 'Community Name']) !!}
              </div>

              <div class="col-sm-6">
                {!! Form::label('community_id', 'Community ID', ['class' => 'form-label']) !!}
                {!! Form::text('community_id', $community_id, ['class' => 'form-control', 'placeholder' => 'CI00001', 'readonly']) !!}
              </div>

              {{-- Additional Fields Here --}}

              <div class="row form__field">
                {!! Form::label('address', 'Address', ['class' => 'form-label']) !!}
                <div class="col-sm-4">
                  {!! Form::label('street', 'Street', ['class' => 'col-sm-2']) !!}
                  {!! Form::text('street', @$community->street, ['class' => 'form-control', 'placeholder' => 'Street', 'required']) !!}
                </div>
                <div class="col-sm-4">
                  {!! Form::label('city', 'City', ['class' => 'col-sm-2']) !!}
                  {!! Form::text('city', @$community->city, ['class' => 'form-control', 'placeholder' => 'City', 'required']) !!}
                </div>
                <div class="col-sm-4">
                  {!! Form::label('state', 'State', ['class' => 'col-sm-2']) !!}
                  {!! Form::text('state', @$community->state, ['class' => 'form-control', 'placeholder' => 'State', 'required']) !!}
                </div>
                <div class="col-sm-4 mt-3">
                  {!! Form::label('zip', 'Zip', ['class' => 'col-sm-2']) !!}
                  {!! Form::text('zip_code', @$community->zip_code, ['class' => 'form-control', 'placeholder' => 'Zip Code', 'required']) !!}
                </div>
              </div>

              {{-- Continue converting other fields in a similar manner --}}

              <div class="col-sm-6">
                {!! Form::label('primary_contact_number', 'Primary contact', ['class' => 'form-label']) !!}
                {!! Form::tel('primary_contact_number', @$community->primary_contact_number, ['class' => 'form-control', 'placeholder' => '332-322-4433', 'required']) !!}
              </div>

              <div class="col-sm-6">
                {!! Form::label('secondary_contact_number', 'Secondary contact', ['class' => 'form-label']) !!}
                {!! Form::tel('secondary_contact_number', @$community->secondary_contact_number, ['class' => 'form-control', 'placeholder' => '332-322-4433']) !!}
              </div>

              {{-- More Fields --}}

            </div>
          </div>
        </div>
      </div>

      <div class="col-md">
        <div class="card mb-4">
          <h5 class="card-header">Manager Info</h5>
          <div class="card-body">
            <div class="row">
              <div class="col-sm-6">
                {!! Form::label('manager_name', "Manager's Name", ['class' => 'form-label']) !!}
                {!! Form::text('manager_name', @$community->manager->name, ['class' => 'form-control', 'placeholder' => 'John Doe', 'required']) !!}
              </div>

              <div class="col-sm-6">
                {!! Form::label('email', "Manager's Email", ['class' => 'form-label']) !!}
                {!! Form::email('email', @$community->manager->email, ['class' => 'form-control', 'placeholder' => 'jhon@xyz.com', 'autocomplete' => 'email']) !!}
              </div>

              <div class="col-sm-6">
                {!! Form::label('phone_number', "Manager's Phone Number", ['class' => 'form-label']) !!}
                {!! Form::tel('phone_number', @$community->manager->phone_number, ['class' => 'form-control', 'placeholder' => '332-322-4433']) !!}
              </div>

              <div class="col-sm-6">
                {!! Form::label('username', "Manager's Username", ['class' => 'form-label']) !!}
                {!! Form::text('username',  @$community->manager->username, ['class' => 'form-control', 'placeholder' => 'John Doe']) !!}
              </div>

              <div class="col-sm-6">
                {!! Form::label('password', "Manager's Password", ['class' => 'form-label']) !!}
                {!! Form::password('password', ['class' => 'form-control', 'placeholder' => 'Password', 'id' => 'myPassword']) !!}
              </div>

              <div class="col-sm-6">
                {!! Form::label('confirm_password', "Confirm Password", ['class' => 'form-label']) !!}
                {!! Form::password('password_confirmation', ['class' => 'form-control', 'placeholder' => 'Password']) !!}
              </div>

              <div class="col-sm-6">
                {!! Form::label('emergency_contact_number', "Emergency Contact Number", ['class' => 'form-label']) !!}
                {!! Form::tel('emergency_contact_number', @$community->manager->emergency_contact_number, ['class' => 'form-control', 'placeholder' => '332-322-4433']) !!}
              </div>

            </div>
          </div>
        </div>
      </div>

      <div class="col-md">
        <div class="card mb-4">
          <h5 class="card-header">Specifications</h5>
          <div class="card-body">
            <div class="row">
              <div class="col-sm-6">
                {!! Form::label('parking_spot', 'Number of Parking Spots', ['class' => 'form-label']) !!}
                {!! Form::number('number_of_parking_spots', @$community->number_of_parking_spots, ['class' => 'form-control', 'placeholder' => '50']) !!}
              </div>

              {{-- <div class="col-sm-6">
                {!! Form::label('parking_type', 'Type of Parking', ['class' => 'form-label']) !!}
                {!! Form::select('type_of_parking[]', ['covered' => 'Covered', 'open' => 'Open', 'reserved' => 'Reserved', 'multi_level' => 'Multi Level'], @$community->type_of_parking, ['class' => 'form-control', 'multiple' => true]) !!}
              </div> --}}

              <div class="col-sm-6">
                {!! Form::label('community_size', 'Community Size', ['class' => 'form-label']) !!}
                {!! Form::select('community_size', ['small' => 'Small', 'medium' => 'Medium', 'large' => 'Large'], @$community->community_size, ['class' => 'form-control form-select']) !!}
              </div>

            </div>
          </div>
        </div>
      </div>

      <div class="col-md">
        <div class="card mb-4">
          <h5 class="card-header">Plans</h5>
          <div class="card-body">
            <div class="row">
              <div class="col-sm-6">
                {!! Form::label('community_plan', 'Select a Plan', ['class' => 'form-label']) !!}
                {!! Form::select('community_plan', $plans, @$community->community_plan, ['class' => 'form-control form-select']) !!}
              </div>
              <div class="col-sm-6">
                {!! Form::label('max_guest_allowed', 'Max Guest Allowed', ['class' => 'form-label']) !!}
                {!! Form::select('max_guest_allowed', $guest_count, @$community->max_guest_allowed, ['class' => 'form-control form-select']) !!}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md">
        <div class="card mb-4">
          <h5 class="card-header">Legal & Compliance</h5>
          <div class="card-body">
            <div class="row">

              <div class="col-sm-6 form-check">
                {!! Form::checkbox('terms_and_conditions_accepted', 1, @$community->terms_and_conditions_accepted, ['class' => 'form-check-input', 'id' => 'termsConditionsCheck', 'required']) !!}
                <label class="form-label" for="termsConditionsCheck">
                  <a class="cursor-pointer" data-bs-toggle="modal" data-bs-target="#tncModal"><b>Terms & Conditions</b></a>
                </label>
              </div>

              <div class="mt-3 sm:mt-0 form__field form-check">
                {!! Form::checkbox('privacy_policy_accepted', 1, @$community->privacy_policy_accepted, ['class' => 'form-check-input', 'id' => 'privacyPolicyCheck', 'required']) !!}
                <label class="form-label" for="privacyPolicyCheck">
                  <a class="cursor-pointer" data-bs-toggle="modal" data-bs-target="#ppModal"><b>Privacy Policy</b></a>
                </label>
              </div>

            </div>
          </div>
        </div>
      </div>

      <div class="col-md">
        <div class="card mb-4">
          <h5 class="card-header">Verification Documents</h5>
          <div class="card-body">
            <div class="row">

              <div class="col-sm-6">
                {!! Form::label('community_legal_status', "Community's legal status", ['class' => 'form-label']) !!}
                @if(@$community->community_legal_status)
                  <a href="#" class="openModal" data-toggle="modal" data-target="#profilePicModal" data-image-url="/storage/{{@$community->community_legal_status}}">Open Image</a>
                | <a href="#" onclick="deleteDoc(`storage/{{@$community->community_legal_status}}`, 'community_legal_status')" >Delete Doc</a>
                @endif
                {!! Form::file('community_legal_status', ['class' => 'form-control', 'accept' => "image/*"]) !!}
              </div>

              <div class="col-sm-6">
                {!! Form::label('manager_identity', "Manager's identity", ['class' => 'form-label']) !!}
                @if(@$community->manager_identity)
                  <a href="#" class="openModal" data-toggle="modal" data-target="#profilePicModal" data-image-url="/storage/{{@$community->manager_identity}}">Open Image</a>
                | <a href="#" onclick="deleteDoc(`storage/{{@$community->manager_identity}}`, 'manager_identity')" >Delete Doc</a>
                @endif
                {!! Form::file('manager_identity', ['class' => 'form-control', 'accept' => "image/*"]) !!}
              </div>

              <div class="col-sm-6">
                {!! Form::label('other_related_docs', 'Other related docs', ['class' => 'form-label']) !!}
                @if(@$community->other_related_docs)
                  <a href="#" class="openModal" data-toggle="modal" data-target="#profilePicModal" data-image-url="/storage/{{@$community->other_related_docs}}">Open Image</a>
                | <a href="#" onclick="deleteDoc(`storage/{{@$community->other_related_docs}}`, 'other_related_docs')" >Delete Doc</a>
                @endif
                {!! Form::file('other_related_docs', ['class' => 'form-control', 'accept' => "image/*"]) !!}
              </div>

            </div>
          </div>
        </div>
      </div>

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

      {{-- Additional sections for Manager Info, Specifications, Plans, Legal & Compliance, Verification Documents, Additional Notes --}}

      {!! Form::button('Submit', ['type' => 'submit', 'class' => 'btn btn-primary']) !!}

    {!! Form::close() !!}


        {{-- Basic Modal --}}
        <div class="modal fade" id="tncModal" tabindex="-1" aria-hidden="true" style="display: none;">
          <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title" id="modalScrollableTitle">Terms & Conditions</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
                  eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
                  laoreet rutrum faucibus dolor auctor.</p>
                <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
                  consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
                  eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
                  laoreet rutrum faucibus dolor auctor.</p>
                <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
                  consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
                  eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
                  laoreet rutrum faucibus dolor auctor.</p>
                <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
                  consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
                  eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
                  laoreet rutrum faucibus dolor auctor.</p>
                <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
                  consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
                  eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
                  laoreet rutrum faucibus dolor auctor.</p>
                <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
                  consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
                  eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
                  laoreet rutrum faucibus dolor auctor.</p>
                <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
                  consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary waves-effect" data-bs-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>

        <div class="modal fade" id="ppModal" tabindex="-1" aria-hidden="true" style="display: none;">
          <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title" id="modalScrollableTitle">Privacy Policy</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
                  eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
                  laoreet rutrum faucibus dolor auctor.</p>
                <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
                  consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
                  eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
                  laoreet rutrum faucibus dolor auctor.</p>
                <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
                  consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
                  eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
                  laoreet rutrum faucibus dolor auctor.</p>
                <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
                  consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
                  eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
                  laoreet rutrum faucibus dolor auctor.</p>
                <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
                  consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
                  eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
                  laoreet rutrum faucibus dolor auctor.</p>
                <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
                  consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
                  eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
                  laoreet rutrum faucibus dolor auctor.</p>
                <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
                  consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary waves-effect" data-bs-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>

    </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 deleteDoc(path, sub_type) {
        $.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: 'community_doc'+'#'+sub_type,
            utils_id: {!! json_encode(@$community->id) !!}
          },
          success: function(response) {
            location.reload();
          },
          error: function(xhr, status, error) {
              // Handle any errors
              console.log("Error: " + error);
          }
        });
      }
  </script>
@endsection