<% title = `${siteName} || Change Location` %>

<%- include('./partials/header') %> 

<style>
	/* General styling */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.toggle-switch {
  position: relative;
  width: 60px;
  height: 30px;
}

.toggle-checkbox {
  display: none;
}

.toggle-label {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  border-radius: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Inner background for active/inactive states */
.toggle-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background-color: #ccc;
  transition: background-color 0.3s ease;
}

/* Toggle button */
.toggle-switch-btn {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Checked state */
.toggle-checkbox:checked + .toggle-label .toggle-inner {
  background-color: #4caf50;
}

.toggle-checkbox:checked + .toggle-label .toggle-switch-btn {
  transform: translateX(30px);
}

</style>
    <main>
        <div class="mainWrapper">
            <%- include("./partials/sideBar") %> 
            <div class="rightContent">
                <%- include('./partials/topBar') %> 
                <div class="maincontent" style="height:100vh">

					<div class="toggle-switch">
						<input type="checkbox" id="toggle" class="toggle-checkbox" />
						<label for="toggle" class="toggle-label">
						  <span class="toggle-inner"></span>
						  <span class="toggle-switch-btn"></span>
						</label>
					  </div>
                
                    <div class="loginForm-wrapper">
                    <form class="location-form">
                        <h4 style="margin-bottom: 20px;">Update Package Current Location</h4>
                        <label for="tracking-id">Package Tracking Id</label>
                        <input id="tracking-id" type="text" name="trackingid" style="padding: 10px;">

                        <label for="location">New Location</label>
                        <input id="location" type="text" name="location" style="padding: 10px;">
                        <button class="btn" name="submit">Update Package Location</button>
                    </form>
                </div>
                </div>
            </div>
        </div>
    </main>


    <script type="module">
	import {notification, showSpinner, hideSpinner, closeNotification} from '/admin/js/notification.js';
	const locationForm = document.querySelector('.location-form');


	toastBtn.addEventListener('click', () => closeNotification(toast))

	const changePackageLocation = async (e) => {
		e.preventDefault();

		const trackingid = locationForm.trackingid.value;
        const location = locationForm.location.value;
		const btn = locationForm.submit;
		  
		const formData = { trackingid, location };

		showSpinner(btn)

		try {

            if(!trackingid || !location) {
                throw new Error('All fields are required')
            }

            console.log(1)

			const response = await fetch('/admin/change-location', {
				method: 'POST', 
				headers: { 'Content-Type': 'application/json'},
				body: JSON.stringify(formData)
			})

			if(!response.ok){
				throw new Error("location failed to change, please try again")
			}

			const result = await response.json();

			btn.textContent = 'Update Package Location';

			if(result.error) {
				throw new Error(result.error)
			}

			notification.success(result.message, toast, toastIcon, toastMessage, closeNotification)
			hideSpinner(btn, "Update Package Location");
            locationForm.reset()
			
		} catch (error) {
            console.log(error.message)
			notification.error(error.message, toast, toastIcon, toastMessage, closeNotification)
			hideSpinner(btn, "Update Package Location")
		}
	}

 	locationForm.addEventListener('submit', changePackageLocation)
</script>

<%- include('./partials/footer') %> 
