@extends('admin.layout.master')
@section('content')
<div class='bg-white p-2 rounded m-2'>
    <div class="row   justify-content-between p-3 rounded m-2  bg-light">
        <div class="col-6 col-md-6 align-self-center">
            <a class='text-decoration-none fw-bold  text-dark breadc' href="">
                Home/Business Name
            </a>
        </div>
    </div>
    <table class='tabel table-borderless w-100 my-3'>
        <tr>
            <td>
                <nav class="nav border bg-light rounded align-items-center">
                    <ul class="nav tabbs" id="myTab">
                        <li class="nav-item">
                            <a class="nav-link text-muted active fw-bolder text-dark " data-toggle='pill' aria-current="page" href="#OverView">Dashboard</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-muted" data-toggle='pill' href="#order">Orders (200)</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-muted" data-toggle='pill' href="#ern">Earnings($23,234)</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-muted" data-toggle='pill' href="#item">Items(23)</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-muted" data-toggle='pill' href="#cat">Categories(17)</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-muted" data-toggle='pill' href="#Rooms">Rooms(12)</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-muted" data-toggle='pill' href="#Tables">Tables(4)</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-muted" data-toggle='pill' href="#Time">Timing(27)</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-muted" data-toggle='pill' href="#riew">Reviews(7)</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-muted" data-toggle='pill' href="#slide">Slider</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-muted" data-toggle='pill' href="#log">Logs</a>
                        </li>
                    </ul>
                </nav>
            </td>
        </tr>
    </table>
    <div class='tab-content'>
        <div id='OverView' class='tab-pane fade show active'>
            <div class='row'>
                <!-- ==================================profile detail  -->
                <div class="col-md-4">
                    <div class=' border rounded'>
                        <div class='w-100 text-center justify-content-center'>
                            <img src="{{asset('images/user/user_img.png')}}" class='img-fluid' alt="">
                        </div>
                        <div class="upload-btn-wrapper p-0 m-0">
                            <button class="btn update_btn">Upload</button>
                            <input type="file" name="myfile" />
                        </div>
                        <div class='container mrg'>
                            <span>(0.4)</span>
                            <p class="text-dark fw-bold">Business Name</p>
                            <p>admin Name</p>
                            <p>
                                <span>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="15.3" height="21" viewBox="0 0 15.3 21">
                                        <g id="Icon_feather-smartphone" data-name="Icon feather-smartphone" transform="translate(1 1)">
                                            <path id="Path_15428" data-name="Path 15428" d="M9.4,3h9.5a1.9,1.9,0,0,1,1.9,1.9V20.1A1.9,1.9,0,0,1,18.9,22H9.4a1.9,1.9,0,0,1-1.9-1.9V4.9A1.9,1.9,0,0,1,9.4,3Z" transform="translate(-7.5 -3)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                                            <path id="Path_15429" data-name="Path 15429" d="M18,27h0" transform="translate(-11.35 -11.8)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                                        </g>
                                    </svg>
                                </span>
                                <span class='px-2'>36574687967</span>
                            </p>
                            <p>
                                <span>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="17.257" height="17.288" viewBox="0 0 17.257 17.288">
                                        <path id="Icon_feather-phone" data-name="Icon feather-phone" d="M18.424,14.445v2.3a1.534,1.534,0,0,1-1.672,1.534,15.181,15.181,0,0,1-6.62-2.355,14.958,14.958,0,0,1-4.6-4.6A15.181,15.181,0,0,1,3.174,4.672,1.534,1.534,0,0,1,4.7,3H7A1.534,1.534,0,0,1,8.536,4.319a9.849,9.849,0,0,0,.537,2.155,1.534,1.534,0,0,1-.345,1.619l-.974.974a12.273,12.273,0,0,0,4.6,4.6l.974-.974a1.534,1.534,0,0,1,1.619-.345,9.849,9.849,0,0,0,2.155.537,1.534,1.534,0,0,1,1.319,1.557Z" transform="translate(-2.167 -2)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                                    </svg>
                                </span>
                                <span class='px-2'>36574687967</span>
                            </p>
                            <p>
                                <span>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16.534" height="23.254" viewBox="0 0 16.534 23.254">
                                        <path id="Icon_material-location-on" data-name="Icon material-location-on" d="M14.767,3A7.262,7.262,0,0,0,7.5,10.267c0,5.45,7.267,13.5,7.267,13.5s7.267-8.045,7.267-13.5A7.262,7.262,0,0,0,14.767,3Zm0,9.862a2.6,2.6,0,1,1,2.6-2.6A2.6,2.6,0,0,1,14.767,12.862Z" transform="translate(-6.5 -2)" fill="#fff" stroke="#000" stroke-width="2" />
                                    </svg>
                                </span>
                                <span class='px-2'>Address</span>
                            </p>
                            <hr>
                            <div>
                                <sapn>Googel Map Adress</sapn>
                                <span class='me-auto float-end'>Directions <span>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
                                            <path id="Icon_awesome-directions" data-name="Icon awesome-directions" d="M18.651,8.658,10.341.348a1.191,1.191,0,0,0-1.683,0L.348,8.658a1.191,1.191,0,0,0,0,1.683l8.31,8.31a1.19,1.19,0,0,0,1.683,0l8.31-8.31a1.191,1.191,0,0,0,0-1.683ZM14.9,9.124l-3.125,2.884a.3.3,0,0,1-.5-.218V9.8H7.718v2.375a.3.3,0,0,1-.3.3H6.234a.3.3,0,0,1-.3-.3V9.2A1.188,1.188,0,0,1,7.125,8.016h4.156V6.022a.3.3,0,0,1,.5-.218L14.9,8.688A.3.3,0,0,1,14.9,9.124Z" fill="#f56a20" />
                                        </svg>
                                    </span>
                                </span>
                                <hr>
                                <div class='py-1'>
                                    <span>
                                        <a class='text-decoration-none px-3' href="">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                                <g id="Group_12512" data-name="Group 12512" transform="translate(-1112 -340)">
                                                    <circle id="Ellipse_598" data-name="Ellipse 598" cx="20" cy="20" r="20" transform="translate(1112 340)" fill="#edebf7" />
                                                    <path id="Icon_feather-edit-2" data-name="Icon feather-edit-2" d="M11.051,3.7A1.518,1.518,0,0,1,13.2,5.849L5.952,13.1,3,13.9l.805-2.952Z" transform="translate(1123.834 351.421)" fill="none" stroke="#543ab2" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                </g>
                                            </svg>
                                        </a> edit
                                    </span>
                                    <span>
                                        <a class='text-decoration-none px-3' href="">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                                <g id="Group_12512" data-name="Group 12512" transform="translate(-1112 -340)">
                                                    <circle id="Ellipse_598" data-name="Ellipse 598" cx="20" cy="20" r="20" transform="translate(1112 340)" fill="#edebf7" />
                                                    <path id="Icon_zocial-print" data-name="Icon zocial-print" d="M.18,18.836V12.644l2.157-2.4H3.918v1.19H2.876L1.389,13.09v4.556H16.172V13.09l-1.488-1.655H13.643v-1.19h1.581l2.138,2.4v6.192H.18ZM3.918,12.9V6.768L6.726,3.96h6.917V12.9H3.918ZM5.033,11.77h7.494V5.076H7.841V7.884H5.033Z" transform="translate(1123.385 348.602)" fill="#543ab2" stroke="#543ab2" stroke-width="0.3" />
                                                </g>
                                            </svg>
                                        </a>print
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- eight colum  -->
                <div class="col-md-8  rounded">
                    <div class='container border  p-2 rounded'>
                        <div class='clearfix p-1'>
                            <span class='fs-5 fw-bolder text-dark p-2'>Order Statistics</span> <span class='float-end'><a href="" class="bc1"> <i class="bi bi-link px-1 fs-5 "></i>links</a></span>
                        </div>
                        <div class='row p-lg-1'>
                            <div class="col-sm-2 col-5 col-lg-2 my-2 p-2 m-2 ">
                                <div class="circular ">
                                    <div class="inner"></div>
                                    <div id="orange" class="number text-primary">100%</div>
                                    <div class="circle">
                                        <div class="bar left">
                                            <div class="progress bg-primary"></div>
                                        </div>
                                        <div class="bar right">
                                            <div class="progress bg-primary"></div>
                                        </div>
                                    </div>
                                </div>
                                <p class='text-center mt-2 fw-bold'>Total</p>
                            </div>
                            <div class="col-sm-2 col-5 col-lg-2 my-2 my-2 p-2 m-2 ">
                                <div class="circular">
                                    <div class="inner"></div>
                                    <div id="orange" class="number text-warning">100%</div>
                                    <div class="circle">
                                        <div class="bar left">
                                            <div class="progress bg-warning"></div>
                                        </div>
                                        <div class="bar right">
                                            <div class="progress bg-warning"></div>
                                        </div>
                                    </div>
                                </div>
                                <p class='text-center mt-2 fw-bold'>active</p>
                            </div>
                            <div class="col-sm-2 col-5 col-lg-2 my-2 my-2 p-2 m-2">
                                <div class="circular">
                                    <div class="inner"></div>
                                    <div class="number text-success">100%</div>
                                    <div class="circle">
                                        <div class="bar left">
                                            <div class="progress bg-success"></div>
                                        </div>
                                        <div class="bar right">
                                            <div class="progress bg-success"></div>
                                        </div>
                                    </div>
                                </div>
                                <p class='text-center mt-2 fw-bold'>Pending</p>
                            </div>
                            <div class="col-sm-2 col-5 col-lg-2 my-2 my-2 p-2 m-2">
                                <div class="circular">
                                    <div class="inner"></div>
                                    <div class="number text-info">100%</div>
                                    <div class="circle">
                                        <div class="bar left">
                                            <div class="progress  bg-info"></div>
                                        </div>
                                        <div class="bar right">
                                            <div class="progress bg-info"></div>
                                        </div>
                                    </div>
                                </div>
                                <p class='text-center mt-2 fw-bold'>complete</p>
                            </div>
                            <div class="col-sm-2 col-5 col-lg-2 my-2 my-2 p-2 m-2">
                                <div class="circular">
                                    <div class="inner"></div>
                                    <div id="red" class="number  text-danger">100%</div>
                                    <div class="circle">
                                        <div class="bar left">
                                            <div class="progress bg-danger"></div>
                                        </div>
                                        <div class="bar right">
                                            <div class="progress bg-danger"></div>
                                        </div>
                                    </div>
                                </div>
                                <p class='text-center mt-2 fw-bold'>Cancel</p>
                            </div>
                        </div>
                    </div>
                    <div class='border mt-3 rounded'>
                        <!-- this bar chrat  -->
                        <div class='clearfix p-1'>
                            <span class='fs-5 fw-bolder text-dark p-2'>Earning Graph</span> <span class='float-end'><a href=""> <i class="bi bi-link px-1 fs-5"></i>links</a></span>
                        </div>
                        <div class="p-3">
                            <div id="top_div" class='bar-color'></div>
                        </div>
                        <!-- end bar chart  -->
                    </div>
                </div>
            </div>
            <div> <br>
                <div class="row mt-2">
                    <div class="col-sm-6">
                        <div class="card">
                            <div class='clearfix p-1'>
                                <span class='fs-7 fw-bold text-dark p-3'>Recent Orders</span> <span class='float-end'><a href=""> <i class="bi bi-link px-1 fs-5"></i>links</a></span>
                            </div>
                            <div class="row m-3 p-2 rounded bg-light">
                                <!-- iner row in Row col-6 -->
                                <div class="col-sm-6">
                                    <table class=' table table-borderless'>
                                        <tr>
                                            <td> <img src="{{asset('images/user/user-1.png')}}" class='' alt=""></td>
                                            <td>
                                                <span class="text-dark fw-bold">Customer Name</span><br>
                                                <span>Order Status : <b class='tsuccess'>Active</b></span>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-sm-6">
                                    <span class='float-end text-center'>00.00$</span>
                                </div>
                            </div>
                            <div class="row m-3  p-2 rounded bg-light">
                                <!-- iner row in Row col-6 -->
                                <div class="col-sm-6">
                                    <table class=' table table-borderless'>
                                        <tr>
                                            <td> <img src="{{asset('images/user/user-1.png')}}" class='' alt=""></td>
                                            <td class=''>
                                                <span class="text-dark fw-bold">Customer Name</span><br>
                                                <span>Order Status : <b class='tsuccess'>Active</b></span>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-sm-6">
                                    <span class='float-end text-center'>00.00$</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 ">
                        <div class="card rounded">
                            <div class='clearfix p-1'>
                                <span class='fs-7 fw-bold text-dark p-3'>Customer Feed</span> <span class='float-end'><a href=""> <i class="bi bi-link px-1 fs-5"></i>links</a></span>
                            </div>
                            <div class="m-3 p-2 rounded bg-light">
                                <!-- iner row in Row col-6 -->
                                <table class=' table table-borderless'>
                                    <tr>
                                        <td> <img src="{{asset('images/user/user-1.png')}}" class='' alt=""></td>
                                        <td class=''>
                                            <span class="text-dark fw-bold">Customer Name</span> <span class='float-end text-muted'>50 min ago</span> <br>
                                            <span>The food was awesome, will order again.</span>
                                            <span>
                                                (0.4)
                                            </span>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div class="m-3 p-2 rounded bg-light">
                                <!-- iner row in Row col-6 -->
                                <table class=' table table-borderless'>
                                    <tr>
                                        <td> <img src="{{asset('images/user/user-1.png')}}" class='' alt=""></td>
                                        <td class=''>
                                            <span class="text-dark fw-bold">Customer Name</span> <span class='float-end text-muted'>15 min ago</span> <br>
                                            <span>The food was awesome, will order again.</span> <br>
                                            <span>(
                                                <span><svg xmlns="http://www.w3.org/2000/svg" width="14.221" height="13.359" viewBox="0 0 14.221 13.359">
                                                        <g id="Group_12508" data-name="Group 12508" transform="translate(0 -3.042)">
                                                            <g id="Group_12300" data-name="Group 12300" transform="translate(0 3.042)">
                                                                <path id="Path_15328" data-name="Path 15328" d="M94.308,153.419l2.2,4.4,4.913.705-3.555,3.423.839,4.833L94.308,164.5l-4.395,2.282.839-4.833L87.2,158.522l4.913-.705Z" transform="translate(-87.197 -153.419)" fill="#f4bd05" />
                                                            </g>
                                                        </g>
                                                    </svg></span>0.4)
                                            </span>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- this div end  -->
        </div>
        <!-- over view end  -->
        <div id='order' class='tab-pane fade show'>
            <table class='tabel table-borderless w-100 my-3'>
                <!-- thsi is another tab show order page -->
                <tr>
                    <td>
                        <nav class="nav border bg-light rounded align-items-center">
                            <ul class="nav " id="myTab2">
                                <li class="nav-item">
                                    <a class="nav-link text-muted active fw-bolder text-dark " data-toggle='pill2' aria-current="page" href="#all">All (200)</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-muted" data-toggle='pill2' href="#ac">Active(1)</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-muted" data-toggle='pill2' href="#pe">Pending (4)</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-muted" data-toggle='pill2' href="#com">Completed(160)</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-muted" data-toggle='pill2' href="#canc">Cancelled (35)</a>
                                </li>
                            </ul>
                        </nav>
                    </td>
                </tr>
            </table>
            <div class='tab-content'>
                <div id='all' class='tab-pane fade show oneshow active '>
                    <div class='overflow-auto table-responsive'>
                        <table class='table table-border'>
                            <tbody class='border-top'>
                                <tr>
                                    <td>
                                        <table>
                                            <tr>
                                                <td> <img class='px-2' src="{{asset('images/user/user-1.png')}}" alt=""></td>
                                                <td>
                                                    <sapn class='fw-bold text-dark'>Customer Name</sapn><br>
                                                    <span class='f-s'>(<i class="bi bi-star-fill text-warning px-1"></i>4.6)</span><br>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td class='align-middle'>
                                        <span>
                                            #1000234
                                        </span>
                                    </td>
                                    <td class='align-middle'>
                                        <span>2013-09-23</span>

                                    </td>
                                    <td class='align-middle'>
                                        <span>$100</span>
                                    </td>
                                    <td class='text-lg-end align-middle'>
                                        <p class='bt-shap'>Completed</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <table>
                                            <tr>
                                                <td> <img class='px-2' src="{{asset('images/user/user-1.png')}}" alt=""></td>
                                                <td>
                                                    <sapn class='fw-bold text-dark'>Customer Name</sapn><br>
                                                    <span class='f-s'>(<i class="bi bi-star-fill text-warning px-1"></i>4.6)</span><br>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td class='align-middle'>
                                        <span>
                                            #1000234
                                        </span>
                                    </td>
                                    <td class='align-middle'>
                                        <span>2013-09-23</span>

                                    </td>
                                    <td class='align-middle'>
                                        <span>$100</span>
                                    </td>
                                    <td class='text-lg-end align-middle'>
                                        <p class='bt-shap bg-warning'>Active</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <table>
                                            <tr>
                                                <td> <img class='px-2' src="{{asset('images/user/user-1.png')}}" alt=""></td>
                                                <td>
                                                    <sapn class='fw-bold text-dark'>Customer Name</sapn><br>
                                                    <span class='f-s'>(<i class="bi bi-star-fill text-warning px-1"></i>4.6)</span><br>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td class='align-middle'>
                                        <span>
                                            #1000234
                                        </span>
                                    </td>
                                    <td class='align-middle'>
                                        <span>2013-09-23</span>
                                    </td>
                                    <td class='align-middle'>
                                        <span>$100</span>
                                    </td>
                                    <td class='text-lg-end align-middle'>
                                        <p class='bt-shap bg-danger'>Cancelled</p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- tab end all  -->
                <div id='ac' class='tab-pane fade show  oneshow '>
                    active
                </div>
                <!-- tab end active -->
                <div id='pe' class='tab-pane fade show  oneshow '>
                    pending
                </div>
                <!-- tab end active -->
                <div id='com' class='tab-pane fade show  oneshow '>
                    complete
                </div>
                <!-- tab end active -->
                <div id='canc' class='tab-pane fade show  oneshow '>
                    cancell
                </div>
                <!-- tab end active -->
            </div>
        </div>
        <!-- order tab end  -->
        <div id='ern' class='tab-pane fade show  '>
            <h1 class="display">earn</h1>
        </div>
        <!-- earn tab end  -->
        <div id='item' class='tab-pane fade show  '>
            <table class='tabel table-borderless w-100 my-3'>
                <!-- thsi is another tab show order page -->
                <tr>
                    <td>
                        <nav class="nav border bg-light rounded align-items-center">
                            <ul class="nav " id="myTab3">
                                <li class="nav-item">
                                    <a class="nav-link text-muted active fw-bolder text-dark " data-toggle='pill3' aria-current="page" href="#al">All (105)</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-muted" data-toggle='pill3' href="#pizza">Pizza (20)</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-muted" data-toggle='pill3' href="#burgers">Burgers (25)</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-muted" data-toggle='pill3' href="#soft">Soft Drinks (30)</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-muted" data-toggle='pill3' href="#chiken">Chiken (50)</a>
                                </li>
                            </ul>
                        </nav>
                    </td>
                </tr>
            </table>
            <div class='tab-content'>
                <div id='al' class='tab-pane fade show item active '>
                    <div class='table-responsive overflow-auto'>
                        <table class='table table-border'>
                            <tbody class='border-top'>
                                <tr>
                                    <td>
                                        <table>
                                            <tr>
                                                <td> <img class='px-2' src="{{asset('images/user/user-1.png')}}" alt=""></td>
                                                <td>
                                                    <sapn class='fw-bold text-dark'>Item Name</sapn><br>
                                                    <span> Category</span>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td class='w-25 '>
                                        <p class='tb_m'>
                                            Cras gravida bibendum dolor eu varius. Morbi fermentum velit nisl,
                                            eget vehicula
                                            lorem sodales eget. Donec quis volutpat orci. Sed ipsum
                                            felis, tristique id egestas.
                                        </p>

                                    </td>
                                    <td class='align-middle'>
                                        <span class='text-success'>active</span>
                                    </td>
                                    <td class='align-middle'>
                                        <span>$100</span>
                                    </td>
                                    <td class='text-lg-end align-middle'>
                                        <span>
                                            <a class='text-decoration-none px-1' href="#">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                                    <g id="Group_12735" data-name="Group 12735" transform="translate(-1068 -252)">
                                                        <g id="Group_12512" data-name="Group 12512" transform="translate(-44 -88)">
                                                            <circle id="Ellipse_598" data-name="Ellipse 598" cx="20" cy="20" r="20" transform="translate(1112 340)" fill="#edebf7" />
                                                            <path id="Icon_feather-edit-2" data-name="Icon feather-edit-2" d="M11.051,3.7A1.518,1.518,0,0,1,13.2,5.849L5.952,13.1,3,13.9l.805-2.952Z" transform="translate(1123.834 351.421)" fill="none" stroke="#543ab2" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                        </g>
                                                    </g>
                                                </svg><span class='px-1'>Edit</span>
                                            </a>
                                        </span>
                                        <span>
                                            <a class='text-decoration-none px-1' href="">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                                    <g id="Group_12514" data-name="Group 12514" transform="translate(-1211 -340)">
                                                        <circle id="Ellipse_597" data-name="Ellipse 597" cx="20" cy="20" r="20" transform="translate(1211 340)" fill="#ff3b3b" opacity="0.1" />
                                                        <g id="Icon_feather-delete" data-name="Icon feather-delete" transform="translate(1221.184 348.679)">
                                                            <path id="Path_15433" data-name="Path 15433" d="M14.8,6H6.156L1.5,11.321l4.656,5.321H14.8a1.33,1.33,0,0,0,1.33-1.33V7.33A1.33,1.33,0,0,0,14.8,6Z" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                            <path id="Path_15434" data-name="Path 15434" d="M21.991,13.5,18,17.491" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                            <path id="Path_15435" data-name="Path 15435" d="M18,13.5l3.991,3.991" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                        </g>
                                                    </g>
                                                </svg>
                                                <span class='px-1'>Delete</span>
                                            </a>
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <table>
                                            <tr>
                                                <td> <img class='px-2' src="{{asset('images/user/user-1.png')}}" alt=""></td>
                                                <td>
                                                    <sapn class='fw-bold text-dark'>Item Name</sapn><br>
                                                    <span> Category</span>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td class='w-25'>
                                        <p class='tb_m'>
                                            Cras gravida bibendum dolor eu varius. Morbi fermentum velit nisl,
                                            eget vehicula
                                            lorem sodales eget. Donec quis volutpat orci. Sed ipsum
                                            felis, tristique id egestas.
                                        </p>
                                    </td>
                                    <td class='align-middle'>
                                        <span class='text-danger'>Inactive</span>
                                    </td>
                                    <td class='align-middle'>
                                        <span>$100</span>
                                    </td>
                                    <td class='text-lg-end align-middle'>
                                        <span>
                                            <a class='text-decoration-none px-1' href="#">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                                    <g id="Group_12735" data-name="Group 12735" transform="translate(-1068 -252)">
                                                        <g id="Group_12512" data-name="Group 12512" transform="translate(-44 -88)">
                                                            <circle id="Ellipse_598" data-name="Ellipse 598" cx="20" cy="20" r="20" transform="translate(1112 340)" fill="#edebf7" />
                                                            <path id="Icon_feather-edit-2" data-name="Icon feather-edit-2" d="M11.051,3.7A1.518,1.518,0,0,1,13.2,5.849L5.952,13.1,3,13.9l.805-2.952Z" transform="translate(1123.834 351.421)" fill="none" stroke="#543ab2" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                        </g>
                                                    </g>
                                                </svg><span class='px-1'>Edit</span>
                                            </a>
                                        </span>
                                        <span>
                                            <a class='text-decoration-none px-1' href="">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                                    <g id="Group_12514" data-name="Group 12514" transform="translate(-1211 -340)">
                                                        <circle id="Ellipse_597" data-name="Ellipse 597" cx="20" cy="20" r="20" transform="translate(1211 340)" fill="#ff3b3b" opacity="0.1" />
                                                        <g id="Icon_feather-delete" data-name="Icon feather-delete" transform="translate(1221.184 348.679)">
                                                            <path id="Path_15433" data-name="Path 15433" d="M14.8,6H6.156L1.5,11.321l4.656,5.321H14.8a1.33,1.33,0,0,0,1.33-1.33V7.33A1.33,1.33,0,0,0,14.8,6Z" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                            <path id="Path_15434" data-name="Path 15434" d="M21.991,13.5,18,17.491" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                            <path id="Path_15435" data-name="Path 15435" d="M18,13.5l3.991,3.991" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                        </g>
                                                    </g>
                                                </svg>
                                                <span class='px-1'>Delete</span>
                                            </a>
                                        </span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- tab end all  -->
                <div id='pizza' class='tab-pane fade show  item '>
                    pizza
                </div>
                <!-- tab end pizza -->
                <div id='burgers' class='tab-pane fade show  item '>
                    burgers
                </div>
                <!-- tab end burgers -->
                <div id='soft' class='tab-pane fade show item '>
                    soft
                </div>
                <!-- tab end soft -->
                <div id='chiken' class='tab-pane fade show item '>
                    chiken
                </div>
                <!-- tab end chiken -->
            </div>
        </div>
        <!-- item tab end  the category  -->
        <div id='cat' class='tab-pane fade show'>
            <div class="conatiner">
                <div class="row ">
                    <div class="col-sm-6 my-2">
                        <div class="card bg-light p-2 rounded">
                            <div class="row">
                                <div class="col-6">
                                    <table>
                                        <tr>
                                            <td> <img class='px-2' src="{{asset('images/user/user-1.png')}}" alt=""></td>
                                            <td>
                                                <sapn class='fw-bold text-dark'>Item Name</sapn><br>
                                                <span> Category</span>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <!--end div-6//-->
                                <div class="col-6 text-end align-self-center">
                                    <span>
                                        <a class='text-decoration-none px-1' href="#">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                                <g id="Group_12735" data-name="Group 12735" transform="translate(-1068 -252)">
                                                    <g id="Group_12512" data-name="Group 12512" transform="translate(-44 -88)">
                                                        <circle id="Ellipse_598" data-name="Ellipse 598" cx="20" cy="20" r="20" transform="translate(1112 340)" fill="#edebf7" />
                                                        <path id="Icon_feather-edit-2" data-name="Icon feather-edit-2" d="M11.051,3.7A1.518,1.518,0,0,1,13.2,5.849L5.952,13.1,3,13.9l.805-2.952Z" transform="translate(1123.834 351.421)" fill="none" stroke="#543ab2" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                    </g>
                                                </g>
                                            </svg><span class='px-1'>Edit</span>
                                        </a>
                                    </span>
                                    <span>
                                        <a class='text-decoration-none px-1' href="">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                                <g id="Group_12514" data-name="Group 12514" transform="translate(-1211 -340)">
                                                    <circle id="Ellipse_597" data-name="Ellipse 597" cx="20" cy="20" r="20" transform="translate(1211 340)" fill="#ff3b3b" opacity="0.1" />
                                                    <g id="Icon_feather-delete" data-name="Icon feather-delete" transform="translate(1221.184 348.679)">
                                                        <path id="Path_15433" data-name="Path 15433" d="M14.8,6H6.156L1.5,11.321l4.656,5.321H14.8a1.33,1.33,0,0,0,1.33-1.33V7.33A1.33,1.33,0,0,0,14.8,6Z" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                        <path id="Path_15434" data-name="Path 15434" d="M21.991,13.5,18,17.491" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                        <path id="Path_15435" data-name="Path 15435" d="M18,13.5l3.991,3.991" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                    </g>
                                                </g>
                                            </svg>
                                            <span class='px-1'>Delete</span>
                                        </a>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <!--the card complete-->
                    </div>
                    <!--the colum-6 here complete-->
                    <div class="col-sm-6 my-2">
                        <div class="card bg-light p-2 rounded">
                            <div class="row ">
                                <div class="col-6">
                                    <table>
                                        <tr>
                                            <td> <img class='px-2' src="{{asset('images/user/user-1.png')}}" alt=""></td>
                                            <td>
                                                <sapn class='fw-bold text-dark'>Item Name</sapn><br>
                                                <span> Category</span>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <!--end div-6//-->
                                <div class="col-6 text-end align-self-center">
                                    <span>
                                        <a class='text-decoration-none px-1' href="#">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                                <g id="Group_12735" data-name="Group 12735" transform="translate(-1068 -252)">
                                                    <g id="Group_12512" data-name="Group 12512" transform="translate(-44 -88)">
                                                        <circle id="Ellipse_598" data-name="Ellipse 598" cx="20" cy="20" r="20" transform="translate(1112 340)" fill="#edebf7" />
                                                        <path id="Icon_feather-edit-2" data-name="Icon feather-edit-2" d="M11.051,3.7A1.518,1.518,0,0,1,13.2,5.849L5.952,13.1,3,13.9l.805-2.952Z" transform="translate(1123.834 351.421)" fill="none" stroke="#543ab2" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                    </g>
                                                </g>
                                            </svg><span class='px-1'>Edit</span>
                                        </a>
                                    </span>
                                    <span>
                                        <a class='text-decoration-none px-1' href="">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                                <g id="Group_12514" data-name="Group 12514" transform="translate(-1211 -340)">
                                                    <circle id="Ellipse_597" data-name="Ellipse 597" cx="20" cy="20" r="20" transform="translate(1211 340)" fill="#ff3b3b" opacity="0.1" />
                                                    <g id="Icon_feather-delete" data-name="Icon feather-delete" transform="translate(1221.184 348.679)">
                                                        <path id="Path_15433" data-name="Path 15433" d="M14.8,6H6.156L1.5,11.321l4.656,5.321H14.8a1.33,1.33,0,0,0,1.33-1.33V7.33A1.33,1.33,0,0,0,14.8,6Z" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                        <path id="Path_15434" data-name="Path 15434" d="M21.991,13.5,18,17.491" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                        <path id="Path_15435" data-name="Path 15435" d="M18,13.5l3.991,3.991" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                    </g>
                                                </g>
                                            </svg>
                                            <span class='px-1'>Delete</span>
                                        </a>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <!--the card complete-->
                    </div>
                    <!--the colum-6 here complete-->
                    <div class="col-sm-6 my-2">
                        <div class="card bg-light p-2 rounded">
                            <div class="row">
                                <div class="col-6">
                                    <table>
                                        <tr>
                                            <td> <img class='px-2' src="{{asset('images/user/user-1.png')}}" alt=""></td>
                                            <td>
                                                <sapn class='fw-bold text-dark'>Item Name</sapn><br>
                                                <span> Category</span>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <!--end div-6//-->
                                <div class="col-6 text-end align-self-center">
                                    <span>
                                        <a class='text-decoration-none px-1' href="#">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                                <g id="Group_12735" data-name="Group 12735" transform="translate(-1068 -252)">
                                                    <g id="Group_12512" data-name="Group 12512" transform="translate(-44 -88)">
                                                        <circle id="Ellipse_598" data-name="Ellipse 598" cx="20" cy="20" r="20" transform="translate(1112 340)" fill="#edebf7" />
                                                        <path id="Icon_feather-edit-2" data-name="Icon feather-edit-2" d="M11.051,3.7A1.518,1.518,0,0,1,13.2,5.849L5.952,13.1,3,13.9l.805-2.952Z" transform="translate(1123.834 351.421)" fill="none" stroke="#543ab2" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                    </g>
                                                </g>
                                            </svg><span class='px-1'>Edit</span>
                                        </a>
                                    </span>
                                    <span>
                                        <a class='text-decoration-none px-1' href="">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                                <g id="Group_12514" data-name="Group 12514" transform="translate(-1211 -340)">
                                                    <circle id="Ellipse_597" data-name="Ellipse 597" cx="20" cy="20" r="20" transform="translate(1211 340)" fill="#ff3b3b" opacity="0.1" />
                                                    <g id="Icon_feather-delete" data-name="Icon feather-delete" transform="translate(1221.184 348.679)">
                                                        <path id="Path_15433" data-name="Path 15433" d="M14.8,6H6.156L1.5,11.321l4.656,5.321H14.8a1.33,1.33,0,0,0,1.33-1.33V7.33A1.33,1.33,0,0,0,14.8,6Z" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                        <path id="Path_15434" data-name="Path 15434" d="M21.991,13.5,18,17.491" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                        <path id="Path_15435" data-name="Path 15435" d="M18,13.5l3.991,3.991" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                    </g>
                                                </g>
                                            </svg>
                                            <span class='px-1'>Delete</span>
                                        </a>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <!--the card complete-->
                    </div>
                    <!--the colum-6 here complete-->
                    <div class="col-sm-6 my-2">
                        <div class="card bg-light p-2 rounded">
                            <div class="row">
                                <div class="col-6">
                                    <table>
                                        <tr>
                                            <td> <img class='px-2' src="{{asset('images/user/user-1.png')}}" alt=""></td>
                                            <td>
                                                <sapn class='fw-bold text-dark'>Item Name</sapn><br>
                                                <span> Category</span>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <!--end div-6//-->
                                <div class="col-6 text-end align-self-center">
                                    <span>
                                        <a class='text-decoration-none px-1' href="#">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                                <g id="Group_12735" data-name="Group 12735" transform="translate(-1068 -252)">
                                                    <g id="Group_12512" data-name="Group 12512" transform="translate(-44 -88)">
                                                        <circle id="Ellipse_598" data-name="Ellipse 598" cx="20" cy="20" r="20" transform="translate(1112 340)" fill="#edebf7" />
                                                        <path id="Icon_feather-edit-2" data-name="Icon feather-edit-2" d="M11.051,3.7A1.518,1.518,0,0,1,13.2,5.849L5.952,13.1,3,13.9l.805-2.952Z" transform="translate(1123.834 351.421)" fill="none" stroke="#543ab2" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                    </g>
                                                </g>
                                            </svg><span class='px-1'>Edit</span>
                                        </a>
                                    </span>
                                    <span>
                                        <a class='text-decoration-none px-1' href="">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                                <g id="Group_12514" data-name="Group 12514" transform="translate(-1211 -340)">
                                                    <circle id="Ellipse_597" data-name="Ellipse 597" cx="20" cy="20" r="20" transform="translate(1211 340)" fill="#ff3b3b" opacity="0.1" />
                                                    <g id="Icon_feather-delete" data-name="Icon feather-delete" transform="translate(1221.184 348.679)">
                                                        <path id="Path_15433" data-name="Path 15433" d="M14.8,6H6.156L1.5,11.321l4.656,5.321H14.8a1.33,1.33,0,0,0,1.33-1.33V7.33A1.33,1.33,0,0,0,14.8,6Z" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                        <path id="Path_15434" data-name="Path 15434" d="M21.991,13.5,18,17.491" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                        <path id="Path_15435" data-name="Path 15435" d="M18,13.5l3.991,3.991" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                    </g>
                                                </g>
                                            </svg>
                                            <span class='px-1'>Delete</span>
                                        </a>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <!--the card complete-->
                    </div>
                    <!--the colum-6 here complete-->
                    <div class="col-sm-6 my-2">
                        <div class="card bg-light p-2 rounded">
                            <div class="row">
                                <div class="col-6">
                                    <table>
                                        <tr>
                                            <td> <img class='px-2' src="{{asset('images/user/user-1.png')}}" alt=""></td>
                                            <td>
                                                <sapn class='fw-bold text-dark'>Item Name</sapn><br>
                                                <span> Category</span>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <!--end div-6//-->
                                <div class="col-6 text-end align-self-center">
                                    <span>
                                        <a class='text-decoration-none px-1' href="#">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                                <g id="Group_12735" data-name="Group 12735" transform="translate(-1068 -252)">
                                                    <g id="Group_12512" data-name="Group 12512" transform="translate(-44 -88)">
                                                        <circle id="Ellipse_598" data-name="Ellipse 598" cx="20" cy="20" r="20" transform="translate(1112 340)" fill="#edebf7" />
                                                        <path id="Icon_feather-edit-2" data-name="Icon feather-edit-2" d="M11.051,3.7A1.518,1.518,0,0,1,13.2,5.849L5.952,13.1,3,13.9l.805-2.952Z" transform="translate(1123.834 351.421)" fill="none" stroke="#543ab2" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                    </g>
                                                </g>
                                            </svg><span class='px-1'>Edit</span>
                                        </a>
                                    </span>
                                    <span>
                                        <a class='text-decoration-none px-1' href="">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                                <g id="Group_12514" data-name="Group 12514" transform="translate(-1211 -340)">
                                                    <circle id="Ellipse_597" data-name="Ellipse 597" cx="20" cy="20" r="20" transform="translate(1211 340)" fill="#ff3b3b" opacity="0.1" />
                                                    <g id="Icon_feather-delete" data-name="Icon feather-delete" transform="translate(1221.184 348.679)">
                                                        <path id="Path_15433" data-name="Path 15433" d="M14.8,6H6.156L1.5,11.321l4.656,5.321H14.8a1.33,1.33,0,0,0,1.33-1.33V7.33A1.33,1.33,0,0,0,14.8,6Z" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                        <path id="Path_15434" data-name="Path 15434" d="M21.991,13.5,18,17.491" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                        <path id="Path_15435" data-name="Path 15435" d="M18,13.5l3.991,3.991" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                    </g>
                                                </g>
                                            </svg>
                                            <span class='px-1'>Delete</span>
                                        </a>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <!--the card complete-->
                    </div>
                    <!--the colum-6 here complete-->
                    <div class="col-sm-6 my-2">
                        <div class="card bg-light p-2 rounded">
                            <div class="row">
                                <div class="col-6">
                                    <table>
                                        <tr>
                                            <td> <img class='px-2' src="{{asset('images/user/user-1.png')}}" alt=""></td>
                                            <td>
                                                <sapn class='fw-bold text-dark'>Item Name</sapn><br>
                                                <span> Category</span>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <!--end div-6//-->
                                <div class="col-6 text-end align-self-center">
                                    <span>
                                        <a class='text-decoration-none px-1' href="#">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                                <g id="Group_12735" data-name="Group 12735" transform="translate(-1068 -252)">
                                                    <g id="Group_12512" data-name="Group 12512" transform="translate(-44 -88)">
                                                        <circle id="Ellipse_598" data-name="Ellipse 598" cx="20" cy="20" r="20" transform="translate(1112 340)" fill="#edebf7" />
                                                        <path id="Icon_feather-edit-2" data-name="Icon feather-edit-2" d="M11.051,3.7A1.518,1.518,0,0,1,13.2,5.849L5.952,13.1,3,13.9l.805-2.952Z" transform="translate(1123.834 351.421)" fill="none" stroke="#543ab2" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                    </g>
                                                </g>
                                            </svg><span class='px-1'>Edit</span>
                                        </a>
                                    </span>
                                    <span>
                                        <a class='text-decoration-none px-1' href="">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                                <g id="Group_12514" data-name="Group 12514" transform="translate(-1211 -340)">
                                                    <circle id="Ellipse_597" data-name="Ellipse 597" cx="20" cy="20" r="20" transform="translate(1211 340)" fill="#ff3b3b" opacity="0.1" />
                                                    <g id="Icon_feather-delete" data-name="Icon feather-delete" transform="translate(1221.184 348.679)">
                                                        <path id="Path_15433" data-name="Path 15433" d="M14.8,6H6.156L1.5,11.321l4.656,5.321H14.8a1.33,1.33,0,0,0,1.33-1.33V7.33A1.33,1.33,0,0,0,14.8,6Z" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                        <path id="Path_15434" data-name="Path 15434" d="M21.991,13.5,18,17.491" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                        <path id="Path_15435" data-name="Path 15435" d="M18,13.5l3.991,3.991" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                    </g>
                                                </g>
                                            </svg>
                                            <span class='px-1'>Delete</span>
                                        </a>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <!--the card complete-->
                    </div>
                    <!--the colum-6 here complete-->
                </div>
                <!--the row here complete-->
            </div>
        </div>
        <!--cat tab end  -->
        <div id='Rooms' class='tab-pane fade show  '>
            <div class="container my-2">
                <div class="row">
                    @for($i=0; $i < 16 ; $i++) <div class="col-sm-6 my-2">
                        <div class="card bg-light p-2 rounded">
                            <div class="row">
                                <div class="col-6">
                                    <table>
                                        <tr>
                                            <td> <img class='px-2' src="{{asset('images/user/user-1.png')}}" alt=""></td>
                                            <td>
                                                <sapn class='fw-bold text-dark'>Room Name</sapn><br>
                                                <span>Persons : <b class='bg-o fw-bold'>20</b></span>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <!--end div-6//-->
                                <div class="col-6 text-end align-self-center">
                                    <span>
                                        <a class='text-decoration-none px-1' href="#">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                                <g id="Group_12735" data-name="Group 12735" transform="translate(-1068 -252)">
                                                    <g id="Group_12512" data-name="Group 12512" transform="translate(-44 -88)">
                                                        <circle id="Ellipse_598" data-name="Ellipse 598" cx="20" cy="20" r="20" transform="translate(1112 340)" fill="#edebf7" />
                                                        <path id="Icon_feather-edit-2" data-name="Icon feather-edit-2" d="M11.051,3.7A1.518,1.518,0,0,1,13.2,5.849L5.952,13.1,3,13.9l.805-2.952Z" transform="translate(1123.834 351.421)" fill="none" stroke="#543ab2" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                    </g>
                                                </g>
                                            </svg><span class='px-1'>Edit</span>
                                        </a>
                                    </span>
                                    <span>
                                        <a class='text-decoration-none px-1' href="">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                                <g id="Group_12514" data-name="Group 12514" transform="translate(-1211 -340)">
                                                    <circle id="Ellipse_597" data-name="Ellipse 597" cx="20" cy="20" r="20" transform="translate(1211 340)" fill="#ff3b3b" opacity="0.1" />
                                                    <g id="Icon_feather-delete" data-name="Icon feather-delete" transform="translate(1221.184 348.679)">
                                                        <path id="Path_15433" data-name="Path 15433" d="M14.8,6H6.156L1.5,11.321l4.656,5.321H14.8a1.33,1.33,0,0,0,1.33-1.33V7.33A1.33,1.33,0,0,0,14.8,6Z" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                        <path id="Path_15434" data-name="Path 15434" d="M21.991,13.5,18,17.491" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                        <path id="Path_15435" data-name="Path 15435" d="M18,13.5l3.991,3.991" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                    </g>
                                                </g>
                                            </svg>
                                            <span class='px-1'>Delete</span>
                                        </a>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <!--the card complete-->
                </div>
                <!--the colum-6 here complete-->
                @endfor
            </div>
        </div>
    </div>
    <!-- room end here  -->
    <div id='Tables' class='tab-pane fade show  '>
        <div class="container my-2">
            <div class="row">
                @for($i=0; $i < 10 ; $i++) <div class="col-sm-6 my-2">
                    <div class="card bg-light p-2 rounded">
                        <div class="row">
                            <div class="col-6">
                                <table>
                                    <tr>
                                        <td> <img class='px-2' src="{{asset('images/user/user-1.png')}}" alt=""></td>
                                        <td>
                                            <sapn class='fw-bold text-dark'>Table Name</sapn><br>
                                            <span>Persons : <b class='bg-o fw-bold'>20</b></span>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <!--end div-6//-->
                            <div class="col-6 text-end align-self-center">
                                <span>
                                    <a class='text-decoration-none px-1' href="#">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                            <g id="Group_12735" data-name="Group 12735" transform="translate(-1068 -252)">
                                                <g id="Group_12512" data-name="Group 12512" transform="translate(-44 -88)">
                                                    <circle id="Ellipse_598" data-name="Ellipse 598" cx="20" cy="20" r="20" transform="translate(1112 340)" fill="#edebf7" />
                                                    <path id="Icon_feather-edit-2" data-name="Icon feather-edit-2" d="M11.051,3.7A1.518,1.518,0,0,1,13.2,5.849L5.952,13.1,3,13.9l.805-2.952Z" transform="translate(1123.834 351.421)" fill="none" stroke="#543ab2" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                </g>
                                            </g>
                                        </svg><span class='px-1'>Edit</span>
                                    </a>
                                </span>
                                <span>
                                    <a class='text-decoration-none px-1' href="">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                            <g id="Group_12514" data-name="Group 12514" transform="translate(-1211 -340)">
                                                <circle id="Ellipse_597" data-name="Ellipse 597" cx="20" cy="20" r="20" transform="translate(1211 340)" fill="#ff3b3b" opacity="0.1" />
                                                <g id="Icon_feather-delete" data-name="Icon feather-delete" transform="translate(1221.184 348.679)">
                                                    <path id="Path_15433" data-name="Path 15433" d="M14.8,6H6.156L1.5,11.321l4.656,5.321H14.8a1.33,1.33,0,0,0,1.33-1.33V7.33A1.33,1.33,0,0,0,14.8,6Z" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                    <path id="Path_15434" data-name="Path 15434" d="M21.991,13.5,18,17.491" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                    <path id="Path_15435" data-name="Path 15435" d="M18,13.5l3.991,3.991" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                </g>
                                            </g>
                                        </svg>
                                        <span class='px-1'>Delete</span>
                                    </a>
                                </span>
                            </div>
                        </div>
                    </div>
                    <!--the card complete-->
            </div>
            <!--the colum-6 here complete-->
            @endfor
        </div>
    </div>
