@extends('admin.layouts.app')

@section('title', $customer ? 'Edit Customer' : 'Add Customer')

@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;
}
#customer-map {
  width: 100%;
  height: 400px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.pac-container {
  z-index: 10000;
}
</style>
@endpush

@section('content')
@php
    $isEdit = $customer !== null;
    $pkgAmount = (float) ($customer?->PkgAmount ?? 0);
    $paidAmount = (float) ($customer?->PaidAmount ?? 0);
    $balAmount = $pkgAmount - $paidAmount;
@endphp

<h4 class="font-weight-bold py-3 mb-0">Customers</h4>

@if ($isWebsiteRegistration)
<div class="alert alert-warning">
  <strong>Website registration request.</strong> This customer registered from the website. Review package, payment, and executive details, then set <strong>Status</strong> to <strong>Active</strong> to approve.
  <a href="{{ route('admin.registration-requests.index') }}" class="alert-link ml-2">Back to Registration Request</a>
</div>
@endif

@if ($isEdit && ($customer?->Options2 ?? '') === 'registration_sms_sent')
<div class="alert alert-info py-2">
  <i class="fab fa-whatsapp mr-1"></i> Registration WhatsApp already sent to this customer (will not send again).
</div>
@elseif ($isEdit && (int) $customer?->Status === 0)
<div class="alert alert-secondary py-2">
  <i class="fab fa-whatsapp mr-1"></i> Registration WhatsApp will be sent once when you set <strong>Status</strong> to <strong>Active</strong>.
</div>
@endif

<div class="card mb-4">
<div class="card-body">
<form id="validation-form" method="POST" enctype="multipart/form-data" action="{{ $isEdit ? route('admin.customers.update', $customer) : route('admin.customers.store') }}">
@csrf
@if ($isEdit)
    @method('PUT')
    <input type="hidden" name="from" value="{{ $from }}">
@endif
<input type="hidden" name="id" value="{{ $customer?->id ?? '' }}" id="userid">

<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', $customer?->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', $customer?->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', $customer?->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', $customer?->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', $customer?->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', $customer?->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', $customer?->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-3">
<label class="form-label">Lattitude</label>
<input type="text" name="latitude" id="latitude" class="form-control" value="{{ $mapLatitude ?? old('latitude', $customer?->Lattitude ?? '') }}">
</div>
<div class="form-group col-md-3">
<label class="form-label">Longitude</label>
<input type="text" name="longitude" id="longitude" class="form-control" value="{{ $mapLongitude ?? old('longitude', $customer?->Longitude ?? '') }}">
</div>

<div class="form-group col-md-3">
  <label class="form-label">Country</label>
  <select class="select2-demo form-control" name="CountryId" id="CountryId">
    <option selected disabled>Select Country</option>
    @foreach ($countries as $country)
      <option value="{{ $country->id }}" @selected((int) old('CountryId', $customer?->CountryId ?? 1) === (int) $country->id)>{{ $country->Name }}</option>
    @endforeach
  </select>
