@extends('admin.layouts.app')
@section('content')
@php
$s3Url = env('S3_URL');
$admin = explode(',', @$Webinars->taken_by);
$i=1;


$userr = auth()->user();
@$candidateDelete = userCan('candidate.delete');
@endphp

<div class="card mx-auto mt-2" style="">
    <div class="card-header">
        <b><span id="name_of_type">Event & Webinar</span></b>
        
        <a href="{{ route('webinar.index') }}" class="btn btn-dark btn-sm float-end px-2 py-1"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back</a>
        <button class="btn btn-primary btn-sm px-2 py-1 float-end" onclick="copyText()" style="float: right !important; margin-right: 10px !important;"> Copy Link</button>
        <p id="textToCopy" style="display: none;">https://www.gradding.com/register/event/</p>
        </h5>
    </div>
    <div class="card-body">
        <form action="{{ route('webinar.update', $Webinars->id) }}" method="POST" id="webinarForm">
            @method('put')
            @csrf
            <div class="row">
                <!-- Event Type Selection -->
                <div class="mb-3 col-12 col-md-6 col-lg-4">
                    <label for="event_type" class="form-label">Type</label>
                    <select name="event_type" id="event_type" class="form-control select2bs4">
                        <option value="" disabled {{ old('event_type', $Webinars->event_type) ? '' : 'selected' }}>Select Event Type</option>
                        <option value="event" {{ old('event_type', $Webinars->event_type) == 'event' ? 'selected' : '' }}>Event</option>
                        <option value="webinar" {{ old('event_type', $Webinars->event_type) == 'webinar' ? 'selected' : '' }}>Webinar</option>
                        <option value="seminar" {{ old('event_type', $Webinars->event_type) == 'seminar' ? 'selected' : '' }}>Seminar</option>
                    </select>
                    @error('event_type')
                    <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Webinar Name -->
                <div class="mb-3 col-12 col-md-6 col-lg-4">
                    <label for="WebinarName" class="form-label">Name</label>
                    <input type="text" name="webinar_name" class="form-control" id="WebinarName" value="{{ old('webinar_name', $Webinars->webinar_name) }}">
                    @error('webinar_name')
                    <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Country Selection -->
                <div class="mb-3 col-12 col-md-6 col-lg-4">
                    <label for="CountryName" class="form-label">Country Name</label>
                    <select name="country_id" class="form-control select2bs4" id="country_id">
                        <option value="" disabled {{ old('country_id', $Webinars->country_id) ? '' : 'selected' }}>Select Country</option>
                        @foreach ($countries as $country)
                        <option value="{{ $country->id }}" {{ old('country_id', $Webinars->country_id) == $country->id ? 'selected' : '' }}>
                            {{ $country->name }}
                        </option>
                        @endforeach
                    </select>
                    @error('country_id')
                    <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Date Input -->
                <div class="mb-3 col-12 col-md-6 col-lg-4">
                    <label for="WebinarDate" class="form-label">Date</label>
                    <input type="datetime-local" class="form-control" id="WebinarDate" name="dateTime" value="{{ old('dateTime', $Webinars->dateTime) }}">
                    @error('dateTime')
                    <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Link Input -->
                <div class="mb-3 col-12 col-md-6 col-lg-4" id="link">
                    <label for="WebinarLink" class="form-label">Link</label>
                    <input type="text" class="form-control" id="WebinarLink" name="webinar_link" value="{{ old('webinar_link', $Webinars->webinar_link) }}" placeholder="Enter link">
                    @error('webinar_link')
                    <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Tracking Code -->
                <div class="mb-3 col-12 col-md-6 col-lg-4">
                    <label for="tracking_code" class="form-label">Tracking Code</label>
                    <input type="text" class="form-control" id="tracking_code" name="tracking_code" value="{{ old('tracking_code', $Webinars->tracking_code) }}" placeholder="Enter Tracking Code">
                    @error('tracking_code')
                    <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Taken By -->
                <div class="mb-3 col-12 col-md-6 col-lg-4">
                    <label for="taken_by[]" class="form-label">Taken By</label>
                    <select name="taken_by[]" class="form-control select2bs44" multiple>
                        @foreach ($taken as $item)
                        <option value="{{ $item->id }}" {{ in_array($item->id, old('taken_by', explode(',', $Webinars->taken_by) ?? [])) ? 'selected' : '' }}>
                            {{ $item->name }}
                        </option>
                        @endforeach
                    </select>
                    @error('taken_by')
                    <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Service Selection -->
                <div class="mb-3 col-12 col-md-6 col-lg-4">
                    <label for="Service" class="form-label">Service</label>
                    <select name="service" class="form-control select2bs44_service">
                        <option value="" disabled {{ old('service', $Webinars->service_id) ? '' : 'selected' }}>Select Service</option>
                        @foreach ($services as $service)
                        <option value="{{ $service->id }}" {{ old('service', $Webinars->service_id) == $service->id ? 'selected' : '' }}>
                            {{ $service->name }}
                        </option>
                        @endforeach
                    </select>
                    @error('service')
                    <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Description -->
                <div class="col-6 mb-2">
                    <label for="description" class="form-label">Description</label>
                    <textarea id="description" name="description" class="form-control">{{ old('description', $Webinars->description) }}</textarea>
                    @error('description')
                    <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>

                <div class="col-6 mb-6">
                <!-- Pointers -->
                <div id="links">
                    @php
                    $pointers = old('pointers', $Webinars->pointers ? json_decode($Webinars->pointers, true) : []);
                    @endphp

                    <!-- Pointer Input Fields -->
                    @for ($i = 0; $i < 3; $i++)
                        <div class="row mb-6">
                            <div class="form-group col-12">
                                <label for="pointers[{{ $i }}]">Pointer Value {{ $i + 1 }}</label>
                                <input
                                    type="text"
                                    class="form-control"
                                    name="pointers[{{ $i }}]"
                                    id="pointers[{{ $i }}]"
                                    value="{{ old('pointers.' . $i, $pointers[$i] ?? '') }}"
                                    placeholder="Enter Pointer Value {{ $i + 1 }}" />
                                <small class="text-danger">
                                    {{ $errors->first('pointers.' . $i) }}
                                </small>
                            </div>
                        </div>
                    @endfor
                </div>
            </div>

               

                <!-- Register Page Image -->
                <div class="row col-6 mb-3">
                    <div class="form-group col-6">
                        <x-forms.label name="Register Page Image" :required="false" />
                        <div class="file-upload-section">
                            <div class="preview-filemanger border border-dark" id="previewLogo">
                                <img src="{{ old('register_image_url', $s3Url . $Webinars->register_image_url ??  'https://placehold.jp/300x175.png') }}" alt="placeholder" height="175" width="300">
                            </div>
                            <input type="hidden" name="register_page_image" id="register_page_image" value="{{ $s3Url . $Webinars->register_image_url }}">
                            <div class="class d-flex mt-4 ClearButton">
                                <a class="btn btn-sm btn-primary mr-2" onclick="uploadMedia('previewLogo', 'register_page_image', 'webinar/images/')">
                                    <i class="fa fa-folder"></i> Browse
                                </a>
                            </div>
                        </div>
                        @error('register_page_image')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Pop-up Image -->
                    <div class="form-group col-6">
                        <x-forms.label name="Pop-up Image" :required="false" />
                        <div class="file-upload-section">
                            <div class="preview-filemanger border border-dark" id="previewLogo_pop">
                                <img src="{{ old('pop_up_image_url', $s3Url . $Webinars->pop_up_image_url ?? 'https://placehold.jp/300x175.png') }}" alt="placeholder" height="175" width="300">
                            </div>
                            <input type="hidden" name="pop_up_image" id="pop_up_image" value="{{ $s3Url . $Webinars->pop_up_image_url }}">
                            <div class="class d-flex mt-4 ClearButton">
                                <a class="btn btn-sm btn-primary mr-2" onclick="uploadMedia('previewLogo_pop', 'pop_up_image', 'webinar/images/')">
                                    <i class="fa fa-folder"></i> Browse
                                </a>
                            </div>
                        </div>
                        @error('pop_up_image')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="form-group col-3">
                    <label for="Checklist" class="form-label">Checklist</label>
                    <div id="checklist" class="row">
                        <!-- Left Side -->
                        <div class="col-md-6">
                            <div class="form-check">
                                <label class="form-check-label">
                                    <input type="hidden" name="check_list[Topic]" value="0">
                                    <input type="checkbox" class="form-check-input" name="check_list[Topic]" value="1"
                                        {{ isset($Webinars->check_list) && json_decode($Webinars->check_list)->{'Topic'} == 1 ? 'checked' : '' }}> Topic
                                </label>
                            </div>
                            <div class="form-check">
                                <label class="form-check-label">
                                    <input type="hidden" name="check_list[Date]" value="0">
                                    <input type="checkbox" class="form-check-input" name="check_list[Date]" value="1"
                                        {{ isset($Webinars->check_list) && json_decode($Webinars->check_list)->{'Date'} == 1 ? 'checked' : '' }}> Date
                                </label>
                            </div>
                            <div class="form-check">
                                <label class="form-check-label">
                                    <input type="hidden" name="check_list[Time]" value="0">
                                    <input type="checkbox" class="form-check-input" name="check_list[Time]" value="1"
                                        {{ isset($Webinars->check_list) && json_decode($Webinars->check_list)->{'Time'} == 1 ? 'checked' : '' }}> Time
                                </label>
                            </div>
                            <div class="form-check">
                                <label class="form-check-label">
                                    <input type="hidden" name="check_list[Registration Link]" value="0">
                                    <input type="checkbox" class="form-check-input" name="check_list[Registration Link]" value="1"
                                        {{ isset($Webinars->check_list) && json_decode($Webinars->check_list)->{'Registration Link'} == 1 ? 'checked' : '' }}> Registration Link
                                </label>
                            </div>
                            <div class="form-check">
                                <label class="form-check-label">
                                    <input type="hidden" name="check_list[Webinar Event Page Update]" value="0">
                                    <input type="checkbox" class="form-check-input" name="check_list[Webinar Event Page Update]" value="1"
                                        {{ isset($Webinars->check_list) && json_decode($Webinars->check_list)->{'Webinar Event Page Update'} == 1 ? 'checked' : '' }}> Webinar Event Page Update
                                </label>
                            </div>
                        </div>
                        <!-- Right Side -->
                        <div class="col-md-6">
                            <div class="form-check">
                                <label class="form-check-label">
                                    <input type="hidden" name="check_list[Pop Ups And Conversion Strips]" value="0">
                                    <input type="checkbox" class="form-check-input" name="check_list[Pop Ups And Conversion Strips]" value="1"
                                        {{ isset($Webinars->check_list) && json_decode($Webinars->check_list)->{'Pop Ups And Conversion Strips'} == 1 ? 'checked' : '' }}> Pop Ups And Conversion Strips
                                </label>
                            </div>
                            <div class="form-check">
                                <label class="form-check-label">
                                    <input type="hidden" name="check_list[Promotional Messages]" value="0">
                                    <input type="checkbox" class="form-check-input" name="check_list[Promotional Messages]" value="1"
                                        {{ isset($Webinars->check_list) && json_decode($Webinars->check_list)->{'Promotional Messages'} == 1 ? 'checked' : '' }}> Promotional Messages
                                </label>
                            </div>
                            <div class="form-check">
                                <label class="form-check-label">
                                    <input type="hidden" name="check_list[Moderator]" value="0">
                                    <input type="checkbox" class="form-check-input" name="check_list[Moderator]" value="1"
                                        {{ isset($Webinars->check_list) && json_decode($Webinars->check_list)->{'Moderator'} == 1 ? 'checked' : '' }}> Moderator
                                </label>
                            </div>
                            <div class="form-check">
                                <label class="form-check-label">
                                    <input type="hidden" name="check_list[Lead Presentor]" value="0">
                                    <input type="checkbox" class="form-check-input" name="check_list[Lead Presentor]" value="1"
                                        {{ isset($Webinars->check_list) && json_decode($Webinars->check_list)->{'Lead Presentor'} == 1 ? 'checked' : '' }}> Lead Presentor
                                </label>
                            </div>
                        </div>
                    </div>
                    <div id="checklist-error" class="text-danger" style="display: none;">Please check all options</div>
                </div>

                <!-- Submit Button -->
                <div class="mb-3 col-12">
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
            </div>
        </form>



    </div>
