@extends('vendor.layouts.app')

@section('title', 'Order Status')

@section('style')
@endsection

@section('content')
<main class="dash-content">
<div class="d-flex justify-content-between align-items-center flex-wrap orders">
          <div class="title-content">
            <h2 class="topbar-title">Update Order Status</h2>
            <p class="topbar-sub">Change the status of Order #ORD-2401</p>
          </div>
        </div>

        <!-- Update Order Status Layout -->
        <div class="us-layout">

          <!-- Current Status Banner -->
          <div class="us-current-banner">
            <div>
              <div class="us-current-label">Current Status</div>
              <div class="us-current-value">Processing</div>
            </div>
            <a href="" class="btn-typ-blue">Processing</a>
          </div>

          
          <!-- Select New Status -->
            <div class="status-card">
              <div class="us-section-title">Select New Status</div>
              <div class="us-status-list">

                <label class="us-status-item">
                  <div class="us-status-dot us-dot--green"></div>
                  <div class="us-status-connector"></div>
                  <div class="us-status-body">
                    <div class="us-status-name">Processing</div>
                    <div class="us-status-desc">Order is being prepared</div>
                  </div>
                  <input type="radio" name="order_status" value="processing" class="us-radio" checked>
                </label>

                <label class="us-status-item">
                  <div class="us-status-dot us-dot--green"></div>
                  <div class="us-status-connector"></div>
                  <div class="us-status-body">
                    <div class="us-status-name">Ready to Ship</div>
                    <div class="us-status-desc">Order is packed and ready</div>
                  </div>
                  <input type="radio" name="order_status" value="ready_to_ship" class="us-radio">
                </label>

                <label class="us-status-item">
                  <div class="us-status-dot us-dot--green"></div>
                  <div class="us-status-connector"></div>
                  <div class="us-status-body">
                    <div class="us-status-name">Shipped</div>
                    <div class="us-status-desc">Order has been dispatched</div>
                  </div>
                  <input type="radio" name="order_status" value="shipped" class="us-radio">
                </label>

                <label class="us-status-item">
                  <div class="us-status-dot us-dot--green"></div>
                  <div class="us-status-connector"></div>
                  <div class="us-status-body">
                    <div class="us-status-name">Out for Delivery</div>
                    <div class="us-status-desc">Order is with courier</div>
                  </div>
                  <input type="radio" name="order_status" value="out_for_delivery" class="us-radio">
                </label>

                <label class="us-status-item">
                  <div class="us-status-dot us-dot--green"></div>
                  <div class="us-status-connector"></div>
                  <div class="us-status-body">
                    <div class="us-status-name">Delivered</div>
                    <div class="us-status-desc">Order has been delivered</div>
                  </div>
                  <input type="radio" name="order_status" value="delivered" class="us-radio">
                </label>

                <label class="us-status-item">
                  <div class="us-status-dot us-dot--gray"></div>
                  <div class="us-status-connector"></div>
                  <div class="us-status-body">
                    <div class="us-status-name">On Hold</div>
                    <div class="us-status-desc">Order is temporarily paused</div>
                  </div>
                  <input type="radio" name="order_status" value="on_hold" class="us-radio">
                </label>

                <label class="us-status-item us-status-last">
                  <div class="us-status-dot us-dot--gray"></div>
                  <div class="us-status-body">
                    <div class="us-status-name">Cancelled</div>
                    <div class="us-status-desc">Order has been cancelled</div>
                  </div>
                  <input type="radio" name="order_status" value="cancelled" class="us-radio">
                </label>

              </div>
            </div>

            <div class="status-card mt-3">
            <!-- Basic Information -->
            <div class="us-section-title">Basic Information</div>
            <div class="us-form">

              <div class="us-form-group">
                <label class="us-form-label">Courier/Carrier <span class="us-required">*</span></label>
                <select class="us-select">
                  <option value="" disabled selected>Select couriers (e.g., FedEx, UPS, DHL)</option>
                  <option value="fedex">FedEx</option>
                  <option value="ups">UPS</option>
                  <option value="dhl">DHL</option>
                  <option value="usps">USPS</option>
                </select>
              </div>

              <div class="us-form-row">
                <div class="us-form-group">
                  <label class="us-form-label">Tracking Number <span class="us-required">*</span></label>
                  <input type="text" class="us-input" placeholder="Enter tracking number">
                </div>
                <div class="us-form-group">
                  <label class="us-form-label">Estimated Delivery</label>
                  <input type="date" class="us-input" placeholder="Select Date">
                </div>
              </div>

              <div class="us-form-group">
                <label class="us-form-label">Shipping Label</label>
                <div class="us-dropzone" id="usDropzone">
                  <input type="file" id="usFileInput" accept=".pdf,.png,.jpg,.jpeg" hidden>
                  <div class="us-dz-icon">
                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#b0b8c5" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
                    </svg>
                  </div>
                  <div class="us-dz-text">Upload shipping label (optional)</div>
                  <button type="button" class="us-browse-btn" onclick="document.getElementById('usFileInput').click()">Browse Files</button>
                </div>
              </div>

            </div>

            </div><!-- /.us-layout -->

            <!-- Hidden stats row kept for layout consistency -->
            <div class="stats-row" style="display:none;">
              <div class="stat-card">
                <div class="stat-icon stat-icon--teal">
                  <svg width="26" height="30" viewBox="0 0 26 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M23.375 29.75H2.125C1.56141 29.75 1.02091 29.5262 0.622398 29.1276C0.223883 28.7291 0 28.1886 0 27.625V18.0625C0 17.499 0.223883 16.9585 0.622398 16.5599C1.02091 16.1614 1.56141 15.9375 2.125 15.9375H7.79131V14.875C7.79131 14.3115 8.0152 13.771 8.41371 13.3724C8.81223 12.9739 9.35273 12.75 9.91631 12.75H15.5837V10.625C15.5837 10.0615 15.8076 9.52096 16.2061 9.12244C16.6046 8.72393 17.1451 8.50004 17.7087 8.50004H23.375C23.9386 8.50004 24.4791 8.72393 24.8776 9.12244C25.2761 9.52096 25.5 10.0615 25.5 10.625V27.625C25.5 28.1886 25.2761 28.7291 24.8776 29.1276C24.4791 29.5262 23.9386 29.75 23.375 29.75ZM7.79131 18.0625H2.125V27.625H7.79131V18.0625ZM15.5837 14.875H9.91631V27.625H15.5837V14.875ZM17.7087 27.625H23.375V10.625H17.7087V13.8125V27.625ZM15.9226 3.84842C11.9244 9.74317 4.5135 11.6546 4.5135 11.6546C4.24044 11.7245 3.95081 11.683 3.70831 11.5394C3.58824 11.4682 3.48335 11.3742 3.39965 11.2625C3.31594 11.1508 3.25504 11.0237 3.22044 10.8885C3.18583 10.7533 3.1782 10.6126 3.19797 10.4745C3.21774 10.3363 3.26453 10.2034 3.33567 10.0834C3.47933 9.84086 3.71344 9.66537 3.9865 9.59548C3.9865 9.59548 11.0436 7.80729 14.4936 2.14311L12.4036 2.12504C12.1218 2.12251 11.8526 2.00813 11.6551 1.80708C11.4577 1.60603 11.3482 1.33477 11.3507 1.05298C11.3532 0.771188 11.4676 0.501945 11.6686 0.30448C11.8697 0.107016 12.141 -0.00249304 12.4228 4.30887e-05L16.9702 0.0404182C17.2489 0.0423659 17.5156 0.153926 17.7126 0.350969C17.9097 0.548012 18.0212 0.814701 18.0232 1.09336L18.0625 5.53567C18.065 5.81746 17.9555 6.08872 17.7581 6.28977C17.5606 6.49082 17.2914 6.60519 17.0096 6.60773C16.7278 6.61027 16.4565 6.50076 16.2555 6.30329C16.0544 6.10583 15.94 5.83659 15.9375 5.55479L15.9226 3.84842Z" fill="white"/>
                  </svg>
                </div>
                <div class="stat-info">
                  <div class="stat-num">12</div>
                  <div class="stat-label">Pending</div>
                </div>
              </div>
              <div class="stat-card">
                <div class="stat-icon stat-icon--orange">

                  <svg width="25" height="27" viewBox="0 0 25 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M23.421 22.1525H5.74743C5.53012 22.1525 5.43701 21.867 5.60719 21.7358L8.06743 19.845H22.1247C23.1241 19.845 23.9531 19.0235 23.9725 18.0256L24.13 9.91826C24.148 8.99404 23.4712 8.19154 22.5557 8.0547C22.1154 7.98882 21.7029 8.29163 21.6369 8.73265C21.5709 9.17368 21.8753 9.58408 22.3167 9.65007C22.4314 9.66721 22.5162 9.76689 22.514 9.88238L22.3564 17.9942C22.354 18.1189 22.2501 18.2298 22.1248 18.2298H8.43462L5.88433 7.20345L7.17874 7.39215C7.62006 7.45791 8.03155 7.15165 8.0976 6.71062C8.1636 6.26959 7.85929 5.85741 7.4178 5.79141L5.47895 5.50107L4.73777 2.61994C4.64611 2.26279 4.32397 2.01929 3.95494 2.01929H0.808214C0.361879 2.01929 0 2.38099 0 2.82692C0 3.27286 0.361822 3.63456 0.808214 3.63456H3.32787L6.88764 18.6981L4.61997 20.4451C3.25189 21.4992 4.02134 23.7678 5.74738 23.7678H7.86904C7.77512 23.9986 7.72355 24.2928 7.72355 24.5816C7.72355 25.9176 8.81819 26.9999 10.1637 26.9999C11.5092 26.9999 12.6039 25.9198 12.6039 24.5839C12.6039 24.295 12.5523 23.9986 12.4584 23.7678H16.8724C16.7785 23.9986 16.7269 24.2928 16.7269 24.5816C16.7269 25.9176 17.8216 26.9999 19.1671 26.9999C20.5126 26.9999 21.6073 25.9198 21.6073 24.5839C21.6073 24.295 21.5557 23.9986 21.4618 23.7678H23.4211C23.8675 23.7678 24.2293 23.4061 24.2293 22.9602C24.2293 22.5142 23.8673 22.1525 23.421 22.1525ZM10.1637 25.3805C9.70947 25.3805 9.33998 25.0181 9.33998 24.5726C9.33998 24.1271 9.70953 23.7647 10.1637 23.7647C10.6179 23.7647 10.9875 24.1271 10.9875 24.5726C10.9875 25.0181 10.6179 25.3805 10.1637 25.3805ZM19.167 25.3805C18.7128 25.3805 18.3433 25.0181 18.3433 24.5726C18.3433 24.1271 18.7128 23.7647 19.167 23.7647C19.6213 23.7647 19.9908 24.1271 19.9908 24.5726C19.9908 25.0181 19.6213 25.3805 19.167 25.3805Z" fill="white"/>
                  <path d="M14.7805 11.7062C11.5438 11.7062 8.91058 9.08055 8.91058 5.85312C8.91058 2.62569 11.5438 0 14.7805 0C18.0172 0 20.6504 2.62569 20.6504 5.85312C20.6504 9.08055 18.0172 11.7062 14.7805 11.7062ZM14.7805 1.61493C12.4351 1.61493 10.527 3.51616 10.527 5.85312C10.527 8.19007 12.4352 10.0913 14.7805 10.0913C17.1258 10.0913 19.034 8.19007 19.034 5.85312C19.034 3.51616 17.1259 1.61493 14.7805 1.61493Z" fill="white"/>
                  <path d="M13.3488 7.90894L12.0507 6.36837C11.7632 6.02726 11.8069 5.51787 12.1484 5.23064C12.4898 4.94341 12.9996 4.98708 13.2872 5.32831L14.0004 6.17477L16.2196 3.81681C16.5254 3.49197 17.0369 3.47622 17.362 3.78168C17.6873 4.08714 17.703 4.5982 17.3972 4.92305L14.5559 7.94205C14.3021 8.20921 13.6527 8.26211 13.3488 7.90894Z" fill="white"/>
                </svg>
                </div>
                <div class="stat-info">
                  <div class="stat-num">8</div>
                  <div class="stat-label">Processing</div>
                </div>
              </div>
              <div class="stat-card">
                <div class="stat-icon stat-icon--green">
                  <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <mask id="mask0_89_5836" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="36" height="36">
                    <path d="M0 0H36V36H0V0Z" fill="white"/>
                    </mask>
                    <g mask="url(#mask0_89_5836)">
                    <path d="M10.962 23.8741C10.8273 23.8135 10.6819 23.7799 10.5342 23.7754C10.3865 23.7709 10.2394 23.7956 10.1012 23.8479C9.96306 23.9003 9.83655 23.9794 9.72894 24.0807C9.62132 24.1819 9.53471 24.3034 9.47404 24.4381C9.41337 24.5729 9.37983 24.7182 9.37534 24.8659C9.37085 25.0136 9.39549 25.1608 9.44786 25.2989C9.50023 25.4371 9.57931 25.5636 9.68057 25.6712C9.78183 25.7788 9.9033 25.8655 10.038 25.9261L13.038 27.2761C13.1728 27.3368 13.3181 27.3703 13.4658 27.3748C13.6135 27.3793 13.7607 27.3547 13.8988 27.3023C14.037 27.2499 14.1635 27.1709 14.2711 27.0696C14.3788 26.9683 14.4654 26.8469 14.526 26.7121C14.5867 26.5774 14.6202 26.432 14.6247 26.2843C14.6292 26.1366 14.6046 25.9895 14.5522 25.8513C14.4998 25.7131 14.4208 25.5866 14.3195 25.479C14.2182 25.3714 14.0968 25.2848 13.962 25.2241L10.962 23.8741Z" fill="white"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M20.688 2.48405C19.846 2.09251 18.9286 1.88965 18 1.88965C17.0714 1.88965 16.154 2.09251 15.312 2.48405L5.562 7.01855C4.46075 7.53064 3.52869 8.34664 2.87551 9.37052C2.22233 10.3944 1.87521 11.5836 1.875 12.7981V23.3206C1.87513 24.5441 2.22736 25.7418 2.88965 26.7706C3.55194 27.7994 4.4963 28.6159 5.61 29.1226L15.36 33.5596C16.189 33.9367 17.0892 34.1319 18 34.1319C18.9108 34.1319 19.811 33.9367 20.64 33.5596L30.39 29.1226C31.5037 28.6159 32.4481 27.7994 33.1104 26.7706C33.7726 25.7418 34.1249 24.5441 34.125 23.3206V12.7981C34.1248 11.5836 33.7777 10.3944 33.1245 9.37052C32.4713 8.34664 31.5393 7.53064 30.438 7.01855L20.688 2.48405ZM16.2615 4.52405C16.8063 4.27072 17.3999 4.13946 18.0008 4.13946C18.6016 4.13946 19.1952 4.27072 19.74 4.52405L29.49 9.05855C30.1905 9.38405 30.771 9.89255 31.182 10.5106L26.712 12.6286L13.113 5.98805L16.2615 4.52405ZM10.4865 7.20905L6.51 9.06005C5.82218 9.37891 5.23567 9.88134 4.815 10.5121L18 16.7551L24.111 13.8601L10.4865 7.20905ZM4.125 12.6751L16.875 18.7141V31.7281C16.6749 31.6713 16.4793 31.5996 16.29 31.5136L6.54 27.0766C5.81938 26.7486 5.20835 26.2203 4.77986 25.5545C4.35136 24.8888 4.12351 24.1138 4.1235 23.3221V12.7981L4.125 12.6751ZM19.125 31.7266C19.3241 31.6702 19.5186 31.599 19.707 31.5136L29.457 27.0766C30.1776 26.7486 30.7887 26.2203 31.2171 25.5545C31.6456 24.8888 31.8735 24.1138 31.8735 23.3221V12.7981L31.872 12.6736L19.1235 18.7111L19.125 31.7266Z" fill="white"/>
                    </g>
                  </svg>
                </div>
                <div class="stat-info">
                  <div class="stat-num">24</div>
                  <div class="stat-label">Shipped</div>
                </div>
              </div>
              <div class="stat-card">
                <div class="stat-icon stat-icon--amber">
                  <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_89_5843)">
                    <path d="M4.53234 17.0145C4.71189 17.1351 4.9233 17.1994 5.13959 17.1993C5.49232 17.1993 5.83866 17.0289 6.04959 16.7138C7.81692 14.0728 10.7713 12.4961 13.9525 12.4961C17.1244 12.4961 20.0739 14.0656 21.8425 16.6945C22.1797 17.1957 22.8593 17.3286 23.3605 16.9914C23.8617 16.6542 23.9946 15.9745 23.6574 15.4734C22.2444 13.3731 20.2184 11.8233 17.9033 10.9942C19.2917 9.86005 20.1797 8.13537 20.1797 6.20703C20.1797 2.79951 17.4075 0.0273438 14 0.0273438C10.5925 0.0273438 7.82031 2.79951 7.82031 6.20703C7.82031 8.12153 8.69542 9.83538 10.0667 10.9698C7.71531 11.7958 5.6589 13.3644 4.23161 15.4972C3.89566 15.9992 4.0303 16.6785 4.53234 17.0145ZM14 2.21484C16.2013 2.21484 17.9922 4.00575 17.9922 6.20703C17.9922 8.40831 16.2013 10.1992 14 10.1992C11.7987 10.1992 10.0078 8.40831 10.0078 6.20703C10.0078 4.00575 11.7987 2.21484 14 2.21484ZM18.3618 19.3938L16.7312 20.5701C16.4886 20.7451 16.3871 21.0553 16.4797 21.3385L17.1364 23.2418C17.1628 23.3211 17.1746 23.4047 17.1712 23.4883C17.148 23.9994 16.5073 24.3491 16.0374 24.0102L14.4069 22.8336C14.2885 22.7481 14.1461 22.7022 14.0001 22.7023C13.8573 22.7023 13.7145 22.7461 13.5932 22.8336L11.9627 24.0102C11.4928 24.3491 10.8491 23.9994 10.8287 23.4883C10.8258 23.4046 10.8378 23.3211 10.8643 23.2418L11.5203 21.3385C11.613 21.0553 11.5114 20.7451 11.2689 20.5701L9.63829 19.3938C9.09579 19.0025 9.37459 18.0742 10.0452 18.0742H12.0606C12.3605 18.0742 12.6263 17.9588 12.7189 17.6756L13.3417 15.7601C13.4454 15.4435 13.7227 15.2852 14.0001 15.2852C14.2774 15.2852 14.5548 15.4435 14.6584 15.7601L15.2812 17.6756C15.3739 17.9588 15.6396 18.0742 15.9395 18.0742H17.9549C18.6255 18.0742 18.9043 19.0025 18.3618 19.3938ZM27.7133 23.222L26.0828 24.3982C25.8402 24.5732 25.7386 24.8835 25.8313 25.1666L26.4879 27.0699C26.5144 27.1493 26.5262 27.2328 26.5228 27.3164C26.4995 27.8276 25.8589 28.1772 25.389 27.8383L23.7585 26.6617C23.6372 26.5742 23.4944 26.5304 23.3516 26.5304C23.2088 26.5304 23.066 26.5742 22.9447 26.6617L21.3142 27.8383C20.8444 28.1772 20.2006 27.8276 20.1803 27.3164C20.1773 27.2328 20.1894 27.1493 20.2158 27.0699L20.8719 25.1666C20.9646 24.8835 20.863 24.5732 20.6204 24.3982L18.9899 23.222C18.4474 22.8306 18.7261 21.9023 19.3967 21.9023H21.4122C21.7121 21.9023 21.9779 21.7869 22.0705 21.5037L22.6933 19.5882C22.7969 19.2716 23.0742 19.1133 23.3516 19.1133C23.629 19.1133 23.9063 19.2716 24.0099 19.5882L24.6327 21.5037C24.7254 21.7869 24.9911 21.9023 25.2911 21.9023H27.3065C27.977 21.9023 28.2558 22.8306 27.7133 23.222ZM9.0102 23.222L7.37964 24.3982C7.13705 24.5732 7.03549 24.8835 7.12819 25.1666L7.78482 27.0699C7.81128 27.1493 7.82309 27.2328 7.81966 27.3164C7.79641 27.8276 7.15575 28.1772 6.68587 27.8383L5.05531 26.6617C4.93402 26.5742 4.79123 26.5304 4.64844 26.5304C4.50565 26.5304 4.36286 26.5742 4.24156 26.6617L2.61105 27.8383C2.14118 28.1772 1.49745 27.8276 1.47711 27.3164C1.47415 27.2328 1.48619 27.1493 1.51266 27.0699L2.16869 25.1666C2.26138 24.8835 2.15983 24.5732 1.91723 24.3982L0.286672 23.222C-0.255828 22.8306 0.0229687 21.9023 0.693547 21.9023H2.709C3.00891 21.9023 3.27469 21.7869 3.36733 21.5037L3.99011 19.5882C4.09374 19.2716 4.37106 19.1133 4.64844 19.1133C4.92581 19.1133 5.20313 19.2716 5.30677 19.5882L5.92955 21.5037C6.02224 21.7869 6.28797 21.9023 6.58787 21.9023H8.60333C9.27391 21.9023 9.5527 22.8306 9.0102 23.222Z" fill="white"/>
                    </g>
                    <defs>
                    <clipPath id="clip0_89_5843">
                    <rect width="28" height="28" fill="white"/>
                    </clipPath>
                    </defs>
                  </svg>
                </div>
                <div class="stat-info">
                  <div class="stat-num">156</div>
                  <div class="stat-label">Delivered</div>
                </div>
              </div>

              <div class="stat-card">
                <div class="stat-icon stat-icon--purple">
                  <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_89_5843)">
                    <path d="M4.53234 17.0145C4.71189 17.1351 4.9233 17.1994 5.13959 17.1993C5.49232 17.1993 5.83866 17.0289 6.04959 16.7138C7.81692 14.0728 10.7713 12.4961 13.9525 12.4961C17.1244 12.4961 20.0739 14.0656 21.8425 16.6945C22.1797 17.1957 22.8593 17.3286 23.3605 16.9914C23.8617 16.6542 23.9946 15.9745 23.6574 15.4734C22.2444 13.3731 20.2184 11.8233 17.9033 10.9942C19.2917 9.86005 20.1797 8.13537 20.1797 6.20703C20.1797 2.79951 17.4075 0.0273438 14 0.0273438C10.5925 0.0273438 7.82031 2.79951 7.82031 6.20703C7.82031 8.12153 8.69542 9.83538 10.0667 10.9698C7.71531 11.7958 5.6589 13.3644 4.23161 15.4972C3.89566 15.9992 4.0303 16.6785 4.53234 17.0145ZM14 2.21484C16.2013 2.21484 17.9922 4.00575 17.9922 6.20703C17.9922 8.40831 16.2013 10.1992 14 10.1992C11.7987 10.1992 10.0078 8.40831 10.0078 6.20703C10.0078 4.00575 11.7987 2.21484 14 2.21484ZM18.3618 19.3938L16.7312 20.5701C16.4886 20.7451 16.3871 21.0553 16.4797 21.3385L17.1364 23.2418C17.1628 23.3211 17.1746 23.4047 17.1712 23.4883C17.148 23.9994 16.5073 24.3491 16.0374 24.0102L14.4069 22.8336C14.2885 22.7481 14.1461 22.7022 14.0001 22.7023C13.8573 22.7023 13.7145 22.7461 13.5932 22.8336L11.9627 24.0102C11.4928 24.3491 10.8491 23.9994 10.8287 23.4883C10.8258 23.4046 10.8378 23.3211 10.8643 23.2418L11.5203 21.3385C11.613 21.0553 11.5114 20.7451 11.2689 20.5701L9.63829 19.3938C9.09579 19.0025 9.37459 18.0742 10.0452 18.0742H12.0606C12.3605 18.0742 12.6263 17.9588 12.7189 17.6756L13.3417 15.7601C13.4454 15.4435 13.7227 15.2852 14.0001 15.2852C14.2774 15.2852 14.5548 15.4435 14.6584 15.7601L15.2812 17.6756C15.3739 17.9588 15.6396 18.0742 15.9395 18.0742H17.9549C18.6255 18.0742 18.9043 19.0025 18.3618 19.3938ZM27.7133 23.222L26.0828 24.3982C25.8402 24.5732 25.7386 24.8835 25.8313 25.1666L26.4879 27.0699C26.5144 27.1493 26.5262 27.2328 26.5228 27.3164C26.4995 27.8276 25.8589 28.1772 25.389 27.8383L23.7585 26.6617C23.6372 26.5742 23.4944 26.5304 23.3516 26.5304C23.2088 26.5304 23.066 26.5742 22.9447 26.6617L21.3142 27.8383C20.8444 28.1772 20.2006 27.8276 20.1803 27.3164C20.1773 27.2328 20.1894 27.1493 20.2158 27.0699L20.8719 25.1666C20.9646 24.8835 20.863 24.5732 20.6204 24.3982L18.9899 23.222C18.4474 22.8306 18.7261 21.9023 19.3967 21.9023H21.4122C21.7121 21.9023 21.9779 21.7869 22.0705 21.5037L22.6933 19.5882C22.7969 19.2716 23.0742 19.1133 23.3516 19.1133C23.629 19.1133 23.9063 19.2716 24.0099 19.5882L24.6327 21.5037C24.7254 21.7869 24.9911 21.9023 25.2911 21.9023H27.3065C27.977 21.9023 28.2558 22.8306 27.7133 23.222ZM9.0102 23.222L7.37964 24.3982C7.13705 24.5732 7.03549 24.8835 7.12819 25.1666L7.78482 27.0699C7.81128 27.1493 7.82309 27.2328 7.81966 27.3164C7.79641 27.8276 7.15575 28.1772 6.68587 27.8383L5.05531 26.6617C4.93402 26.5742 4.79123 26.5304 4.64844 26.5304C4.50565 26.5304 4.36286 26.5742 4.24156 26.6617L2.61105 27.8383C2.14118 28.1772 1.49745 27.8276 1.47711 27.3164C1.47415 27.2328 1.48619 27.1493 1.51266 27.0699L2.16869 25.1666C2.26138 24.8835 2.15983 24.5732 1.91723 24.3982L0.286672 23.222C-0.255828 22.8306 0.0229687 21.9023 0.693547 21.9023H2.709C3.00891 21.9023 3.27469 21.7869 3.36733 21.5037L3.99011 19.5882C4.09374 19.2716 4.37106 19.1133 4.64844 19.1133C4.92581 19.1133 5.20313 19.2716 5.30677 19.5882L5.92955 21.5037C6.02224 21.7869 6.28797 21.9023 6.58787 21.9023H8.60333C9.27391 21.9023 9.5527 22.8306 9.0102 23.222Z" fill="white"/>
                    </g>
                    <defs>
                    <clipPath id="clip0_89_5843">
                    <rect width="28" height="28" fill="white"/>
                    </clipPath>
                    </defs>
                  </svg>
                </div>
                <div class="stat-info">
                  <div class="stat-num">3</div>
                  <div class="stat-label">Cancelled</div>
                </div>
              </div>
            </div>
        </div>
        <div class="btn-wrap botm">
            <a href="" class="btn-typ1">Cancel</a>
            <a href="" class="btn-typ2">Update Status</a>
          </div>
