@extends('layouts.app')
@section('title')
    {{ __('messages_301.Doctor accounts') }}
@endsection
@section('style')
    <style>
        .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
            width: 100% !important;
        }
    </style>
@endsection
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        @include('inc.breadcrumb', [
            'breadcrumb_items' => [
                __('messages.Home') => route('home'),
                __('messages_301.Doctor accounts') => 'active',
            ],
        ])


        <div class="content-wrapper">
            <!-- Content -->

            <div class="container-xxl flex-grow-1 container-p-y">
                <div class="row">
                   

                    <!-- User Content -->
                    <div class="col-xl-12 col-lg-7 col-md-7 order-0 order-md-1">
                        <!-- User Pills -->
                        <ul class="nav nav-pills flex-column flex-md-row mb-4">
                            <li class="nav-item">
                                <button class="nav-link active" id="transfer_outs"><i
                                        class="ti ti-cash-off ti-xs me-1"></i>{{ __('messages_301.Price in') }}</button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link " id="transfer_ins"><i
                                        class="fa-solid fa-money-bill-wave"></i>{{ __('messages_301.Gateway subscriptions') }}</button>
                            </li>

                            <li class="nav-item">
                                <button class="nav-link " id="transfer_panel"><i
                                        class="fa-solid fa-money-bill-wave"></i>{{ __('messages_301.Panel subscriptions') }}</button>
                            </li>
                          
                        </ul>
                        <!--/ User Pills -->

                        <!-- Student table -->
                        <div class="card mb-4" id="transfer_outs_card">
                            @include('admin.accounts.includes.transfer_outs')
                        </div>
                        <!-- /Student table -->


                        <div class="card card-action mb-4" id="transfer_ins_card" style="display:none;">
                            @include('admin.accounts.includes.transfer_ins')
                        </div>

                        <div class="card card-action mb-4" id="transfer_panel_card" style="display:none;">
                            @include('admin.accounts.includes.transfer_panel')
                        </div>

                        {{-- <div class="card card-action mb-4" id="description_card" style="display:none;">
                            <div class="card-body">
                                <div class="added-cards border p-3 rounded mb-3">

                                    <p class="mb-0">
                                        {!! $course->description !!}
                                      </p>

                                </div>
                            </div>
                        </div> --}}



                    </div>
                    <!--/ User Content -->
                </div>


                <!-- /Modal -->
            </div>
            <!-- / Content -->



            <div class="content-backdrop fade"></div>
        </div>






    </div>
@endsection
@section('script')
  
    <script>
        $(document).ready(function() {
        $("#transfer_outs").click(function() {
            $("#transfer_outs_card").show();
            $("#transfer_ins_card").hide();
            $("#transfer_panel_card").hide();
            $(this).addClass("active");
            $("#transfer_ins").removeClass("active");
            $("#transfer_panel").removeClass("active");
        });

        $("#transfer_ins").click(function() {
            $("#transfer_ins_card").show();
            $("#transfer_outs_card").hide();
            $("#transfer_panel_card").hide();
            $(this).addClass("active");
            $("#transfer_outs").removeClass("active");
            $("#transfer_panel").removeClass("active");
        });

        $("#transfer_panel").click(function() {
            $("#transfer_panel_card").show();
            $("#transfer_ins_card").hide();
            $("#transfer_outs_card").hide();
            $(this).addClass("active");
            $("#transfer_outs").removeClass("active");
            $("#transfer_ins").removeClass("active");
        });
    });
    </script>
@endsection