@extends('admin.layouts.app')

@section('title', 'Executive')

@push('styles')
<style type="text/css">
.password-tog-info {
  display: inline-block;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  position: absolute;
  right: 50px;
  top: 30px;
  text-transform: uppercase;
  z-index: 2;
}
</style>
@endpush

@section('content')
<h4 class="font-weight-bold py-3 mb-0">Executive</h4>

<div class="card mb-4">
<div class="card-body">
<form id="validation-form" method="post" enctype="multipart/form-data" action="{{ $executive ? route('admin.executives.update', $executive) : route('admin.executives.store') }}">
@csrf
@if ($executive)
    @method('PUT')
@endif

<div class="form-row">
<div class="form-group col-md-4">
<label class="form-label">First Name <span class="text-danger">*</span></label>
<input type="text" name="Fname" id="Fname" class="form-control" placeholder="First Name" value="{{ old('Fname', $executive->Fname ?? '') }}" autocomplete="off" required>
</div>
<div class="form-group col-md-4">
<label class="form-label">Middle Name </label>
<input type="text" name="Mname" id="Mname" class="form-control" placeholder="Middle Name" value="{{ old('Mname', $executive->Mname ?? '') }}" autocomplete="off">
</div>
<div class="form-group col-md-4">
<label class="form-label">Last Name <span class="text-danger">*</span></label>
<input type="text" name="Lname" id="Lname" class="form-control" placeholder="Last Name" value="{{ old('Lname', $executive->Lname ?? '') }}" autocomplete="off" required>
</div>
<div class="form-group col-md-6">
<label class="form-label">Email Id </label>
<input type="email" name="EmailId" id="EmailId" class="form-control" placeholder="Email Id" value="{{ old('EmailId', $executive->EmailId ?? '') }}" autocomplete="off">
</div>
<div class="form-group col-md-6">
<label class="form-label">Mobile No <span class="text-danger">*</span></label>
<input type="text" name="Phone" id="Phone" class="form-control" placeholder="Mobile No" value="{{ old('Phone', $executive->Phone ?? '') }}" required>
</div>
<div class="form-group col-md-6">
<label class="form-label">Another Mobile No</label>
<input type="text" name="Phone2" class="form-control" placeholder="Another Mobile No" value="{{ old('Phone2', $executive->Phone2 ?? '') }}">
</div>
<div class="form-group col-md-6">
<label class="form-label">Password</label>
<input type="password" name="Password" id="Password" class="form-control" placeholder="Password" value="{{ old('Password', $executive->Password ?? '') }}">
<span class="password-tog-info show2" onclick="myFunction2()"><i class="fa fa-eye" aria-hidden="true"></i></span>
</div>

<div class="form-group col-md-6">
<label class="form-label">Lattitude</label>
<input type="text" name="latitude" id="latitude" class="form-control" value="{{ old('latitude', $executive->Lattitude ?? '') }}">
</div>
<div class="form-group col-md-6">
<label class="form-label">Longitude</label>
<input type="text" name="longitude" id="longitude" class="form-control" value="{{ old('longitude', $executive->Longitude ?? '') }}">
</div>

<div class="form-group col-md-3">
<label class="form-label">Country <span class="text-danger">*</span></label>
<select class="form-control" name="CountryId" id="CountryId" required>
<option selected disabled>Select Country</option>
@foreach ($countries as $country)
<option value="{{ $country->id }}" @selected((int) old('CountryId', $executive->CountryId ?? 1) === (int) $country->id)>{{ $country->Name }}</option>
@endforeach
</select>
</div>
<div class="form-group col-md-3">
<label class="form-label">State <span class="text-danger">*</span></label>
<select class="form-control" id="StateId" name="StateId" required>
<option selected disabled>Select State</option>
@foreach ($states as $state)
<option value="{{ $state->id }}" @selected((int) old('StateId', $executive->StateId ?? 0) === (int) $state->id)>{{ $state->Name }}</option>
@endforeach
</select>
</div>
<div class="form-group col-md-3">
<label class="form-label">City/District </label>
<select class="form-control" id="CityId" name="CityId">
<option selected disabled>Select City/District</option>
@foreach ($cities as $city)
<option value="{{ $city->id }}" @selected((int) old('CityId', $executive->CityId ?? 0) === (int) $city->id)>{{ $city->Name }}</option>
@endforeach
</select>
</div>
<div class="form-group col-md-3">
<label class="form-label">Zone <span class="text-danger">*</span></label>
<select class="select2-demo form-control" id="ZoneId" name="ZoneId" required>
<option selected disabled>Select Zone</option>
@foreach ($zones as $zone)
<option value="{{ $zone->id }}" @selected((int) old('ZoneId', $executive->ZoneId ?? 0) === (int) $zone->id)>{{ $zone->Name }}</option>
@endforeach
</select>
</div>

<div class="form-group col-md-10">
<label class="form-label">Ward No <span class="text-danger">*</span></label>
<select class="select2-demo form-control" id="WardId" name="WardId" required>
<option selected disabled>Select Ward No</option>
@foreach ($wards as $ward)
<option value="{{ $ward->id }}" @selected((string) old('WardId', $executive->WardId ?? '') === (string) $ward->id)>{{ $ward->Name }}</option>
@endforeach
</select>
</div>
<div class="form-group col-md-2">
<label class="form-label">Pincode No <span class="text-danger">*</span></label>
<input type="text" name="Pincode" class="form-control" placeholder="Pincode No" value="{{ old('Pincode', $executive->Pincode ?? '') }}" autocomplete="off" required>
</div>

