@extends('layouts.app')

@section('content')
    <section class="content">
        <div class="container-fluid">

            <div class="px-sm-4">
                <form enctype="multipart/form-data" id="createTraing" role="post-data" method="POST" action="/api/training/store"
                    redirect="/training">
                    @csrf
                    <div class="row mt-2 mt-sm-3">
                        <div class="col-md-7 col-10">
                            <div class="top-head">
                                <h1>Training</h1>
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="/home">Home </a></li>
                                        <li class="breadcrumb-item active" aria-current="page"> Training </li>
                                    </ol>
                                </nav>
                            </div>
                        </div>
                        <div class="col-md-5 text-sm-right text-left">
                            <a href="{{ url('training') }}" type="button" class="btn cancel-btn mr-2">Cancel</a>

                            <button type="button" class="btn save-btn" id="saveTraining" role="button">Submit</button>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-12">
                            <div class="user-editbox">
                                <div class="row">
                                    <div class="col-md-6 col-7">
                                        <div class="inner-head">
                                            <p>Add Training</p>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-5">
                                        <div class="toogleSwitch float-right">
                                            <label class="switch">
                                                <input type="checkbox" id="status" class="activeclass"
                                                    onclick="inactiveStatus()" checked />
                                                <div class="slider round">
                                                    <span class="swactive">Active</span>
                                                    <span class="swinactive">Inactive</span>
                                                </div>
                                            </label>
                                        </div>
                                        <input type="hidden" value="active" id="hiddenStatus" name="status">

                                    </div>
                                </div>
                                <div class="border-bottom pt-2"></div>

                                <div class="row mt-sm-4 mt-3">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="title">Title</label>
                                            <textarea class="form-control edit-input"name='title' rows="4" placeholder="Write..."></textarea>
                                        </div>
                                        <div class="form-group">
                                            <label class="edit-label">Select category</label>
                                            <select class="form-control edit-input edit-select" name='category_id'>
                                                <option value=""> Select category</option>
                                                @foreach ($categories as $category)
                                                    @if ($category->type !== 'training')
                                                        @continue
                                                    @endif
                                                    <option value="{{ $category->id }}">
                                                        {{ $category->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label class="link">YouTube video link</label>
                                            <input type="link" name="video_url" class="form-control edit-input"
                                                placeholder="https//">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="edit-label">Image</label>
                                            <div class="atteched-filebox">
                                                <div class="upload-btn-wrapper">
                                                    <button class="uploadBtn">
                                                        Choose <span>your file here</span>

                                                        <img src="{{ asset('assets/img/new-attachment.svg') }}"
                                                            class="events-atteched" alt="">
                                                    </button> <br>
                                                    <span class="size-img size-imgnew">Max size 5 MB</span>
                                                    <input type="file" name="image">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="upload-imbox" id="uploaded-image-div" style="display: none">
                                            <img src="{{ $category->image }}" class="uploaded-showing" alt="">
                                            <div class="close-boxnew cursor-pointer removeImage">
                                                <img src="{{ asset('assets/img/white-close.svg') }}" class="removeImage"
                                                    alt="" style="padding:4px;">

                                                </div>
                                        </div>

                                        <div class="row pt-sm-4 pt-2">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="valid_from">From Date</label>
                                                    <input type="date"name= 'valid_from' class="form-control edit-input">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="valid_to">To Date</label>
                                                    <input type="date" name= 'valid_to'class="form-control edit-input">
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                                <label class="edit-label mt-sm-3">Applicable for </label>
                                <div class="row m-0 p-0">
                                    <input name="applicable_for" type="hidden" disabled>
                                </div>
                                <div class="row mt-2">
                                    @foreach ($applicableForArr as $value => $label)
                                        <div class="col-md-3 mb-2 mb-sm-0">
                                            <div class="filter-check">
                                                <input type="checkbox" class="filled-in" value="{{ $value }}"
                                                    name="applicable_for[{{ $loop->iteration - 1 }}]"
                                                    id="checkbox-{{ $value }}">
                                                <label class="check-label"
                                                    for="checkbox-{{ $value }}">{{ $label }}</label>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>

                            </div>
                        </div>
                    </div>
            </div>
            </form>
        </div>
    </section>
@endsection

@section('scripts')

    <script>

        function activeStatus() {
            var status = 'active';
            $('#status').val(status);
            $('#hiddenStatus').val(status);
            document.getElementById('status').setAttribute('onclick', 'inactiveStatus()');
        }

        function inactiveStatus() {
            var status = 'inactive';
            $('#status').val(status);
            $('#hiddenStatus').val(status);
            document.getElementById('status').setAttribute('onclick', 'activeStatus()');
        }

        document.addEventListener('change', function(e) {
            if (e.target.getAttribute('name') === 'image') {
                var fileType = e.target.files[0].type;
                var fileSize = e.target.files[0].size;
                var maxSize = 5 * 1024 * 1024; // 5 MB in bytes
                // Check if the file type is allowed
                if (fileType !== 'image/jpeg' && fileType !== 'image/png' && fileType !== 'image/jpg' && fileType !== 'application/pdf') {
                    // Show SweetAlert alert for invalid file type
                    Swal.fire({
                        type: 'error',
                        title: 'Invalid File Type',
                        text: 'Please upload files with extensions jpeg, png, jpg, or pdf.',
                    });

                    // Clear the file input
                    e.target.value = '';
                    return;
                }
                if(fileSize > maxSize){
                    Swal.fire({
                        type: 'error',
                        title: 'File Size Exceeded',
                        text: 'Please upload a file with a size less than 5 MB.',
                    });

                    // Clear the file input
                    e.target.value = '';
                    return;
                }
                $('#uploaded-image-div').hide();
                var uploadedImage = document.querySelector('.uploaded-showing');
                uploadedImage.src = URL.createObjectURL(e.target.files[0]);
                $('#uploaded-image-div').show();
            }
        });

        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('removeImage')) {
                $('#uploaded-image-div').hide();
                $('input[name=image]').val('')
            }
        });

        // $('#saveTraining').click(function() {
        //     var form = $(this).closest('form');
        //     var formData = new FormData(form[0]);
        //     var url = $(form[0]).attr('action');
        //     var redirectUrl = $(form[0]).attr('redirect');

        //     $.ajax({
        //         url: url,
        //         data: formData,
        //         cache: false,
        //         type: 'POST',
        //         dataType: 'JSON',
        //         contentType: false,
        //         processData: false,
        //         beforeSend: function() {
        //             $('#loaderDiv').show();
        //             $('.help-block').remove();
        //         },
        //         success: function($response) {
        //             if ($response.status === 200) {
        //                 //##  Desktop Notification
		// 			    fetch('/get-notification-template')
		// 				.then(response => response.json())
		// 				.then(notificationTemplate => {
        //                     console.log(notificationTemplate);
		// 					if (notificationTemplate) {
		// 						// Extract title and body from the fetched template
		// 						const title = notificationTemplate.title;
		// 						const body = notificationTemplate.body;
        //                         console.log('title',title);
        //                         console.log('body',body);
		// 						// Send notification with the updated title and body
		// 						sendNotification(title, body);
		// 					} else {
		// 						console.error('Failed to fetch notification template');
		// 					}
		// 				})
		// 				.catch(error => {
		// 					console.error('Error fetching notification template:', error);
		// 				});
		// 			//##End Desktop Notification
        //                 toast("success", $response.message);
        //                 setTimeout(function() {
        //                     location.href = redirectUrl;
        //                 }, 2200);
        //             }
        //         },
        //         error: function($response) {
        //             $('#loaderDiv').hide();
        //             if ($response.status === 422) {
        //                 if (Object.size($response.responseJSON) > 0 && Object.size($response
        //                         .responseJSON.errors) > 0) {
        //                     show_validation_error($response.responseJSON.errors);
        //                 }
        //             } else {
        //                 Swal.fire(
        //                     'Error', $response.responseJSON.message, 'warning'
        //                 )
        //                 setTimeout(function() {}, 1200)
        //             }
        //         }
        //     });
        // });

        $('#saveTraining').click(function() {
        var form = $(this).closest('form');
        var formData = new FormData(form[0]);
        var url = $(form[0]).attr('action');
        var redirectUrl = $(form[0]).attr('redirect');

        $.ajax({
            url: url,
            data: formData,
            cache: false,
            type: 'POST',
            dataType: 'JSON',
            contentType: false,
            processData: false,
            beforeSend: function() {
                $('#loaderDiv').show();
                $('.help-block').remove();
            },
            success: function(response) {
                if (response.status === 200) {
                    // Show success toast
                    toast("success", response.message);
                    setTimeout(function() {
                        location.href = redirectUrl;
                    }, 2200);

                    // Fetch notification template
                    fetch('/get-notification-template')
                        .then(response => response.json())
                        .then(notificationTemplate => {
                            console.log(notificationTemplate);
                            if (notificationTemplate) {
                                // Extract title and body from the fetched template
                                const title = notificationTemplate.title;
                                const body = notificationTemplate.body;
                                console.log('title', title);
                                console.log('body', body);
                                // Send notification with the updated title and body
                                sendNotification(title, body);
                            } else {
                                console.error('Failed to fetch notification template');
                            }
                        })
                        .catch(error => {
                            console.error('Error fetching notification template:', error);
                        });
                }
            },
            error: function(response) {
                $('#loaderDiv').hide();
                if (response.status === 422) {
                    if (Object.size(response.responseJSON) > 0 && Object.size(response.responseJSON.errors) > 0) {
                        show_validation_error(response.responseJSON.errors);
                    }
                } else {
                    Swal.fire(
                        'Error', response.responseJSON.message, 'warning'
                    );
                    setTimeout(function() {}, 1200);
                }
            }
        });



    });

        //## related Desktop pushnotification
	// Function to send notification
	function sendNotification(title, body) {
		const message = {
			notification: {
				title: title,
				body: body
			}
		};

		// Send notification request

		const serverKey = "AAAAmr1744o:APA91bFsQRCS0mg6UnlrTejA1V5PnqdDADIJQkwkPorezOdKtDAu37uPa-nz8Ypsh7hDmrecr3DQ40TuF2e_uK55EIiPrxOuHZhwdEdV4UfJZYp51v2H-0dni-383ptH0LOiP5NVW8r8";
        messaging.getToken()
        .then(function(token) {
            return fetch('https://fcm.googleapis.com/fcm/send', {
                method: 'POST',
                headers: {
                    'Authorization': 'key=' + serverKey,
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    to: token,
                    data: message
                })
            });
        })
        .then(function(response) {
            console.log('Notification sent:', response);
            showNotification(title, body);
        })
        .catch(function(error) {
            console.error('Error sending notification:', error);
            alert('Failed to send notification.');
        });
	}

	// Function to show browser popup notification
	function showNotification(title, body) {
		if (Notification.permission === 'granted') {
			new Notification(title, {
				body: body
			});
		} else if (Notification.permission !== 'denied') {
			Notification.requestPermission().then(function(permission) {
				if (permission === 'granted') {
					new Notification(title, {
						body: body
					});
				}
			});
		}
	}
    </script>
@endsection