@section('externalcss')
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
@endsection

<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Container-->
    <div id="kt_content_container" class="container-fluid">

        @if (session()->has('success'))
            <div class="flex py-4">
                <div class="w-full alert alert-success alert-dismissible fade show" role="alert">
                    <strong>{{ session('success') }}</strong>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                       <span class="svg-icon svg-icon-muted svg-icon-2"><svg xmlns="http://www.w3.org/2000/svg"
                                                                             width="24" height="24" viewBox="0 0 24 24"
                                                                             fill="none">
                        <path opacity="0.3"
                              d="M12 10.6L14.8 7.8C15.2 7.4 15.8 7.4 16.2 7.8C16.6 8.2 16.6 8.80002 16.2 9.20002L13.4 12L12 10.6ZM10.6 12L7.8 14.8C7.4 15.2 7.4 15.8 7.8 16.2C8 16.4 8.3 16.5 8.5 16.5C8.7 16.5 8.99999 16.4 9.19999 16.2L12 13.4L10.6 12Z"
                              fill="black"/>
                        <path
                            d="M22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2C17.5 2 22 6.5 22 12ZM13.4 12L16.2 9.20001C16.6 8.80001 16.6 8.19999 16.2 7.79999C15.8 7.39999 15.2 7.39999 14.8 7.79999L12 10.6L9.2 7.79999C8.8 7.39999 8.2 7.39999 7.8 7.79999C7.4 8.19999 7.4 8.80001 7.8 9.20001L10.6 12L7.8 14.8C7.4 15.2 7.4 15.8 7.8 16.2C8 16.4 8.3 16.5 8.5 16.5C8.7 16.5 9 16.4 9.2 16.2L12 13.4L14.8 16.2C15 16.4 15.3 16.5 15.5 16.5C15.7 16.5 16 16.4 16.2 16.2C16.6 15.8 16.6 15.2 16.2 14.8L13.4 12Z"
                            fill="black"/>
                        </svg></span>
                    </button>
                </div>
            </div>

        @elseif (session()->has('error'))
            <div class="flex py-4">
                <div class="w-full alert alert-danger alert-dismissible fade show" role="alert">
                    <strong>{{ session('error') }}</strong>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                        <span class="svg-icon svg-icon-muted svg-icon-2"><svg xmlns="http://www.w3.org/2000/svg"
                                                                              width="24" height="24" viewBox="0 0 24 24"
                                                                              fill="none">
                        <path opacity="0.3"
                              d="M12 10.6L14.8 7.8C15.2 7.4 15.8 7.4 16.2 7.8C16.6 8.2 16.6 8.80002 16.2 9.20002L13.4 12L12 10.6ZM10.6 12L7.8 14.8C7.4 15.2 7.4 15.8 7.8 16.2C8 16.4 8.3 16.5 8.5 16.5C8.7 16.5 8.99999 16.4 9.19999 16.2L12 13.4L10.6 12Z"
                              fill="black"/>
                        <path
                            d="M22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2C17.5 2 22 6.5 22 12ZM13.4 12L16.2 9.20001C16.6 8.80001 16.6 8.19999 16.2 7.79999C15.8 7.39999 15.2 7.39999 14.8 7.79999L12 10.6L9.2 7.79999C8.8 7.39999 8.2 7.39999 7.8 7.79999C7.4 8.19999 7.4 8.80001 7.8 9.20001L10.6 12L7.8 14.8C7.4 15.2 7.4 15.8 7.8 16.2C8 16.4 8.3 16.5 8.5 16.5C8.7 16.5 9 16.4 9.2 16.2L12 13.4L14.8 16.2C15 16.4 15.3 16.5 15.5 16.5C15.7 16.5 16 16.4 16.2 16.2C16.6 15.8 16.6 15.2 16.2 14.8L13.4 12Z"
                            fill="black"/>
                        </svg></span>
                    </button>
                </div>
            </div>
    @endif


    <!--begin::Card-->
        <div class="card card-flush" style="box-shadow: 0px 5px 10px #4f55da;">
            <!--begin::Card header-->
            <div class="card-header mt-6">
                <!--begin::Card title-->
                <div class="card-title">
                    <!--begin::Search-->
                    <div class="d-flex align-items-center position-relative my-1 me-5">
                        <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
                        <span class="svg-icon svg-icon-1 position-absolute ms-6">
												<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                     viewBox="0 0 24 24" fill="none">
													<rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546"
                                                          height="2" rx="1" transform="rotate(45 17.0365 15.1223)"
                                                          fill="black"/>
													<path
                                                        d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
                                                        fill="black"/>
												</svg>
											</span>
                        <!--end::Svg Icon-->
                        <input type="text" data-kt-table-filter="search" wire:model="search"
                               class="form-control w-500px ps-15"
                               placeholder="Search" style=" border:  #c3c3c3 solid thin; border-radius: 5px;"/>
                    </div>
                    <!--end::Search-->
                </div>

            </div>
            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body pt-0 table-responsive" >
                <!--begin::Table-->
                <table class="table align-middle table-row-bordered text-start fs-8 gy-5 mb-0" id="kt_table">
                    <!--begin::Table head-->
                    <thead>
                    <!--begin::Table row-->
                    <tr class="text-start text-gray-400 fw-bolder fs-8 text-uppercase gs-0">
                        <th class="text-center min-w-100px text-black p-2">Actions</th>
                        <th class="text-center min-w-50px text-black p-2">Status</th>
                        <th class="min-w-50px text-black p-2">Category</th>
                        <th class="min-w-50px text-black p-2">Title</th>
                        <th class="min-w-50px text-black p-2">Content</th>
                        <th class="min-w-50px text-black p-2">Tag</th>
                        <th class="min-w-90px text-black p-2">Post Date</th>
                        <th class="min-w-50px text-black p-2">Image/Video</th>
                    </tr>
                    <!--end::Table row-->
                    </thead>
                    <!--end::Table head-->
                    <!--begin::Table body-->
                    <tbody class="fw-bold text-gray-600">
                    @if(sizeof($dataTables)>0)
                        @foreach($dataTables as $tableData)
                            <tr>
                                <td class="text-center">
                                    @if($tableData['status'] == 1 || $tableData['status'] == 0)
                                    <div class="menu-item px-2">
                                        <a href="javascript:void(0);" class="mb-2 badge badge-light text-hover-success" onclick="clinicrequestPopup({{$tableData['id']}}, 1)">Approve</a>
                                    </div>
                                    @endif
                                    @if($tableData['status'] == 2 || $tableData['status'] == 1)
                                     <div class="menu-item px-2">
                                        <a href="javascript:void(0);" class="badge badge-light text-hover-danger" onclick="clinicrequestPopup({{$tableData['id']}}, 2)">Reject</a>
                                    </div>
                                    @endif
                                    <div class="menu-item px-2">
                                        <a href="javascript:void(0);" class="badge badge-light text-hover-danger" wire:click="commentClick({{ $tableData['id'] }})">Comments</a>
                                    </div>
                                </td>

                                <td class=" text-center p-2">
                                    <center>
                                        @if($tableData['status'] == 1)
                                            <span class="badge badge-warning fs-9 m-1 text-white">Pending</span>
                                        @elseif($tableData['status'] == 2)
                                            <span class="badge badge-primary fs-9 m-1 text-white-500">Approved</span>
                                        @else
                                            <span class="badge badge-secondary fs-9 m-1 text-white-500">Rejected</span>
                                        @endif
                                    </center>
                                </td>

                                <td class="text-black">{{ $tableData['category_name'] }}</td>
                                <td class="text-black" wire:click="updateclick({{ $tableData['id'] }})"><a href="javascript:void(0);">{{ $tableData['title'] }} </a></td>
{{--                                <td class="text-black p-2"><p>{!! $tableData['description'] !!}</p></td>--}}
                                <td class="text-black p-2">
                                    <div class="expanded">
                                    {!! $tableData['description'] !!} <!-- Full description -->
                                        <a href="javascript:void(0);" class="read-less">Read Less</a>
                                    </div>
                                    <div class="collapsed">
                                    {!! Str::words($tableData['description'], 10, '...') !!} <!-- Display only first 10 words -->
                                        @if (str_word_count($tableData['description']) > 10)
                                            <a href="javascript:void(0);" class="read-more">Read More</a>
                                        @endif
                                    </div>
                                </td>
                                <td class="text-black p-2">@foreach(json_decode($tableData['tag'], true) as $tag) #{{ $tag }} @endforeach</td>
                                <td class="text-black p-2">{{\Carbon\Carbon::parse($tableData['post_date'])->format('d M Y')}}</td>
                                <td class="text-black p-2">
                                    @if($tableData['image'])
                                        <img src="{{\Illuminate\Support\Facades\Storage::disk('s3')->url($tableData['image'])}}" width="50px" />
                                    @elseif($tableData['video'])
                                        <span class="text-muted">{{$tableData['video']}}</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    @else
                        <tr>
                            <td class="p-2 justify-content-center text-center" colspan="9"><h2 class="fs-2">No Data Available</h2></td>
                        </tr>
                    @endif

                    </tbody>
                </table>

                <!--end::Table body-->

                <!--end::Table-->
                <div class="col-12 justify-content-end">
                    {{ $dataTables->links('livewire.pagination-livewire') }}
                </div>
            </div>
            <!--end::Card body-->
        </div>

        <div class="modal fade" id="kt_modal_blog" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true" wire:ignore.self>
            <!--begin::Modal dialog-->
            <div class="modal-dialog modal-dialog-centered modal-fullscreen " style="padding:20px;">
                <!--begin::Modal content-->
                <div class="modal-content rounded">
                    <!--begin::Modal header-->
                    <div class="modal-header">
                        <!--begin::Modal title-->
                        @if($modelId)
                            <h2 class="fw-bolder">Update Blog</h2>
                        @else
                            <h2 class="fw-bolder">Post New BLog</h2>
                    @endif

                    <!--end::Modal title-->
                        <!--begin::Close-->
                        <div class="btn btn-icon btn-sm btn-active-icon-primary"
                             data-kt-permissions-modal-action="close" onclick="popupmodal()">
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                            <span class="svg-icon svg-icon-1">
													<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                         viewBox="0 0 24 24" fill="none">
														<rect opacity="0.5" x="6" y="17.3137" width="16" height="2"
                                                              rx="1" transform="rotate(-45 6 17.3137)" fill="black"/>
														<rect x="7.41422" y="6" width="16" height="2" rx="1"
                                                              transform="rotate(45 7.41422 6)" fill="black"/>
													</svg>
												</span>
                            <!--end::Svg Icon-->
                        </div>
                        <!--end::Close-->
                    </div>
                    <!--end::Modal header-->
                    <!--begin::Modal body-->
                    <div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
                        <form id="kt_modal_add_permission_form" class="form" action="#">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="fv-row mb-7">
                                                <label class="fs-6 fw-bold form-label mb-2">
                                                    <span class="required">Title</span>
                                                </label>
                                                <input class="form-control form-control-solid"
                                                       placeholder="Blog Title" name="title" wire:model.defer="title"/>
                                                @error('title') <span class="text-danger">{{ $message }}</span> @enderror
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="fv-row mb-7" wire:ignore>
                                                <label class="fs-6 fw-bold form-label mb-2">
                                                    <span class="required">Tag</span>
                                                </label>
                                                <input id="tag-input" class="form-control form-control-solid" placeholder="Press enter to add tag" value="" name="tag" wire:model="tag" />
                                                @error('tag') <span class="text-danger">{{ $message }}</span> @enderror
                                            </div>

                                        </div>
                                    </div>
                                    <div class="row">

                                        <div class="col-md-6">
                                            <div class="fv-row mb-7">
                                                <label class="fs-6 fw-bold form-label mb-2">
                                                    <span class="required">Category</span>
                                                </label>
                                                <select class="form-control form-control-solid" name="category_id" wire:model.defer="category_id">
                                                    <option value="">Select Category</option>
                                                    @if($categories && sizeof($categories) > 0)
                                                        @foreach($categories as $category)
                                                            <option value="{{ $category->id }}">{{ $category->category }}</option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                                @error('category_id') <span class="text-danger">{{ $message }}</span> @enderror
                                            </div>
                                        </div>

                                        <div class="col-md-6 mt-8">
                                            <div class="form-check form-check-custom form-check-solid">
                                                <input class="form-check-input" type="radio" value=true wire:model="image_radio"/>
                                                <label class="form-check-label" for="flexRadioDefault" style="margin-right: 35px;">
                                                    Upload Image
                                                </label>

                                                <input class="form-check-input" type="radio" value=true wire:model="video_radio"/>
                                                <label class="form-check-label" for="flexRadioDefault">
                                                    Video Link
                                                </label>
                                            </div>
                                        </div>

                                        <div class="row">
                                            @if($image_radio)
                                                <div class="fv-row mb-7">
                                                    <label class="fs-6 fw-bold form-label mb-2">
                                                        <span class="required">Image / Video</span>
                                                    </label>
                                                    <input type="file" accept="image/*" class="form-control form-control-solid custominput"
                                                           name="image" wire:model.defer="image" />
                                                    @error('image') <span class="text-danger">{{ $message }}</span> @enderror
                                                </div>
                                            @elseif($video_radio)
                                                <div class="fv-row mb-7">
                                                    <label class="fs-6 fw-bold form-label mb-2">
                                                        <span class="required">Video Link</span>
                                                    </label>
                                                    <input class="form-control form-control-solid"
                                                           placeholder="Paste video link here" name="video" wire:model.defer="video" />
                                                    @error('video') <span class="text-danger">{{ $message }}</span> @enderror
                                                </div>
                                            @endif
                                        </div>

                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="fv-row mb-7">
                                        <div class="mb-0" wire:ignore>
                                            <label class="fs-6 fw-bold form-label mb-2">
                                                <span class="required">Blog-Content</span>
                                            </label>
                                            <textarea id="message" class="form-control" rows="5" name="description" ></textarea>
                                            @error('description')
                                            <span class="text-danger " style="font-size: 14px;">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="text-center pt-15">
                                <button type="reset" class="btn btn-light me-3"
                                        data-kt-permissions-modal-action="cancel" onclick="popupmodal()">Discard
                                </button>
                                @if($modelId)
                                    <button type="button" wire:click="update" class="btn btn-info">
                                        <span class="indicator-label">Update</span>
                                        <span class="indicator-progress" wire:loading wire:target="update">Please wait...
														<span
                                                            class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                    </button>
                                @else
                                    <button type="button" wire:click="submit" class="btn btn-info">
                                        <span class="indicator-label">Submit</span>
                                        <span class="indicator-progress" wire:loading wire:target="submit">Please wait...
														<span
                                                            class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                    </button>
                                @endif
                            </div>
                            <!--end::Actions-->
                        </form>
                        <!--end::Form-->
                    </div>
                    <!--end::Modal body-->
                </div>
                <!--end::Modal content-->
            </div>
            <!--end::Modal dialog-->
        </div>
        <!--end::Modal - Add permissions-->

        <!--end::Modals-->

        <div class="modal  fade" id="deleteConfirmation" data-bs-backdrop="static" data-bs-keyboard="false"
             tabindex="-1" aria-labelledby="deleteConfirmation" aria-hidden="true" wire:ignore.self>
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title"
                            id="staticBackdropLabel">{{ __('Delete Blog') }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                            <span class="svg-icon svg-icon-muted svg-icon-2"><svg xmlns="http://www.w3.org/2000/svg"
                                                                                  width="30" height="30" viewBox="0 0 24 24"
                                                                                  fill="none">
                                <path opacity="0.3"
                                      d="M12 10.6L14.8 7.8C15.2 7.4 15.8 7.4 16.2 7.8C16.6 8.2 16.6 8.80002 16.2 9.20002L13.4 12L12 10.6ZM10.6 12L7.8 14.8C7.4 15.2 7.4 15.8 7.8 16.2C8 16.4 8.3 16.5 8.5 16.5C8.7 16.5 8.99999 16.4 9.19999 16.2L12 13.4L10.6 12Z"
                                      fill="black"/>
                                <path
                                    d="M22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2C17.5 2 22 6.5 22 12ZM13.4 12L16.2 9.20001C16.6 8.80001 16.6 8.19999 16.2 7.79999C15.8 7.39999 15.2 7.39999 14.8 7.79999L12 10.6L9.2 7.79999C8.8 7.39999 8.2 7.39999 7.8 7.79999C7.4 8.19999 7.4 8.80001 7.8 9.20001L10.6 12L7.8 14.8C7.4 15.2 7.4 15.8 7.8 16.2C8 16.4 8.3 16.5 8.5 16.5C8.7 16.5 9 16.4 9.2 16.2L12 13.4L14.8 16.2C15 16.4 15.3 16.5 15.5 16.5C15.7 16.5 16 16.4 16.2 16.2C16.6 15.8 16.6 15.2 16.2 14.8L13.4 12Z"
                                    fill="black"/>
                                </svg></span>
                        </button>
                    </div>
                    <div class="modal-body">
                        {{ __('Are you sure you want to delete this data ? Once the data is deleted, all of its resources and data will be permanently deleted.') }}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-danger" wire:click="delete"> Delete</button>
                    </div>
                </div>
            </div>
        </div>

            <div class="modal fade" id="kt_modal_comments" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true" wire:ignore.self>
                <!--begin::Modal dialog-->
                <div class="modal-dialog modal-dialog-centered mw-950px">
                    <!--begin::Modal content-->
                    <div class="modal-content">
                        <!--begin::Modal header-->
                        <div class="modal-header">
                            <!--begin::Modal title-->
                            <h2 class="fw-bolder">Comments</h2>
                            <!--end::Modal title-->
                            <!--begin::Close-->
                            <div class="btn btn-icon btn-sm btn-active-icon-primary"
                                 data-kt-permissions-modal-action="close" onclick="popupmodal()" wire:click="resetvalid">
                                <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                                <span class="svg-icon svg-icon-1">
													<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                         viewBox="0 0 24 24" fill="none">
														<rect opacity="0.5" x="6" y="17.3137" width="16" height="2"
                                                              rx="1" transform="rotate(-45 6 17.3137)" fill="black"/>
														<rect x="7.41422" y="6" width="16" height="2" rx="1"
                                                              transform="rotate(45 7.41422 6)" fill="black"/>
													</svg>
												</span>
                                <!--end::Svg Icon-->
                            </div>
                            <!--end::Close-->
                        </div>
                        <!--end::Modal header-->
                        <!--begin::Modal body-->
                        <div class="modal-body scroll-y">
                            <!--begin::Form-->
                            <div class="container my-5 py-5">
                                <div class="row d-flex flex-start">
                                    <div class="col-md-12">
                                        <div class="card text-dark">
                                            @if($allComments && sizeof($allComments) > 0)
                                                @foreach($allComments as $key=>$comment)
                                                    <div class="card-body p-2">
                                                        <div class="d-flex flex-start">
                                                            <div>
                                                                <h6 class="fw-bold mb-1">{{ $comment['name'] }}</h6>
                                                                <div class="d-flex align-items-center mb-3">
                                                                    <p class="mb-0">
                                                                        {{ Carbon\Carbon::parse($comment['created_at'])->format('d M Y') }}
                                                                        @if($comment['status'] == 0)
                                                                            <span class="badge bg-warning">Pending</span>
                                                                        @elseif($comment['status'] == 1)
                                                                            <span class="badge bg-info">Approved</span>
                                                                        @endif

                                                                    </p>
                                                                    <a href="javascript:void(0);" class="link-muted" title="Approve Comment" onclick="commentActionPopup({{$comment['id']}}, 1)"><i class="fas fa-check ms-2" style="color: blue;" ></i></a>
                                                                    <a href="javascript:void(0);" class="link-muted" title="Reject Comment" onclick="commentActionPopup({{$comment['id']}}, 2)"><i class="fas fa-close ms-2" style="color: red;" ></i></a>
                                                                    @if($comment['doctorComment'] == null && $comment['status'] == 1)
                                                                        <a href="javascript:void(0);" class="link-muted" title="Reply to this comment" wire:click="replyClick({{ $comment['id'] }})"><i class="fas fa-pencil-alt ms-2"></i></a>
                                                                    @endif
                                                                </div>
                                                                <p class="mb-0">
                                                                    {{$comment['comment']}}
                                                                </p>
                                                            </div>
                                                        </div>
                                                        @if($comment['doctorComment'] != null)
                                                            <div class="row mt-1" style="margin-left: 40px;">
                                                                <div class="comment">
                                                                    <p class="mb-0">
                                                                        <span class="fw-bold">Myself</span>
                                                                        &nbsp; &nbsp;{{ Carbon\Carbon::parse($comment['created_at'])->format('d M Y') }}&nbsp; &nbsp;
                                                                        <a href="javascript:void(0);" class="link-muted" onclick="commentActionPopup({{$comment['id']}}, 3)"><i class="fas fa-trash-alt" title="Delete Reply" style="color: red;"></i></a>
                                                                    </p>
                                                                    <p class="mb-0">
                                                                        {{$comment['doctorComment']}}
                                                                    </p>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    </div>
                                                    <hr class="my-0" />
                                                @endforeach
                                            @else
                                                <div class="text-muted d-flex flex-center">
                                                    <h4> No Comments Posted Yet</h4>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--end::Input group-->
                            <!--begin::Actions-->
                            <div class="text-center pt-15">
                                <button type="reset" class="btn btn-light me-3"
                                        data-kt-permissions-modal-action="cancel" onclick="popupmodal()"
                                        wire:click="resetvalid">Discard
                                </button>

                            </div>
                            <!--end::Actions-->
                            </form>
                            <!--end::Form-->
                        </div>
                        <!--end::Modal body-->
                    </div>
                    <!--end::Modal content-->
                </div>
                <!--end::Modal dialog-->
            </div>
    </div>
    <!--end::Container-->
</div>

@section('externaljs')

    <script>
        function popupmodal() {
            Swal.fire({
                text: "Are you sure you would like to close?",
                icon: "warning",
                showCancelButton: !0,
                buttonsStyling: !1,
                confirmButtonText: "Yes, close it!",
                cancelButtonText: "No, return",
                customClass: {
                    confirmButton: "btn btn-info",
                    cancelButton: "btn btn-active-light"
                }
            }).then((function (result) {

                if (result.isConfirmed) {
                    closemodal();
                    Livewire.emit('resetvalid');
                } else if (
                    /* Read more about handling dismissals below */
                    result.dismiss === Swal.DismissReason.cancel
                ) {
                    swalWithBootstrapButtons.fire(
                        'Cancelled',
                        'Your imaginary file is safe :)',
                        'error'
                    )
                }


            }))
        }

        function showsuccessmsg($msg) {
            Swal.fire({
                text: $msg,
                icon: "success",
                buttonsStyling: false,
                confirmButtonText: "Ok, got it!",
                customClass: {
                    confirmButton: "btn btn-success"
                }
            });
        }

        function showerrorsmsg($msg) {
            Swal.fire({
                text: $msg,
                icon: "error",
                buttonsStyling: false,
                confirmButtonText: "Ok, got it!",
                customClass: {
                    confirmButton: "btn btn-danger"
                }
            });
        }

        function closemodal() {
            $('.modal').modal('hide');
        }
        window.addEventListener('closemodal', event => {
            closemodal();
        });

        /*window.addEventListener('showsuccessmsg', event => {
            if(event.detail.type =="success"){
                showsuccessmsg(event.detail.message);
            }else{
                showerrorsmsg(event.detail.message);
            }
            //showsuccessmsg();
        });
*/
    </script>

    <script>

        function clinicrequestPopup(id, fun) {
            let msg = '';

            if (fun === 1) {
                msg = "Are you sure you want to approve this blog ?";
                icon = "question";
            } else if (fun === 2) {
                msg = "Are you sure you want to reject this blog ?";
                icon = "warning";
            }

            Swal.fire({
                text: msg,
                icon: icon,
                showCancelButton: true,
                buttonsStyling: false,
                confirmButtonText: "Yes",
                cancelButtonText: "No, return",
                customClass: {
                    confirmButton: "btn btn-info",
                    cancelButton: "btn btn-active-light"
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    if (fun === 1) {
                        Livewire.emit('approve', id);
                    } else if (fun === 2) {
                        Livewire.emit('reject', id);
                    }
                }
            });
        }

        function commentActionPopup(id, fun) {
            let msg = '';

            if (fun === 1) {
                msg = "Are you sure you want to approve this comment ?";
                icon = "question";
            } else if (fun === 2) {
                msg = "Are you sure you want to reject this comment ?";
                icon = "warning";
            }else if (fun === 3 ){
                msg = "Are you sure you want to delete your reply ?";
                icon = "warning";
            }

            Swal.fire({
                text: msg,
                icon: icon,
                showCancelButton: true,
                buttonsStyling: false,
                confirmButtonText: "Yes",
                cancelButtonText: "No, return",
                customClass: {
                    confirmButton: "btn btn-info",
                    cancelButton: "btn btn-active-light"
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    if (fun === 1) {
                        Livewire.emit('approveComment', id);
                    } else if (fun === 2) {
                        Livewire.emit('rejectComment', id);
                    } else if( fun === 3) {
                        Livewire.emit('deleteReply', id);
                    }
                }
            });
        }

    </script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#message').summernote({
                    height: 200,
                    tabsize: 2,
                    toolbar: [
                        ['style', ['style']],
                        ['font', ['bold', 'underline', 'clear']],
                        ['color', ['color']],
                        ['para', ['ul', 'ol', 'paragraph']],
                        ['table', ['table']],
                        ['insert', []],
                        ['view', [ ]]
                    ],
                    callbacks: {
                        onChange: function(contents, $editable) {
                            console.log("Changed editor");
                            window.livewire.emit('descriptionChanged', contents);
                        }
                    }

                },

            );

        });

        var input =
            document.querySelector('input[name=tag]');
        new Tagify(input)
        console.log(input.value);
        input.addEventListener('change', onChange)
        function onChange(e){
            var arr = JSON.parse(e.target.value);
            var result = arr.map(obj => obj.value);
            livewire.emit('tagData',result);
        }

        window.addEventListener('description', event => {
            if(event.detail.desc != null){
                console.log(event.detail.desc);
            @this.set('description', event.detail.desc);
            }
        });

        window.addEventListener('description', event => {
            if (event.detail.desc !== null) {
                $('#message').summernote('code', event.detail.desc);
            }
        });

        function modalBlog() {
            $('#kt_modal_blog').modal('show');
        }

        window.addEventListener('modalBlog', event => {
            modalBlog();
        });


    </script>

    <script>
        $(document).ready(function() {
            $(".expanded").hide();

            $(".read-more, .read-less").click(function(eve) {
                eve.preventDefault();
                $(this).closest('td').find(".expanded, .collapsed").toggle();
            });
        });
    </script>

    <script>

        function modalComment() {
            $('#kt_modal_comments').modal('show');
        }

        window.addEventListener('modalComments', event => {
            modalComment();
        });

        function modalReply() {
            $('#kt_reply').modal('show');
        }

        window.addEventListener('modalReply', event => {
            modalReply();
        });

        function modalReplyHide() {
            $('#kt_reply').modal('hide');
        }

        window.addEventListener('modalReplyHide', event => {
            modalReplyHide();
        });

    </script>
@endsection