@extends('fronted.layout.main')
@section('adcontent')
<style>
   .profile {
      display: flex;
   }

   .company {
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: 2px solid grey;
      font-family: 'Exo', sans-serif;
      max-width: 200px;

      color: #000;

   }


   .hostelregi {
      padding: 6px;
      display: flex;
      justify-content: space-between;
      box-shadow: 2px 5px 10px grey;
      line-height: normal;
   }

   input {
      border: none;
      background: none
   }

   .form-label {
      padding-top: 8px;
      font-weight: bold;
      margin-left: 2%;
   }

   * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
   }

   html,
   body {
      width: 100vw;
      height: 100%;
   }

   .ml-2 {
      /* margin-left: 0.5rem; */
   }

   .card-body {
      display: flex;
      align-items: center;
   }

   .card-title {
      font-size: 1rem;
      font-weight: bold;
   }

   .card-text {
      font-size: 0.8rem;
      font-weight: 500;
      margin-bottom: 0.1rem;
   }

   .form-css label,
   .form-css input,
   .form-css select {
      font-size: 0.8rem;
   }

   .sponserImg {
      width: 25px;
      height: 25px;
      object-fit: contain;
   }

   .subscription-title-heading {
      font-size: 0.8rem;
      font-weight: 600;
   }

   .main {
      color: black;
      font-weight: 500;
   }

   .sub {
      color: orange;
      font-weight: 400;
   }

   .supSub {
      color: #6e6767bf;
      font-weight: 400;
   }