<div class="form-group col-md-12">
<label class="form-label">Area <span class="text-danger">*</span></label>
<select class="select2-demo form-control" id="AreaId" name="AreaId[]" multiple required>
@foreach ($areas as $area)
<option value="{{ $area->id }}" @selected(in_array((int) $area->id, old('AreaId', $selectedAreas), true))>{{ $area->Name }}</option>
@endforeach
</select>
</div>

<div class="form-group col-lg-12">
<label class="form-label">Address <span class="text-danger">*</span></label>
<textarea name="Address" class="form-control" required>{{ old('Address', $executive->Address ?? '') }}</textarea>
</div>

<div class="form-group col-md-12">
<label class="form-label"> Profile Photo </label>
<label class="custom-file">
<input type="file" class="custom-file-input" name="Photo" style="opacity: 1;">
<span class="custom-file-label"></span>
</label>
@if ($executive && $executive->Photo)
<span id="show_photo">
<div class="ui-feed-icon-container float-left pt-2 mr-3 mb-3">
<form method="POST" action="{{ route('admin.executives.destroy-photo', $executive) }}" class="d-inline" onsubmit="return confirm('Are you sure you want to delete Profile Photo?');">
@csrf
@method('DELETE')
<button type="submit" class="ui-icon ui-feed-icon ion ion-md-close bg-secondary text-white border-0"></button>
</form>
<img src="{{ asset('uploads/'.$executive->Photo) }}" alt="" class="img-fluid ticket-file-img" style="width: 64px;height: 64px;">
</div>
</span>
@endif
</div>

<div class="form-group col-md-2">
<label class="form-label">Monthly Salary <span class="text-danger">*</span></label>
<input type="number" name="MonthlySalary" class="form-control" value="{{ old('MonthlySalary', $executive->MonthlySalary ?? '') }}" autocomplete="off" required>
</div>

<div class="form-group col-md-3">
<label class="form-label">Employee Profile <span class="text-danger">*</span></label>
<select class="form-control" id="EmpStatus" name="EmpStatus" required>
<option selected disabled value="">Select</option>
<option value="1" @selected((int) old('EmpStatus', $executive->MainBrEmp ?? 0) === 1)>Office Employee</option>
<option value="2" @selected((int) old('EmpStatus', $executive->MainBrEmp ?? 0) === 2)>Delivery Employee</option>
</select>
</div>

<div class="form-group col-md-3">
<label class="form-label">Attendance Location <span class="text-danger">*</span></label>
<select class="form-control" id="AttendanceLocation" name="AttendanceLocation" required>
<option selected disabled value="">Select</option>
<option value="1" @selected((int) old('AttendanceLocation', $executive->MarkAttendance ?? 1) === 1)>Mark from anywhere</option>
<option value="0" @selected((int) old('AttendanceLocation', $executive->MarkAttendance ?? 1) === 0)>Company location only</option>
</select>
</div>

<div class="form-group col-md-3">
<label class="form-label">Status <span class="text-danger">*</span></label>
<select class="form-control" id="Status" name="Status" required>
<option selected disabled value="">Select Status</option>
<option value="1" @selected((string) old('Status', $executive->Status ?? '') === '1')>Active</option>
<option value="0" @selected((string) old('Status', $executive->Status ?? '') === '0')>Inctive</option>
</select>
</div>
</div>
<button type="submit" name="submit" class="btn btn-primary btn-finish">Submit</button>
</form>
</div>
</div>
@endsection

@push('scripts')
<script type="text/javascript">
function myFunction2() {
  var x = document.getElementById("Password");
  if (x.type === "password") {
    x.type = "text";
    $('.show2').html('<i class="fa fa-eye-slash" aria-hidden="true"></i>');
  } else {
    x.type = "password";
    $('.show2').html('<i class="fa fa-eye" aria-hidden="true"></i>');
  }
}

$(document).ready(function(){
  $(document).on("change", "#CountryId", function(){
    $.ajax({
      url: "{{ route('admin.ajax.locations') }}",
      method: "POST",
      data: { _token: "{{ csrf_token() }}", action: "getState", id: this.value },
      success: function(data){ $('#StateId').html(data); }
    });
  });

  $(document).on("change", "#StateId", function(){
    $.ajax({
      url: "{{ route('admin.ajax.locations') }}",
      method: "POST",
      data: { _token: "{{ csrf_token() }}", action: "getCity", id: this.value },
      success: function(data){ $('#CityId').html(data); }
    });
  });

  $(document).on("change", "#CityId", function(){
    $.ajax({
      url: "{{ route('admin.ajax.locations') }}",
      method: "POST",
      data: { _token: "{{ csrf_token() }}", action: "getZone", id: this.value },
      success: function(data){ $('#ZoneId').html(data); }
    });
  });

  $(document).on("change", "#ZoneId", function(){
    $.ajax({
      url: "{{ route('admin.ajax.locations') }}",
      method: "POST",
      data: { _token: "{{ csrf_token() }}", action: "getWard", id: this.value },
      success: function(data){ $('#WardId').html(data); }
    });
  });

  $(document).on("change", "#WardId", function () {
    var wardIds = $(this).val();
    $.ajax({
      url: "{{ route('admin.ajax.locations') }}",
      method: "POST",
      data: { _token: "{{ csrf_token() }}", action: "getAreaMult", WardIds: Array.isArray(wardIds) ? wardIds : [wardIds] },
      success: function (data) {
        $('#AreaId').html(data);
        $('#AreaId option').prop('selected', true);
        $('#AreaId').trigger('change');
      }
    });
  });
});
</script>
@endpush