</div>
<!-- Tables end here ---  -->
<div id='Time' class='tab-pane fade show  '>
    <div class="container my-2">
        <div class="row">
            @for($i=0; $i < 12 ; $i++) <div class="col-sm-6 my-2">
                <div class="card bg-light p-2 rounded">
                    <div class="row">
                        <div class="col-6">
                            <span class='time_1'>09:00 AM</span><br>
                            <span class='text-success'>Active</span>
                        </div>
                        <!--end div-6//-->
                        <div class="col-6 text-end align-self-center">
                            <span>
                                <a class='text-decoration-none px-1' href="#">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                        <g id="Group_12735" data-name="Group 12735" transform="translate(-1068 -252)">
                                            <g id="Group_12512" data-name="Group 12512" transform="translate(-44 -88)">
                                                <circle id="Ellipse_598" data-name="Ellipse 598" cx="20" cy="20" r="20" transform="translate(1112 340)" fill="#edebf7" />
                                                <path id="Icon_feather-edit-2" data-name="Icon feather-edit-2" d="M11.051,3.7A1.518,1.518,0,0,1,13.2,5.849L5.952,13.1,3,13.9l.805-2.952Z" transform="translate(1123.834 351.421)" fill="none" stroke="#543ab2" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                            </g>
                                        </g>
                                    </svg><span class='px-1'>Edit</span>
                                </a>
                            </span>
                            <span>
                                <a class='text-decoration-none px-1' href="">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                        <g id="Group_12514" data-name="Group 12514" transform="translate(-1211 -340)">
                                            <circle id="Ellipse_597" data-name="Ellipse 597" cx="20" cy="20" r="20" transform="translate(1211 340)" fill="#ff3b3b" opacity="0.1" />
                                            <g id="Icon_feather-delete" data-name="Icon feather-delete" transform="translate(1221.184 348.679)">
                                                <path id="Path_15433" data-name="Path 15433" d="M14.8,6H6.156L1.5,11.321l4.656,5.321H14.8a1.33,1.33,0,0,0,1.33-1.33V7.33A1.33,1.33,0,0,0,14.8,6Z" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                <path id="Path_15434" data-name="Path 15434" d="M21.991,13.5,18,17.491" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                <path id="Path_15435" data-name="Path 15435" d="M18,13.5l3.991,3.991" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                            </g>
                                        </g>
                                    </svg>
                                    <span class='px-1'>Delete</span>
                                </a>
                            </span>
                        </div>
                    </div>
                </div>
                <!--the card complete-->
        </div>
        <!--the colum-6 here complete-->
        @endfor
    </div>
