{{-- @extends('Admin.layout')



@section('content')





    <div class="row align-items-center justify-content-between mb-3 mt-3">

        <div class="col-auto">

            <h5>

                <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">

                    <a href="{{ route('customer_table') }}">

                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"

                            stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"

                            class="icon icon-tabler">

                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />

                            <path d="M15 6l-6 6l6 6" />

                        </svg>

                    </a>

                </button>

                David Details

            </h5>

        </div>

    </div>



    <p>Patient Name :&nbsp;David</p>

    <p>Patient ID :&nbsp;HERB123</p>



    <ul class="nav nav-pills flex-column flex-sm-row mb-4 gap-sm-0 gap-2 mt-4">



        <li class="nav-item">



            <a class="nav-link waves-effect waves-light" href="{{ route('view_customer_profile') }}"> Profile</a>



        </li>



        <li class="nav-item">



            <a class="nav-link waves-effect waves-light" href="{{ route('view_customer_health') }}">Health</a>



        </li>



        <li class="nav-item">



            <a class="nav-link waves-effect waves-light"

                href="{{ route('view_customer_attendance') }}">Attendance</a>



        </li>

        <li class="nav-item">



            <a class="nav-link waves-effect waves-light" href="{{ route('view_customer_follow_up') }}">Follow Up</a>



        </li>



        <li class="nav-item">



            <a class="nav-link waves-effect waves-light" href="{{ route('view_customer_royalty') }}">Royalty</a>



        </li>

          <li class="nav-item">



            <a class="nav-link waves-effect waves-light" href="{{ route('view_customer_subscription') }}">Subscriptions</a>



        </li>

        <li class="nav-item">



            <a class="nav-link waves-effect active waves-light" href="{{ route('view_customer_package') }}">Package</a>



        </li>

        <li class="nav-item">



            <a class="nav-link waves-effect waves-light" href="{{ route('view_customer_referral') }}">Referral</a>



        </li>



    </ul>

        <hr class="text-primary mx-2">



     <div class="row g-2 align-items-stretch">

        <div class="col-lg-3 d-flex">

            <div class="card p-3 w-100">

                <h6 class="text-center">Total Days</h6>

                <h5 class="text-center text-success fw-bold">30</h5>

            </div>

        </div>



        <div class="col-lg-3 d-flex">

            <div class="card p-3 w-100">

                <h6 class="text-center">Remaining Days</h6>

                <h5 class="text-center text-danger fw-bold">10</h5>

            </div>

        </div>





        <div class="col-lg-6 d-flex">

            <div class="card p-4 w-100">

                <div class="row align-items-end h-100">

                    <div class="col-lg-8 mb-2">

                        <label class="form-label">

                            Package <span class="text-danger">*</span>

                        </label>

                        <select name="" id="" class="form-select">

                            <option value="">Select</option>

                        </select>

                    </div>

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

                        <button class="btn btn-primary w-100">Submit</button>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <div class="card p-1 mt-4">

        <div class="row mb-3 align-items-center p-3 g-2">

            <div class="col-1">

                <select id="pageLength" class="form-select">

                    <option value="10"> 10</option>

                    <option value="25"> 25</option>

                    <option value="50"> 50</option>

                    <option value="100"> 100</option>

                </select>

            </div>



            <div class="col-md-3 ms-auto">

                <input type="text" id="toDate" class="form-control" placeholder="Search">

            </div>

        </div>





        <div class="table-responsive pt-0 pb-2">

            <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">

                <div class="justify-content-between dt-layout-table">

                    <div class=" justify-content-between align-items-center dt-layout-full table-responsive">

                        <table class="table" id="usersTable">

                            <thead>

                                <tr>

                                    <th>Sno</th>

                                    <th>Date</th>

                                    <th class="text-nowrap">Days</th>

                                    <th>Amount</th>

                                    <th>Package</th>

                                    <th>Action</th>

                                </tr>

                            </thead>

                            <tbody></tbody>

                        </table>



                    </div>

                </div>

            </div>

        </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>



    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

    <script>

        $(document).ready(function () {



            const users = [

                { date: '12/10/2025', days: '10', amount: '2000', package: 'Ultimate Weight Loss' }

            ];



            const table = $('#usersTable').DataTable({

                data: users,

                searching: true,

                paging: true,

                info: true,

                lengthChange: false,

                pageLength: 10,

                ordering: false,



                columns: [

                    {

                        data: null,

                        render: function (data, type, row, meta) {

                            return meta.row + meta.settings._iDisplayStart + 1;

                        }

                    },

                    {

                        data: 'date',

                        render: function (date) {

                            return `<span class="text-nowrap">${date}</span>`;

                        }

                    },

                    {

                        data: 'days',

                        render: val => `<span class="">${val}</span>`

                    },

                    {

                        data: 'amount',

                        render: amount => `<span class="">${amount}</span>`

                    },

                    {

                        data: 'package',

                        render: package => `<span class="]">${package}</span>`

                    },

                    {

                        data: null,

                        orderable: false,

                        render: function () {

                            return `

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

                                    <img src="{{ asset('assets/img/trash.png') }}"

                                         alt="Delete"

                                         style="cursor:pointer"

                                         data-bs-toggle="modal"

                                         data-bs-target="#delete">

                                </div>

                            `;

                        }

                    }

                ]

            });



            // Custom search

            $('#toDate').on('keyup change', function () {

                table.search(this.value).draw();

            });



        });

    </script>



@endsection --}}