</div>

<div class="card mx-auto mt-2">
    <div class="card-header">
        <h4><b>Interested Candidate ({{ @$interestedCandidatesCount }}) Attended ({{ @$attendedCandidatesCount }}) </b></h4>
        <form id="formSubmit" action="{{ route('webinar.edit', $Webinars->id) }}" method="GET">

            <div class="card-body border-bottom row">
                <div class="col-2">
                    <label>{{ __('search') }} Candidate</label>
                    <input name="searchName" type="text" placeholder="{{ __('Candidate') }} {{ __('name') }}" class="form-control"
                        value="{{ request('searchName') }}">
                </div>


                <div class="col-2">
                    <label>Attended Candidate</label>
                    <select name="active" id="active" class="form-control mr-3">
                        <option value="">All</option>
                        <option value="YES" {{ request('active') == "YES" ? 'selected' : '' }}>YES</option>
                        <option value="NO" {{ request('active') == "NO" ? 'selected' : '' }}>NO</option>
                    </select>
                </div>
                <div class="col-2 d-flex align-items-end">
                    <button type="submit" class="btn btn-success"><i class="fas fa-search"></i></button>
                    <a href="{{ route('webinar.edit', $Webinars->id) }}" class="ml-1 btn btn-danger align-items-center justify-content-center"><i class="fas fa-times"></i></a>
                </div>
            </div>
        </form>
    </div>
    <div class="card-body">
        <table class="table">
            <thead>
                <tr>
                    <th>S.no</th>
                    <th>Candidate Name</th>
                    {{-- <th>webinar_name</th> --}}
                    <th>Created at</th>
                    {{-- <th>Template</th>
                    <th>Channel</th> --}}
                    <th>Attended</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach($paginatedInterestedCandidates as $item)
                <tr>
                    <td>{{$i++}}</td>
                    <td>
                        @if(@$item->candidate->id)
                        <a href="{{ route('lead-management.edit', $item->candidate->id)}}">
                            {{@$item->candidate->user->name}}
                        </a>
                        @else
                        {{@$item->candidate_id}}
                        @endif

                    </td>
                    {{-- <td>{{$item->webinar_id}}</td> --}}
                    <td>{{dateMonthTimeFormat($item->created_at)}}</td>
                    {{-- <td>{{$item->template}}</td>
                    <td>{{$item->channel}}</td> --}}
                    {{-- <td>{{$item->attended}}</td> --}}
                    {{-- <td tabindex="0"  class="center">
                        <div class="d-flex justify-content-center">
                            <a href="javascript:void(0)" class="active-attended">
                                <label class="switch ">
                                    <input data-id="{{ $item->id }}" data-class="attended" type="checkbox"
                    class="success attended-switch change-active-attended"
                    {{ $item->attended == 1 ? 'checked' : '' }}>
                    <span class="slider round"></span>
                    </label>
                    <p class="{{ $item->attended == 1 ? 'active' : '' }}" id="attended_{{ $item->id }}">
                        {{ $item->attended == 1 ? __('activated') : __('deactivated') }}
                    </p>
                    </a>
    </div>
    </td> --}}
    <td>
        <div class="d-flex">
            <a href="javascript:void(0)" class="active-attended">
                <label class="switch">
                    <input data-id="{{ $item->id }}" data-class="attended" type="checkbox"
                        class="success attended-switch change-active-attended"
                        {{ $item->attended == 1 ? 'checked' : '' }}>
                    <span class="slider round"></span>
                </label>
                <p class="{{ $item->attended == 1 ? 'active' : '' }}" id="attended_{{ $item->id }}">
                    {{ $item->attended == 1 ? __('YES') : __('NO') }}
                </p>
            </a>
        </div>
    </td>
    <td>
    <div class="d-flex">
        @if($candidateDelete)
            <button  onclick="deleteInterestedCandidate(, );" type="submit" class="btn btn-danger"><i class="fas fa-trash"></i></button>               
        @endif 
    </div>
    </td>

    </tr>
    @endforeach
    </tbody>
    </table>
    <div class="mt-3 d-flex justify-content-center">
        <ul>
            {{-- {{@$interestedCandidates->links()}} --}}
            {{ $paginatedInterestedCandidates->links() }}
        </ul>
    </div>
