@extends('layouts.admin')

@php
    if (Auth::user()->role == '1') {
        $user_profile = 'Admin';
    } else {
        $user_profile = 'Co-ordinator';
    }
@endphp
<title>
    {{ config('app.name', 'Laravel') }} | {{ $user_profile }} | Add Qr Image</title>

@section('main-content')
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet" />

    <link href="{{asset('assets/multi_select/multiselect_style.css')}}" rel="stylesheet"/>
    <style>
        .input {
            color: black
        }

        #loader {
            text-align: center;
            /* Align the loader to the center */
            margin-left: 15px;
            /* Adjust this value to manage space between loader and button */
            width: auto;
            display: inline-block;
        }

        #students {
            display: inline-block !important;
            width: auto !important;
            margin-left: 5px;
            border-color: #697a8d;
        }

        #loader img {
            width: 30px;
        }

        .select2-selection {
            border-color: #dae0e7 !important;
        }

        /* Styles for the Select2 dropdown when focused or hovered */
        .select2-container--focus .select2-selection,
        .select2-selection:hover {
            border-color: #696cff !important;
        }

        /* Styles for the Select2 dropdown when active (clicked) */
        .select2-container--open .select2-selection {
            border-color: #696cff !important;
        }

        .select2-selection--single .select2-selection__rendered {
            color: #697a8d !important;
        }

        .custom_select12 .select2-container .selection .select2-selection {
            height: 38px;
        }

        .custom_select12 .select2-container .selection .select2-selection .select2-selection__rendered {
            height: 100%;
            line-height: 2.3;
        }

        .custom_select12 .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 100%;
        }

        .multiSelect_inputGroup .select2-container--default .select2-selection--multiple .select2-selection__choice {
            line-height: 1.6;
        }

        .hw_rel {
            position: relative;
            flex: 0 0 96.4%;
        }

        .hw_lw {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translate(0, -50%);
            font-size: 12px;
            color: black;
        }

        .hw_rel input {
            padding-right: 70px;

        }
    </style>

    <div id="alert" class="col-md-6">
        @if (Session::has('success'))
            <div class="alert alert-primary" role="alert">
                {{ Session::get('success') }}
            </div>
        @endif
    </div>

    <div class="content-wrapper">
        <!-- Content -->
        <div class="container-xxl flex-grow-1 container-p-y">
            <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light"></span> Add New QR Image</h4>
            <!-- Basic Layout -->
            <div class="row">
                <div class="col-xl">
                    <div class="card mb-3">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">QR Image Details</h5>
                        </div>
                        <div class="card-body">
                            <form id="qrImageForm" enctype="multipart/form-data">
                                @csrf <!-- CSRF Token for security -->
                                <div class="row">
                                    <div class="col-12 mb-3">
                                        <label class="form-label" for="basic-icon-default-fullname">Upload Image</label>
                                        <input type="file" name="image" id="image" class="form-control"
                                            accept="image/*" required>
                                        <span class="text-danger error-image"></span>
                                    </div>
                                    <h3 id="new-images-heading" style="display: none" class="mt-4">New Images:</h3>
                                    <div id="image-preview-container" class="mt-3"></div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label" for="title">Title</label>
                                    <input type="text" name="title" id="title" class="form-control"
                                        placeholder="title" maxlength="80">
                                    <span class="text-danger error-title"></span>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="upi_id">Upi Id</label>
                                    <input type="text" name="upi_id" id="upi_id" class="form-control"
                                        placeholder="Upi Id" required>
                                    <span class="text-danger error-upi_id"></span>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label" for="fee_name">Associated Fees</label>
                                    @if (count($filteredFeeOptions) > 0)
                                        <select name="fee_name[]" id="fee_name" class="form-control" multiple required>
                                            @foreach ($filteredFeeOptions as $value => $label)
                                                <option value="{{ $value }}">{{ $label }}</option>
                                            @endforeach
                                        </select>
                                    @else
                                        <p>No fees available</p>
                                    @endif
                                    <span class="text-danger error-fee_name"></span>
                                </div>

                                <div class="form-group loaderbtn_div">
                                    <button type="submit" class="btn btn-success text-white save_btn">Save</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- / Content -->
        <div class="content-backdrop fade"></div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
    <!-- Include the Quill library -->
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
    <script src="{{asset('assets/multi_select/multi_select_myWork.js')}}"></script>
    <script src="{{asset('assets/multi_select/multi_select_myWork1.js')}}"></script>
    <script src="{{asset('assets/multi_select/multi_select_myWork2.js')}}"></script>
    <script>
        $(document).ready(function() {
            $('#qrImageForm').on('submit', function(e) {
                e.preventDefault(); // Prevent normal form submission

                let formData = new FormData(this);

                $.ajax({
                    url: "/save-qrimage", // Laravel route
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: function() {
                        $('.save_btn').prop('disabled', true).text('Saving...');
                        $('.text-danger').text(''); // Clear previous errors
                        $('#success-message').hide();
                    },
                    success: function(response) {
                        if (response.status == 200) {
                        toastr.success("QR Image Added Successfully!", "Success");
                        setTimeout(() => {
                            window.location.href = response.success;
                        }, 2000);
                    } else {
                            $('#success-message').text(response.message).show();
                            $('#qrImageForm')[0].reset();
                        }
                    },
                    error: function(xhr) {
                        $('.save_btn').prop('disabled', false).text('Save');

                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            $.each(errors, function(key, value) {
                                $('.error-' + key).text(value[0]);
                            });
                        } else {
                            alert('Something went wrong. Please try again.');
                        }
                    }
                });
            });
        });
    </script>

    <script>
        // $( document ).ready(function() {
        // function saveWork() {
        //     $('.text-danger').remove();
        //     $(".save_btn").prop("disabled", true);
        //     $('#loader').show();
        //     $(".text-danger").remove();
        //     $(".submit_btn").prop("disabled", true);

        //     var formData = new FormData();
        //     var title = $.trim($('#title').val());
        //     formData.append('title', title);
        //     const images = $('#images').prop('files');
        //     if (images.length > 0) {
        //         for (let i = 0; i < images.length; i++) {
        //             formData.append(`images[${i}]`, images[i]);
        //         }
        //     }
        //     var class_name = $.trim($('#class').val());
        //     formData.append('class', class_name);
        //     var today_work = $.trim($('.ql-editor').text());
        //     formData.append('today_work', today_work);
        //     var today_work_text = $.trim($('.ql-editor').html());
        //     formData.append('today_work_text', today_work_text);
        //     $.ajax({
        //         type: "post",
        //         url: "{{ route('class-home-work.store') }}",
        //         contentType: 'multipart/form-data',
        //         cache: false,
        //         contentType: false,
        //         processData: false,
        //         headers: {
        //             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //         },
        //         data: formData,
        //         success: function(data) {
        //             if ($.isEmptyObject(data.error)) {
        //                 window.location.href = data.success;
        //             } else {
        //                 // printErrorMsg(data.error);
        //                 $.each(data.error, function(field_name, error) {
        //                     // Check if the error message for the field already exists
        //                     if (!$('#' + field_name + '').closest('div').next().hasClass(
        //                             'text-danger')) {
        //                         $('#' + field_name + '').closest('div').after(
        //                             '<span class="text-strong text-danger">' + error + '</span>');
        //                     }
        //                 });
        //             }
        //             $(".save_btn").prop("disabled", false);
        //         },
        //         error: function() {
        //             // Hide loader in case of an error
        //             $('#loader').hide();
        //             $(".save_btn").prop("disabled", false);
        //             // Handle error
        //         },
        //         complete: function() {
        //             // Hide loader when the request is completed (success, error, or failure)
        //             $('#loader').hide();
        //             $(".save_btn").prop("disabled", false);
        //         }

        //     })
        // }

        function previewImages() {
            const imageInput = document.getElementById('image');
            const previewContainer = document.getElementById('image-preview-container');
            previewContainer.innerHTML = '';
            const files = imageInput.files;
            if (files.length > 0) {
                $('#new-images-heading').show();
            } else {
                $('#new-images-heading').hide();
            }
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                const reader = new FileReader();

                reader.onload = function(event) {
                    const img = document.createElement('img');
                    img.src = event.target.result;
                    img.style.width = '300px';
                    img.style.objectFit = 'contain';
                    previewContainer.appendChild(img);
                };
                reader.readAsDataURL(file);
            }
        }
    </script>
@endsection