@extends('admin.layout.dashboard_master')

@section('content')
    <main id="main" class="main">

        <div class="pagetitle">
            <h1>Orders</h1>
            <nav>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.html">American Plastic</a></li>
                    <li class="breadcrumb-item">Dashboard</li>
                    <li class="breadcrumb-item active">Order</li>
                </ol>
            </nav>
        </div><!-- End Page Title -->

        <section class="section">

            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                          <!-- Add this filter section before your table -->
<div class="row mb-4 align-items-end gx-3">
    <div class="col-md-3">
        <label for="startDate" class="form-label small fw-bold">From Date:</label>
        <div class="input-group input-group-sm">
            <span class="input-group-text bg-white"><i class="bi bi-calendar-event"></i></span>
            <input type="date" class="form-control" id="startDate">
        </div>
    </div>
    <div class="col-md-3">
        <label for="endDate" class="form-label small fw-bold">To Date:</label>
        <div class="input-group input-group-sm">
            <span class="input-group-text bg-white"><i class="bi bi-calendar-check"></i></span>
            <input type="date" class="form-control" id="endDate">
        </div>
    </div>
    <div class="col-md-3">
        <label for="payment_method_filter" class="form-label small fw-bold">Payment Method:</label>
        <select class="form-select form-select-sm" id="payment_method_filter">
            <option value="">All Methods</option>
            <option value="koko">Koko</option>
            <option value="visa">Visa</option>
            <option value="cod">COD</option>
            <option value="mintpay">Mintpay</option>
        </select>
    </div>
    <div class="col-md-2">
        <button class="btn btn-light btn-sm w-100 border text-muted" id="reset_filters">
            <i class="bi bi-arrow-repeat me-1"></i> Reset
        </button>
    </div>
</div>

<!-- Your existing table code remains the same -->
<div class="table-responsive text-nowrap">
    <table class="table" id="order_table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Order Number</th>
                <th>Product Name</th>
                <th>SKU</th>
                <th>Total</th>
                <th>Quantity</th>
                <th>Payment Method</th>
                <th>KOKO Order ID</th>
                <th>Mintpay Order ID</th>
                <th>Status</th>
                <th>Created_at</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<script>