</div>
</div>
<!-- time end here  -->
<div id='riew' class='tab-pane fade show  '>
    <div class="container my-2">
        <div class="row">
            @for($i=0; $i < 12 ; $i++) <div class="col-sm-6 my-2">
                <div class="card bg-light p-2 rounded">
                    <div class="row">
                        <div class="col-6">
                            <table>
                                <tr>
                                    <td> <img class='px-2' src="{{asset('images/user/user-1.png')}}" alt=""></td>
                                    <td>
                                        <sapn class='fw-bold text-dark'>Customer Name</sapn><br>
                                        <span class='f-s'>(<i class="bi bi-star-fill text-warning px-1"></i>4.6)</span><br>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <!--end div-6//-->
                        <div class="col-6 text-end align-self-end d-grid">
                            <table class='mt-1'>
                                <tr>
                                    <td>
                                        <div>
                                            <label class="switch">
                                                <input type="checkbox" id="togBtn">
                                                <div class="slider round">
                                                    <!--ADDED HTML -->
                                                    <span class="on">ON</span>
                                                    <span class="off">OFF</span>
                                                </div>
                                    </td>
                                    <td>
                                        <a class='text-decoration-none ps-1' href="">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                                <g id="Group_12736" data-name="Group 12736" transform="translate(-1188 -235)">
                                                    <g id="Group_12514" data-name="Group 12514" transform="translate(-23 -105)">
                                                        <circle id="Ellipse_597" data-name="Ellipse 597" cx="20" cy="20" r="20" transform="translate(1211 340)" fill="#edebf7" />
                                                        <g id="Icon_feather-eye" data-name="Icon feather-eye" transform="translate(1222.684 348.679)">
                                                            <path id="Path_15416" data-name="Path 15416" d="M1.5,11.321S4.342,6,9.316,6s7.816,5.321,7.816,5.321-2.842,5.321-7.816,5.321S1.5,11.321,1.5,11.321Z" fill="none" stroke="#543ab2" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                            <path id="Path_15417" data-name="Path 15417" d="M17.491,15.5a2,2,0,1,1-2-2A2,2,0,0,1,17.491,15.5Z" transform="translate(-6.179 -4.174)" fill="none" stroke="#543ab2" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                        </g>
                                                    </g>
                                                </g>
                                            </svg>
                                            <span class='px-1'>View</span>
                                        </a>
                                    </td>
                                </tr>
                            </table>
                            </span>
                            </span>
                        </div>
                    </div>
                </div>
                <!--the card complete-->
        </div>
        <!--the colum-6 here complete-->
        @endfor
    </div>
