@extends('admin.layout.index')
@section('title','Admin | Payment Management')

@section('custom-style')
    <style>
    </style>
@endsection

@section('content')

    <div class="main-content app-content">
        <div class="container-fluid">


            <!-- Start::page-header -->
            <div class="my-4 page-header-breadcrumb d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h1 class="page-title fw-medium fs-18 mb-2">Payment Management</h1>
                    <div class="">
                        <nav>
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Payments Detail</li>
                            </ol>
                        </nav>
                    </div>
                </div>
                <div class="btn-list">
                    <button class="btn btn-primary-light btn-wave waves-effect waves-light">
                        <i class="bx bx-download align-middle me-2"></i>Generate Reports
                    </button>
                </div>
            </div>
            <!-- End::page-header -->

            <!-- Financial Reports Section -->
            <div class="row mt-4">
                <div class="col-md-12">
                    <div class="card custom-card p-3">
                        <div class="row gy-3">
                            <div class="col-xl-4 pe-xl-0">
                                <div class="p-3 border border-dashed border-2 rounded text-center">
                                    <div class="svg-icon-background bg-primary-transparent mb-3 svg-primary mx-auto">
                                        <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24">
                                            <path d="M13,16H7a1,1,0,0,0,0,2h6a1,1,0,0,0,0-2ZM9,10h2a1,1,0,0,0,0-2H9a1,1,0,0,0,0,2Zm12,2H18V3a1,1,0,0,0-.5-.87,1,1,0,0,0-1,0l-3,1.72-3-1.72a1,1,0,0,0-1,0l-3,1.72-3-1.72a1,1,0,0,0-1,0A1,1,0,0,0,2,3V19a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V13A1,1,0,0,0,21,12ZM5,20a1,1,0,0,1-1-1V4.73L6,5.87a1.08,1.08,0,0,0,1,0l3-1.72,3,1.72a1.08,1.08,0,0,0,1,0l2-1.14V19a3,3,0,0,0,.18,1Zm15-1a1,1,0,0,1-2,0V14h2Zm-7-7H7a1,1,0,0,0,0,2h6a1,1,0,0,0,0-2Z"></path>
                                        </svg>
                                    </div>
                                    <div class="flex-fill">
                                        <h6 class="mb-2 fs-12">Total Earnings</h6>
                                        <div class="pb-0 mt-0">
                                            <div>
                                                <h4 class="fs-18 fw-medium mb-2 d-flex align-items-center justify-content-center flex-wrap">
                                                    <span class="count-up" data-count="192">125</span>
                                                </h4>
                                                <p class="text-muted fs-11 mb-0 lh-1">
											<span class="text-success me-1 fw-medium">
												<i class="ri-arrow-up-s-line me-1 align-middle"></i>3.25%
											</span>
                                                    <span>this month</span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4">
                                <div class="p-3 border border-dashed border-2 rounded text-center">
                                    <div class="svg-icon-background bg-success-transparent mb-3 svg-success mx-auto">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                            <path d="M11.5,20h-6a1,1,0,0,1-1-1V5a1,1,0,0,1,1-1h5V7a3,3,0,0,0,3,3h3v5a1,1,0,0,0,2,0V9s0,0,0-.06a1.31,1.31,0,0,0-.06-.27l0-.09a1.07,1.07,0,0,0-.19-.28h0l-6-6h0a1.07,1.07,0,0,0-.28-.19.29.29,0,0,0-.1,0A1.1,1.1,0,0,0,11.56,2H5.5a3,3,0,0,0-3,3V19a3,3,0,0,0,3,3h6a1,1,0,0,0,0-2Zm1-14.59L15.09,8H13.5a1,1,0,0,1-1-1ZM7.5,14h6a1,1,0,0,0,0-2h-6a1,1,0,0,0,0,2Zm4,2h-4a1,1,0,0,0,0,2h4a1,1,0,0,0,0-2Zm-4-6h1a1,1,0,0,0,0-2h-1a1,1,0,0,0,0,2Zm13.71,6.29a1,1,0,0,0-1.42,0l-3.29,3.3-1.29-1.3a1,1,0,0,0-1.42,1.42l2,2a1,1,0,0,0,1.42,0l4-4A1,1,0,0,0,21.21,16.29Z"></path>
                                        </svg>
                                    </div>
                                    <div class="flex-fill">
                                        <h6 class="mb-2 fs-12">Total Expenses</h6>
                                        <div>
                                            <h4 class="fs-18 fw-medium mb-2 d-flex align-items-center justify-content-center flex-wrap">
                                                <span class="count-up" data-count="68.83">60</span></h4>
                                            <p class="text-muted fs-11 mb-0 lh-1">
										<span class="text-danger me-1 fw-medium">
											<i class="ri-arrow-down-s-line me-1 align-middle"></i>1.16%
										</span>
                                                <span>this month</span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4">
                                <div class="p-3 border border-dashed border-2 rounded text-center">
                                    <div class="svg-icon-background bg-light mb-3 svg-dark mx-auto">
                                        <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24">
                                            <path d="M19,12h-7V5c0-0.6-0.4-1-1-1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9C20,12.4,19.6,12,19,12z M12,19.9c-3.8,0.6-7.4-2.1-7.9-5.9C3.5,10.2,6.2,6.6,10,6.1V13c0,0.6,0.4,1,1,1h6.9C17.5,17.1,15.1,19.5,12,19.9z M15,2c-0.6,0-1,0.4-1,1v6c0,0.6,0.4,1,1,1h6c0.6,0,1-0.4,1-1C22,5.1,18.9,2,15,2z M16,8V4.1C18,4.5,19.5,6,19.9,8H16z"></path>
                                        </svg>
                                    </div>
                                    <div class="flex-fill">
                                        <h6 class="mb-2 fs-12">Total Payments

                                        </h6>
                                        <div>
                                            <h4 class="fs-18 fw-medium mb-2 d-flex align-items-center justify-content-center flex-wrap">
                                                <span class="count-up" data-count="32.47">65</span></h4>
                                            <p class="text-muted fs-11 mb-0 lh-1">
										<span class="text-success me-1 fw-semibFold">
											<i class="ri-arrow-down-s-line me-1 align-middle"></i>0.46%
										</span>
                                                <span>this month</span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row align-items-center mb-4">
                <div class="col-lg-12">
                    <div class="card custom-card mb-0">
                        <div class="card-header justify-content-between">
                            <div class="card-title">
                                Apply Filters
                            </div>
                        </div>

                        <div class="card-body">
                            <div class="input-group companies-search-input w-20-block">
                                <input class="form-control" type="search" placeholder="Search" aria-label="Search">
                                <input type="date" class="form-control w-20-block"
                                       aria-label="Text input with segmented dropdown button" placeholder="Apply date">
                                <select class="form-select rounded-0" data-trigger name="choices-single-default"
                                        id="choices-single-default">
                                    <option value="">Transaction Status</option>
                                    <option value="Choice 1">Pending</option>
                                    <option value="Choice 2">Approved</option>
                                    <option value="Choice 3">Cancelled</option>
                                </select>
                                <button type="button" class="btn btn-primary"><i class="ri-search-line"></i></button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="card custom-card">
                <div class="card-body">
                    <ul class="nav nav-tabs tab-style-2 mb-3 d-sm-flex" id="myTab1" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="order-tab" data-bs-toggle="tab"
                                    data-bs-target="#order-tab-pane" type="button" role="tab"
                                    aria-controls="home-tab-pane" aria-selected="true"><i
                                    class="bi bi-file-break me-1 align-middle"></i>Pending
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="confirmed-tab" data-bs-toggle="tab"
                                    data-bs-target="#confirm-tab-pane" type="button" role="tab"
                                    aria-controls="profile-tab-pane" aria-selected="false" tabindex="-1"><i
                                    class="bi bi-file-check me-1 align-middle"></i>Approved
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="completed-tab" data-bs-toggle="tab"
                                    data-bs-target="#completed-tab-pane" type="button" role="tab"
                                    aria-controls="completed-tab-pane" aria-selected="false" tabindex="-1"><i
                                    class="bi bi-file-arrow-up me-1 align-middle"></i>Cancelled
                            </button>
                        </li>
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active text-muted border" id="order-tab-pane" role="tabpanel"
                             aria-labelledby="home-tab" tabindex="0">
                            <div class="card-header justify-content-between p-0 m-0">
                                <div class="card-title">
                                    Pending Transactions
                                </div>
                                <div class="d-flex flex-wrap gap-2">

                                    <div class="card-body d-flex align-items-center flex-wrap">

                                        <div class="dropdown">
                                            <button class="btn btn-light dropdown-toggle m-1" type="button"
                                                    id="dropdownMenuButton1" data-bs-toggle="dropdown"
                                                    aria-expanded="false">
                                                Sort By
                                            </button>
                                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                <li><a class="dropdown-item" href="javascript:void(0);">Recently
                                                        Added</a></li>
                                                <li><a class="dropdown-item" href="javascript:void(0);">7 Days
                                                        Ago</a></li>
                                                <li><a class="dropdown-item" href="javascript:void(0);">1 Month
                                                        Ago</a></li>

                                            </ul>
                                        </div>
                                        <div class="d-flex align-items-center m-1" role="search">
                                            <input class="form-control" type="search" placeholder="Search"
                                                   aria-label="Search">
                                            <button class="btn btn-light ms-2" type="submit">Search</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table class="table text-nowrap table-hover">
                                    <thead>
                                    <tr>
                                        <th scope="col">Name</th>
                                        <th scope="col">Date</th>
                                        <th scope="col">Price</th>
                                        <th scope="col">Status</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr class="invoice-list">
                                        <td>
                                            Cameron Williamson
                                        </td>
                                        <td>
                                            12 Dec,2023  10:00AM
                                        </td>
                                        <td>
                                            USD$ 100
                                        </td>
                                        <td>
                                            <span class="badge bg-warning-transparent">Pending</span>
                                        </td>

                                        <td>
                                            <a href="javascript:void(0)" data-bs-toggle="tooltip"
                                               data-bs-custom-class="tooltip-primary"
                                               aria-label="Transaction Status"
                                               title="Transaction Status"
                                               data-modal-target="#orderStatus"
                                               class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn"><i
                                                    class="ri-information-fill"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr class="invoice-list">
                                        <td>
                                            Cameron Williamson
                                        </td>
                                        <td>
                                            12 Dec,2023  10:00AM
                                        </td>
                                        <td>
                                            USD$ 100
                                        </td>
                                        <td>
                                            <span class="badge bg-warning-transparent">Pending</span>
                                        </td>

                                        <td>
                                            <a href="javascript:void(0)" data-bs-toggle="tooltip"
                                               data-bs-custom-class="tooltip-primary"
                                               aria-label="Transaction Status"
                                               title="Transaction Status"
                                               data-modal-target="#orderStatus"
                                               class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn"><i
                                                    class="ri-information-fill"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr class="invoice-list">
                                        <td>
                                            Cameron Williamson
                                        </td>
                                        <td>
                                            12 Dec,2023  10:00AM
                                        </td>
                                        <td>
                                            USD$ 100
                                        </td>
                                        <td>
                                            <span class="badge bg-warning-transparent">Pending</span>
                                        </td>

                                        <td>
                                            <a href="javascript:void(0)" data-bs-toggle="tooltip"
                                               data-bs-custom-class="tooltip-primary"
                                               aria-label="Transaction Status"
                                               title="Transaction Status"
                                               data-modal-target="#orderStatus"
                                               class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn"><i
                                                    class="ri-information-fill"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr class="invoice-list">
                                        <td>
                                            Cameron Williamson
                                        </td>
                                        <td>
                                            12 Dec,2023  10:00AM
                                        </td>
                                        <td>
                                            USD$ 100
                                        </td>
                                        <td>
                                            <span class="badge bg-warning-transparent">Pending</span>
                                        </td>

                                        <td>
                                            <a href="javascript:void(0)" data-bs-toggle="tooltip"
                                               data-bs-custom-class="tooltip-primary"
                                               aria-label="Transaction Status"
                                               title="Transaction Status"
                                               data-modal-target="#orderStatus"
                                               class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn"><i
                                                    class="ri-information-fill"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr class="invoice-list">
                                        <td>
                                            Cameron Williamson
                                        </td>
                                        <td>
                                            12 Dec,2023  10:00AM
                                        </td>
                                        <td>
                                            USD$ 100
                                        </td>
                                        <td>
                                            <span class="badge bg-warning-transparent">Pending</span>
                                        </td>

                                        <td>
                                            <a href="javascript:void(0)" data-bs-toggle="tooltip"
                                               data-bs-custom-class="tooltip-primary"
                                               aria-label="Transaction Status"
                                               title="Transaction Status"
                                               data-modal-target="#orderStatus"
                                               class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn"><i
                                                    class="ri-information-fill"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <div class="card-footer border-top-0">
                                    <div class="d-flex align-items-center flex-wrap overflow-auto">
                                        <div class="mb-2 mb-sm-0">
                                            Showing <b>1</b> to <b>10</b> of <b>10</b> entries <i
                                                class="bi bi-arrow-right ms-2 fw-medium"></i>
                                        </div>
                                        <div class="ms-auto">
                                            <ul class="pagination mb-0 overflow-auto">
                                                <li class="page-item disabled">
                                                    <a class="page-link">Previous</a>
                                                </li>
                                                <li class="page-item active" aria-current="page"><a class="page-link"
                                                                                                    href="javascript:void(0);">1</a>
                                                </li>
                                                <li class="page-item">
                                                    <a class="page-link" href="javascript:void(0);">2</a>
                                                </li>
                                                <li class="page-item"><a class="page-link"
                                                                         href="javascript:void(0);">3</a></li>
                                                <li class="page-item"><a class="page-link"
                                                                         href="javascript:void(0);">4</a></li>
                                                <li class="page-item"><a class="page-link"
                                                                         href="javascript:void(0);">5</a></li>
                                                <li class="page-item">
                                                    <a class="page-link" href="javascript:void(0);">Next</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade  text-muted border" id="confirm-tab-pane" role="tabpanel"
                             aria-labelledby="profile-tab" tabindex="0">
                            <div class="card-header justify-content-between p-0 m-0">
                                <div class="card-title">
                                    Approved Transactions
                                </div>
                                <div class="d-flex flex-wrap gap-2">

                                    <div class="card-body d-flex align-items-center flex-wrap">

                                        <div class="dropdown">
                                            <button class="btn btn-light dropdown-toggle m-1" type="button"
                                                    id="dropdownMenuButton1" data-bs-toggle="dropdown"
                                                    aria-expanded="false">
                                                Sort By
                                            </button>
                                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                <li><a class="dropdown-item" href="javascript:void(0);">Recently
                                                        Added</a></li>
                                                <li><a class="dropdown-item" href="javascript:void(0);">7 Days
                                                        Ago</a></li>
                                                <li><a class="dropdown-item" href="javascript:void(0);">1 Month
                                                        Ago</a></li>

                                            </ul>
                                        </div>
                                        <div class="d-flex align-items-center m-1" role="search">
                                            <input class="form-control" type="search" placeholder="Search"
                                                   aria-label="Search">
                                            <button class="btn btn-light ms-2" type="submit">Search</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table class="table text-nowrap table-hover">
                                    <thead>
                                    <tr>
                                        <th scope="col">Name</th>
                                        <th scope="col">Date</th>
                                        <th scope="col">Price</th>
                                        <th scope="col">Status</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr class="invoice-list">
                                        <td>
                                            Cameron Williamson
                                        </td>
                                        <td>
                                            12 Dec,2023  10:00AM
                                        </td>
                                        <td>
                                            USD$ 100
                                        </td>
                                        <td>
                                            <span class="badge bg-success-transparent">Approved</span>
                                        </td>
                                        <td>
                                            <button id="alert-confirm"
                                                    data-bs-toggle="tooltip"
                                                    data-bs-custom-class="tooltip-danger"
                                                    aria-label="Cancel Order"
                                                    title="Delete"
                                                    data-modal-target="#delete-modal"
                                                    class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn"><i
                                                    class="ri-delete-bin-5-line"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    <tr class="invoice-list">
                                        <td>
                                            Cameron Williamson
                                        </td>
                                        <td>
                                            12 Dec,2023  10:00AM
                                        </td>
                                        <td>
                                            USD$ 100
                                        </td>
                                        <td>
                                            <span class="badge bg-success-transparent">Approved</span>
                                        </td>
                                        <td>
                                            <button id="alert-confirm"
                                                    data-bs-toggle="tooltip"
                                                    data-bs-custom-class="tooltip-danger"
                                                    aria-label="Cancel Order"
                                                    title="Delete"
                                                    data-modal-target="#delete-modal"
                                                    class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn"><i
                                                    class="ri-delete-bin-5-line"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    <tr class="invoice-list">
                                        <td>
                                            Cameron Williamson
                                        </td>
                                        <td>
                                            12 Dec,2023  10:00AM
                                        </td>
                                        <td>
                                            USD$ 100
                                        </td>
                                        <td>
                                            <span class="badge bg-success-transparent">Approved</span>
                                        </td>
                                        <td>
                                            <button id="alert-confirm"
                                                    data-bs-toggle="tooltip"
                                                    data-bs-custom-class="tooltip-danger"
                                                    aria-label="Cancel Order"
                                                    title="Delete"
                                                    data-modal-target="#delete-modal"
                                                    class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn"><i
                                                    class="ri-delete-bin-5-line"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    <tr class="invoice-list">
                                        <td>
                                            Cameron Williamson
                                        </td>
                                        <td>
                                            12 Dec,2023  10:00AM
                                        </td>
                                        <td>
                                            USD$ 100
                                        </td>
                                        <td>
                                            <span class="badge bg-success-transparent">Approved</span>
                                        </td>
                                        <td>
                                            <button id="alert-confirm"
                                                    data-bs-toggle="tooltip"
                                                    data-bs-custom-class="tooltip-danger"
                                                    aria-label="Cancel Order"
                                                    title="Delete"
                                                    data-modal-target="#delete-modal"
                                                    class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn"><i
                                                    class="ri-delete-bin-5-line"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    <tr class="invoice-list">
                                        <td>
                                            Cameron Williamson
                                        </td>
                                        <td>
                                            12 Dec,2023  10:00AM
                                        </td>
                                        <td>
                                            USD$ 100
                                        </td>
                                        <td>
                                            <span class="badge bg-success-transparent">Approved</span>
                                        </td>
                                        <td>
                                            <button id="alert-confirm"
                                                    data-bs-toggle="tooltip"
                                                    data-bs-custom-class="tooltip-danger"
                                                    aria-label="Cancel Order"
                                                    title="Delete"
                                                    data-modal-target="#delete-modal"
                                                    class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn"><i
                                                    class="ri-delete-bin-5-line"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <div class="card-footer border-top-0">
                                    <div class="d-flex align-items-center flex-wrap overflow-auto">
                                        <div class="mb-2 mb-sm-0">
                                            Showing <b>1</b> to <b>10</b> of <b>10</b> entries <i
                                                class="bi bi-arrow-right ms-2 fw-medium"></i>
                                        </div>
                                        <div class="ms-auto">
                                            <ul class="pagination mb-0 overflow-auto">
                                                <li class="page-item disabled">
                                                    <a class="page-link">Previous</a>
                                                </li>
                                                <li class="page-item active" aria-current="page"><a class="page-link"
                                                                                                    href="javascript:void(0);">1</a>
                                                </li>
                                                <li class="page-item">
                                                    <a class="page-link" href="javascript:void(0);">2</a>
                                                </li>
                                                <li class="page-item"><a class="page-link"
                                                                         href="javascript:void(0);">3</a></li>
                                                <li class="page-item"><a class="page-link"
                                                                         href="javascript:void(0);">4</a></li>
                                                <li class="page-item"><a class="page-link"
                                                                         href="javascript:void(0);">5</a></li>
                                                <li class="page-item">
                                                    <a class="page-link" href="javascript:void(0);">Next</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade  text-muted border" id="completed-tab-pane" role="tabpanel"
                             aria-labelledby="completed-tab" tabindex="0">
                            <div class="card-header justify-content-between p-0 m-0">
                                <div class="card-title">
                                    Cancelled Transactions
                                </div>
                                <div class="d-flex flex-wrap gap-2">

                                    <div class="card-body d-flex align-items-center flex-wrap">

                                        <div class="dropdown">
                                            <button class="btn btn-light dropdown-toggle m-1" type="button"
                                                    id="dropdownMenuButton1" data-bs-toggle="dropdown"
                                                    aria-expanded="false">
                                                Sort By
                                            </button>
                                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                <li><a class="dropdown-item" href="javascript:void(0);">Recently
                                                        Added</a></li>
                                                <li><a class="dropdown-item" href="javascript:void(0);">7 Days
                                                        Ago</a></li>
                                                <li><a class="dropdown-item" href="javascript:void(0);">1 Month
                                                        Ago</a></li>

                                            </ul>
                                        </div>
                                        <div class="d-flex align-items-center m-1" role="search">
                                            <input class="form-control" type="search" placeholder="Search"
                                                   aria-label="Search">
                                            <button class="btn btn-light ms-2" type="submit">Search</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table class="table text-nowrap table-hover">
                                    <thead>
                                    <tr>
                                        <th scope="col">Name</th>
                                        <th scope="col">Date</th>
                                        <th scope="col">Price</th>
                                        <th scope="col">Status</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr class="invoice-list">
                                        <td>
                                            Cameron Williamson
                                        </td>
                                        <td>
                                            12 Dec,2023  10:00AM
                                        </td>
                                        <td>
                                            USD$ 100
                                        </td>
                                        <td>
                                            <span class="badge bg-danger-transparent">
                                                Cancelled
                                            </span>
                                        </td>
                                        <td>
                                            <button id="alert-confirm"
                                                    data-bs-toggle="tooltip"
                                                    data-bs-custom-class="tooltip-danger"
                                                    aria-label="Cancel Order"
                                                    title="Delete"
                                                    data-modal-target="#delete-modal"
                                                    class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn"><i
                                                    class="ri-delete-bin-5-line"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    <tr class="invoice-list">
                                        <td>
                                            Cameron Williamson
                                        </td>
                                        <td>
                                            12 Dec,2023  10:00AM
                                        </td>
                                        <td>
                                            USD$ 100
                                        </td>
                                        <td>
                                            <span class="badge bg-danger-transparent">
                                                Cancelled
                                            </span>
                                        </td>
                                        <td>
                                            <button id="alert-confirm"
                                                    data-bs-toggle="tooltip"
                                                    data-bs-custom-class="tooltip-danger"
                                                    aria-label="Cancel Order"
                                                    title="Delete"
                                                    data-modal-target="#delete-modal"
                                                    class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn"><i
                                                    class="ri-delete-bin-5-line"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    <tr class="invoice-list">
                                        <td>
                                            Cameron Williamson
                                        </td>
                                        <td>
                                            12 Dec,2023  10:00AM
                                        </td>
                                        <td>
                                            USD$ 100
                                        </td>
                                        <td>
                                            <span class="badge bg-danger-transparent">
                                                Cancelled
                                            </span>
                                        </td>
                                        <td>
                                            <button id="alert-confirm"
                                                    data-bs-toggle="tooltip"
                                                    data-bs-custom-class="tooltip-danger"
                                                    aria-label="Cancel Order"
                                                    title="Delete"
                                                    data-modal-target="#delete-modal"
                                                    class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn"><i
                                                    class="ri-delete-bin-5-line"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    <tr class="invoice-list">
                                        <td>
                                            Cameron Williamson
                                        </td>
                                        <td>
                                            12 Dec,2023  10:00AM
                                        </td>
                                        <td>
                                            USD$ 100
                                        </td>
                                        <td>
                                            <span class="badge bg-danger-transparent">
                                                Cancelled
                                            </span>
                                        </td>
                                        <td>
                                            <button id="alert-confirm"
                                                    data-bs-toggle="tooltip"
                                                    data-bs-custom-class="tooltip-danger"
                                                    aria-label="Cancel Order"
                                                    title="Delete"
                                                    data-modal-target="#delete-modal"
                                                    class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn"><i
                                                    class="ri-delete-bin-5-line"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    <tr class="invoice-list">
                                        <td>
                                            Cameron Williamson
                                        </td>
                                        <td>
                                            12 Dec,2023  10:00AM
                                        </td>
                                        <td>
                                            USD$ 100
                                        </td>
                                        <td>
                                            <span class="badge bg-danger-transparent">
                                                Cancelled
                                            </span>
                                        </td>
                                        <td>
                                            <button id="alert-confirm"
                                                    data-bs-toggle="tooltip"
                                                    data-bs-custom-class="tooltip-danger"
                                                    aria-label="Cancel Order"
                                                    title="Delete"
                                                    data-modal-target="#delete-modal"
                                                    class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn"><i
                                                    class="ri-delete-bin-5-line"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <div class="card-footer border-top-0">
                                    <div class="d-flex align-items-center flex-wrap overflow-auto">
                                        <div class="mb-2 mb-sm-0">
                                            Showing <b>1</b> to <b>10</b> of <b>10</b> entries <i
                                                class="bi bi-arrow-right ms-2 fw-medium"></i>
                                        </div>
                                        <div class="ms-auto">
                                            <ul class="pagination mb-0 overflow-auto">
                                                <li class="page-item disabled">
                                                    <a class="page-link">Previous</a>
                                                </li>
                                                <li class="page-item active" aria-current="page"><a class="page-link"
                                                                                                    href="javascript:void(0);">1</a>
                                                </li>
                                                <li class="page-item">
                                                    <a class="page-link" href="javascript:void(0);">2</a>
                                                </li>
                                                <li class="page-item"><a class="page-link"
                                                                         href="javascript:void(0);">3</a></li>
                                                <li class="page-item"><a class="page-link"
                                                                         href="javascript:void(0);">4</a></li>
                                                <li class="page-item"><a class="page-link"
                                                                         href="javascript:void(0);">5</a></li>
                                                <li class="page-item">
                                                    <a class="page-link" href="javascript:void(0);">Next</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="modal fade" id="orderStatus"
         aria-labelledby="cancelOrder" tabindex="-1" aria-hidden="true"
         style="display: none;">
        <div class="modal-dialog modal-dialog-centered" style="display: grid;">
            <div class="card bg-white border-0 rounded">
                <div class="alert custom-alert1 alert-primary">
                    <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"><i
                            class="bi bi-x"></i></button>
                    <div class="text-center px-5 pb-0 svg-primary">
                        <svg class="custom-alert-icon" xmlns="http://www.w3.org/2000/svg" height="1.5rem"
                             viewBox="0 0 24 24" width="1.5rem" fill="#000000">
                            <path d="M0 0h24v24H0z" fill="none"></path>
                            <path
                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path>
                        </svg>
                        <h5>Are You Sure?</h5>
                        <p class="">You won't be able to revert this!</p>
                        <div class="">
                            <button class="btn btn-sm btn-primary m-1">Approve</button>
                            <button class="btn btn-sm btn-outline-danger m-1" data-bs-dismiss="modal">Reject</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="orderCancel"
         aria-labelledby="cancelOrder" tabindex="-1" aria-hidden="true"
         style="display: none;">
        <div class="modal-dialog modal-dialog-centered" style="display: grid;">
            <div class="card bg-white border-0 rounded">
                <div class="alert custom-alert1 alert-primary">
                    <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"><i
                            class="bi bi-x"></i></button>
                    <div class="text-center px-5 pb-0 svg-primary">
                        <svg class="custom-alert-icon" xmlns="http://www.w3.org/2000/svg" height="1.5rem"
                             viewBox="0 0 24 24" width="1.5rem" fill="#000000">
                            <path d="M0 0h24v24H0z" fill="none"></path>
                            <path
                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path>
                        </svg>
                        <h5>Are You Sure?</h5>
                        <p class="">Are you sure that you want to cancel this order</p>
                        <div class="text-center">
                            <button class="btn btn-sm btn-primary m-1" data-bs-dismiss="modal">Yes, Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="assignAgent" tabindex="-1"
         aria-labelledby="exampleModalLgLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="exampleModalLgLabel">Assign Agent
                    </h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="sendResInvite" method="post">

                        <div class="form-group mb-2">
                            <label for="input-label" class="form-label">Delivery Agent</label>
                            <select class="form-control" name="status">
                                <option value="">-- Select --</option>
                                <option value="1">Toni Stark</option>
                                <option value="2">David Benet</option>
                                <option value="3">Jhone Rikie</option>
                                <option value="4">Marshall</option>
                            </select>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="delete-modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="display: grid;">
            <div class="card bg-white border-0 rounded">
                <div class="alert custom-alert1 alert-primary">
                    <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"><i
                            class="bi bi-x"></i></button>
                    <div class="text-center px-5 pb-0 svg-primary">
                        <svg class="custom-alert-icon" xmlns="http://www.w3.org/2000/svg" height="1.5rem"
                             viewBox="0 0 24 24" width="1.5rem" fill="#000000">
                            <path d="M0 0h24v24H0z" fill="none"></path>
                            <path
                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path>
                        </svg>
                        <h5>Are You Sure?</h5>
                        <p class="">You won't be able to revert this!</p>
                        <div class="">
                            <button class="btn btn-sm btn-primary m-1">Yes, delete it!</button>
                            <button class="btn btn-sm btn-outline-danger m-1" data-bs-dismiss="modal">Cancel
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('custom-script')

    <script>
        // Initialize tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });

        // Event delegation for modal triggers
        document.addEventListener('click', function(event) {
            var target = event.target.closest('[data-modal-target]');
            if (target) {
                var modalId = target.getAttribute('data-modal-target');
                var modal = new bootstrap.Modal(document.querySelector(modalId));
                modal.show();
            }
        });
    </script>
@endsection