</style>
<div class="container" style="background-color: white; ">
   <div class="row mt-3">
      <div class="col-md-12">
         <div class="row">
            <div class="card border-0 col-md-4  text-center" style="background-color: #F8F9FA;">
               <div class="" style="background-color: #F8F9FA;">
                  <div class="row">
                     <div class="col-md-12">
                        <div class=" col-md-12 card border-0  d-flex align-items-center mt-1 justify-content-center rounded" style="background-color: white; ">
                           <div class="col-md-6">
                              <div style="height: 100px;">
                                 <img src="{{$profile->pic}}" class="img-fluid h-100 w-100 object-fit-contain" alt="Profile">
                              </div>
                           </div>
                        </div>
                        <div class="col-md-12 my-2 py-2 card border-0 rounded-lg " style="background-color: white">
                           <h5 class="card-title mb-1">{{$profile->businessname}}</h5>
                           <p class="card-text mb-1" style="text-transform: uppercase;">(Member Since: {{\Carbon\Carbon::parse($profile->created_at)->format('d-F-Y')}})</p>
                           <p class="card-text" style="font-size: 1rem;text-transform: uppercase; font-weight:600">{{$profile->business_type}}</p>
                           <p class="card-text" style="font-size: 0.6rem;text-transform: uppercase; font-weight:500">{{$profile->address}}</p>
                           <p class="card-text">{{ $profile->salesSubscription->no_of_seats ?? 0 }} Seats ({{$profile->license_no}}) </p>
                           <p class="card-text mt-3">
                              <span style="font-size: 1rem;text-transform: uppercase; font-weight:700">
                                 {{$profile->fname}} {{$profile->lname}} <br>
                              </span>
                              <span style="font-size: 0.8rem; font-weight:700">

                                 {{$profile->mobile}} {{ $profile->mobile_secondary }} <br>
                              </span>
                              {{$profile->email}}
                           </p>
                           <button class="btn text-warning" type="button" data-bs-toggle="modal" data-bs-target="#editprofile" style="margin-left:16vw;"> view more</button>
                        </div>

                        <div class="col-md-12   card border-0 py-2 my-2" style="background-color: #F8F9FA;">
                           <div class="row">
                              <div class="col-md-4">
                                 <div class="col-md-12 rounded mt-5">
                                    <img src="{{asset('assets/images/coin.png')}}" class="img-fluid" alt="plan descripbe images">
                                 </div>
                              </div>
                              <div class=" col-md-8">
                                 <div style="display: flex; flex-direction:column; gap:1vh; font-size: 0.7rem; font-weight:600; text-transform:uppercase">
                                    <div class="d-flex justify-content-between align-items-center py-2 rounded gap-2" style="background-color: white;">
                                       <div class="">
                                          <img src="{{asset('assets/images/medal.png')}}" class="img-fluid sponserImg " alt="duration">
                                       </div>
                                       <div class="">
                                          <h6 class="m-0 me-2 subscription-title-heading">{{$profile->salesSubscription->subscriptionDetail->package_title ?? "Not Found" }}</h6>
                                       </div>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center py-2 rounded gap-2" style="background-color: white;">
                                       <div class="">
                                          <img src="{{asset('assets/images/coin.png')}}" class="img-fluid sponserImg" alt="duration">
                                       </div>
                                       <div>
                                          <h6 class="m-0 me-2 subscription-title-heading">{{$profile->salesSubscription->subscriptionDetail->package_category ?? 'Null'}}</h6>
                                       </div>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center py-2 rounded gap-2" style="background-color: white;">
                                       <div>
                                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="sponserImg" fill="currentColor">
                                             <path d="M22 11V20H20V17H4V20H2V4H4V14H12V7H18C20.2091 7 22 8.79086 22 11ZM8 13C6.34315 13 5 11.6569 5 10C5 8.34315 6.34315 7 8 7C9.65685 7 11 8.34315 11 10C11 11.6569 9.65685 13 8 13Z"></path>
                                          </svg>
                                       </div>
                                       <div>
                                          <h6 class="m-0 me-2 subscription-title-heading">{{ $profile->salesSubscription->no_of_seats ?? 0 }}</h6>
                                       </div>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center py-2 rounded gap-2" style="background-color: white;">
                                       <div>
                                          <img src="{{asset('assets/images/date.webp')}}" class="img-fluid sponserImg" alt="duration">
                                       </div>
                                       <div>
                                          <h6 class="m-0 me-2 subscription-title-heading">
                                             From {{ optional($profile->salesSubscription)->startdate ? \Carbon\Carbon::parse($profile->salesSubscription->startdate)->format('d-F-Y') : '' }}
                                             to {{ optional($profile->salesSubscription)->enddate ? \Carbon\Carbon::parse($profile->salesSubscription->enddate)->format('d-F-Y') : '' }}
                                          </h6>
                                       </div>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center" style="background-color: white;">

                                       <div>
                                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="sponserImg">
                                             <rect x="4" y="4" width="16" height="16" rx="2" ry="2" fill="#FFEB3B" stroke="#FF9800" stroke-width="1.5" />
                                             <path d="M12 6h2v2h-2zM16 6h2v2h-2zM8 6h2v2H8z" fill="#FF5722" />
                                             <rect x="8" y="8" width="8" height="1" fill="#FF5722" />
                                             <text x="12" y="16" font-family="Arial" font-size="8" fill="#FF5722" text-anchor="middle">7</text>
                                          </svg>
                                       </div>
                                       <div class="py-2">
                                          <h6 class="m-0 me-2 subscription-title-heading">{{$profile->salesSubscription->counter ?? 0}} Days remaining</h6>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="row col-8" style="background-color: white; margin-left:2px">
               @if(!$empProfile)
               <div class="col-md-12" style="background-color: #F8F9FA;">
                  <div class="row mt-2">
                     <div class="text-right col-md-9">
                        <div class="btn-group clearfix" role="group" aria-label="Switch buttons group">
                           <button type="button" class="btn  btn-secondary btn-sm" id="plan-permission-toggle">
                              Plan Permission
                           </button>
                           <button type="button" class="btn btn-warning btn-sm" id="addons-permission-toggle">
                              Add Ons Permission
                           </button>
                        </div>
                     </div>
                     <div class="text-right col-md-3">
                        <button class="btn btn-secondary btn-sm">Update</button>
                     </div>
                  </div>

                  <div id="plan-permission-section" class=" mt-4  col-md-12 text-capitalize " style="display: block; background-color:white;height:550px;overflow:auto">
                     @foreach($mainPermissions as $permissonName => $permissionValue)
                     @if(is_array($permissionValue))
                     <p class="m-0 mb-1 ms-1">
                        @foreach($permissionValue as $subPermission => $subPermissionValue)
                        @if(is_array($subPermissionValue))
                        @foreach($subPermissionValue as $chiledPermission => $chiledValue)
                        @if($chiledValue === "1")
                        <span class="main">{{ $permissonName }} </span> > <span class="text-warning text-nowrap sub"> {{$subPermission}} </span> > <span class="text-nowrap supSub">{{$chiledPermission}}</span> <br>
                        @endif
                        @endforeach
                        @else
                        <span class="main"> {{$permissonName }}</span> > <span class="supSub"> {{$subPermission}} </span> <br>
                        @endif
                        @endforeach
                     </p>
                     @else
                     <p class="main">{{$permissonName}}</p>
                     @endif
                     @endforeach
                  </div>
                  <div id="addons-permission-section" class="mt-4 col-md-12 text-capitalize" style="display: none; background-color:white;height:550px;overflow:auto">
                     @if(!is_array($addOnPermissions))
                     @php 
                     $addOnPermissions = json_decode($addOnPermissions,true);
                     @endphp
                     @endif
                     @foreach($addOnPermissions as $permissonName => $permissionValue)
                     @if(is_array($permissionValue))
                     <p class="m-0 mb-1 ms-1">
                        @foreach($permissionValue as $subPermission => $subPermissionValue)
                        @if(is_array($subPermissionValue))
                        @foreach($subPermissionValue as $chiledPermission => $chiledValue)
                        @if($chiledValue === "1")
                        <span class="main">{{ $permissonName }} </span> > <span class="text-warning text-nowrap sub"> {{$subPermission}} </span> > <span class="text-nowrap supSub">{{$chiledPermission}}</span> <br>
                        @endif
                        @endforeach
                        @else
                        <span class="main"> {{$permissonName }}</span> > <span class="supSub"> {{$subPermission}} </span> <br>
                        @endif
                        @endforeach
                     </p>
                     @else
                     <p class="main">{{$permissonName}}</p>
                     @endif
                     @endforeach
                  </div>
               </div>
               @endif
               <!-- employee profile sections -->
               @if($empProfile)
               <div class="col-md-12 employee-profile mt-2">
                  <h6 class="bg-black text-white px-1 text-uppercase">Your Profile</h6>
                  <div class="row">
                     <div class="col-lg-6 bg-light-subtle shadow-sm">
                        <div class="d-flex justify-content-center align-items-center mt-2">
                           <img class="img-fluid rounded-circle w-25 h-25" src="{{optional($empProfile->empProfile)->candidate_photo}}" alt="profile-image">
                        </div>
                        <hr class="bg-dark my-1">
                        @if(!empty($empProfile->empProfile))
                        <div class="d-flex justify-content-between align-items-center" style="font-size:0.8rem">
                           <div class="reg-date">
                              <strong>Reg. Date:</strong>{{ \Carbon\Carbon::parse($empProfile->empProfile->registration_date)->format('d-M-Y') }}
                           </div>
                           <div class="join-date">
                              <strong>Join Date:</strong>{{\Carbon\Carbon::parse($empProfile->empProfile->join_date)->format('d-M-Y') }}
                           </div>
                        </div>
                        @endif
                        <div class="profile-details text-center">
                           <h6 class="text-uppercase fw-bold fs-6">{{$empProfile->name}}</h6>
                           <hr class="bg-dark my-1">
                           <h6>{{$empProfile->email}}</h6>
                           <hr class="bg-dark my-1">
                           <h6>{{$empProfile->mobile}}</h6>
                           <hr class="bg-dark my-1">
                           <h6>{{optional($empProfile->empProfile)->current_address ?? "Not found"}}</h6>
                           <hr class="bg-dark my-1">
                           <h6 class="text-capitalize">
                              <strong>Designation :</strong> {{ $empProfile->user_type }}
                           </h6>
                        </div>
                        <hr class="bg-dark my-1">
                     </div>
                     <div class="col-lg-6">
                        <div class="user-doc">
                           <h6 class="bg-black text-white px-1 text-uppercase text-center">Your Documents</h6>
                           <div class="d-flex justify-content-between align-items-center shadow-sm p-2">
                              <span>Aadhar Front</span>
                              <button class="btn btn-warning btn-sm show-doc" data-doctype="img" data-imgurl="{{optional($empProfile->empProfile)->aadhar_front}}" type="button">View</button>
                           </div>
                           <div class="d-flex justify-content-between align-items-center shadow-sm p-2">
                              <span>Aadhar Back</span>
                              <button class="btn btn-warning btn-sm show-doc" data-doctype="img" data-imgurl="{{optional($empProfile->empProfile)->aadhar_back}}" type="button">View</button>
                           </div>
                           <div class="d-flex justify-content-between align-items-center shadow-sm p-2">
                              <span>Your Signature</span>
                              <button class="btn btn-warning btn-sm show-doc" data-doctype="img" data-imgurl="{{optional($empProfile->empProfile)->candidate_signature}}" type="button">View</button>
                           </div>
                           <div class="d-flex justify-content-between align-items-center shadow-sm p-2">
                              <span>Experiece Letter</span>
                              <button class="btn btn-warning btn-sm show-doc" data-doctype="pdf" data-imgurl="{{optional($empProfile->empProfile)->experiece_letter}}" type="button">View</button>
                           </div>
                           <div class="d-flex justify-content-between align-items-center shadow-sm p-2">
                              <span>Bank Document</span>
                              <button class="btn btn-warning btn-sm show-doc" data-doctype="pdf" data-imgurl="{{optional($empProfile->empProfile)->bank_doc}}" type="button">View</button>
                           </div>
                           <div class="d-flex justify-content-between align-items-center shadow-sm p-2">
                              <span>Other Document</span>
                              <button class="btn btn-warning btn-sm show-doc" data-doctype="pdf" data-imgurl="{{optional($empProfile->empProfile)->other_doc}}" type="button">View</button>
                           </div>
                        </div>
                     </div>
                  </div>
                  <details class="persionalDetail">
                     <summary class="bg-black text-white px-1 text-uppercase">Personal Details</summary>
                     <div class="row">
                        <div class="col-lg-6">
                           <div class="d-flex justify-content-between align-items-center shadow-sm p-1">
                              <div class="attribute_name">Aadhar Card No</div>
                              <div class="">{{optional($empProfile->empProfile)->aadharcard_no}}</div>
                           </div>
                        </div>
                        <div class="col-lg-6">
                           <div class="d-flex justify-content-between align-items-center shadow-sm p-1">
                              <div class="attribute_name">Blood Group</div>
                              <div class="">{{optional($empProfile->empProfile)->blood_group}}</div>
                           </div>
                        </div>
                        <div class="col-lg-6">
                           <div class="d-flex justify-content-between align-items-center shadow-sm p-1">
                              <div class="attribute_name">Helth Issue</div>
                              <div class="">{{optional($empProfile->empProfile)->helth_issue !== "no" ? optional($empProfile->empProfile)->helth_description : "No"}}</div>
                           </div>
                        </div>
                        <div class="col-lg-6">
                           <div class="d-flex justify-content-between align-items-center shadow-sm p-1">
                              <div class="attribute_name">Marital Status</div>
                              <div class="">{{optional($empProfile->empProfile)->marital_status}}</div>
                           </div>
                        </div>
                        <div class="col-lg-6">
                           <div class="d-flex justify-content-between align-items-center shadow-sm p-1">
                              <div class="attribute_name">{{optional($empProfile->empProfile)->marital_status === 'UnMarried' ? 'Spouse Name' : "Father Name"}}</div>
                              <div class="">{{optional($empProfile->empProfile)->father_name}}</div>
                           </div>
                        </div>
                     </div>
                  </details>
                  <details class="bank-details-section my-2">
                     <summary class="bg-black text-white px-1 text-uppercase">Bank Details</summary>
                     <div class="row g-2">
                        <div class="col-lg-6">
                           <div class="bank-name p-2 shadow-sm">
                              <strong>Bank Name:</strong> {{ optional($empProfile->empProfile)->bank_name }}
                           </div>
                        </div>
                        <div class="col-lg-6">
                           <div class="bank-name p-2 shadow-sm">
                              <strong>IFCS Code:</strong> {{ optional($empProfile->empProfile)->Ifcs_code }}
                           </div>

                        </div>
                        <div class="col-lg-6">
                           <div class="bank-name p-2 shadow-sm">
                              <strong>Name:</strong> {{ optional($empProfile->empProfile)->holder_name }}
                           </div>

                        </div>
                        <div class="col-lg-6">
                           <div class="bank-name p-2 shadow-sm">
                              <strong>Account No. :</strong> {{ optional($empProfile->empProfile)->account_no }}
                           </div>
                        </div>
                     </div>
                  </details>
                  <details class="emp-permission-section">
                     <summary class="bg-black text-white px-1 text-uppercase">Your Permission</summary>
                     <div style="display: block; background-color:white;height:120px;overflow:auto">
                        @php $empPermission = $empProfile->empRollPermission->permissions; @endphp
                        @foreach($empPermission as $permissonName => $permissionValue)
                        @if(is_array($permissionValue))
                        <p class="m-0 mb-1 ms-1">
                           @foreach($permissionValue as $subPermission => $subPermissionValue)
                           @if(is_array($subPermissionValue))
                           @foreach($subPermissionValue as $chiledPermission => $chiledValue)
                           @if($chiledValue === "1")
                           <span class="main">{{ $permissonName }} </span> > <span class="text-warning text-nowrap sub"> {{$subPermission}} </span> > <span class="text-nowrap supSub">{{$chiledPermission}}</span> <br>
                           @endif
                           @endforeach
                           @else
                           <span class="main"> {{$permissonName }}</span> > <span class="supSub"> {{$subPermission}} </span> <br>
                           @endif
                           @endforeach
                        </p>
                        @elseif($permissionValue == "1")
                        <p class="main">{{$permissonName}}</p>
                        @endif
                        @endforeach
                     </div>
                  </details>
               </div>
               @endif
            </div>
         </div>
      </div>
      @php
      $userRoll = session('userRoll');
      $subscriptionTableShow = true;
      if($userRoll !== 'admin' && isset($empPermission['Subscription']) === "0" ){
      $subscriptionTableShow = false;
      }
      @endphp
      @if($subscriptionTableShow)
      <div class="row my-3">
         <div class="col-md-12 text-center" style="background-color: #F8F9FA;">
            <h1 class="m-2" style="font-size: 1rem; font-weight:700">SUBSCRIPTION DETAIL</h1>
            <table class="table table-striped table-bordered">
               <thead>
                  <tr style="font-size: 0.8rem; background-color:#333; color:white; ">
                     <th>Plan Detail</th>
                     <th>Start Date</th>
                     <th>End Date</th>
                     <th>Days Left</th>
                     <th>Discount(%)</th>
                     <th>No of Seats</th>
                     <th>Price</th>
                     <th>Amount</th>
                     <th>Pre. Rem.</th>
                     <th>Gst(%)</th>
                     <th>AddOn Amount</th>
                     <th>Paid</th>
                     <th>Status</th>
                     <th>Bill</th>
                     <th>Detail</th>
                  </tr>
               </thead>
               <tbody style="font-size: 0.8rem;">
                  @forelse($allSubscriptionDetails as $subscription)
                  <tr>

                     <td>{{ $subscription->subscriptionDetail->package_category ?? "details not found" }} ({{ $subscription->subscriptionDetail->package_duration ?? "null" }}) ({{ $subscription->subscriptionDetail->package_title ?? "null"}})</td>
                     <td>{{\Carbon\Carbon::parse($subscription->startdate)->format('d-M-Y')}}</td>
                     <td>{{\Carbon\Carbon::parse($subscription->enddate)->format('d-M-Y')}}</td>
                     <td>{{$subscription->counter}}</td>
                     <td>{{$subscription->discountOnPlan}}</td>
                     <td>{{$subscription->no_of_seats}}</td>
                     <td>{{$subscription->plan_price}}</td>
                     <td>{{$subscription->total_amount}}</td>
                     <td>{{$subscription->pre_remaning_amount}}</td>
                     <td>{{$subscription->plan_gst}}</td>
                     <td>{{$subscription->AddOn_itemAmount}}</td>
                     <td>{{$subscription->paid_amount}}</td>
                     <td>{{$subscription->status ? 'Active' : 'Inactive'}}</td>
                     <td>
                        @if($subscription->bill_pdf)
                        <a href="{{ $subscription->bill_pdf }}">View</a>
                        @else
                        View
                        @endif
                     </td>
                     <td>{{$subscription->plan_action}}</td>
                  </tr>
                  @empty
                  <tr>
                     <td colspan="12">Subscription details not found</td>
                  </tr>
                  @endforelse
               </tbody>
            </table>
         </div>
      </div>
      @endif
   </div>