</div>
</div>
<!-- riew end here  -->
<div id='slide' class='tab-pane fade show  '>
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div class="card border-0">
                    <div>
                        <img src="{{asset('images\user\slider_tab.png')}}" class='img-fluid' alt="">
                    </div>
                    <div>
                        <div style="display: flex; justify-content: space-between;padding:10px; ">
                            <p class='fs-6 mt-1 fw-bold text-success'>active</p>
                            <p>
                                <a class='text-decoration-none px-1' href="">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                        <g id="Group_12514" data-name="Group 12514" transform="translate(-1211 -340)">
                                            <circle id="Ellipse_597" data-name="Ellipse 597" cx="20" cy="20" r="20" transform="translate(1211 340)" fill="#ff3b3b" opacity="0.1" />
                                            <g id="Icon_feather-delete" data-name="Icon feather-delete" transform="translate(1221.184 348.679)">
                                                <path id="Path_15433" data-name="Path 15433" d="M14.8,6H6.156L1.5,11.321l4.656,5.321H14.8a1.33,1.33,0,0,0,1.33-1.33V7.33A1.33,1.33,0,0,0,14.8,6Z" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                <path id="Path_15434" data-name="Path 15434" d="M21.991,13.5,18,17.491" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                <path id="Path_15435" data-name="Path 15435" d="M18,13.5l3.991,3.991" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                            </g>
                                        </g>
                                    </svg>
                                    <span class='px-1 text-danger'>Delete</span>
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!--the colum ended here-->
            <div class="col-sm-4">
                <div class="card border-0">
                    <div>
                        <img src="{{asset('images\user\slider_tab.png')}}" class='img-fluid' alt="">
                    </div>
                    <div>
                        <div style="display: flex; justify-content: space-between;padding:10px; ">
                            <p class='fs-6 mt-1 fw-bold text-success'>active</p>
                            <p>
                                <a class='text-decoration-none px-1' href="">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                        <g id="Group_12514" data-name="Group 12514" transform="translate(-1211 -340)">
                                            <circle id="Ellipse_597" data-name="Ellipse 597" cx="20" cy="20" r="20" transform="translate(1211 340)" fill="#ff3b3b" opacity="0.1" />
                                            <g id="Icon_feather-delete" data-name="Icon feather-delete" transform="translate(1221.184 348.679)">
                                                <path id="Path_15433" data-name="Path 15433" d="M14.8,6H6.156L1.5,11.321l4.656,5.321H14.8a1.33,1.33,0,0,0,1.33-1.33V7.33A1.33,1.33,0,0,0,14.8,6Z" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                <path id="Path_15434" data-name="Path 15434" d="M21.991,13.5,18,17.491" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                <path id="Path_15435" data-name="Path 15435" d="M18,13.5l3.991,3.991" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                            </g>
                                        </g>
                                    </svg>
                                    <span class='px-1 text-danger'>Delete</span>
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!--the colum ended here-->
            <div class="col-sm-4">
                <div class="card border-0">
                    <div>
                        <img src="{{asset('images\user\slider_tab.png')}}" class='img-fluid' alt="">
                    </div>
                    <div>
                        <div style="display: flex; justify-content: space-between;padding:10px; ">
                            <p style="" class='fs-6 mt-1 fw-bold text-success'>active</p>
                            <p style="">
                                <a class='text-decoration-none px-1' href="">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                        <g id="Group_12514" data-name="Group 12514" transform="translate(-1211 -340)">
                                            <circle id="Ellipse_597" data-name="Ellipse 597" cx="20" cy="20" r="20" transform="translate(1211 340)" fill="#ff3b3b" opacity="0.1" />
                                            <g id="Icon_feather-delete" data-name="Icon feather-delete" transform="translate(1221.184 348.679)">
                                                <path id="Path_15433" data-name="Path 15433" d="M14.8,6H6.156L1.5,11.321l4.656,5.321H14.8a1.33,1.33,0,0,0,1.33-1.33V7.33A1.33,1.33,0,0,0,14.8,6Z" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                <path id="Path_15434" data-name="Path 15434" d="M21.991,13.5,18,17.491" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                <path id="Path_15435" data-name="Path 15435" d="M18,13.5l3.991,3.991" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                            </g>
                                        </g>
                                    </svg>
                                    <span class='px-1 text-danger'>Delete</span>
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!--the colum ended here-->
            <div class="col-sm-4">
                <div class="card border-0">
                    <div>
                        <img src="{{asset('images\user\slider_tab.png')}}" class='img-fluid' alt="">
                    </div>
                    <div>
                        <div style="display: flex; justify-content: space-between;padding:10px; ">
                            <p class='fs-6 mt-1 fw-bold text-success'>active</p>
                            <p>
                                <a class='text-decoration-none px-1' href="">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                        <g id="Group_12514" data-name="Group 12514" transform="translate(-1211 -340)">
                                            <circle id="Ellipse_597" data-name="Ellipse 597" cx="20" cy="20" r="20" transform="translate(1211 340)" fill="#ff3b3b" opacity="0.1" />
                                            <g id="Icon_feather-delete" data-name="Icon feather-delete" transform="translate(1221.184 348.679)">
                                                <path id="Path_15433" data-name="Path 15433" d="M14.8,6H6.156L1.5,11.321l4.656,5.321H14.8a1.33,1.33,0,0,0,1.33-1.33V7.33A1.33,1.33,0,0,0,14.8,6Z" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                <path id="Path_15434" data-name="Path 15434" d="M21.991,13.5,18,17.491" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                <path id="Path_15435" data-name="Path 15435" d="M18,13.5l3.991,3.991" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                            </g>
                                        </g>
                                    </svg>
                                    <span class='px-1 text-danger'>Delete</span>
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!--the colum ended here-->
            <div class="col-sm-4">
                <div class="card border-0">
                    <div>
                        <img src="{{asset('images\user\slider_tab.png')}}" class='img-fluid' alt="">
                    </div>
                    <div>
                        <div style="display: flex; justify-content: space-between;padding:10px; ">
                            <p style="" class='fs-6 mt-1 fw-bold text-success'>active</p>
                            <p style="">
                                <a class='text-decoration-none px-1' href="">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                        <g id="Group_12514" data-name="Group 12514" transform="translate(-1211 -340)">
                                            <circle id="Ellipse_597" data-name="Ellipse 597" cx="20" cy="20" r="20" transform="translate(1211 340)" fill="#ff3b3b" opacity="0.1" />
                                            <g id="Icon_feather-delete" data-name="Icon feather-delete" transform="translate(1221.184 348.679)">
                                                <path id="Path_15433" data-name="Path 15433" d="M14.8,6H6.156L1.5,11.321l4.656,5.321H14.8a1.33,1.33,0,0,0,1.33-1.33V7.33A1.33,1.33,0,0,0,14.8,6Z" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                <path id="Path_15434" data-name="Path 15434" d="M21.991,13.5,18,17.491" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                <path id="Path_15435" data-name="Path 15435" d="M18,13.5l3.991,3.991" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                            </g>
                                        </g>
                                    </svg>
                                    <span class='px-1 text-danger'>Delete</span>
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!--the colum ended here-->
            <div class="col-sm-4">
                <div class="card border-0">
                    <div>
                        <img src="{{asset('images\user\slider_tab.png')}}" class='img-fluid' alt="">
                    </div>
                    <div>
                        <div style="display: flex; justify-content: space-between;padding:10px; ">
                            <p style="" class='fs-6 mt-1 fw-bold text-success'>active</p>
                            <p style="">
                                <a class='text-decoration-none px-1' href="">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                                        <g id="Group_12514" data-name="Group 12514" transform="translate(-1211 -340)">
                                            <circle id="Ellipse_597" data-name="Ellipse 597" cx="20" cy="20" r="20" transform="translate(1211 340)" fill="#ff3b3b" opacity="0.1" />
                                            <g id="Icon_feather-delete" data-name="Icon feather-delete" transform="translate(1221.184 348.679)">
                                                <path id="Path_15433" data-name="Path 15433" d="M14.8,6H6.156L1.5,11.321l4.656,5.321H14.8a1.33,1.33,0,0,0,1.33-1.33V7.33A1.33,1.33,0,0,0,14.8,6Z" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                <path id="Path_15434" data-name="Path 15434" d="M21.991,13.5,18,17.491" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                                <path id="Path_15435" data-name="Path 15435" d="M18,13.5l3.991,3.991" transform="translate(-9.183 -4.174)" fill="none" stroke="#ff3b3b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
                                            </g>
                                        </g>
                                    </svg>
                                    <span class='px-1 text-danger'>Delete</span>
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!--the colum ended here-->
        </div>
        <!--the row ended here-->
    </div>
