<% title = `${siteName} || Create package` %>
<%- include('./partials/header') %> 
    <main>

        <style>
            .section-divider {
                /* display: inline-block; */
                background-color: #2a7178;
                color: #fff;
                padding: 10px 5px;
                /* width: 50%; */
                margin-top: 10px;
            }
        </style>
        
        <div class="mainWrapper">
            <%- include("./partials/sideBar") %> 
            <div class="rightContent">
                <%- include('./partials/topBar') %> 
                <div class="mainContent">
                    <div class="formContainer">
                        <form class="create-form" method="post" enctype="multipart/form-data">
                            <h2>Create a Package </h2>

                            <div class="section-divider">Receiver Information</div>
                            <div class="formWrapper">
                                <div class="inputGroup">
                                    <label for="rname">Receiver's Name</label>
                                    <input id="rname" type="text" name="receiverName">
                                </div>
    
                                <div class="inputGroup">
                                    <label for="remail">Receiver's Email</label>
                                    <input id="remail" type="text" name="receiverEmail">
                                </div>

                                <div class="inputGroup">
                                    <label for="rnumber">Receiver's Number</label>
                                    <input id="rnumber" type="text" name="receiverNumber">
                                </div>
    
                                <div class="inputGroup">
                                    <label for="daddress">Receiver's Address</label>
                                    <input id="daddress" type="text" name="destination">
                                </div>

                                <div class="inputGroup">
                                    <label for="desCountry">Receiver's Country</label>
                                    <input id="desCountry" type="text" name="destinationCountry">
                                </div>

                            </div>
                            <div class="section-divider">Sender Information</div>
                            <div class="formWrapper">
                                <div class="inputGroup">
                                    <label for="sname">Sender's Name:</label>
                                    <input id="sname" type="text" name="senderName" title="senders name" >
                                </div>
    
                                <div class="inputGroup">
                                    <label for="semail">Sender's Email:</label>
                                    <input id="semail" type="text" name="senderEmail">
                                </div>
    
                                <div class="inputGroup">
                                    <label for="senderNumber">Sender's Phone Number</label>
                                    <input id="senderNumber" type="text" name="senderNumber">
                                </div>

                                <div class="inputGroup">
                                    <label for="originCountry">Origin Country</label>
                                    <input id="originCountry" type="text" name="originCountry">
                                </div>

                            </div>

                            <div class="section-divider">Package Information</div>
                            <div class="formWrapper">

                                <div class="inputGroup">
                                    <label for="pack">package </label>
                                    <input id="pack" type="text" name="packages" placeholder="what are you sending to client?">
                                </div>

                                <div class="inputGroup">
                                    <label for="weight">weight</label>
                                    <input id="weight" type="text" name="weight">
                                </div>

                                <div class="inputGroup">
                                    <label for="currentlocation">Current Location</label>
                                    <input id="currentlocation" type="text" name="currentLocation" placeholder="E.g United states">
                                </div>

                                <div class="inputGroup">
                                    <label for="shipmentMethod">Shipment Method</label>
                                    <select name="shipmentMethod" id="shipmentMethod">
                                        <option selected disabled>--select shipment method--</option>
                                        <option value="Express Delivery">Express Delivery</option>
                                        <option value="Standard Delivery">Standard Delivery</option>
                                    </select>
                                </div>

                                <!-- <div class="inputGroup">
                                    <label for="consignmentStatus">Consignment Status</label>
                                    <input id="consignmentStatus" type="text" name="consignmentStatus">
                                </div> -->

                                <div class="inputGroup">
                                    <label for="deliveryStatus">Delivery Status</label>
                                    <select name="deliveryStatus" id="deliveryStatus">
                                        <option selected disabled>--select Delivery status--</option>
                                        <option value="Ready">Ready</option>
                                        <option value="Finished">Finished</option>
                                        <option value="On Transit">On Transit</option>
                                        <!-- <option value="On Hold">On Hold</option> -->
                                        <!-- <option value="Landed">Landed</option> -->
                                        <!-- <option value="Delayed">Delayed</option>
                                        <option value="Custom Clearance">Custom Clearance</option> -->
                                        <!-- <option value="On Route">On Route</option> -->
                                        <option value="Delivered">Delivered</option>
                                        <!-- <option value="Custom Carrier">Custom Carrier</option>
                                        <option value="Clearance">Clearance</option>
                                        <option value="Permit">Permit</option> -->
                                    </select>
                                </div>

                                <!-- <div class="inputGroup">
                                    <label for="billingName">Billing Name</label>
                                    <input id="billingName" type="text" name="billingName">
                                </div> -->

                                <div class="inputGroup">
                                    <label for="shippingCost">Shipping cost</label>
                                    <input id="shippingCost" type="number" name="shippingCost">
                                </div>

                                <div class="inputGroup">
                                    <label for="subCost">Billing cost(Sub cost)</label>
                                    <input id="subCost" type="number" name="subCost">
                                </div>

                                <div class="inputGroup">
                                    <label for="totalCost">Total shipping cost</label>
                                    <input id="totalCost" type="number" name="totalCost">
                                </div>


                                <div class="inputGroup">
                                    <label for="depatureDate">Depature Date</label>
                                    <input id="depatureDate" type="date" name="depatureDate">
                                </div>

                                <div class="inputGroup">
                                    <label for="deliveryDate">Expected Delivery Date</label>
                                    <input id="deliveryDate" type="date" name="deliveryDate">
                                </div>


                                <div class="inputGroup">
                                    <label for="PickupDate">Pickup Time</label>
                                    <input id="PickupDate" type="text" name="pickupDate" placeholder="09:24:AM">
                                </div>

                                <div class="inputGroup">
                                    <label for="packageimg">upload package image</label>
                                    <input id="packageimg" type="file" name="image" multiple=true >
                                </div>

                                <!-- <div class="inputGroup">
                                    <label for="trackingId">Tracking Id</label>
                                    <input id="trackingId" type="text" name="trackingId" placeholder="Enter a tracking number">
                                </div> -->

                                
                            </div>
                            <button class="btn" type="submit" style="width: 75%;">Create</button>
                         <div id="result" style="display: flex; gap:10px; flex-wrap: wrap; flex-grow: 1;"></div>
                    
                        </form>
                    </div>
                </div>
            </div>
        </div>

            <!-- package receipt  -->
                <div class="receipt-container">
                    
                    <span class="close-icon">&times</span>
                    <button class="download download-action" data-id="">Download Invoice</button>
                     
                   <div class="receipt-wrapper">
                        <div style="border: 1px solid #f4f4f4; padding: 20px; ">
                            <div>
                                <p style="text-align: right; color: #666;"><span class="depatureDate">2024-08-20</span> || <span class="deliveryDate">2024-07-18</span></p>
                                <img src="/admin/images/receipt_logo.png" alt="logo" style="object-fit: contain;">
                            </div>
                            <hr style="border: 1px solid #f4f4f4; margin-top: 10px;">

                            <div style="display: flex; gap: 20px; justify-content: space-between; padding: 10px; color: #333; flex-wrap: wrap;" >
                                <div style="flex-grow: 1;">
                                    <span>From</span>
                                    <address style="margin-top: 10px; font-style: normal; line-height: 1.4;">
                                        <h4><strong><span class="sender-name">Chris Pine</span></strong></h4>
                                        <br>
                        
                                         <b>Phone:</b><span class="sender-number">+14244281832</span><br>
                                        <b>Address:</b><span class="sender-address" style="text-wrap: wrap;">6459 S Kline CT Littleton CO 80127</span><br>
                                        <b>Origin Country:</b><span class="origin-country">Turkey</span>
                                      </address>
                                </div>

                                <div style="flex-grow: 1;">
                                    <span>To</span>
                                    <address style="margin-top: 10px; font-style: normal; line-height: 1.4;">
                                        <h4><span class="receiver-name">Chris Pine</span></h4>
                                        <br>
                        
                                         <b>Phone:</b><span class="receiver-number">+14244281832</span><br>
                                        <b>Address:</b><span class="receiver-address" style="text-wrap: wrap;">6459 S Kline CT Littleton CO 80127</span><br>
                                        <b>Destination Country:</b><span class="destination-country">Turkey</span>
                                      </address>
                                </div>

                                <div style="flex-grow: 1;">
                                    <div>
                                        <img src="/admin/images/barcode.png" width="100" alt="barcode">
                                        <span style="padding: 0; margin: 0; display: block; font-size: 12px;" class="trackingCode">AXWGL4120606170967</span>
                                    </div>
                                    
                                    <br>
                                    <div style="line-height: 1.4; margin-top: 10px;">
                                        <b>Parcel Name:</b>&nbsp;&nbsp;<span class="parcel">Chris Pine Package</span><br>
                                        <b>Weight (Qty):</b>&nbsp;&nbsp;<span class="weight">50kg</span><br>
                                        <b>Tracking Code:</b>&nbsp;&nbsp;<span class="trackingCode">AXWGL4120606170967</span><br>
                                        <b>Shipping Cost:</b><small class="label label-success" style="padding: 1px; border-radius: 5px;">$ <span class="shippingCost"><%= (Number(20000.00).toLocaleString()) %></span></small><br>
                                        <b>Sub Cost:</b> <small class="label label-danger" style="padding: 1px; padding-left: 5px; border-radius: 5px;"><i class="fa-solid fa-money-check-dollar"></i>&nbsp;&nbsp;$<span class="subCost"><%= (Number(280.00).toLocaleString()) %></span></small><br> 
                                        <b>Total Cost:</b>
                                        &nbsp;$ <span class="totalCost"><%= (Number(20280.00).toLocaleString()) %></span> <br>
                                    </div>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-striped" style="width: 100%;">
                                    <thead>
                                      <tr>
                                        <th>Qty</th>
                                        <th>Tracking Code</th>
                                        <th>Ship Cost</th>
                                        <th>Sub Total</th>
                                        <th>Total Cost</th>
                                      </tr>
                                    </thead>
                                    <tbody>
                                      <tr>
                                        <td><span class="weight">50kg</span></td>
                                        <td class="trackingCode">AXWGL4120606170967</td>
                                        <td><small class="label label-success" style="padding: 2px; border-radius: 5px;">$<span class="shippingCost"><%= (Number(20000.00).toLocaleString()) %></span></small></td>
                                        <td><small class="label label-danger" style="padding: 2px; border-radius: 5px;"><i class="fa-solid fa-money-check-dollar"></i>&nbsp;&nbsp;$ <span class="subCost"><%= (Number(280.00).toLocaleString()) %></span> </small></td>
                                        <td>&nbsp;$ <span class="totalCost"><%= (Number(20280.00).toLocaleString()) %></span></td>
                                      </tr>               
                                    </tbody>
                                  </table>
                            </div>

                            <div style="border: 1px solid #2a7178;">
                                <p style="padding: 20px; background-color: #2a7178; color: #fff;">Information:</p>
                                <p style="color: red; padding: 5px;">This is to inform you that our company has received and currently processing your package hence this invoice has been sent to you for your reference. The estimated time for the delivery is 1 to 5 Days (excluding weekends and holidays).</p>
                            </div>

                            <div style="display: flex; justify-content: space-between; margin: 20px 0;">
                                <div>
                                    <h3>For pickup & tracking</h3>
                                    <p>Website: <a href="<%= siteLink %>"><%= siteLink %></a></p>
                                </div>
                                <div style="text-align: center;">
                                    <p style="margin: 0; padding: 0;">scan this code to track your parcel</p>
                                    <img style="width: 70px;" src="/admin/images/trackingQrcode.png" alt="tracking qr code">
                                </div>
                            </div>

                            <div class="col-xs-6">
                                <p class="lead">Payment Methods:</p>
                                <img src="/admin/images/securepayment.png" alt="Methods payments">           
                                <p class="text-muted well well-sm no-shadow" style="margin-top: 10px;">
                                    For your convenience we have DEPRIXA several payment reliable, fast, secure.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>


    </main>

    <script type="module">
        import {notification, showSpinner, hideSpinner, closeNotification} from '/admin/js/notification.js';

        const createForm = document.querySelector('.create-form')
        const btn = document.querySelector('.btn')
        const closeIcon = document.querySelector('.close-icon')

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

        // function to display the receipt after creation of package 
        function disPlayReceipt(details) {
            const {destination, currentLocation, trackingId, senderName, senderEmail, receiverName, receiverEmail, receiverNumber, originCountry, destinationCountry, companyNumber, weight, shippingCost, subCost, totalCost, item, deliveryDate, depatureDate} = details

            const receiver = document.querySelector('.receiver-name');
            const receiverNum = document.querySelector('.receiver-number');
            const receiverAddress = document.querySelector('.receiver-address');
            const parcelDestination = document.querySelector('.destination-country');

            const sender = document.querySelector('.sender-name');
            const senderNumber = document.querySelector('.sender-number');
            const senderAddress = document.querySelector('.sender-address');
            const parcelOrigin = document.querySelector('.origin-country');

            const trackingCode = document.querySelectorAll('.trackingCode');
            const parcel = document.querySelector('.parcel');
            const parcelWeight = document.querySelectorAll('.weight');
            const depature = document.querySelector('.depatureDate');
            const delivery = document.querySelector('.deliveryDate');
            const shipping = document.querySelectorAll('.shippingCost');
            const sub = document.querySelectorAll('.subCost');
            const total = document.querySelectorAll('.totalCost');
            
            receiver.textContent = receiverName;
            receiverNum.textContent = receiverNumber;
            receiverAddress.textContent = destination;
            parcelDestination.textContent = destinationCountry;

            sender.textContent = senderName;
            senderNumber.textContent = companyNumber;
            senderAddress.textContent = "placeholder address";
            parcelOrigin.textContent = originCountry;

            trackingCode.forEach(code => code.textContent = trackingId);
            parcel.textContent = item;
            depature.textContent = depatureDate;
            delivery.textContent = deliveryDate;
            parcelWeight.forEach(w => w.textContent = weight);
            shipping.forEach(cost => cost.textContent = Number(shippingCost).toLocaleString());
            sub.forEach(cost => cost.textContent = Number(subCost).toLocaleString());
            total.forEach(cost => cost.textContent = Number(totalCost).toLocaleString());

            document.querySelector('.download-action').setAttribute('data-id', trackingId)

            document.querySelector(".receipt-container").classList.add('show')
        }

        // function to close the receipt after creation 
        function closeReceipt() {
            const receiptWrapper = document.querySelector('.receipt-container');
            receiptWrapper.classList.remove('show')
        }
        closeIcon.addEventListener('click', closeReceipt)

        // function to download receipt to pdf 
        async function downlaodInvoice () {
            try {
                document.querySelector('.download').disabled = true;
                document.querySelector('.download').classList.add('disabled')
                document.querySelector('.download').textContent = 'Downloading Invoice...'
                const trackingId = document.querySelector('.download-action').getAttribute('data-id');

                const response = await fetch(`/packages/download-invoice/${trackingId}`, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'}
                });

                if(!response.ok) {
                    throw new Error(response.statusText);
                }
                
                const blob = await response.blob();
                const url = window.URL.createObjectURL(blob);

                // Create a link and trigger download
                const link = document.createElement('a');
                link.href = url;
                link.download = `${trackingId}-invoice.pdf`; // Name of the downloaded file
                document.body.appendChild(link);
                link.click();
                link.remove();
                window.URL.revokeObjectURL(url);

                document.querySelector('.download').textContent = 'Download Invoice'
                document.querySelector('.download').disabled = false;
                document.querySelector('.download').classList.remove('disabled')
                notification.success('Invoice downloaded successfully', toast, toastIcon, toastMessage, closeNotification);
            
            } catch (error) {
                document.querySelector('.download').disabled = false;
                document.querySelector('.download').classList.remove('disabled')
                document.querySelector('.download').textContent = 'Download Invoice'
                notification.error(error.message, toast, toastIcon, toastMessage, closeNotification);

            }
        }
        document.querySelector('.download').addEventListener('click', downlaodInvoice)





        // frondend image upload 
        const frontendImgUpload = async (e) => {
            if(window.File && window.FileReader && window.FileList && window.Blob) {
                const files = e.target.files;
                const result = document.querySelector('#result');

                for(let i = 0; i < files.length; i++) {
                    const picReader = new FileReader();
                    picReader.addEventListener('load', (event) => {
                        const picFile = event.target
                        const div = document.createElement('div')
                        div.innerHTML = `<img class="thumnail" style="height: 100px; object-fit: contain;" src="${picFile.result}" title="${picFile.name}" />`;
                        result.appendChild(div) 
                    })
                    picReader.readAsDataURL(files[i]);
                }

            } else {
                notification.error("Your browser does not support File Upload", toast, toastIcon, toastMessage, closeNotification)
                return
            }
            
        }
        
        const imgUpload = document.querySelector('#packageimg')
        imgUpload.addEventListener('change', (e) => frontendImgUpload(e))

        // function to create new package 
        const createpackage = async (e) => {
            e.preventDefault()

            showSpinner(btn)

            const senderName = createForm.senderName.value
            const senderEmail = createForm.senderEmail.value
            const receiverName = createForm.receiverName.value
            const receiverEmail = createForm.receiverEmail.value
            const receiverNumber = createForm.receiverNumber.value
            const destination = createForm.destination.value
            const packages = createForm.packages.value
            const weight = createForm.weight.value
            const currentLocation = createForm.currentLocation.value
            const depatureDate = createForm.depatureDate.value
            const deliveryDate = createForm.deliveryDate.value
            const shipmentMethod = createForm.shipmentMethod.value
            const pickupDate = createForm.pickupDate.value
            
            // const status = createForm.status.value

            try {
                // validation
                if(!senderName || !senderEmail|| !receiverName|| !receiverEmail|| !receiverNumber|| !destination|| !packages|| !weight|| !currentLocation|| !depatureDate|| !deliveryDate|| !shipmentMethod|| !pickupDate) {
                    throw new Error('All fields are required');
                }

                const response = await fetch("/packages/", {
                    method: "POST",
                    body: new FormData(createForm)
                });

                if(!response.ok) {
                    throw new Error(response.statusText);
                }

                const result = await response.json();

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

                hideSpinner(btn, "Create")
                notification.success('package successfully created', toast, toastIcon, toastMessage, closeNotification);

                disPlayReceipt(result)
                console.log(result)
                // createForm.reset();

            } catch (error) {
                hideSpinner(btn, "Create")
                notification.error(error.message, toast, toastIcon, toastMessage, closeNotification);
                return;
            }
        }
        createForm.addEventListener('submit', createpackage);
    </script>

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