$(document).ready(function() {
    // Initialize DataTable with filters
    var table = $('#order_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('american.plastic.admin.orders.get') }}",
            data: function(d) {
                d.payment_method = $('#payment_method_filter').val();
                d.startDate = $('#startDate').val();
                d.endDate = $('#endDate').val();
            }
        },
        columns: [
             {
                data: 'id',
                name: 'id',
                render: function(data) {
                    return data ?? '';
                }
            },
     {
        data: null,
        name: 'order_id',
        render: function(data) {
            let orderId = data.order_id ?? 'N/A';
            let kokoId = data.koko_order_id ?
                `<div class="koko-id" style="color: #6f42c1; font-size: 0.8em; margin-top: 3px;">
                    Koko OrderID: ${data.koko_order_id}
                </div>` : '';
            let mintpayId = data.mintpay_order_id ?
                `<div class="mintpay-id" style="color: #6f42c1; font-size: 0.8em; margin-top: 3px;">
                    Mintpay OrderID: ${data.mintpay_order_id}
                </div>` : '';

            return `
                <div>
                    <div>${orderId}</div>
                    ${kokoId}
                    ${mintpayId}
                </div>
            `;
        }
    },
            {
                data: 'product_name',
                name: 'product_name',
                render: function(data) {
                    return data ?? '';
                }
            },
            {
                data: 'sku',
                name: 'sku',
                render: function(data) {
                    return data ?? 'N/A';
                }
            },
            {
                data: 'totalprice',
                name: 'totalprice',
                render: function(data) {
                    return data ?? '0.00';
                }
            },
            {
                data: 'quantity',
                name: 'quantity',
                render: function(data) {
                    return data ?? '0';
                }
            },
            {
                data: 'payment_method',
                name: 'payment_method',
                render: function(data) {
                    return data ?? 'N/A';
                }
            },
             {
                data: 'koko_order_id',
                name: 'koko_order_id',
                render: function(data) {
                    return data ?? 'N/A';
                }
            },
             {
                data: 'mintpay_order_id',
                name: 'mintpay_order_id',
                render: function(data) {
                    return data ?? 'N/A';
                }
            },
            {
                data: 'status',
                name: 'status',
                render: function(data) {
                    return data ?? 'Pending';
                }
            },
            {
                data: 'created_at',
                name: 'created_at',
                render: function(data) {
                    return data ?? 'N/A';
                }
            },
            {
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false,
                render: function(data) {
                    return data ?? '';
                }
            }
        ],
        order: [[0, 'desc']]
    });

    // Handle filter change
    $('#payment_method_filter, #startDate, #endDate').on('change', function() {
        table.ajax.reload();
    });

    // Reset filters
    $('#reset_filters').on('click', function() {
        $('#payment_method_filter').val('');
        $('#startDate').val('');
        $('#endDate').val('');
        table.ajax.reload();
    });
});
</script>
                        </div>
                    </div>

                </div>
                <div class="modal fade" id="edit_order_details" tabindex="-1" aria-labelledby="exampleModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Order Details -<span
                                        id="order_modal_id"></span></h5>

                            </div>
                            <div class="modal-body">
                                {{-- form start   --}}
                                <form id="update_order_form">
                                    @csrf
                                    <input type="hidden" class="form-control clear_input" name="id" id="update_id">
                                    <div class="row mt-3">
                                        <div class="col-12 col-sm-6">
                                            <label>Order id</label>
                                            <input type="text" class="form-control clear_input" name="orderid"
                                                id="edit_orderid" disabled>
                                            <span id="edit_name_error" class="text-danger clear_form_error"></span>
                                        </div>

                                        <div class="col-12 col-sm-6">
                                            <label>User</label>
                                            <input type="text" class="form-control clear_input" name="user"
                                                id="edit_username" disabled>
                                            <span id="edit_name_error" class="text-danger clear_form_error"></span>
                                        </div>

                                    </div>

                                    <div class="row mt-3">
                                        <div class="col-12 col-sm-6">
                                            <label>Product name </label>
                                            <input type="text" class="form-control clear_input" name="product_name"
                                                id="edit_productname" disabled>
                                            <span id="edit_warranty_error" class="text-danger clear_form_error"></span>
                                        </div>
                                        <div class="col-12 col-sm-3">
                                            <label>Quantity</label>
                                            <input type="text" class="form-control clear_input" name="quantity"
                                                id="edit_quantity" disabled>
                                            <span id="edit_return_error" class="text-danger clear_form_error"></span>
                                        </div>
                                        <div class="col-12 col-sm-3">
                                            <label>Product Id </label>
                                            <input type="text" class="form-control clear_input" name="productId"
                                                id="edit_product" disabled>
                                            <span id="edit_return_error" class="text-danger clear_form_error"></span>
                                        </div>
                                    </div>
                                    <div class="row mt-3">

                                        <div class="col-12 col-sm-4">
                                            <label>Service charge</label>
                                            <input type="text" class="form-control clear_input" name="service_fee"
                                                id="edit_service_fee" disabled>
                                            <span id="edit_return_error" class="text-danger clear_form_error"></span>
                                        </div>
                                        <div class="col-12 col-sm-4">
                                            <label>Order Total</label>
                                            <input type="text" class="form-control clear_input" name="order_total"
                                                id="edit_total" disabled>
                                            <span id="edit_return_error" class="text-danger clear_form_error"></span>
                                        </div>
                                        <div class="col-12 col-sm-4">
                                            <label>Tracking number</label>
                                            <input type="text" class="form-control clear_input" name="tracking"
                                                id="edit_tracking" maxlength="20">
                                            <span id="edit_return_error" class="text-danger clear_form_error"></span>
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-12 col-sm-6">
                                            <label>Color</label>
                                            <div style="display: flex; width: 100%;">
                                                <input type="text" class="form-control clear_input" name="color"
                                                    id="edit_color" style="width: 80%;" disabled>
                                                <div id="color_display"
                                                    style="width: 20%; height: 38px; border: 1px solid #ccc;"></div>
                                            </div>

                                        </div>
                                        <div class="col-12 col-sm-6" hidden>
                                            <label>Size</label>
                                            <input type="text" class="form-control clear_input" name="size"
                                                id="edit_size" disabled>

                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-12 col-sm-2">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="1"
                                                    name="processing" id="edit_processing_Checkbox">
                                                <label class="form-check-label" for="freeShippingCheckbox">
                                                    Processing
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-2">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="1"
                                                    name="ready" id="edit_ready_Checkbox">
                                                <label class="form-check-label" for="freeShippingCheckbox">
                                                    Ready For pickup
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-2">
                                            <div class="form-check">
                                                <input class="form-check-input" name="shipped" type="checkbox"
                                                    value="1" id="edit_shipped_Checkbox">
                                                <label class="form-check-label" for="edit_shipped_Checkbox">
                                                    Shipped
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-2">
                                            <div class="form-check">
                                                <input class="form-check-input" name="onthe_way" type="checkbox"
                                                    value="1" id="edit_ontheway_Checkbox">
                                                <label class="form-check-label" for="edit_ontheway_Checkbox">
                                                    On the way
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-2">
                                            <div class="form-check">
                                                <input class="form-check-input" name="order_complete" type="checkbox"
                                                    value="1" id="edit_order_Checkbox">
                                                <label class="form-check-label" for="edit_order_Checkbox">
                                                    Completed
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                      <div class="col-12 col-sm-6">
    <div class="container mt-5">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-0 py-3">
                <h5 class="card-title mb-0 font-weight-bold">Shipping Address</h5>
            </div>
            <div class="card-body pt-0">
                <div class="address-details">
                    <div class="address-section mb-3">
                        <div class="d-flex align-items-start mb-2">
                            <span class="address-label">Name:</span>
                            <span class="address-value font-weight-medium" id="address_name">-</span>
                        </div>

                        <div class="d-flex align-items-start mb-2">
                            <span class="address-label">Mobile:</span>
                            <span class="address-value" id="mobile">-</span>
                        </div>
                    </div>

                    <div class="address-section mb-3">
                        <div class="d-flex align-items-start mb-2">
                            <span class="address-label">Address:</span>
                            <span class="address-value" id="address_line_one">-</span>
                        </div>

                        <div class="d-flex align-items-start mb-2">
                            <span class="address-label">Address line 2:</span>
                            <span class="address-value text-muted" id="address_line_two">-</span>
                        </div>
                    </div>

                    <div class="address-section">
 <div class="col-md-12 mb-2">
                                <div class="d-flex align-items-start">
                                    <span class="address-label">District:</span>
                                    <span class="address-value" id="district">-</span>
                                </div>
                            </div>
                            <div class="col-md-12 mb-2">
                                <div class="d-flex align-items-start">
                                    <span class="address-label">City:</span>
                                    <span class="address-value" id="city">-</span>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="d-flex align-items-start">
                                    <span class="address-label">Zip Code:</span>
                                    <span class="address-value" id="zipcode">-</span>
                                </div>
                            </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .card {
        border-radius: 10px;
        overflow: hidden;
    }

    .address-label {
        min-width: 100px;
        color: #6c757d;
        font-weight: 500;
    }

    .address-value {
        color: #495057;
        word-break: break-word;
    }

    .address-section {
        padding: 12px 0;
        border-bottom: 1px solid #f1f1f1;
    }

    .address-section:last-child {
        border-bottom: none;
    }

    .card-header {
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
</style>
                                        <div class="col-12 col-sm-6">
    <div class="container mt-5">
        <div class="card shadow-sm">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0">Order Information</h5>
            </div>
            <div class="card-body">
                <div class="order-info-section mb-4">
                    <h6 class="section-title text-muted mb-3">SHIPPING METHOD</h6>
                    <div class="info-item">
                        <span class="info-label">Name:</span>
                        <span class="info-value" id="shippingname">-</span>
                    </div>
                </div>

                <div class="order-info-section mb-4">
                    <h6 class="section-title text-muted mb-3">TIMING</h6>
                    <div class="info-item">
                        <span class="info-label">Ordered at:</span>
                        <span class="info-value" id="ordered_at">-</span>
                    </div>
                </div>

                <div class="order-info-section mb-4">
                    <h6 class="section-title text-muted mb-3">CUSTOMER NOTES</h6>
                    <div class="info-item">
                        <div class="customer-note p-3 bg-light rounded" id="cutomer_note">
                            No notes provided
                        </div>
                    </div>
                </div>

                <div class="order-info-section">
                    <h6 class="section-title text-muted mb-3">ORDERED BY</h6>
                    <div class="info-item">
                        <span class="info-value" id="edit_useremail">-</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .card {
        border: none;
        border-radius: 10px;
    }

    .section-title {
        font-size: 0.8rem;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .info-item {
        display: flex;
        align-items: baseline;
        margin-bottom: 8px;
    }

    .info-label {
        font-weight: 500;
        color: #555;
        min-width: 100px;
        margin-right: 10px;
    }

    .info-value {
        font-weight: 400;
        color: #333;
    }

    .customer-note {
        font-style: italic;
        border-left: 3px solid #6c757d;
    }

    .order-info-section {
        border-bottom: 1px solid #eee;
        padding-bottom: 15px;
    }

    .order-info-section:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }
</style>

                                    </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal"
                                    id="close">Close</button>
                                <button type="button" id="update_order_btn" class="btn btn-primary">Save
                                    changes</button>
                                </form>
                                {{-- form end   --}}

                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <style>
                /* General Styles */

                * {
                    box-sizing: border-box;
                }

                :root {
                    --clr-white: rgb(255, 255, 255);
                    --clr-black: rgb(0, 0, 0);
                    --clr-light: rgb(245, 248, 255);
                    --clr-light-gray: rgb(196, 195, 196);
                    --clr-blue: rgb(63, 134, 255);
                    --clr-light-blue: rgb(171, 202, 255);
                }


                /* End General Styles */

                /* Upload Area */
                .upload-area {
                    width: 100%;
                    max-width: 55rem;
                    background-color: var(--clr-white);
                    box-shadow: 0 10px 60px rgb(218, 229, 255);
                    border: 2px solid var(--clr-light-blue);
                    border-radius: 24px;
                    padding: 2rem 1.875rem 5rem 1.875rem;
                    margin: 0.625rem;

                }

                .upload-area--open {
                    /* Slid Down Animation */
                    animation: slidDown 500ms ease-in-out;
                }

                @keyframes slidDown {
                    from {
                        height: 28.125rem;
                        /* 450px */
                    }

                    to {
                        height: 35rem;
                        /* 560px */
                    }
                }

                /* Header */
                .upload-area__header {}

                .upload-area__title {
                    font-size: 1.8rem;
                    font-weight: 500;
                    margin-bottom: 0.3125rem;
                }

                .upload-area__paragraph {
                    font-size: 0.9375rem;
                    color: var(--clr-light-gray);
                    margin-top: 0;
                }

                .upload-area__tooltip {
                    position: relative;
                    color: var(--clr-light-blue);
                    cursor: pointer;
                    transition: color 300ms ease-in-out;
                }

                .upload-area__tooltip:hover {
                    color: var(--clr-blue);
                }

                .upload-area__tooltip-data {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -125%);
                    min-width: max-content;
                    background-color: var(--clr-white);
                    color: var(--clr-blue);
                    border: 1px solid var(--clr-light-blue);
                    padding: 0.625rem 1.25rem;
                    font-weight: 500;
                    opacity: 0;
                    visibility: hidden;
                    transition: none 300ms ease-in-out;
                    transition-property: opacity, visibility;
                }

                .upload-area__tooltip:hover .upload-area__tooltip-data {
                    opacity: 1;
                    visibility: visible;
                }

                /* Drop Zoon */
                .upload-area__drop-zoon {
                    position: relative;
                    height: 11.25rem;
                    /* 180px */
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    border: 2px dashed var(--clr-light-blue);
                    border-radius: 15px;
                    margin-top: 2.1875rem;
                    cursor: pointer;
                    transition: border-color 300ms ease-in-out;
                }

                .upload-area__drop-zoon:hover {
                    border-color: var(--clr-blue);
                }

                .drop-zoon__icon {
                    display: flex;
                    font-size: 3.75rem;
                    color: var(--clr-blue);
                    transition: opacity 300ms ease-in-out;
                }

                .drop-zoon__paragraph {
                    font-size: 0.9375rem;
                    color: var(--clr-light-gray);
                    margin: 0;
                    margin-top: 0.625rem;
                    transition: opacity 300ms ease-in-out;
                }

                .drop-zoon:hover .drop-zoon__icon,
                .drop-zoon:hover .drop-zoon__paragraph {
                    opacity: 0.7;
                }

                .drop-zoon__loading-text {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    display: none;
                    color: var(--clr-light-blue);
                    z-index: 10;
                }

                .drop-zoon__preview-image {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                    padding: 0.3125rem;
                    border-radius: 10px;
                    display: none;
                    z-index: 1000;
                    transition: opacity 300ms ease-in-out;
                }

                .drop-zoon:hover .drop-zoon__preview-image {
                    opacity: 0.8;
                }

                .drop-zoon__file-input {
                    display: none;
                }

                /* (drop-zoon--over) Modifier Class */
                .drop-zoon--over {
                    border-color: var(--clr-blue);
                }

                .drop-zoon--over .drop-zoon__icon,
                .drop-zoon--over .drop-zoon__paragraph {
                    opacity: 0.7;
                }

                /* (drop-zoon--over) Modifier Class */
                .drop-zoon--Uploaded {}

                .drop-zoon--Uploaded .drop-zoon__icon,
                .drop-zoon--Uploaded .drop-zoon__paragraph {
                    display: none;
                }

                /* File Details Area */
                .upload-area__file-details {
                    height: 0;
                    visibility: hidden;
                    opacity: 0;
                    text-align: left;
                    transition: none 500ms ease-in-out;
                    transition-property: opacity, visibility;
                    transition-delay: 500ms;
                }

                /* (duploaded-file--open) Modifier Class */
                .file-details--open {
                    height: auto;
                    visibility: visible;
                    opacity: 1;
                }

                .file-details__title {
                    font-size: 1.125rem;
                    font-weight: 500;
                    color: var(--clr-light-gray);
                }

                /* Uploaded File */
                .uploaded-file {
                    display: flex;
                    align-items: center;
                    padding: 0.625rem 0;
                    visibility: hidden;
                    opacity: 0;
                    transition: none 500ms ease-in-out;
                    transition-property: visibility, opacity;
                }

                /* (duploaded-file--open) Modifier Class */
                .uploaded-file--open {
                    visibility: visible;
                    opacity: 1;
                }

                .uploaded-file__icon-container {
                    position: relative;
                    margin-right: 0.3125rem;
                }

                .uploaded-file__icon {
                    font-size: 3.4375rem;
                    color: var(--clr-blue);
                }

                .uploaded-file__icon-text {
                    position: absolute;
                    top: 1.5625rem;
                    left: 50%;
                    transform: translateX(-50%);
                    font-size: 0.9375rem;
                    font-weight: 500;
                    color: var(--clr-white);
                }

                .uploaded-file__info {
                    position: relative;
                    top: -0.3125rem;
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                }

                .uploaded-file__info::before,
                .uploaded-file__info::after {
                    content: '';
                    position: absolute;
                    bottom: -0.9375rem;
                    width: 0;
                    height: 0.5rem;
                    background-color: #ebf2ff;
                    border-radius: 0.625rem;
                }

                .uploaded-file__info::before {
                    width: 100%;
                }

                .uploaded-file__info::after {
                    width: 100%;
                    background-color: var(--clr-blue);
                }

                /* Progress Animation */
                .uploaded-file__info--active::after {
                    animation: progressMove 800ms ease-in-out;
                    animation-delay: 300ms;
                }

                @keyframes progressMove {
                    from {
                        width: 0%;
                        background-color: transparent;
                    }

                    to {
                        width: 100%;
                        background-color: var(--clr-blue);
                    }
                }

                .uploaded-file__name {
                    width: 100%;
                    max-width: 6.25rem;
                    /* 100px */
                    display: inline-block;
                    font-size: 1rem;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .uploaded-file__counter {
                    font-size: 1rem;
                    color: var(--clr-light-gray);
                }
            </style>
            <style>
                #loading-screen {
                    display: none;
                    position: fixed;
                    z-index: 9999;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    background-color: rgba(0, 0, 0, 0.5);
                    text-align: center;
                    color: white;
                    font-size: 20px;
                    padding-top: 20%;
                }
            </style>
            <div id="loading-screen">Please wait...</div>

        </section>

        <script>
            $(document).ready(function() {
                $('#edit_order_details').modal({
                    backdrop: 'static',
                    keyboard: false
                });
            });

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });








            $('body').on('click', '.cancel', function() {
                let csrfToken = $('meta[name="csrf-token"]').attr('content');
                var id = $(this).data('id');
                $.ajax({
                    type: "POST", // or "GET" depending on your route configuration
                    url: "{{ route('american.plastic.admin.cancel.order') }}",
                    data: {
                        id: id
                    },
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    }, // replace with the actual route URL
                    success: function(response) {
                        // Handle the success response from the server
                        Alert.trash('Cancelled! The order cancelled successfully.', 'Info', {
                            displayDuration: 3000
                        });
                        table.ajax.reload();
                    },
                    error: function(error) {
                        Alert.error('An unexpected error occurred. Please try again later. ', 'Error', {
                            displayDuration: 3000
                        });
                    }
                });

            });

            $('body').on('click', '.reject', function() {
                let csrfToken = $('meta[name="csrf-token"]').attr('content');
                var id = $(this).data('id');
                $.ajax({
                    type: "POST", // or "GET" depending on your route configuration
                    url: "{{ route('american.plastic.admin.reject.request') }}",
                    data: {
                        id: id
                    },
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    }, // replace with the actual route URL
                    success: function(response) {
                        // Handle the success response from the server
                        Alert.trash('Rejected! The order cancellation request rejected.', 'Info', {
                            displayDuration: 3000
                        });
                        table.ajax.reload();
                    },
                    error: function(error) {
                        Alert.error('An unexpected error occurred. Please try again later. ', 'Error', {
                            displayDuration: 3000
                        });
                    }
                });

            });

            function formatDateTime(dateTimeString) {
                const months = [
                    "January", "February", "March", "April", "May", "June",
                    "July", "August", "September", "October", "November", "December"
                ];

                const date = new Date(dateTimeString);
                const month = months[date.getMonth()];
                const day = date.getDate();
                const year = date.getFullYear();
                let hours = date.getHours();
                const minutes = date.getMinutes();
                const seconds = date.getSeconds();
                const ampm = hours >= 12 ? 'PM' : 'AM';

                hours = hours % 12;
                hours = hours ? hours : 12; // the hour '0' should be '12'
                const strMinutes = minutes < 10 ? '0' + minutes : minutes;
                const strSeconds = seconds < 10 ? '0' + seconds : seconds;

                return `${month} ${day} ${year} ${hours}.${strMinutes} ${ampm}`;
            }

            $('body').on('click', '.edit', function() {
                let csrfToken = $('meta[name="csrf-token"]').attr('content');


                var addressName = document.getElementById("address_name");
                var address_line_one = document.getElementById("address_line_one");
                var address_line_two = document.getElementById("address_line_two");
                var mobile = document.getElementById("mobile");
                var email = document.getElementById("edit_useremail");


                var city = document.getElementById("city");
                var zipcode = document.getElementById("zipcode");

                var shippingName = document.getElementById("shippingname");
                var modal_id = document.getElementById("order_modal_id");
                var orderedtime = document.getElementById("ordered_at");
                var customernote = document.getElementById("cutomer_note");
                var district = document.getElementById("district");
                var id = $(this).data('id');

                $.ajax({
                    type: 'GET',
                    url: "{{ route('admin.order.edit') }}",
                    data: {
                        id: id
                    },
                    success: function(response) {
                        console.log(response);
                        $('#edit_order_details').modal('show');
                        $('#edit_orderid').val(response.order_id);
                        $('#edit_username').val(response.name ?? "Guest");
                        $('#edit_productname').val(response.product_name);
                        $('#edit_quantity').val(response.quantity);
                        $('#edit_product').val(response.product_id);

                        $('#edit_service_fee').val('LKR ' + response.service_fee);
                        $('#update_id').val(response.order_id);

                        var fullName = response.first_name; + " " + response.last_name;
                        addressName.textContent = fullName;
                        address_line_one.textContent = response.address_1;
                        address_line_two.textContent = response.address_2;
                        mobile.textContent = response.telephone;
                        email.textContent = response.email;
                        city.textContent = response.city;
                        zipcode.textContent = response.postcode;

                        shippingName.textContent = response.service_name;
                        modal_id.textContent = response.order_id;
                        const orderedTimeElement = document.getElementById('ordered_at');
                        orderedTimeElement.textContent =formatDateTime (response.order_created_at);
                        customernote.textContent = response.ordernote ?? "Not Available";
                        district.textContent = response.district;


                        var fee = parseFloat(response.service_fee) || 0;
                        var tax = parseFloat(response.tax) || 0;
                        var total = parseFloat(response.total) || 0;
                        var orderTotal = (fee + tax + total).toFixed(2);
                        $('#edit_total').val('LKR ' + orderTotal);


                        var tracking = response.tracking;
                        var color = response.color;
                        console.log(color);

                        var selectcolorvalue = '';

                        if (color == '#A78B8D') {
                            selectcolorvalue = 'Marblepink';
                        } else if (color == '#61A8F8') {
                            selectcolorvalue = 'Babyblue';
                        } else if (color == '#C55C82') {
                            selectcolorvalue = 'Pink';
                        } else if (color == '#FF0000') {
                            selectcolorvalue = 'Red';
                        } else if (color == '#CAD3D0') {
                            selectcolorvalue = 'Clear';
                        } else if (color == '#BA9978') {
                            selectcolorvalue = 'Beige';
                        } else if (color == '#88DB86') {
                            selectcolorvalue = 'Applegreen';
                        } else if (color == '#DEE4EE') {
                            selectcolorvalue = 'Marblewhite';
                        } else if (color == '#BDB8EE') {
                            selectcolorvalue = 'Marbleviolet';
                        } else if (color == '#E9CBB9') {
                            selectcolorvalue = 'Marbleorange';
                        } else if (color == '#FEF250') {
                            selectcolorvalue = 'Lemonyellow';
                        } else if (color == '#f4c2c2') {
                            selectcolorvalue = 'Babypink';
                        } else if (color == '#D2C77D') {
                            selectcolorvalue = 'Metallicgold';
                        } else if (color == '#DAD9C6') {
                            selectcolorvalue = 'Buttermilk';
                        } else if (color == '#E9C500') {
                            selectcolorvalue = 'Yellow';
                        } else if (color == '#D3CBC4') {
                            selectcolorvalue = 'Graybeige';
                        } else if (color == '#0F2D8D') {
                            selectcolorvalue = 'Blue';
                        } else if (color == '#005E3A') {
                            selectcolorvalue = 'Green';
                        } else if (color == '#D6F2E6') {
                            selectcolorvalue = 'Marblegreen';
                        } else if (color == '#BF8BFF') {
                            selectcolorvalue = 'Violet';
                        } else if (color == '#6B4B36') {
                            selectcolorvalue = 'Brown';
                        } else if (color == '#C0C0C0') {
                            selectcolorvalue = 'Silver';
                        } else if (color == '#808080') {
                            selectcolorvalue = 'Grey';
                        } else if (color == '#6CD2FA') {
                            selectcolorvalue = 'Skyblue';
                        } else if (color == '#D09305') {
                            selectcolorvalue = 'Orange';
                        } else if (color == '#13598B') {
                            selectcolorvalue = 'Metallicblue';
                        } else if (color == '#9582BB') {
                            selectcolorvalue = 'Metalicviolet';
                        } else if (color == '#A286F4') {
                            selectcolorvalue = 'Purple';
                        } else if (color == '#62ADE6') {
                            selectcolorvalue = 'Marbleblue';
                        } else if (color == '#80355C') {
                            selectcolorvalue = 'Marblered';
                        } else if (color == '#2FCBD4') {
                            selectcolorvalue = 'Avocadogreen';
                        } else if (color == '#FFA07A') {
                            selectcolorvalue = 'Lightorange';
                        } else if (color == '#DDD3D1') {
                            selectcolorvalue = 'Marblebeige';
                        } else if (color == '#F4C430') {
                            selectcolorvalue = 'Saffron';
                        } else if (color == '#000000') {
                            selectcolorvalue = 'Black';
                        } else if (color == '#D4AF37') {
                            selectcolorvalue = 'Marblegold';
                        } else if (color == '#FFFFFF') {
                            selectcolorvalue = 'Purewhite';
                        } else if (color == '#B4B4B8') {
                            selectcolorvalue = 'Metallicsilver';
                        } else if (color == '#58C3C2') {
                            selectcolorvalue = 'Marblegreen';
                        } else if (color == '#006A4E') {
                            selectcolorvalue = 'Bottlegreen';
                        } else if (color == '#6F4E37') {
                            selectcolorvalue = 'Coffee';
                        } else if (color == '#FFFDD0') {
                            selectcolorvalue = 'Cream';
                        } else if (color == '#A9A9A9') {
                            selectcolorvalue = 'Darkgrey';
                        } else if (color == '#C40233') {
                            selectcolorvalue = 'Metalicred';
                        }
                         else if (color == '#3D7764') {
                            selectcolorvalue = 'Metalicgreen';
                        } else if (color == '#F8B700') {
                            selectcolorvalue = 'Metalicyellow';
                        }

                        var colors = selectcolorvalue;
                        console.log('Selected color value:', colors);

                        var size = response.size;
                        var processing = response.processing;
                        var ready = response.ready;
                        var shipped = response.picked;
                        var ontheway = response.on_the_way;
                        var completed = response.delivered;
                        // Check the Free Shipping checkbox if the value is 1
                        if (processing === "1") {
                            document.getElementById('edit_processing_Checkbox').checked = true;
                        }
                        if (ready === "1") {
                            document.getElementById('edit_ready_Checkbox').checked = true;
                        }
                        if (shipped === "1") {
                            document.getElementById('edit_shipped_Checkbox').checked = true;
                        }
                        if (ontheway === "1") {
                            document.getElementById('edit_ontheway_Checkbox').checked = true;
                        }
                        if (completed === "1") {
                            document.getElementById('edit_order_Checkbox').checked = true;
                        }

                        if (tracking != null) {
                            $('#edit_tracking').val(response.tracking);
                        } else {
                            $('#edit_tracking').val("");
                        }
                        if (colors != null) {
                            $('#edit_color').val(colors);
                            document.getElementById('color_display').style.backgroundColor = response.color;
                        } else {
                            $('#edit_color').val("No");
                        }
                        if (size != null) {
                            $('#edit_size').val(response.size);
                        } else {
                            $('#edit_size').val("No");
                        }

                    },
                    error: function(error) {}
                });

            });

            $('body').on('click', '#close', function() {
                $('#edit_order_details').modal('hide');

            });

            $('#update_order_btn').click(function() {
                var order_update = $('#update_order_form')[0];
                var order_update_ajax = new FormData(order_update);

                $('#loading-screen').show();

                $.ajax({
                        type: 'POST',
                        url: "{{ route('order.update.details') }}",
                        data: order_update_ajax,
                        contentType: false,
                        processData: false,
                        success: (response) => {
                            if (response) {
                                $('#edit_order_details').modal('hide');
                                window.location.reload();
                            }
                        },
                        error: function(response) {
                            $('#image-input-error').text(response.responseJSON.message);
                        },
                        complete: function() {
                            $('#loading-screen').hide(); // Hide loading screen
                        }
                    })
                    .always(function() {

                    });
                console.log("clickde");

            });
        </script>
    </main><!-- End #main -->
@endsection