</div>
<!--slide tab end  -->
<div id='log' class='tab-pane fade show  '>
    <h1 class="display">log</h1>
</div>
<!--log tab end  -->
</div>
</div>

<style>
    .mytab {
        background-color: red !important;
        font-size: 19px;
    }

    .bg-light {
        background-color: rgba(240, 240, 240, .5) !important;
    }

    .upload-btn-wrapper {
        position: relative;
        overflow: hidden;
        display: inline-block;
        height: 38px;
        margin-top: -11px !important;
    }

    .btn {

        color: gray;
        background-color: white;
        padding: 2px 10px;
        border-radius: 8px;
        font-size: 13px;

    }

    .upload-btn-wrapper input[type=file] {
        font-size: 14px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
    }

    .update_btn {
        padding: 3px;
        background-color: #543AB2;
        border-radius: 10px;
        width: 60px;
        color: white;
        z-index: 10;
    }
</style>
<script>
    $(document).ready(function() {
        $("#myTab a").click(function(e) {
            e.preventDefault();
            $(this).tab('show');
        });
        $("#myTab2 a").click(function(e) {
            e.preventDefault();
            $(this).tab('show');
        });
        $("#myTab3 a").click(function(e) {
            e.preventDefault();
            $(this).tab('show');
        });
    });