</div>

<div class="modal fade" id="editprofile" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-scrollable modal-fullscreen-sm-down modal-xl">
      <form method="POST" action="{{ route('updateprofile', ['id' => $user_db_user_id]) }}" enctype="multipart/form-data">
         @csrf
         <div class="modal-content">
            <div class="modal-header">
               <input type="hidden" name="id" value="{{ $user_db_user_id }}">
               <h5 class="modal-title  flex-fill text-white bg-dark text-center" id="exampleModalLabel">Update Business Profile</h5>
               <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
               <div class="row mb-5">
                  <div class="col-md-6 hostelregi1">
                     <label class="form-label">First Name <span class="text-danger">*</span></label>
                     <input type="text" name="fname" id="name" placeholder="First Name" class="form-control text-capitalize" pattern="[A-Za-z ]+" title="Please enter letters only" oninput="removeUnwnatedInputCharecter(this,'char')" value="{{$profile->fname }}" required>
                  </div>
                  <div class="col-md-6 hostelregi1">
                     <label class="form-label">Last Name <span class="text-danger">*</span></label>
                     <input type="text" name="lname" id="name" placeholder="Last Name" class="form-control text-capitalize" pattern="[A-Za-z ]+" title="Please enter letters only" value="{{$profile->lname }}" oninput="removeUnwnatedInputCharecter(this,'char')" required>
                  </div>
                  <div class="col-md-6 hostelregi1 mt-3">
                     <label class="form-label">Email <span class="text-danger">*</span></label>
                     <input type="email" name="email" placeholder="Email" class="form-control" value="{{$profile->email }}" required>
                  </div>
                  <div class="col-md-6 hostelregi1 mt-3">
                     <label class="form-label">Mobile<span class="text-danger">*</span></label>
                     <input type="tel" name="mobile" placeholder="Mobile" pattern="[0-9]{10}" maxlength="10" title="Please enter a valid 10-digit mobile number" class="form-control" value="{{$profile->mobile }}" oninput="removeUnwnatedInputCharecter(this,'number')" required>
                  </div>
                  <div class="col-md-6 hostelregi1 mt-3">
                     <label class="form-label">Alternate Mobile</label>
                     <input type="tel" name="mobile_secondary" placeholder="Alternate Mobile" maxlength="10" pattern="[0-9]{10}" title="Please enter a valid 10-digit mobile number" class="form-control" value="{{$profile->mobile_secondary }}" oninput="removeUnwnatedInputCharecter(this,'number')">
                  </div>
                  <div class="col-md-6 hostelregi1 mt-3">
                     <label class="form-label">GST No.</label>
                     <input type="text" name="gst_no" placeholder="GST No." class="form-control" value="{{$profile->gst_no }}">
                  </div>
                  <div class="col-md-6 hostelregi1 mt-3">
                     <label class="form-label">Business Name <span class="text-danger">*</span></label>
                     <input type="text" name="businessname" placeholder="Business Name" class="form-control" value="{{$profile->businessname }}" required>
                  </div>
                  <div class="col-md-6 hostelregi1 mt-3">
                     <label class="form-label">City<span class="text-danger">*</span></label>
                     <input type="text" name="city" placeholder="City" class="form-control" pattern="[A-Za-z ]+" title="Please enter letters only" value="{{$profile->city }}" oninput="removeUnwnatedInputCharecter(this,'char')" required>
                  </div>
                  <div class="col-md-6 hostelregi1 mt-3">
                     <label class="form-label">State<span class="text-danger">*</span></label>
                     <input type="text" name="state" placeholder="State" class="form-control" pattern="[A-Za-z ]+" title="Please enter letters only" value="{{$profile->state }}" oninput="removeUnwnatedInputCharecter(this,'char')" required>
                  </div>
                  <div class="col-md-6 hostelregi1 mt-3">
                     <label class="form-label">Country<span class="text-danger">*</span></label>
                     <input type="text" name="country" placeholder="Country" class="form-control" pattern="[A-Za-z ]+" title="Please enter letters only" value="{{$profile->country }}" oninput="removeUnwnatedInputCharecter(this,'char')" required>
                  </div>
                  <div class="col-md-6 hostelregi1 mt-3">
                     <label class="form-label">Address<span class="text-danger">*</span></label>
                     <input type="text" name="address" class="form-control" placeholder=" Address" value="{{$profile->address }}" required>
                  </div>
                  <div class="col-md-6 hostelregi1 mt-3">
                     <label class="form-label">Pincode<span class="text-danger">*</span></label>
                     <input type="text" name="pincode" class="form-control" placeholder="pincode" maxlength="6" pattern="[0-9]{6}" title="Please enter a valid 6-digit Pincode number" value="{{$profile->pincode }}" oninput="removeUnwnatedInputCharecter(this,'number')" required>
                  </div>
               </div>
            </div>
            <div class="modal-footer flex-fill">
               <button class="btn btn-warning" type="submit">Update</button>
            </div>
         </div>
      </form>
   </div>
