@extends('layouts.master')
@section('title')
    {{ 'Page Title Goes Here' }}
@endsection
@section('contain')
    <!-- Start Page Content -->
    <!-- ============================================================== -->
    <!-- Row -->
    <div class="row">
        <!-- Column -->
        <div class="col-lg-4 col-xlg-3 col-md-5">
            <div class="card">
                @foreach ($customerData as $user)
                    <div class="card-body">
                        <div class=" col-lg-12 col-md-5" style="margin-left: 17%;">
                            @php $rating = $user->rating; @endphp
                            @foreach (range(1, 5) as $i)
                                <span class="fa-stack" style="width:1em color: rgb(38, 105, 25)">
                                    <i class="far fa-star fa-stack-1x "></i>

                                    @if ($rating > 0)
                                        @if ($rating > 0.5)
                                            <i class="fas fa-star fa-stack-1x" style="color: rgb(38, 105, 25)"></i>
                                        @else
                                            <i class="fas fa-star-half fa-stack-1x" style="color: rgb(38, 105, 25)"></i>
                                        @endif
                                    @endif
                                    @php $rating--; @endphp
                                </span>
                            @endforeach
                            <div class="text-success" style="margin-left: 29%;">{{ $user->rating }}</div>
                        </div>
                        <center class="m-t-30">
                            <a href="{{ URL::asset($user->profile_image != null ? env('MEDIA_URL') . $user->profile_image : 'images/933-9332131_profile-picture-default-png.png') }}"
                                target="_blank">
                                <img src="{{ $user->profile_image != null ? env('MEDIA_URL') . $user->profile_image : asset('images/933-9332131_profile-picture-default-png.png') }}"
                                    class="img-circle" width="150" />
                            </a>
                            <h4 class=" waves-dark active m-t-10">{{ $user->full_name }}</h4>
                            <h6 class="text-success">{{ $user->user_role }}</h6>

                            {{-- <div class="row text-center justify-content-md-center">
                                <div class="col-6"><a href="javascript:void(0)" class="link"><i class="icon-people"></i>
                                        <font class="font-medium">254</font>
                                    </a></div>
                                <div class="col-6"><a href="javascript:void(0)" class="link"><i class="icon-picture"></i>
                                        <font class="font-medium">54</font>
                                    </a></div>
                            </div> --}}
                        </center>
                    </div>
                    <div>
                        <hr>
                    </div>
                    <div class="card-body"> <small class="text-muted">Email address </small>
                        <h6>{{ $user->email }}</h6> <small class="text-muted p-t-30 db">Phone</small>
                        <h6>{{ $user->phone }}</h6>

                        {{-- <h6>{{$user->bookings[0]['address']??'N/A'}}</h6>
                        <div class="map-box">
                            <iframe
                            src="https://www.google.com/maps/embed?bp=karachi"
                            width="100%" height="150" frameborder="0" style="border:0" allowfullscreen></iframe>
                        </div> --}}

                    </div>
                @endforeach
            </div>
        </div>
        <!-- Column -->
        <!-- Column -->
        <div class="col-lg-8 col-xlg-9 col-md-7">
            <div class="card">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs profile-tab" role="tablist">
                    <li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#home"
                            role="tab">Timeline</a> </li>
                    {{-- <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#profile"
                            role="tab">Profile</a> </li> --}}
                    {{-- <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#settings"
                            role="tab">Settings</a> </li> --}}
                    {{-- <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#wallet"
                            role="tab">wallet</a> </li> --}}
                    <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#appointment"
                            role="tab">Appointments</a> </li>
                    {{-- <li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#customerDevice"
                            role="tab">Customer Device</a> </li> --}}
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane active" id="home" role="tabpanel">
                        <div class="card-body">
                            <div class="tab-content">
                                <div class="tab-pane active" id="profile" role="tabpanel">
                                    <div class="card-body" style="height: 49.5vh">
                                        <div class="row">
                                            {{-- <div class="col-md-3 col-xs-6 b-r"> <strong>First Name</strong>
                                                <br>
                                                <p class="text-muted">{{ $user->first_name }}</p>
                                            </div>
                                            <div class="col-md-3 col-xs-6 b-r"> <strong>Last Name</strong>
                                                <br>
                                                <p class="text-muted">{{ $user->last_name }}</p>
                                            </div> --}}
                                            <div class="col-md-3 col-xs-6 b-r"> <strong>Full Name</strong>
                                                <br>
                                                <p class="text-muted">{{ $user->full_name ?? '-' }}</p>
                                            </div>
                                            <div class="col-md-3 col-xs-6 b-r"> <strong>Email</strong>
                                                <br>
                                                <p class="text-muted">{{ $user->email ?? '-' }}</p>
                                            </div>
                                            <div class="col-md-3 col-xs-6"> <strong>Phone</strong>
                                                <br>
                                                <p class="text-muted">{{ $user->phone ?? '-' }}</p>
                                            </div>
                                            <div class="col-md-3 col-xs-6"> <strong>Age </strong>
                                                <br>
                                                <p class="text-muted">{{ $user->age ?? '-' }}</p>
                                            </div>
                                            <div class="col-md-3 col-xs-6"> <strong>Social ID</strong>
                                                <br>
                                                <p class="text-muted">{{ $user->social_id ?? '-' }}</p>
                                            </div>
                                            {{-- <div class="col-md-3 col-xs-6"> <strong>Provider</strong>
                                                <br>
                                                <p class="text-muted">{{ $user->provider??"-" }}</p>
                                            </div> --}}
                                            <div class="col-md-3 col-xs-6"> <strong>Gender</strong>
                                                <br>
                                                <p class="text-muted">{{ $user->gender ?? '-' }}</p>
                                            </div>
                                            {{-- <div class="col-md-3 col-xs-6"> <strong>DOB	</strong>
                                                <br>
                                                <p class="text-muted">{{ $user->dob??"-"	 }}</p>
                                            </div> --}}
                                            {{-- <div class="col-md-3 col-xs-6"> <strong>Customer Stripe ID</strong>
                                                <br>
                                                <p class="text-muted">{{ $user->customer_stripe_id ?? '-' }}</p>
                                            </div> --}}
                                            {{-- <div class="col-md-3 col-xs-6"> <strong>Latitude</strong>
                                                <br>
                                                <p class="text-muted">{{ $user->latitude }}</p>
                                            </div>
                                            <div class="col-md-3 col-xs-6"> <strong>Longitude</strong>
                                                <br>
                                                <p class="text-muted">{{ $user->longitude }}</p>
                                            </div> --}}
                                            {{-- <div class="col-md-3 col-xs-6"> <strong>User Status</strong>
                                                <br>
                                                @if ($user->is_online == 0)
                                                    <p class="badge rounded-pill bg-danger ms-auto mb-2 mb-md-0">offline</p>
                                                @else
                                                    <p class="badge rounded-pill bg-success ms-auto mb-2 mb-md-0">online</p>
                                                @endif
                                            </div> --}}
                                            <div class="col-md-3 col-xs-6"> <strong>Biography</strong>
                                                <br>
                                                <p class="text-muted">{{ $user->biography ?? '-' }}</p>
                                            </div>
                                             <div class="col-md-3 col-xs-6"> <strong>Ethnicity</strong>
                                                <br>
                                                <p class="text-muted">{{ $user->ethnicity ?? '-' }}</p>
                                            </div>
                                            <div class="col-md-3 col-xs-6"> <strong>Language(s)</strong>
                                                <br>
                                                @php
                                                    $languages = json_decode($user->language, true);
                                                @endphp
                                                @if ($languages)
                                                @foreach ($languages as $language)
                                                    <p>{{ $language??"-" }}</p>
                                                @endforeach
                                                @else
                                                <p>{{ $language??"-" }}</p>
                                                @endif
                                            </div>

                                            {{-- <div class="col-md-3 col-xs-6"> <strong>Name Visibility</strong>
                                                <br>
                                                <span class="badge badge-success">Yes</span>

                                            </div>


                                            <div class="col-md-3 col-xs-6"> <strong>Residency Status</strong>
                                                <br>
                                                <p class="text-muted">citizen</p>
                                            </div>
                                            <div class="col-md-3 col-xs-6"> <strong>Marital Status</strong>
                                                <br>
                                                <p class="text-muted">never married</p>
                                            </div>
                                            <div class="col-md-3 col-xs-6"> <strong>Height</strong>
                                                <br>
                                                <p class="text-muted">5.7</p>
                                            </div>
                                            <div class="col-md-3 col-xs-6"> <strong>Monthly Income Range</strong>
                                                <br>
                                                <p class="text-muted">147000,500000</p>
                                            </div>
                                            <div class="col-md-3 col-xs-6"> <strong>Income Visibility</strong>
                                                <br>
                                                <span class="badge badge-success">Yes</span>
                                            </div>
                                            <div class="col-md-3 col-xs-6"> <strong>Disability</strong>
                                                <br>
                                                <span class="badge badge-success">Yes</span>
                                            </div>
                                            <div class="col-md-3 col-xs-6"> <strong>Profession</strong>
                                                <br>
                                                <p class="text-muted">Accountant</p>
                                            </div>
                                            <div class="col-md-3 col-xs-6"> <strong>Package</strong>
                                                <br>
                                                <p class="text-muted">free</p>
                                            </div>
                                            <div class="col-md-3 col-xs-6"> <strong>Status</strong>
                                                <br>

                                                <label class="badge badge-warning">Pending</label>
                                            </div>
                                            <div class="col-md-3 col-xs-6"> <strong>Education</strong>
                                                <br>
                                                <p class="text-muted">PhD</p>
                                            </div> --}}
                                            {{-- <div class="col-md-3 col-xs-6"> <strong>Interest</strong>
                                                <br>
                                                <li>Shopping</li>
                                                <li>Movies</li>
                                                <li>Foodie</li>
                                                <li>Dramas</li>
                                            </div> --}}
                                        </div>

                                        {{-- <hr> --}}

                                        {{-- <div class="col-md-3"> <strong>Media</strong><br>
                                            <h5>Agreement</h5>
                                            <p class="m-t-30"> <a
                                                    href="{{ URL::asset($user->agreement != null ? $user->agreement->media : null) }}"
                                                    target="_blank">
                                                    <img src="{{ asset($user->agreement != null ? $user->agreement->media : null) }}"
                                                        alt="Not Available" width="100">
                                                </a></p>
                                        </div>

                                        <div class="col-md-3" style="margin-top: 23px">
                                            <h5>Licens</h5>
                                            <p class="m-t-30"> <a
                                                    href="{{ URL::asset($user->license != null ? $user->license->media : null) }}"
                                                    target="_blank">
                                                    <img src="{{ asset($user->license != null ? $user->license->media : null) }}"
                                                        alt="Not Available" width="100">
                                                </a></p>
                                        </div> --}}
                                    </div>
                                </div>

                                <div class="tab-pane" id="selfie" role="tabpanel">
                                    <div class="card-body">
                                        <div class="profiletimeline">

                                            <div class="p-3">
                                                <span style="float:right;">
                                                    <form class="form-horizontal form-material"
                                                        action="https://test-cmolds.com/zauj_admin/public/users/391/update"
                                                        method="post">
                                                        <input type="hidden" name="_token"
                                                            value="p1wC3NiayGMMlY3sWxQqF6J6BlHk1OphgF8nCQQv">
                                                        <p class="text-center mt-4">Status not available</p>
                                                    </form>
                                                </span>
                                            </div>

                                            <div class="row">

                                                <div class="col-sm-4">

                                                    <p class="text-center mt-4">Not Uploaded</p>
                                                </div>

                                            </div>

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

                                <div class="tab-pane" id="picture" role="tabpanel">
                                    <div class="card-body">
                                        <div class="profiletimeline">

                                            <div class="row">
                                                <div class="col-sm-4">

                                                    <p class="text-center mt-4">


                                                        <a href="https://test-cmolds.com/zauj-uploads/users/PYz8K/pictures/geSGyjpg"
                                                            target="blank"> Click to view </a>
                                                        <span class="badge badge-info">pending</span>

                                                        <span style="float:right;" class="p-1">
                                                            <a href="https://test-cmolds.com/zauj_admin/public/picture/841/approved"
                                                                data-toggle="tooltip" data-original-title="Approved"
                                                                class="btn btn-primary btn-sm">
                                                                <i class="icon-check" aria-hidden="true"></i>
                                                            </a>
                                                            <a href="https://test-cmolds.com/zauj_admin/public/picture/841/rejected"
                                                                data-toggle="tooltip" data-original-title="Disapproved"
                                                                class="btn btn-danger btn-sm">
                                                                <i class="icon-close" aria-hidden="true"></i>
                                                            </a>
                                                        </span>
                                                        <img src="https://test-cmolds.com/zauj-uploads/users/PYz8K/pictures/geSGyjpg"
                                                            alt="" class="h-50 w-100">

                                                    </p>

                                                </div>

                                            </div>

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

                                <div class="tab-pane" id="identity" role="tabpanel">
                                    <div class="card-body">
                                        <div class="profiletimeline">

                                            <div class="p-3">
                                                <span style="float:right;">

                                                    <form class="form-horizontal form-material"
                                                        action="https://test-cmolds.com/zauj_admin/public/users/391/identity"
                                                        method="post">
                                                        <input type="hidden" name="_token"
                                                            value="p1wC3NiayGMMlY3sWxQqF6J6BlHk1OphgF8nCQQv">
                                                        <p class="text-center mt-4">Status not available</p>

                                                    </form>
                                                </span>
                                            </div>

                                            <div class="row">

                                                <div class="col-sm-4">
                                                    <p class="text-center mt-4">Not Uploaded</p>
                                                </div>

                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane" id="setting" role="tabpanel">
                                    <div class="card-body">
                                        <form class="form-horizontal form-material"
                                            action="https://test-cmolds.com/zauj_admin/public/users/391" method="POST">
                                            <input type="hidden" name="_token"
                                                value="p1wC3NiayGMMlY3sWxQqF6J6BlHk1OphgF8nCQQv"> <input type="hidden"
                                                name="_method" value="PATCH">
                                            <div class="form-group">
                                                <label class="col-sm-12">Status</label>
                                                <div class="col-sm-12">
                                                    <select class="form-control form-control-line" name="status">
                                                        <option value="0" selected>Pending</option>
                                                        <option value="1">Approved</option>
                                                        <option value="2">Rejected</option>
                                                        <option value="3">InActive</option>
                                                        <option value="4">Blocked</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-sm-12">
                                                    <button class="btn btn-success">Update Profile</button>
                                                </div>
                                            </div>

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

                            </div>
                        </div>
                    </div>
                    <!--second tab-->
                    <div class="tab-pane" id="profile" role="tabpanel">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3 col-xs-6 b-r"> <strong>Full Name</strong>
                                    <br>
                                    <p class="text-muted">Johnathan Deo</p>
                                </div>
                                <div class="col-md-3 col-xs-6 b-r"> <strong>Mobile</strong>
                                    <br>
                                    <p class="text-muted">(123) 456 7890</p>
                                </div>
                                <div class="col-md-3 col-xs-6 b-r"> <strong>Email</strong>
                                    <br>
                                    <p class="text-muted">johnathan@admin.com</p>
                                </div>
                                <div class="col-md-3 col-xs-6"> <strong>Location</strong>
                                    <br>
                                    <p class="text-muted">London</p>
                                </div>
                            </div>
                            <hr>
                            <p class="m-t-30">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim
                                justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis
                                pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate
                                eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
                                been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
                                galley of type and scrambled it to make a type specimen book. It has survived not only five
                                centuries </p>
                            <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
                                passages, and more recently with desktop publishing software like Aldus PageMaker including
                                versions of Lorem Ipsum.</p>
                            <h4 class="font-medium m-t-30">Skill Set</h4>
                            <hr>
                            <h5 class="m-t-30">Wordpress <span class="pull-right">80%</span></h5>
                            <div class="progress">
                                <div class="progress-bar bg-success" role="progressbar" aria-valuenow="80"
                                    aria-valuemin="0" aria-valuemax="100" style="width:80%; height:6px;"> <span
                                        class="sr-only">50% Complete</span> </div>
                            </div>
                            <h5 class="m-t-30">HTML 5 <span class="pull-right">90%</span></h5>
                            <div class="progress">
                                <div class="progress-bar bg-info" role="progressbar" aria-valuenow="90"
                                    aria-valuemin="0" aria-valuemax="100" style="width:90%; height:6px;"> <span
                                        class="sr-only">50% Complete</span> </div>
                            </div>
                            <h5 class="m-t-30">jQuery <span class="pull-right">50%</span></h5>
                            <div class="progress">
                                <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="50"
                                    aria-valuemin="0" aria-valuemax="100" style="width:50%; height:6px;"> <span
                                        class="sr-only">50% Complete</span> </div>
                            </div>
                            <h5 class="m-t-30">Photoshop <span class="pull-right">70%</span></h5>
                            <div class="progress">
                                <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="70"
                                    aria-valuemin="0" aria-valuemax="100" style="width:70%; height:6px;"> <span
                                        class="sr-only">50% Complete</span> </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="settings" role="tabpanel">
                        <div class="card-body">
                            <form class="form-horizontal form-material">
                                <div class="form-group">
                                    <label class="col-md-12">Full Name</label>
                                    <div class="col-md-12">
                                        <input type="text" placeholder="Johnathan Doe"
                                            class="form-control form-control-line">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="example-email" class="col-md-12">Email</label>
                                    <div class="col-md-12">
                                        <input type="email" placeholder="johnathan@admin.com"
                                            class="form-control form-control-line" name="example-email"
                                            id="example-email">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-12">Password</label>
                                    <div class="col-md-12">
                                        <input type="password" value="password" class="form-control form-control-line">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-12">Phone No</label>
                                    <div class="col-md-12">
                                        <input type="text" placeholder="123 456 7890"
                                            class="form-control form-control-line">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-12">Message</label>
                                    <div class="col-md-12">
                                        <textarea rows="5" class="form-control form-control-line"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-12">Select Country</label>
                                    <div class="col-sm-12">
                                        <select class="form-control form-control-line">
                                            <option>London</option>
                                            <option>India</option>
                                            <option>Usa</option>
                                            <option>Canada</option>
                                            <option>Thailand</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-12">
                                        <button class="btn btn-success text-white">Update Profile</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="tab-pane" id="appointment" role="tabpanel">
                        <div class="card-body">
                            {{-- <form class="form-horizontal form-material">
                                <div class="form-group">
                                    <label class="col-md-12">Full Name</label>
                                    <div class="col-md-12">
                                        <input type="text" placeholder="Johnathan Doe"
                                            class="form-control form-control-line">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="example-email" class="col-md-12">Email</label>
                                    <div class="col-md-12">
                                        <input type="email" placeholder="johnathan@admin.com"
                                            class="form-control form-control-line" name="example-email"
                                            id="example-email">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-12">Password</label>
                                    <div class="col-md-12">
                                        <input type="password" value="password" class="form-control form-control-line">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-12">Phone No</label>
                                    <div class="col-md-12">
                                        <input type="text" placeholder="123 456 7890"
                                            class="form-control form-control-line">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-12">Message</label>
                                    <div class="col-md-12">
                                        <textarea rows="5" class="form-control form-control-line"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-12">Select Country</label>
                                    <div class="col-sm-12">
                                        <select class="form-control form-control-line">
                                            <option>London</option>
                                            <option>India</option>
                                            <option>Usa</option>
                                            <option>Canada</option>
                                            <option>Thailand</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-12">
                                        <button class="btn btn-success text-white">Update Profile</button>
                                    </div>
                                </div>
                            </form> --}}
                            <div class="table-responsive m-t-40">
                                <table id="myTableifobooking" class="table table-striped border">
                                    <thead>
                                        <tr class="text-white" style="background-color: gray">
                                            <th>id</th>
                                            <th>Booking Type</th>
                                            <th>Job Title</th>
                                            <th>Job Type</th>
                                            <th>Action</th>

                                        </tr>
                                    </thead>
                                    <tbody>

                                        @foreach ($user->appointment as $appoint)
                                            <tr>
                                                <td>{{ $appoint->id }}</td>
                                                <td>
                                                    {{ $appoint->booking_type ?? '' }}
                                                    {{-- {{ $appoint->booking_type ?? '' }} --}}
                                                    @if ($appoint->parent_id != null)
                                                        <p style="font-size: xx-small;"
                                                            class="badge rounded-pill bg-success ms-auto mb-2 mb-md-0">
                                                            Extend</p>
                                                    @endif
                                                </td>
                                                <td>{{ $appoint->job_title ?? '' }}</td>
                                                <td>{{ $appoint->job_type ?? '' }}</td>
                                                <td class="text-canter">
                                                    <a href="{{ Route('getUser.bookings', $appoint->id) }}"> <button
                                                            class="btn bg-info btn-small"><i
                                                               title="info" class="fa fa-eye"></i></button></a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    {{-- <div class="tab-pane" id="wallet" role="tabpanel">
                        <div class="card-body">
                            <div class="row">

                                <div class="col-md-3 col-xs-6 b-r"> <strong>currency</strong>
                                    <br>
                                    <p class="text-muted">{{ $user->wallet->currency }}</p>
                                </div>
                                <div class="col-md-3 col-xs-6 b-r"> <strong>amount</strong>
                                    <br>
                                    <p class="text-muted">{{ $user->wallet->amount }}</p>
                                </div>
                            </div>
                        </div>
                    </div> --}}
                    <div class="tab-pane" id="customerDevice" role="tabpanel">
                        <div class="card-body">
                            <div class="table-responsive m-t-40">
                                <table id="myTable" class="table table-striped border">
                                    <thead>
                                        <tr>
                                            <th>Device Type</th>
                                            <th>Device Brand</th>
                                            <th>Device os</th>
                                            <th>App Version</th>
                                            <th>is_notify</th>
                                            <th>udid</th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($user->devices as $Cusdevices)
                                            <tr>
                                                <td>{{ $Cusdevices->device_type }}</td>
                                                <td>{{ $Cusdevices->device_brand }}</td>
                                                <td>{{ $Cusdevices->device_os }}</td>
                                                <td>{{ $Cusdevices->app_version }}</td>
                                                <td>
                                                    @if ($Cusdevices->is_notify == 0)
                                                        <p class="badge rounded-pill bg-danger ms-auto mb-2 mb-md-0">
                                                            Pending</p>
                                                    @else
                                                        <p class="badge rounded-pill bg-success ms-auto mb-2 mb-md-0">
                                                            Notified</p>
                                                    @endif
                                                </td>
                                                <td>{{ $Cusdevices->udid }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- Column -->
    </div>
    <Script>
        $(function() {
            $('#myTableifobooking').DataTable({
                columnDefs: [{
                    orderable: false,
                    "targets": 4
                }]
            });
            var table = $('#example').DataTable({
                "columnDefs": [{
                    "visible": false,
                    "targets": 2
                }],
                "order": [
                    [2, 'asc']
                ],
                "displayLength": 25,
                "drawCallback": function(settings) {
                    var api = this.api();
                    var rows = api.rows({
                        page: 'current'
                    }).nodes();
                    var last = null;
                    api.column(2, {
                        page: 'current'
                    }).data().each(function(group, i) {
                        if (last !== group) {
                            $(rows).eq(i).before('<tr class="group"><td colspan="5">' + group +
                                '</td></tr>');
                            last = group;
                        }
                    });
                }
            });
            // Order by the grouping
            $('#example tbody').on('click', 'tr.group', function() {
                var currentOrder = table.order()[0];
                if (currentOrder[0] === 2 && currentOrder[1] === 'asc') {
                    table.order([2, 'desc']).draw();
                } else {
                    table.order([2, 'asc']).draw();
                }
            });
            // responsive table
            $('#config-table').DataTable({
                responsive: true
            });
            $('#example23').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ]
            });
            $('.buttons-copy, .buttons-csv, .buttons-print, .buttons-pdf, .buttons-excel').addClass(
                'btn btn-primary me-1');
        });
    </Script>
    <!-- Row -->
    <!-- ============================================================== -->
    <!-- End PAge Content -->
@endsection