</div>
</div>
@endsection
@section('style')
<link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2/css/select2.min.css">
<link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
<link rel="stylesheet" href="{{ asset('backend') }}/plugins/dropify/css/dropify.min.css">
<link rel="stylesheet" href="{{ asset('frontend') }}/secondary-theme/assets/css/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="{{ asset('frontend') }}/secondary-theme/assets/css/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css?v={{env('CRM_VERSION')}}" />


<style>
    /* .ck-editor__editable_inline {
            min-height: 300px;
        } */

    .select2-results__option[aria-selected=true] {
        display: none;
    }

    .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
        color: #fff;
        border: 1px solid #fff;
        background: #007bff;
        border-radius: 30px;
    }

    .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
        color: #fff;
    }

    .card-header .title {
        font-size: 17px;
        color: #000;
    }

    .card-header .accicon {
        float: right;
        font-size: 20px;
        width: 1.2em;
    }

    .card-header {
        cursor: pointer;
        border-bottom: none;
    }

    .card {
        border: 1px solid #ddd;
    }

    .card-body {
        border-top: 1px solid #ddd;
    }

    .card-header:not(.collapsed) .rotate-icon {
        transform: rotate(180deg);
    }

    .sticky-menu {
        position: sticky;
        z-index: 555;
        width: 100%;
        top: 1px;
    }


    /* on of button */
    .switch {
        position: relative;
        display: inline-block;
        width: 35px;
        height: 19px;
    }

    /* Hide default HTML checkbox */
    .switch input {
        display: none;
    }

    /* The slider */
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 15px;
        width: 15px;
        left: 3px;
        bottom: 2px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    input.success:checked+.slider {
        background-color: #28a745;
    }

    input:checked+.slider:before {
        -webkit-transform: translateX(15px);
        -ms-transform: translateX(15px);
        transform: translateX(15px);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 34px;
    }

    .slider.round:before {
        border-radius: 50%;
    }
    .tox-tinymce{
        height: 215px !important;
    }