</div>
<div class="modal fade" id="empDocShowModal" tabindex="-1">
   <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title">Document</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div class="modal-body">
            <div class="d-flex justify-content-center align-items-center">
               <img class="img-fluid emp-image" src="" alt="doc-img" style="display: none;">
            </div>
            <embed class="emp-pdf-doc" src="" type="application/pdf" style="display: none;" width="100%" height="300px">
            <p class="text-center message-warning" style="display:none;"></p>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-warning" data-bs-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>
<script>
   $(document).ready(function() {

      $(".show-doc").on('click', function() {
         const docUrl = $(this).data('imgurl');
         const docType = $(this).data('doctype');

         // Hide both elements initially
         $(".emp-image, .emp-pdf-doc, .message-warning").hide();
         if (!docUrl) {
            $(".message-warning").text("No document available").show();
         } else if (docType === 'img') {
            $(".emp-image").attr('src', docUrl).show();
         } else if (docType === 'pdf') {
            $(".emp-pdf-doc").attr('src', docUrl).show();
         }

         // Show the modal
         $('#empDocShowModal').modal('show');
      });

      const planPermissionButton = $("#plan-permission-toggle");
      const addonsPermissionButton = $("#addons-permission-toggle");

      // Get references to the sections
      const planPermissionSection = $("#plan-permission-section");
      const addonsPermissionSection = $("#addons-permission-section");

      // Function to toggle button styles and sections visibility
      function toggleButtonStylesAndSections(activeButton, inactiveButton, showSection, hideSection) {
         $(activeButton).addClass("btn-warning").removeClass("btn-secondary");
         $(inactiveButton).addClass('btn-secondary').removeClass("btn-warning");
         $(showSection).show();
         $(hideSection).hide();
      }

      // Initialize the buttons' styles and sections visibility
      toggleButtonStylesAndSections(planPermissionButton, addonsPermissionButton, planPermissionSection, addonsPermissionSection);

      // Event listeners for button clicks
      planPermissionButton.on("click", function() {
         toggleButtonStylesAndSections(planPermissionButton, addonsPermissionButton, planPermissionSection, addonsPermissionSection);
      });

      addonsPermissionButton.on("click", function() {
         toggleButtonStylesAndSections(addonsPermissionButton, planPermissionButton, addonsPermissionSection, planPermissionSection);
      });


   });
</script>
@endsection
<script>
   function removeUnwnatedInputCharecter(input, inputAccecept) {
      if (inputAccecept === "char") {
         input.value = input.value.replace(/[^a-zA-Z] /g, "");
      } else if (inputAccecept === "number") {
         input.value = input.value.replace(/[^0-9.]/g, "");
      }
   }
</script>