@extends('layout.master') @section('content')
<!-- Table CSS links -->
<link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
    rel="stylesheet"
/>
<link rel="stylesheet" href="{{ asset('css/app.css') }}" />
<link
    href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"
    rel="stylesheet"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

<meta charset="UTF-8" />
<meta name="csrf-token" content="{{ csrf_token() }}" />
<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css"
/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>

<style>
    body {
        background-color: #eaedf7;
    }
    .dt-layout-end {
        display: flex !important;
        width: 50% !important;
        justify-content: end !important;
    }
    .dt-layout-start {
        display: flex !important;
        width: 50% !important;
        justify-content: start !important;
    }

    .add_btn {
        background-color: #112b66;
        border: none;
        border-radius: 5px;
        color: white;
        padding: 10px;
        width: 100px;
    }

    .delete_btn {
        font-size: 13px;
        background-color: #dc3545;
        border-radius: 10px;
        border: none;
        padding: 10px;
        color: white;
    }

    .edit_btn {
        font-size: 13px;
        background-color: #007bff;
        border-radius: 10px;
        border: none;
        padding: 10px;
        color: white;
    }

    .show_btn {
        font-size: 13px;
        background-color: #28a745;
        border-radius: 10px;
        border: none;
        padding: 10px;
        color: white;
    }
    .card_table_custom {
        margin-top: 30px;
        background-color: white;
        border: none;
        border-radius: 10px;
        padding: 10px;
    }

    .vhicle_information {
        font-weight: 700;

        color: #112b66;
    }
    .breadcum_active {
        color: gray;
        font-size: 14px;
        font-weight: 500;
    }
    .inactive_breadcum {
        color: black;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
    }
    .heading_size {
        font-size: 30px;
        font-weight: 600;
    }
    #notificationCount {
        position: absolute;
        top: 0;
        right: 0;
        background: red;
        /* Optional: adjust as needed */
        color: white;
        border-radius: 50%;
        padding: 0 5px;
        font-size: 12px;
        /* Adjust size as needed */
    }
    .notificationList {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    .notification-item {
        border-bottom: 1px solid #ddd;
        padding: 10px;
        display: flex;
        flex-direction: column;
    }

    .notification-message {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .notification-actions {
        display: flex;
        gap: 10px;
    }

    .mark-read {
        background-color: #28a745;
        border: 0;
        border-radius: 5px;
        padding: 10px;
        color: white;
    }

    .view-order {
        background-color: #112b66;
        border: 0;
        border-radius: 5px;
        padding: 10px;
        color: white;
    }
    .notifications-wrapper {
        position: relative;
        /* Optional: adjust padding as needed */
    }

    .notification-btn {
        background: none;
        border: none;
        cursor: pointer;
        position: relative;
        font-size: 24px;
        /* Allows positioning of the badge */
    }

    .badge4 {
        position: absolute;
        top: -10px;
        right: -10px;
        padding: 5px 10px;
        border-radius: 50%;
        background-color: red;
        color: white;
        font-size: 12px;
    }

    .dropdown-menu {
        position: absolute;
        right: 0;
        top: 40px;
        background-color: white;
        border: 1px solid #ccc;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        padding: 15px;
        border-radius: 8px;
        z-index: 1000;
    }

    .loader {
        position: fixed;
        /* Position the loader relative to the viewport */
        top: 50%;
        /* Move it to the vertical center */
        left: 50%;
        /* Move it to the horizontal center */
        transform: translate(-50%, -50%);
        /* Adjust the offset to center it */
        z-index: 9999;
        /* Ensure the loader appears above other content */
    }

    .loader img {
        width: 100px;
        /* Adjust the width according to your preference */
        height: 100px;
    }
    .logo {
        max-width: 80px; /* Adjust as needed */
        height: auto;
    }
</style>

<div class="main-content side-content pt-0">
    <div class="main-container container-fluid">
        <div class="inner-body">
            <div class="d-flex mt-5 align-items-center justify-content-between">
                <div>
                    <h2 class="heading_size">Orders</h2>
                    <div class="breadcum mt-3">
                        <div class="d-flex align-items-center gap-3">
                            <a href="{{ url('/dashboard') }}"
                                ><p class="inactive_breadcum">Home</p></a
                            >
                            <p class="mt-1">></p>
                            <p class="breadcum_active">Orders</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 text-end">
                    <div class="notifications-wrapper">
                        <button id="notificationBell" class="notification-btn">
                            <i class="fas fa-bell"></i>
                            <span
                                id="notificationCount"
                                class="badge4 badge-danger"
                                >{{ $unreadNotificationCount }}</span
                            >
                        </button>
                        <!-- Notification dropdown -->
                        <div
                            id="notificationDropdown"
                            class="dropdown-menu"
                            style="display: none; overflow: auto; height: 200px"
                        >
                            <h3 class="text-dark">Notifications</h3>
                            <ul class="notificationList">
                                @foreach($notifications as $notification)
                                <li>
                                    {{ $notification->users->name }} has
                                    {{ $notification->action }} order #{{ $notification->order_id








                                    }}.
                                    <a
                                        href="{{ route('notifications.markRead', $notification->id) }}"
                                        >Mark as read</a
                                    >
                                </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="loader" style="display: none">
                <img
                    src="{{ asset('assets/images/loader.gif') }}"
                    alt="Loading..."
                />
            </div>
            @if(session('success'))
            <div class="alert alert-success">
                {{ session("success") }}
            </div>
            @endif
            <!-- Page Header -->
            <div class="card_table_custom">
                <div class="table-responsive">
                    <table
                        id="example"
                        class="table table-striped"
                        style="width: 100%"
                    >
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Email</th>

                                <th>Total</th>
                                <th>Purchase Date</th>
                                <th>Carrier Name</th>
                                <th>shipping details</th>
                                <th>Order Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($orderInformation as $orderInfo)
                            @if($orderInfo->status != "declined")
                            @foreach($orderInfo->orderItems as $orderItem)
                            <tr>
                                <td>{{$orderInfo->order_id ?? "null"}}</td>
                                <td>{{$orderInfo->email ?? "null"}}</td>

                                <td>
                                    {{ number_format($orderInfo->total, 0, '', ' ') ?? "0.00" }}
                                </td>
                                <td>
                                    {{ format_date($orderInfo->purchase_date) }}
                                </td>
                                <td>{{$orderInfo->carrier_name ?? "null"}}</td>
                                <td>
                                    <button
                                        class="btn btn-primary show-shipping-details"
                                        data-bs-toggle="modal"
                                        data-bs-target="#myModal"
                                        data-product-name="{{$orderItem->product->product_name ?? 'No Product Name'}}"
                                        data-email="{{$orderInfo->email ?? 'No Email'}}"
                                        data-type="{{$orderItem->product->type ?? 'No type'}}"
                                        data-length="{{$orderItem->product->length ?? 'No length'}}"
                                        data-width="{{$orderItem->product->width ?? 'No width'}}"
                                        data-height="{{$orderItem->product->height ?? 'No height'}}"
                                        data-weight="{{$orderItem->product->weight ?? 'No weight'}}"
                                        data-carriername="{{$orderItem->carrier_name ?? 'No carrier_name'}}"
                                    >
                                        Show shipping details
                                    </button>
                                </td>
                                <td>
                                    @if($orderInfo->status == 'pending')
                                    <!-- <button  class="btn btn-secondary accept_btn " data-id="{{$orderInfo->id}}" data-bs-toggle="modal" data-bs-target="#exampleModal">Accept</button> -->
                                    <button
                                        class="btn btn-secondary "
                                        data-bs-toggle="modal"
                                        data-bs-target="#exampleModal"
                                    >
                                        Accept
                                    </button>
                                    <a href="/Laga/ordershipment"><button class="show_btn "> <i class="fas fa-eye me-1"></i>ship </button></a>

                                    <!-- <button
                                        class="btn btn-danger decline_btn"
                                        data-id="{{$orderInfo->id}}"
                                    >
                                        Decline
                                    </button> -->

                                    <button
                                        type="button"
                                        class="btn btn-danger"
                                        data-bs-toggle="modal"
                                        data-bs-target="#notificationModal"
                                    >
                                        Decline
                                    </button>
                                    @elseif($orderInfo->status == 'accepted')
                                    <button class="btn btn-success" disabled>
                                        Accepted
                                    </button>
                                    @elseif($orderInfo->status == 'declined')
                                    <button class="btn btn-danger" disabled>
                                        Declined
                                    </button>
                                    @endif
                                </td>
                                <td>
                                    <div
                                        class="d-flex justify-content-center gap-4"
                                    >
                                        <a
                                            href="{{route('orders.show',$orderInfo->id)}}"
                                            ><button class="show_btn">
                                                <i class="fas fa-eye me-1"></i
                                                >Show
                                            </button></a
                                        >
                                        @if($orderInfo->archived == 0)
                                        <a
                                            href="{{route('orders.archive',$orderInfo->id)}}"
                                            ><button class="show_btn">
                                                <i class="fas fa-eye me-1"></i
                                                >Archive
                                            </button></a
                                        >
                                        @else
                                        <a href="" disabled
                                            ><button
                                                class="btn btn-danger"
                                                disabled
                                            >
                                                <i class="fas fa-eye me-1"></i
                                                >Archived
                                            </button></a
                                        >
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @endforeach @endif @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- modal for accepting order -->
        <div
            class="modal fade"
            id="exampleModal"
            tabindex="-1"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"
        >
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1
                            class="text-start fs-4 fw-bold"
                            id="exampleModalLabel"
                        >
                            Shipping Instruction
                        </h1>
                        <button
                            type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                        >
                            X
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="card shadow-lg" style="border-radius: 10px">
                            <div class="card-body">
                                <!-- Card One Content -->
                                <div id="card-one">
                                    <h5 class="card-title text-center mb-3">
                                        Ship
                                        <span id="item-name">(Item Name)</span>
                                    </h5>
                                    <h4
                                        class="card-subtitle text-start fw-bolder"
                                    >
                                        Shipping Instruction
                                    </h4>
                                    <hr class="my-3" />
                                    <div class="row">
                                        <!-- Instruction 1 -->
                                        <div class="col-md-6 mb-4">
                                            <strong
                                                >1 - Use this package</strong
                                            >
                                            <div class="form-check mt-2">
                                                <label
                                                    class="form-check-label"
                                                    for="packageCheck"
                                                >
                                                    <img
                                                        src="https://img.freepik.com/free-vector/cardboard-box_23-2147513430.jpg?ga=GA1.1.1204536995.1732539763&semt=ais_hybrid"
                                                        alt="Package"
                                                        class="img-thumbnail mt-2"
                                                        style="
                                                            width: 100%;
                                                            height: auto;
                                                        "
                                                    />
                                                </label>
                                            </div>
                                        </div>
                                        <!-- Instruction 2 -->
                                        <div class="col-md-6 mb-4">
                                            <strong>2 - Pack like this</strong>
                                            <div class="form-check mt-2">
                                                <label
                                                    class="form-check-label"
                                                    for="packCheck"
                                                >
                                                    <img
                                                        src="https://img.freepik.com/free-vector/cardboard-boxes-package-parcel-delivery-shipping-cargo-vector-realistic-mockup-open-closed-brown-carton-crate-with-stickers-fragile-label-tape-top-side-view_107791-10767.jpg?ga=GA1.1.1204536995.1732539763"
                                                        alt="Packing Example"
                                                        class="img-thumbnail mt-2"
                                                        style="
                                                            width: 100%;
                                                            height: auto;
                                                        "
                                                    />
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <!-- Instruction 3 -->
                                        <div class="col-md-6 mb-4">
                                            <strong
                                                >3 - Put the label like
                                                this</strong
                                            >
                                            <div class="form-check mt-2">
                                                <label
                                                    class="form-check-label"
                                                    for="labelCheck"
                                                >
                                                    <img
                                                        src="https://img.freepik.com/free-vector/cardboard-boxes-3d-vector-mockup-cargo-parcel-packages-top-front-side-view-with-tape-paper-labels-realistic-carton-open-closed-packaging-goods-isolated-packs-freight-shipping_107791-10639.jpg?ga=GA1.1.1204536995.1732539763"
                                                        alt="Label Placement"
                                                        class="img-thumbnail mt-2"
                                                        style="
                                                            width: 100%;
                                                            height: auto;
                                                        "
                                                    />
                                                </label>
                                            </div>
                                        </div>
                                        <!-- Instruction 4 -->
                                        <div class="col-md-6 mb-4">
                                            <strong>4 - Print label</strong>
                                            <div class="form-check mt-2">
                                                <label
                                                    class="form-check-label"
                                                    for="printCheck"
                                                >
                                                    <img
                                                        src="https://as2.ftcdn.net/v2/jpg/04/38/54/83/1000_F_438548337_eKtT7G8pqjQi2s3YX5ZII2kpvca305hV.jpg"
                                                        alt="Label Placement"
                                                        class="img-thumbnail mt-2"
                                                        style="
                                                            width: 100%;
                                                            height: auto;
                                                        "
                                                    />
                                                </label>
                                            </div>
                                        </div>
                                    </div>

                                    <button
                                        type="button"
                                        id="continue-btn"
                                        class="btn btn-success w-100"
                                        style="
                                            background-color: #112b66 !important;
                                        "
                                    >
                                        Continue
                                    </button>
                                </div>

                                <!-- Card Two Content -->
                                <div id="card-two" style="display: none">
                                   

                                    <form>
                                        <div class="form-group">
                                            <label for="address">Address</label>
                                            <input
                                                type="text"
                                                class="form-control"
                                                id="address"
                                                placeholder="Enter address"
                                                required
                                            />
                                        </div>
                                        <div class="form-group">
                                            <label for="apartment"
                                                >Apartment/Unit</label
                                            >
                                            <input
                                                type="text"
                                                class="form-control"
                                                id="apartment"
                                                placeholder="Enter apartment/unit"
                                                required
                                            />
                                        </div>
                                        <div class="form-group">
                                            <label for="city">City</label>
                                            <input
                                                type="text"
                                                class="form-control"
                                                id="city"
                                                placeholder="Enter city"
                                                required
                                            />
                                        </div>
                                        <div class="form-group">
                                            <label for="state">State</label>
                                            <input
                                                type="text"
                                                class="form-control"
                                                id="state"
                                                placeholder="Enter state"
                                                required
                                            />
                                        </div>
                                        <div class="form-group">
                                            <label for="zip">Zip Code</label>
                                            <input
                                                type="text"
                                                class="form-control"
                                                id="zip"
                                                placeholder="Enter zip code"
                                                required
                                            />
                                        </div>
                                        <hr class="mt-3" />
                                        <div class="mb-4">
                                            <h6 class="fw-bold py-3">
                                                Delivery options
                                            </h6>
                                            <div
                                                class="card p-2 mb-3"
                                                style="
                                                    border: 1px solid black;
                                                    border-radius: 10px;
                                                "
                                            >
                                                <div
                                                    class="form-check d-flex align-items-center justify-content-between"
                                                >
                                                    <!-- Radio Button -->
                                                    <input
                                                        class="form-check-input me-3"
                                                        type="radio"
                                                        name="deliveryOption"
                                                        id="matkahuolto"
                                                        value="Matkahuolto"
                                                    />

                                                    <!-- Content Section -->
                                                    <div
                                                        class="d-flex flex-column"
                                                    >
                                                        <label
                                                            class="form-check-label fw-bold"
                                                            for="matkahuolto"
                                                            >Matkahuolto</label
                                                        >
                                                        <span
                                                            class="text-muted small"
                                                            >Matkahuolto
                                                            Lähellä</span
                                                        >
                                                    </div>

                                                    <!-- Price and Logo -->
                                                    <div
                                                        class="d-flex align-items-center"
                                                    >
                                                        <span
                                                            class="fw-bold me-3"
                                                            >Price: 17.68</span
                                                        >
                                                        <img
                                                            src="https://apitest.shipit.ax/images/carrier-logos/matkahuolto-logo.png"
                                                            alt="Matkahuolto Logo"
                                                            class="logo"
                                                        />
                                                    </div>
                                                </div>
                                            </div>
                                            <div
                                                class="card p-2 mb-3"
                                                style="
                                                    border: 1px solid black;
                                                    border-radius: 10px;
                                                "
                                            >
                                                <div
                                                    class="form-check d-flex align-items-center justify-content-between"
                                                >
                                                    <!-- Radio Button -->
                                                    <input
                                                        class="form-check-input me-3"
                                                        type="radio"
                                                        name="deliveryOption"
                                                        id="matkahuolto"
                                                        value="Matkahuolto"
                                                    />

                                                    <!-- Content Section -->
                                                    <div
                                                        class="d-flex flex-column"
                                                    >
                                                        <label
                                                            class="form-check-label fw-bold"
                                                            for="matkahuolto"
                                                            >Matkahuolto</label
                                                        >
                                                        <span
                                                            class="text-muted small"
                                                            >Matkahuolto
                                                            Lähellä</span
                                                        >
                                                    </div>

                                                    <!-- Price and Logo -->
                                                    <div
                                                        class="d-flex align-items-center"
                                                    >
                                                        <span
                                                            class="fw-bold me-3"
                                                            >Price: 17.68</span
                                                        >
                                                        <img
                                                            src="https://apitest.shipit.ax/images/carrier-logos/matkahuolto-logo.png"
                                                            alt="Matkahuolto Logo"
                                                            class="logo"
                                                        />
                                                    </div>
                                                </div>
                                            </div>
                                            <div
                                                class="card p-2 mb-3"
                                                style="
                                                    border: 1px solid black;
                                                    border-radius: 10px;
                                                "
                                            >
                                                <div
                                                    class="form-check d-flex align-items-center justify-content-between"
                                                >
                                                    <!-- Radio Button -->
                                                    <input
                                                        class="form-check-input me-3"
                                                        type="radio"
                                                        name="deliveryOption"
                                                        id="matkahuolto"
                                                        value="Matkahuolto"
                                                    />

                                                    <!-- Content Section -->
                                                    <div
                                                        class="d-flex flex-column"
                                                    >
                                                        <label
                                                            class="form-check-label fw-bold"
                                                            for="matkahuolto"
                                                            >Matkahuolto</label
                                                        >
                                                        <span
                                                            class="text-muted small"
                                                            >Matkahuolto
                                                            Lähellä</span
                                                        >
                                                    </div>

                                                    <!-- Price and Logo -->
                                                    <div
                                                        class="d-flex align-items-center"
                                                    >
                                                        <span
                                                            class="fw-bold me-3"
                                                            >Price: 17.68</span
                                                        >
                                                        <img
                                                            src="https://apitest.shipit.ax/images/carrier-logos/matkahuolto-logo.png"
                                                            alt="Matkahuolto Logo"
                                                            class="logo"
                                                        />
                                                    </div>
                                                </div>
                                            </div>
                                            <div
                                                class="card p-2 mb-3"
                                                style="
                                                    border: 1px solid black;
                                                    border-radius: 10px;
                                                "
                                            >
                                                <div
                                                    class="form-check d-flex align-items-center justify-content-between"
                                                >
                                                    <!-- Radio Button -->
                                                    <input
                                                        class="form-check-input me-3"
                                                        type="radio"
                                                        name="deliveryOption"
                                                        id="matkahuolto"
                                                        value="Matkahuolto"
                                                    />

                                                    <!-- Content Section -->
                                                    <div
                                                        class="d-flex flex-column"
                                                    >
                                                        <label
                                                            class="form-check-label fw-bold"
                                                            for="matkahuolto"
                                                            >Matkahuolto</label
                                                        >
                                                        <span
                                                            class="text-muted small"
                                                            >Matkahuolto
                                                            Lähellä</span
                                                        >
                                                    </div>

                                                    <!-- Price and Logo -->
                                                    <div
                                                        class="d-flex align-items-center"
                                                    >
                                                        <span
                                                            class="fw-bold me-3"
                                                            >Price: 17.68</span
                                                        >
                                                        <img
                                                            src="https://apitest.shipit.ax/images/carrier-logos/matkahuolto-logo.png"
                                                            alt="Matkahuolto Logo"
                                                            class="logo"
                                                        />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="text-center d-flex gap-3">
                                            <button
                                                type="button"
                                                data-bs-dismiss="modal"
                                                class="btn btn-success w-100 text-nowrap"
                                                style="
                                                    background-color: #f03e3e !important;
                                                "
                                            >
                                                Decline
                                            </button>
                                            <button
                                                type="submit"
                                                class="btn btn-success w-100 text-nowrap"
                                                style="
                                                    background-color: #112b66 !important;
                                                "
                                                data-bs-dismiss="modal"
                                            >
                                                Confirm Drop-off Location
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end -->
        <!-- modal for decline -->
        <div
            class="modal fade"
            id="notificationModal"
            tabindex="-1"
            aria-labelledby="notificationModalLabel"
            aria-hidden="true"
        >
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1
                            class="text-start fs-4 fw-bold"
                            id="exampleModalLabel"
                        >
                            Declining order
                        </h1>
                        <button
                            type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                        >
                            X
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="custom-card">
                            <div class="notification-circle"></div>
                            <div class="notification-content mt-5">
                                <p>Your order is not in stock.</p>
                                <p>We will delete it from motohub24.com.</p>
                                <p class="mt-4">
                                    <span class="notification-link"
                                        >Click here to create a new
                                        listing</span
                                    >
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button
                            type="button"
                            data-bs-dismiss="modal"
                            class="btn btn-success w-100"
                            style="background-color: #112b66 !important"
                        >
                            Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- end -->
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/2.1.2/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/2.1.2/js/dataTables.bootstrap5.js"></script>