</script>
<script>
    // $(document).ready(function(){
    //   $(".nav-link").click(function(){
    //     $(this).addClass("mytab");

    //   });
    // $('.nav-link')on('click','a',function(){
    //     $('.nav-link ').removeClass('mytab');
    //     $(this).addClass('mytab');
    // });
    });
</script>
<script type='text/javascript'>
    const currenlocation = location.href;
    const menultem = document.querySelectorAll('a');
    const menulenght = menulengh.length
    for (let i = 0; i < menulenght; i++) {
        if (menultem[i].href === currenlocation) {
            menuItem[i].className = 'mytab'
        }
    }
</script>
<script type="text/javascript">
    google.charts.load('current', {
        'packages': ['bar']
    });
    google.charts.setOnLoadCallback(drawStuff);

    function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
            ['Opening Move', 'Percentage'],
            ["Jan", 90],
            ["Feb", 70],
            ["Mar", 50],
            ["Apr", 30],
            ["May", 20],
            ["Jun", 10],
            ["july", 70],
            ["Agu", 50],
            ["Sep", 40],
            ["Oct", 20],
            ["Nov", 50],
            ['Dec', 40]
        ]);

        var options = {
            title: ' ',

            legend: {
                position: 'none'
            },
            chart: {
                title: ' ',
                subtitle: ' '
            },
            bars: 'vertical',
            axes: {
                x: {
                    0: {
                        side: '',
                        label: ''
                    } // Top x-axis.
                }
            },
            bar: {
                groupWidth: "90%"
            }
        };

        var chart = new google.charts.Bar(document.getElementById('top_div'));
        chart.draw(data, options);

    };
</script>
@endsection