</main>
@endsection

@section('script')
<script>
(function () {
      /* Revenue overview chart */
      const ctx = document.getElementById('revenueChart').getContext('2d');
      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ['0', '1'],
          datasets: [
            { label: 'Series A', data: [25, 42], backgroundColor: '#AD46FF', borderRadius: 5, barPercentage: 0.55, categoryPercentage: 0.75 },
            { label: 'Series B', data: [38, 30], backgroundColor: '#77BD65', borderRadius: 5, barPercentage: 0.55, categoryPercentage: 0.75 },
            { label: 'Series C', data: [20, 47], backgroundColor: '#EB8F48', borderRadius: 5, barPercentage: 0.55, categoryPercentage: 0.75 },
            { label: 'Series D', data: [14, 28], backgroundColor: '#EABC49', borderRadius: 5, barPercentage: 0.55, categoryPercentage: 0.75 },
          ]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: { legend: { display: false } },
          scales: {
            x: { grid: { display: false }, border: { display: false }, ticks: { color: '#8B929C', font: { family: 'Poppins', size: 12 } } },
            y: { grid: { color: '#F1F2F4' }, border: { display: false }, ticks: { stepSize: 15, color: '#8B929C', font: { family: 'Poppins', size: 12 } } }
          }
        }
      });

      /* Mobile sidebar */
      const hamburgerBtn  = document.getElementById('hamburgerBtn');
      const dashSidebar   = document.getElementById('dashSidebar');
      const sidebarOverlay = document.getElementById('sidebarOverlay');
      const sidebarClose  = document.getElementById('sidebarClose');

      function openSidebar() {
        dashSidebar.classList.add('sidebar-open');
        sidebarOverlay.classList.add('overlay-active');
        hamburgerBtn.setAttribute('aria-expanded', 'true');
        document.body.classList.add('sidebar-is-open');
      }

      function closeSidebar() {
        dashSidebar.classList.remove('sidebar-open');
        sidebarOverlay.classList.remove('overlay-active');
        hamburgerBtn.setAttribute('aria-expanded', 'false');
        document.body.classList.remove('sidebar-is-open');
      }

      hamburgerBtn.addEventListener('click', openSidebar);
      sidebarClose.addEventListener('click', closeSidebar);
      sidebarOverlay.addEventListener('click', closeSidebar);

      document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') closeSidebar();
      });
    })();
</script>
@endsection