<!-- The Modal -->
<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Shipping Details</h4>
                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                ></button>
            </div>
            <div class="loader" style="display: none">
                <img
                    src="{{ asset('assets/images/loader.gif') }}"
                    alt="Loading..."
                />
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <p>
                    <strong>Product Name:</strong>
                    <span id="productName"></span>
                </p>
                <p><strong>Email:</strong> <span id="email"></span></p>
                <p><strong>Type:</strong> <span id="type"></span></p>
                <p><strong>Length:</strong> <span id="length"></span></p>
                <p><strong>Width:</strong> <span id="width"></span></p>
                <p><strong>Height:</strong> <span id="height"></span></p>
                <p><strong>Weight:</strong> <span id="weight"></span></p>
                <p>
                    <strong>carrier_name:</strong>
                    <span id="carrier_name"></span>
                </p>
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button class="btn btn-danger" data-bs-dismiss="modal">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Table Javascript links end -->
<script>
    new DataTable("#example");

    document.addEventListener("DOMContentLoaded", function () {
        const modal = document.getElementById("myModal");
        const productNameSpan = document.getElementById("productName");
        const emailSpan = document.getElementById("email");
        const typeSpan = document.getElementById("type");
        const lengthSpan = document.getElementById("length");
        const widthSpan = document.getElementById("width");
        const heightSpan = document.getElementById("height");
        const weightSpan = document.getElementById("weight");
        const carrier_name = document.getElementById("carrier_name");

        document
            .querySelectorAll(".show-shipping-details")
            .forEach((button) => {
                button.addEventListener("click", function () {
                    const productName = this.getAttribute("data-product-name");
                    const email = this.getAttribute("data-email");
                    const type = this.getAttribute("data-type");
                    const length = this.getAttribute("data-length");
                    const width = this.getAttribute("data-width");
                    const height = this.getAttribute("data-height");
                    const weight = this.getAttribute("data-weight");
                    const carrier_name = this.getAttribute("data-carriername");

                    // Populate modal content
                    productNameSpan.textContent = productName;
                    emailSpan.textContent = email;
                    typeSpan.textContent = type;
                    widthSpan.textContent = width;
                    heightSpan.textContent = height;
                    lengthSpan.textContent = length;
                    weightSpan.textContent = weight;
                    carrier_name.textContent = carrier_name;
                });
            });
    });
