{{-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> --}}


@extends('admin.layouts.app')
@section('content')
<div class="card mx-auto mt-2" style="">
    <div class="card-header">
        <h5>
            <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>
        </h5>
    </div>
    <div class="card-body ">
        <form action="{{ route('webinar.store') }}" method="POST" id="webinarForm">
            @method('POST')
            @csrf
            <div class="row">
                <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 selected>Select Type</option>
                        <option value="event" {{ "event" == old('event_type') ? 'selected' : '' }}>Event</option>
                        <option value="webinar" {{ "webinar" == old('event_type') ? 'selected' : '' }}>Webinar</option>
                        <option value="seminar" {{ "seminar" == old('event_type') ? 'selected' : '' }}>Seminar</option>
                    </select>
                    @error('event_type')
                    <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>
                <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" value="{{old('webinar_name')}}" class="form-control" id="WebinarName" placeholder="Enter name">
                    @error('webinar_name')
                    <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>
                <div class="mb-3 col-12 col-md-6 col-lg-4">
                    <label for="CountryName" class="form-label">Country Name</label>
                    {{-- <input type="text" class="form-control" id="CountryName" > --}}
                    <select name="country_id"
                        class="form-control select2bs4" id="country_id">
                        <option value="" class="d-none ">
                            Select country
                        </option>
                        @foreach ($countries as $country)
                        <option {{ $country->id == old('country_id') ? 'selected' : '' }}
                            value="{{ $country->id }}">
                            {{ $country->name }}
                        </option>
                        @endforeach
                    </select>
                    @error('country_id')
                    <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>
                <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')}}">
                    @error('dateTime')
                    <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>
                <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" placeholder="Enter link" name="webinar_link" value="{!!old('webinar_link')!!}">
                    @error('webinar_link')
                    <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>





                <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" placeholder="Enter Tracking Code" name="tracking_code" value="{!!old('tracking_code')!!}">
                    @error('tracking_code')
                    <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>

                <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>
                        <option value="" class="d-none">
                            Select taken by
                        </option>
                        @foreach ($taken as $item)
                        <option {{ $item->id == old('taken_by') ? 'selected' : '' }}
                            value="{{ $item->id  }}">
                            {{ $item['name'] }}
                        </option>
                        @endforeach
                    </select>
                    @error('taken_by')
                    <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>

                <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="" class="d-none">
                            Select Service
                        </option>
                        @foreach ($services as $service)
                        <option {{ $service->id == old('service') ? 'selected' : '' }}
                            value="{{ $service->id  }}">
                            {{ $service['name'] }}
                        </option>
                        @endforeach
                    </select>
                    @error('service')
                    <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>


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

                <div class="col-6 mb-6">
                    <div id="links">
                        <!-- 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, '') }}"
                                        placeholder="Enter Pointer Value {{ $i + 1 }}" />
                                    <small class="text-danger">
                                        {{ $errors->first('pointers.' . $i) }}
                                    </small>
                                </div>
                            </div>
                        @endfor
                    </div>
                </div>

                <div class="row col-6 mb-3">
                    <div class="form-group col-6">
                            <label>Register Page Image</label>
                        <div class="file-upload-section">
                            <div class="preview-filemanger border border-dark"
                                id="previewLogo">
                                @if (old('register_page_image', @$webinar->register_page_image ?? '') != '')
                                    <img src="{{ old('register_page_image', @$webinar->register_page_image ?? '') }}" height="175" width="300">
                                @else
                                    <img src="https://placehold.jp/300x175.png" alt="placeholder" height="175" width="300">
                                @endif
                            </div>
                            <input type="hidden"
                                name="register_page_image"
                                id="register_page_image" value="{{ old('register_page_image', @$webinar->register_page_image ?? '') }}">
                                <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>
                        <span class="text-danger">
                            @error('register_page_image')
                            {{$message}}
                            @enderror
                        </span>
                    </div>

                    <div class="form-group col-6">
                      
                            <label>Pop-up Image</label>
                        <div class="file-upload-section">
                            <div class="preview-filemanger border border-dark"
                                id="previewLogo_pop">
                                @if (old('pop_up_image', @$webinar->pop_up_image ?? '') != '')
                                    <img src="{{ old('pop_up_image', @$webinar->pop_up_image ?? '') }}" height="175" width="300">
                                @else
                                    <img src="https://placehold.jp/300x175.png" alt="placeholder" height="175" width="300">
                                @endif
                                <!-- <img src="https://placehold.jp/300x175.png" alt="placeholder" height="175" width="300"> -->
                            </div>
                            <input type="hidden"
                                name="pop_up_image"
                                id="pop_up_image" value="{{ old('pop_up_image', @$webinar->pop_up_image ?? '') }}">
                                <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>
                        <span class="text-danger">
                            @error('pop_up_image')
                            {{$message}}
                            @enderror
                        </span>
                    </div>                           
                </div>
                
                <div class="form-group col-3">
                    <label for="Checklist" class="form-label">Checklist</label>
                    <div id="checklist" class="row">
                        <!-- Left Column -->
                        <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"
                                        {{ old('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"
                                        {{ old('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"
                                        {{ old('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"
                                        {{ old('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"
                                        {{ old('check_list.Webinar Event Page Update') == '1' ? 'checked' : '' }}> Webinar Event Page Update
                                </label>
                            </div>
                        </div>
                        <!-- Right Column -->
                        <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"
                                        {{ old('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"
                                        {{ old('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"
                                        {{ old('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"
                                        {{ old('check_list.Lead Presentor') == '1' ? 'checked' : '' }}> Lead Presentor
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

 <!-- Hidden Input to Store JSON -->
                    <!-- <input type="hidden" name="checklist_json" id="checklist_json" /> -->
                <div class="row g-3">
                    <div class="col-auto">
                        <button type="submit" class="btn btn-primary btn-lg" aria-label="Submit Form">
                            Submit
                        </button>
                    </div>
                </div>
        </form>
    </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">

<style>
    .ck-editor__editable_inline {
        min-height: 160px;
    }

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

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

    .height-124px {
        height: 124px !important
    }

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

    .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%;
    }

    .badge-container {
        display: flex;
        flex-direction: row-reverse;
    }

    .badge {
        margin-left: 5px;
    }
    .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>
    $('.select2bs4').select2({
        theme: 'bootstrap4',
        minimumResultsForSearch: 10
    });

    $('.select2bs44').select2({
        theme: 'bootstrap4',
        multiple: true,
        placeholder: 'Select taken by'

    });

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

    });



    $('#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);
    });
</script>

{{-- <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></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 src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    function clearFilters() {
        document.querySelectorAll('.form-check-input').forEach(checkbox => checkbox.checked = false);
    }

    function applyFilters() {
        const selectedFilters = Array.from(document.querySelectorAll('.form-check-input'))
            .filter(checkbox => checkbox.checked)
            .map(checkbox => checkbox.id);
    }
</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));
    //     });
    // });
</script>


@endsection