</div>
<div class="form-group col-md-3">
  <label class="form-label">State </label>
  <select class="select2-demo form-control" id="StateId" name="StateId">
    <option selected disabled>Select State</option>
    @foreach ($states as $state)
      <option value="{{ $state->id }}" @selected((int) old('StateId', $customer?->StateId ?? 1) === (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="select2-demo 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', $customer?->CityId ?? 0) === (int) $city->id)>{{ $city->Name }}</option>
    @endforeach
  </select>
</div>
<div class="form-group col-md-3">
  <label class="form-label">Zone </label>
  <select class="select2-demo form-control" id="ZoneId" name="ZoneId">
    <option selected disabled>Select Zone</option>
    @foreach ($zones as $zone)
      <option value="{{ $zone->id }}" @selected((int) old('ZoneId', $customer?->ZoneId ?? 0) === (int) $zone->id)>{{ $zone->Name }}</option>
    @endforeach
  </select>
</div>
<div class="form-group col-md-2">
  <label class="form-label">Ward No </label>
  <select class="select2-demo form-control" id="WardId" name="WardId">
    <option selected disabled>Select Ward No</option>
    @foreach ($wards as $ward)
      <option value="{{ $ward->id }}" @selected((int) old('WardId', $customer?->WardId ?? 0) === (int) $ward->id)>{{ $ward->Name }}</option>
    @endforeach
  </select>
</div>
<div class="form-group col-md-2">
  <label class="form-label">Area </label>
  <select class="select2-demo form-control" id="AreaId" name="AreaId">
    <option selected disabled>Select Area</option>
    @foreach ($areas as $area)
      <option value="{{ $area->id }}" @selected((string) old('AreaId', $customer?->AreaId ?? '') === (string) $area->id)>{{ $area->Name }}</option>
    @endforeach
  </select>
</div>
<div class="form-group col-md-2">
<label class="form-label">Pincode No </label>
<input type="text" name="Pincode" id="Pincode" class="form-control" placeholder="Pincode No" value="{{ old('Pincode', $customer?->Pincode ?? '') }}" autocomplete="off">
</div>

<div class="form-group col-lg-12">
<label class="form-label">Search Address</label>
<input type="text" id="address-search" class="form-control" placeholder="Type address to search..." autocomplete="off">
<small class="text-muted">Select an address from the list, drag the marker, or click on the map to set location.</small>
</div>
<div class="form-group col-lg-12">
<div id="customer-map"></div>
</div>

<div class="form-group col-lg-12">
<label class="form-label">Address <span class="text-danger">*</span></label>
<textarea name="Address" id="Address" class="form-control" required>{{ old('Address', $customer?->Address ?? '') }}</textarea>
</div>
<div class="form-group col-lg-12">
<label class="form-label">Google Location Link </label>
<textarea name="LocationLink" id="LocationLink" class="form-control" rows="2">{{ old('LocationLink', $customer?->LocationLink ?? '') }}</textarea>
<small class="text-muted">Paste a Google Maps link to auto-detect latitude and longitude on edit.</small>
</div>

@if (!empty($resolvedLocationFromLink))
<div class="form-group col-lg-12">
<div class="alert alert-info py-2 mb-0">
  Location loaded from Google Location Link. Review the map marker and save to store latitude and longitude.
</div>
</div>
@endif

<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 ($isEdit && !empty($customer?->Photo))
  <span id="show_photo">
    <div class="ui-feed-icon-container float-left pt-2 mr-3 mb-3">
      <form action="{{ route('admin.customers.photo.destroy', $customer) }}" method="POST" 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" id="delete_photo"></button>
      </form>
      <img src="{{ $customer?->photoUrl() }}" alt="" class="img-fluid ticket-file-img" style="width: 64px;height: 64px;">
    </div>
  </span>
  @endif
</div>

@php $assignedPackageId = (int) old('PackageId', $customer?->PackageId ?? 0); @endphp
<div class="form-group col-md-3">
  <label class="form-label">Select Package <span class="text-danger">*</span></label>
  <select class="form-control" name="PackageId" id="PackageId" required onchange="getPackageDetails(this.value)">
    <option value="" disabled @selected($assignedPackageId === 0)>Select Package</option>
    @foreach ($packages as $package)
      <option
        value="{{ $package->id }}"
        data-duration="{{ $package->Duration }}"
        data-period="{{ $package->Period }}"
        data-amount="{{ $package->Amount }}"
        @selected($assignedPackageId === (int) $package->id)
      >{{ $package->Name }} (₹{{ $package->Amount }})</option>
    @endforeach
  </select>
</div>

<div class="form-group col-md-3">
  <label class="form-label">Start From <span class="text-danger">*</span></label>
  <input type="date" name="PkgDate" id="PkgDate" class="form-control"
         value="{{ old('PkgDate', optional($customer?->PkgDate ?? null)->format('Y-m-d') ?: date('Y-m-d')) }}"
         onchange="autoCalculateValidity()" required>
</div>
<div class="form-group col-md-3">
  <label class="form-label">Validity <span class="text-danger">*</span></label>
  <input type="date" name="Validity" id="Validity" class="form-control"
         value="{{ old('Validity', optional($customer?->Validity ?? null)->format('Y-m-d')) }}" required>
</div>
<div class="form-group col-md-3">
  <label class="form-label">Amount <span class="text-danger">*</span></label>
  <input type="text" name="PkgAmount" id="PkgAmount" class="form-control" value="{{ old('PkgAmount', $customer?->PkgAmount ?? '') }}" readonly>
</div>
<div class="form-group col-md-2">
  <label class="form-label">Paid Amount <span class="text-danger">*</span></label>
  <input type="text" name="PaidAmount" id="PaidAmount" class="form-control" value="{{ old('PaidAmount', $customer?->PaidAmount ?? '') }}" required @if($isEdit) readonly @endif>
</div>
<div class="form-group col-md-3">
  <label class="form-label">Balance Amount <span class="text-danger">*</span></label>
  <input type="text" name="BalAmount" id="BalAmount" class="form-control" value="{{ old('BalAmount', number_format($balAmount, 2, '.', '')) }}" readonly>
</div>
<div class="form-group col-md-3">
<label class="form-label">Payment Mode <span class="text-danger">*</span></label>
  <select class="form-control" id="PayMode" name="PayMode" required>
    <option value="" disabled @selected(old('PayMode', $customer?->PayMode ?? '') === '')>Select Pay Mode</option>
    <option value="Cash" @selected(old('PayMode', $customer?->PayMode ?? '') === 'Cash')>Cash</option>
    <option value="UPI" @selected(old('PayMode', $customer?->PayMode ?? '') === 'UPI')>UPI</option>
  </select>
</div>
<div class="form-group col-md-2">
<label class="form-label">Paid Status <span class="text-danger">*</span></label>
  <select class="form-control" id="PaidStatus" name="PaidStatus" required>
    <option value="" disabled @selected(old('PaidStatus', $customer?->PaidStatus ?? '') === '' || old('PaidStatus', $customer?->PaidStatus ?? null) === null)>Select Paid Status</option>
    <option value="1" @selected((string) old('PaidStatus', $customer?->PaidStatus ?? '') === '1')>Paid</option>
    <option value="0" @selected((string) old('PaidStatus', $customer?->PaidStatus ?? '') === '0')>Un-Paid</option>
  </select>
</div>
<div class="form-group col-md-2">
<label class="form-label">Status <span class="text-danger">*</span></label>
  <select class="form-control" id="Status" name="Status" required>
    <option value="" disabled @selected(old('Status', $customer?->Status ?? '') === '' || old('Status', $customer?->Status ?? null) === null)>Select Status</option>
    <option value="1" @selected((string) old('Status', $customer?->Status ?? '') === '1')>Active</option>
    <option value="0" @selected((string) old('Status', $customer?->Status ?? '') === '0')>Inctive</option>
  </select>
</div>
<div class="form-group col-md-12">
  <label class="form-label">Assign Executive </label>
  <select class="select2-demo form-control" id="ExeId" name="ExeId">
    <option value="" disabled @selected(empty(old('ExeId', $customer?->ExeId ?? null)))>Select Executive</option>
    @foreach ($executives as $executive)
      <option value="{{ $executive->id }}" @selected((int) old('ExeId', $customer?->ExeId ?? 0) === (int) $executive->id)>{{ trim($executive->Fname.' '.$executive->Lname) }}</option>
    @endforeach
  </select>
</div>
<div class="form-group col-lg-12">
<label class="form-label">Order Instruction/Details </label>
<textarea name="Details" class="form-control">{{ old('Details', $customer?->Details ?? '') }}</textarea>
</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 getPackageDetails(packageId) {
  const select = document.getElementById('PackageId');
  const option = select.options[select.selectedIndex];
  const PkgAmount = option.getAttribute('data-amount');
  const duration = option.getAttribute('data-duration');
  const period = parseInt(option.getAttribute('data-period')) || 0;
  const startInput = document.getElementById('PkgDate');
  const validityInput = document.getElementById('Validity');
  $('#PkgAmount').val(PkgAmount);
  updateBalance();
  if (!startInput.value) {
    startInput.value = new Date().toISOString().split('T')[0];
  }
  const startDate = new Date(startInput.value);
  if (duration === 'Day') {
    startDate.setDate(startDate.getDate() + period);
  } else if (duration === 'Month') {
    startDate.setMonth(startDate.getMonth() + period);
  } else if (duration === 'Week') {
    startDate.setDate(startDate.getDate() + (period * 7));
  } else if (duration === 'Year') {
    startDate.setFullYear(startDate.getFullYear() + period);
  }
  validityInput.value = startDate.toISOString().split('T')[0];
}

function autoCalculateValidity() {
  const select = document.getElementById('PackageId');
  if (select.value) {
    getPackageDetails(select.value);
  }
}

function updateBalance() {
  const pkg = parseFloat($('#PkgAmount').val()) || 0;
  const paid = parseFloat($('#PaidAmount').val()) || 0;
  const balance = pkg - paid;
  $('#BalAmount').val(balance.toFixed(2));
  $('#BalAmount').css('color', balance < 0 ? 'red' : 'black');
}

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.addEventListener('DOMContentLoaded', () => {
  const userId = document.getElementById('userid').value;
  const isEditMode = (userId && userId.trim() !== '');
  if (!isEditMode) {
    const select = document.getElementById('PackageId');
    if (select.value) {
      getPackageDetails(select.value);
    } else {
      document.getElementById('PkgDate').value = new Date().toISOString().split('T')[0];
    }
  }
  $('#PaidAmount').on('input', updateBalance);
});

$(document).ready(function(){
  $(document).on("change", "#CountryId", function(){
    $.get(@json(url('/admin/customers/lookups/states')) + '/' + this.value, function(data){
      $('#StateId').html(data);
      $('#CityId').html('<option value="" selected disabled>Select City/District</option>');
      $('#ZoneId').html('<option value="" selected disabled>Select Zone</option>');
      $('#WardId').html('<option value="" selected disabled>Select Ward No</option>');
      $('#AreaId').html('<option value="" selected disabled>Select Area</option>');
    });
  });
  $(document).on("change", "#StateId", function(){
    $.get(@json(url('/admin/customers/lookups/cities')) + '/' + this.value, function(data){
      $('#CityId').html(data);
      $('#ZoneId').html('<option value="" selected disabled>Select Zone</option>');
      $('#WardId').html('<option value="" selected disabled>Select Ward No</option>');
      $('#AreaId').html('<option value="" selected disabled>Select Area</option>');
    });
  });
  $(document).on("change", "#CityId", function(){
    $.get(@json(url('/admin/customers/lookups/zones')) + '/' + this.value, function(data){
      $('#ZoneId').html(data);
      $('#WardId').html('<option value="" selected disabled>Select Ward No</option>');
      $('#AreaId').html('<option value="" selected disabled>Select Area</option>');
    });
  });
  $(document).on("change", "#ZoneId", function(){
    $.get(@json(url('/admin/customers/lookups/wards')) + '/' + this.value, function(data){
      $('#WardId').html(data);
      $('#AreaId').html('<option value="" selected disabled>Select Area</option>');
    });
  });
  $(document).on("change", "#WardId", function(){
    $.get(@json(url('/admin/customers/lookups/areas')) + '/' + this.value, function(data){
      $('#AreaId').html('<option value="" selected disabled>Select Area</option>' + data);
    });
  });
});

let customerMap;
let customerMarker;
let customerGeocoder;
let customerAutocomplete;

function updateCustomerCoordinates(latLng) {
  document.getElementById('latitude').value = latLng.lat().toFixed(6);
  document.getElementById('longitude').value = latLng.lng().toFixed(6);
  document.getElementById('LocationLink').value = 'https://www.google.com/maps?q=' + latLng.lat() + ',' + latLng.lng();
}

function applyCustomerMapLocation(lat, lng, updateAddress) {
  const location = new google.maps.LatLng(lat, lng);

  customerMap.setCenter(location);
  customerMap.setZoom(17);
  customerMarker.setPosition(location);
  customerMarker.setVisible(true);
  document.getElementById('latitude').value = Number(lat).toFixed(6);
  document.getElementById('longitude').value = Number(lng).toFixed(6);

  if (updateAddress) {
    reverseGeocodeCustomerLocation(location);
  }
}

function resolveCustomerLocationFromLink() {
  const locationLink = document.getElementById('LocationLink').value.trim();

  if (!locationLink || !customerMap) {
    return;
  }

  $.ajax({
    url: @json(route('admin.customers.resolve-location')),
    method: 'POST',
    data: {
      _token: @json(csrf_token()),
      url: locationLink,
    },
    success: function(response) {
      if (!response.success) {
        return;
      }

      applyCustomerMapLocation(response.latitude, response.longitude, true);
    },
  });
}

function updateCustomerPincode(addressComponents) {
  if (!addressComponents) {
    return;
  }

  for (const component of addressComponents) {
    if (component.types.includes('postal_code')) {
      document.getElementById('Pincode').value = component.long_name;
      break;
    }
  }
}

function reverseGeocodeCustomerLocation(latLng) {
  customerGeocoder.geocode({ location: latLng }, function(results, status) {
    if (status !== 'OK' || !results[0]) {
      return;
    }

    document.getElementById('Address').value = results[0].formatted_address;
    updateCustomerPincode(results[0].address_components);
    updateCustomerCoordinates(latLng);
  });
}

function setCustomerMarkerPosition(latLng, updateAddress) {
  customerMarker.setPosition(latLng);
  customerMarker.setVisible(true);
  updateCustomerCoordinates(latLng);

  if (updateAddress) {
    reverseGeocodeCustomerLocation(latLng);
  }
}

window.initCustomerMap = function() {
  const latitudeInput = document.getElementById('latitude');
  const longitudeInput = document.getElementById('longitude');
  const addressInput = document.getElementById('Address');
  const addressSearchInput = document.getElementById('address-search');
  const savedLat = parseFloat(latitudeInput.value);
  const savedLng = parseFloat(longitudeInput.value);
  const hasSavedLocation = !Number.isNaN(savedLat) && !Number.isNaN(savedLng);
  const defaultCenter = hasSavedLocation
    ? { lat: savedLat, lng: savedLng }
    : { lat: 21.1458, lng: 79.0882 };

  if (addressInput.value) {
    addressSearchInput.value = addressInput.value;
  }

  customerGeocoder = new google.maps.Geocoder();

  customerMap = new google.maps.Map(document.getElementById('customer-map'), {
    center: defaultCenter,
    zoom: hasSavedLocation ? 17 : 12,
    mapTypeControl: true,
    streetViewControl: false,
  });

  customerMarker = new google.maps.Marker({
    map: customerMap,
    position: defaultCenter,
    draggable: true,
    visible: hasSavedLocation,
  });

  customerAutocomplete = new google.maps.places.Autocomplete(
    document.getElementById('address-search'),
    {
      componentRestrictions: { country: 'in' },
      fields: ['address_components', 'geometry', 'formatted_address', 'name'],
    }
  );

  customerAutocomplete.addListener('place_changed', function() {
    const place = customerAutocomplete.getPlace();

    if (!place.geometry || !place.geometry.location) {
      return;
    }

    customerMap.setCenter(place.geometry.location);
    customerMap.setZoom(17);
    customerMarker.setPosition(place.geometry.location);
    customerMarker.setVisible(true);
    document.getElementById('Address').value = place.formatted_address || '';
    updateCustomerPincode(place.address_components);
    updateCustomerCoordinates(place.geometry.location);
  });

  customerMarker.addListener('dragend', function() {
    reverseGeocodeCustomerLocation(customerMarker.getPosition());
  });

  customerMap.addListener('click', function(event) {
    setCustomerMarkerPosition(event.latLng, true);
  });

  if (navigator.geolocation && !hasSavedLocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      const currentLocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude,
      };

      customerMap.setCenter(currentLocation);
    });
  }

  $('#LocationLink').on('blur', resolveCustomerLocationFromLink);
};
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google_maps.key') }}&libraries=places&callback=initCustomerMap"></script>
@endpush