</script>
<script>
    $(document).ready(function() {
        $("#checkall").click(function() {
            $('input:checkbox').not(this).prop('checked', this.checked);
        });
    });

    @if(Session::has('message'))
        var type = "{{ Session::get('alert-type', 'info') }}";
        switch(type){
            case 'info':
                toastr.info("{{ Session::get('message') }}");
                break;
            case 'warning':
                toastr.warning("{{ Session::get('message') }}");
                break;
            case 'success':
                toastr.success("{{ Session::get('message') }}");
                break;
            case 'error':
                toastr.error("{{ Session::get('message') }}");
                break;
        }
    @endif
</script>

<script>
    $(document).ready(function () {
        // Accept order
        $(document).on("click", ".accept_btn", function () {
            var orderId = $(this).data("id");

            // SweetAlert2 confirmation
            Swal.fire({
                title: "Are you sure?",
                text: "You are about to accept this order.",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes, accept it!",
            }).then((result) => {
                if (result.isConfirmed) {
                    $(".loader").show();
                    $.ajax({
                        url: "orders/accept/" + orderId,
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                        },
                        success: function (response) {
                            console.log(response);
                            toastr.success(response.success);
                            location.reload();
                            $(".loader").hide();
                        },
                        error: function (xhr) {
                            toastr.error("Something went wrong");
                            $(".loader").hide();
                        },
                    });
                }
            });
        });

        // Decline order
        $(document).on("click", ".decline_btn", function () {
            var orderId = $(this).data("id");

            // SweetAlert2 confirmation
            Swal.fire({
                title: "Are you sure?",
                text: "You are about to decline this order.",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#d33",
                cancelButtonColor: "#3085d6",
                confirmButtonText: "Yes, decline it!",
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "orders/decline/" + orderId,
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                        },
                        success: function (response) {
                            toastr.success(response.success);
                            location.reload(); // Reload the page to reflect changes
                        },
                        error: function (xhr) {
                            toastr.error("Something went wrong");
                        },
                    });
                }
            });
        });
    });
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        // Set up CSRF token in AJAX headers
        $.ajaxSetup({
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            },
        });

        let lastNotificationId = null; // To track the last notification ID

        // Fetch notifications initially
        fetchNotifications();

        // Toggle notification dropdown and fetch notifications on bell click
        $("#notificationBell").on("click", function () {
            $("#notificationDropdown").toggle();
            fetchNotifications();
        });

        // Fetch notifications every 2 seconds
        setInterval(fetchNotifications, 2000);

        // Create a Toast configuration
        const Toast = Swal.mixin({
            toast: true,
            position: "top-end",
            showConfirmButton: false,
            timer: 3000,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.onmouseenter = Swal.stopTimer;
                toast.onmouseleave = Swal.resumeTimer;
            },
        });

        // Function to fetch notifications
        function fetchNotifications() {
            $.ajax({
                url: '{{ route("notifications.fetch") }}',
                type: "GET",
                success: function (response) {
                    console.log(response);
                    // Clear the current notifications list
                    $(".notificationList").empty();

                    // Check if there are notifications
                    if (response.notifications.length > 0) {
                        // Reverse the notifications to show most recent first
                        response.notifications.reverse();

                        $.each(
                            response.notifications,
                            function (index, notification) {
                                let message = "";

                                // Check if the notification is for a pending order
                                if (notification.type === "pending") {
                                    message = `You received a new order: <b>Order# <a href="${notification.viewOrder}" style="color: #3085d6; text-decoration: underline;">${notification.order_id}</a></b>.`;

                                    // Show Toast for new order only if it's a new notification
                                    if (
                                        lastNotificationId !== notification.id
                                    ) {
                                        Toast.fire({
                                            icon: "success",
                                            html: message,
                                        });
                                        lastNotificationId = notification.id; // Update the lastNotificationId
                                    }
                                } else {
                                    // For accepted/declined actions
                                    message = `${
                                        notification.user.name || "A user"
                                    } has ${
                                        notification.action
                                    } <b>Order# <a href="${
                                        notification.viewOrder
                                    }" style="color: #3085d6; text-decoration: underline;">${
                                        notification.order_id
                                    }</a></b>.`;

                                    // Show Toast for action only if it's a new notification
                                    if (
                                        lastNotificationId !== notification.id
                                    ) {
                                        Toast.fire({
                                            icon: "info",
                                            html: message,
                                        });
                                        lastNotificationId = notification.id; // Update the lastNotificationId
                                    }
                                }

                                // Append the message to the notification list
                                $(".notificationList").append(`
                            <li class="notification-item">
                                <div class="notification-message">${message}</div>  
                                <div class='d-flex gap-4 align-items-center'>
                                    <div class="notification-actions">
                                        <a href="${
                                            notification.markAsReadUrl || "#"
                                        }" class="mark-read">Mark as read</a>
                                    </div>
                                    <div>
                                        <a href="${
                                            notification.viewOrder
                                        }" class="view-order"><b>Click to view order</b></a>
                                    </div>
                                </div>
                            </li>
                        `);
                            }
                        );
                    } else {
                        $(".notificationList").append(
                            '<li class="notification-item">No new notifications</li>'
                        );
                    }

                    // Update the notification count
                    $("#notificationCount").text(
                        response.unreadCount > 0 ? response.unreadCount : ""
                    );
                },
                error: function (xhr) {
                    console.log("Error fetching notifications:", xhr);
                },
            });
        }
    });
</script>

<script>
    document
        .getElementById("continue-btn")
        .addEventListener("click", function () {
            // Hide Card One
            document.getElementById("card-one").style.display = "none";
            // Show Card Two
            document.getElementById("card-two").style.display = "block";
        });
</script>

@endsection