</style>
@endsection
@section('script')
<script src="{{ asset('backend/plugins/select2/js/select2.full.min.js') }}"></script>
<script src="{{ asset('frontend/secondary-theme/assets/js/bootstrap-datepicker.min.js')}}"></script>
<script src="{{ asset('backend') }}/plugins/dropify/js/dropify.min.js"></script>
{{-- <script src="{{ asset('frontend') }}/secondary-theme/assets/js/ckeditor.min.js"></script> --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js?v={{env('CRM_VERSION')}}"></script>

<script>
    $('.select2bs44').select2({
        theme: 'bootstrap4',
        placeholder: 'Select taken by'
    })
    $('.select2bs4').select2({
        theme: 'bootstrap4'

    });
    $('.select2bs44_service').select2({
        theme: 'bootstrap4',
        multiple: false,
        placeholder: 'Select Service'

    });
</script>

<script>
    //   $('.attended-switch').on('change', function() {
    //         var attended = $(this).prop('checked') == true ? 1 : 0;
    //         var id = $(this).data('id');
    //         var type = $(this).data('class');

    //         $.ajax({
    //             type: "GET",
    //             dataType: "json",
    //             url: '{{ route('webinar.status.change') }}',
    //             data: {
    //                 'attended': attended,
    //                 'type': type,
    //                 'id': id
    //             },
    //             success: function(response) {
    //                 console.log(response);
    //                 toastr.success(response.message, 'Success');
    //             }
    //         });   

    //         if(type == 'attended'){
    //             if (attended == 1 ) {
    //             $(`#attended_${id}`).text("{{ __('activated') }}")
    //         }else{
    //             $(`#attended_${id}`).text("{{ __('deactivated') }}")
    //         }
    //         }    

    //     });


    // $('.attended-switch').on('change', function() {
    //     var attended = $(this).prop('checked') == true ? 1 : 0;
    //     var id = $(this).data('id');
    //     var type = $(this).data('class');

    //     $.ajax({
    //             type: "GET",
    //             data: {
    //                 'attended': attended,
    //                 'type': type,
    //                 'id': id,
    //             },
    //             url: "{{ route('webinar.status.change') }}",
    //             success: function(response) {

    //             },
    //             error: function(error) {
    //                 console.error(error);
    //                 toastr.error("An error occurred while processing your request.");
    //             }
    //         });  

    //     if(type == 'attended'){
    //         if (attended == 1 ) {
    //         $(`#attended_${id}`).text("{{ __('activated') }}")
    //     }else{
    //         $(`#attended_${id}`).text("{{ __('deactivated') }}")
    //     }
    //     }    

    // });

    $('.attended-switch').on('change', function() {
        var attended = $(this).prop('checked') ? 1 : 0;
        var id = $(this).data('id');
        var type = $(this).data('class');
        console.log(id);
        $.ajax({
            type: "POST",
            dataType: "json",
            data: {
                'attended': attended,
                'type': type,
                'id': id,
            },
            url: "{{ route('webinar.status.change') }}",
            success: function(response) {
                // Update UI based on the response
                updateUI(id, type, attended);
                toastr.success(response.message, 'Success');
            },
            error: function(error) {
                console.error(error);
                toastr.error("An error occurred while processing your request.");
            }
        });
    });

    function updateUI(id, type, attended) {
        if (type === 'attended') {
            if (attended === 1) {
                $(`#attended_${id}`).text("YES").addClass('active');
            } else {
                $(`#attended_${id}`).text("NO").removeClass('active');
            }
        }
    }


    $('#event_type').change(function() {
        var value = $('#event_type').val();
        if (value == "event" || value == "seminar") {
            $('#link').hide();
        } else {
            $('#link').show();
        }
        value = value.charAt(0).toUpperCase() + value.slice(1); // Convert first letter to uppercase
        $('#name_of_type').html(value);
    });

    $(document).ready(function() {
        var value = $('#event_type').val();
        if (value == "event" || value == "seminar") {
            $('#link').hide();
        } else {
            $('#link').show();
        }
        value = value.charAt(0).toUpperCase() + value.slice(1); // Convert first letter to uppercase
        $('#name_of_type').html(value);
    });
</script>
<script src="{{ asset('tinymce/tinymce.min.js') }}" referrerpolicy="origin"></script>
<script>
    tinymce.init({
        selector: '#description',
        menubar: false,
        plugins: 'link lists code',
        toolbar: 'undo redo | bold italic underline | bullist numlist | link code',
        branding: false
    });
</script>
<script>
    // $(document).ready(function() {
    //     $('#webinarForm').on('submit', function(e) {
    //         // Create a JSON object from the checklist values
    //         let checklist = {};
    //         $('#checklist .form-check-input').each(function() {
    //             const key = $(this).val();
    //             const value = $(this).is(':checked') ? 1 : 0;
    //             checklist[key] = value;
    //         });

    //         // Set the JSON object to the hidden input field
    //         $('#checklist_json').val(JSON.stringify(checklist));
    //     });
    // });

    // document.querySelector('#webinarForm').addEventListener('submit', function(e) {
    //     // Get all the checkboxes
    //     const checkboxes = document.querySelectorAll('input[name="options[]"]');
    //     console.log(checkboxes);
        
    //     // Check if all checkboxes are checked
    //     let allChecked = true;
    //     checkboxes.forEach(function(checkbox) {
    //         if (!checkbox.checked) {
    //             allChecked = false;
    //         }
    //     });
        
    //     if (!allChecked) {
    //         e.preventDefault();
    //         // Show Toastr error message instead of alert
    //         toastr.error('Please check all the Checklist options before submitting the form.');
    //     }
    // });

    function copyText() {
        // Get the text to copy
        const text = document.getElementById('textToCopy').innerText;

        // Use the Clipboard API to copy text
        navigator.clipboard.writeText(text)
            .then(() => {
                // alert('Text copied to clipboard!');
                toastr.success('Link copied to clipboard!');
            })
            .catch(err => {
                // console.error('Failed to copy text: ', err);
                toastr.error('Failed to copy link: ', err);
            });
    }

    function deleteInterestedCandidate(candidate_id, webinar_id) {
        if (!confirm('Are you sure you want to delete this entry?')) {
            return; // Cancel the deletion if the user doesn't confirm.
        }
        // var candidate_id = 2513;
        // var webinar_id = "sfgsgdg";

        // Send an AJAX request
        fetch("{{ route('webinar.deleteInterestedCandidate') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ candidate_id, webinar_id })
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 1) {
                // Success
                toastr.success(data.message || 'Data deleted successfully!');
                // Optional: Reload the page or update the UI dynamically
                location.reload();
            } else if (data.status === 0) {
                // Validation or process error
                if (data.errors) {
                    // Show validation errors if available
                    Object.values(data.errors).forEach(errorMessage => {
                        toastr.error(errorMessage);
                    });
                } else {
                    // Show a generic error message
                    toastr.error(data.message || 'Failed to delete the data.');
                }
            }
        })
        .catch(error => {
            // Catch and show unexpected errors
            console.error('Error:', error);
            toastr.error('An unexpected error occurred. Please try again.');
        });
    }

    function validateChecklist() {
        let errorMessage = document.getElementById('checklist-error');
        let checkboxes = document.querySelectorAll('#checklist input[type="checkbox"]');
        let hasZeroValue = false;

        // Loop through all checkboxes and check if any value is '0'
        checkboxes.forEach(function(checkbox) {
            if (!checkbox.checked && checkbox.value === '1') {
                hasZeroValue = true;
            }
        });

        // Show error message if any value is '0' (unchecked)
        if (hasZeroValue) {
            errorMessage.style.display = 'block';
            return false;  // Prevent form submission
        } else {
            errorMessage.style.display = 'none';
            return true;  // Allow form submission
        }
    }

    // Run validation when submitting the form
    document.querySelector('#webinarForm').addEventListener('submit', function(e) {
        if (!validateChecklist()) {
            e.preventDefault();  // Prevent the form from submitting if validation fails
        }
    });

</script>

@endsection