@extends('layouts.parents.master') 
@section('title')
    {{studentCommonName(auth()->guard('student')->user()->username).__(' | Port Folio')}}
@endsection
@section('headerTitle')
  {{__('Documents')}}
@endsection
<style>
    .bs-stepper-content .form-validation img {
        object-fit: cover;
        width: 100px !important;
        height: 100px !important;
        border-radius: 10px;
        margin-top: 9px;
        margin-left: auto;
        float: right;
    }

    @media (max-width:767px)
    {
        .bs-stepper-header {
            flex-wrap: wrap;
            margin: 18px 0px 10px;
        }
        .bs-stepper .line, .bs-stepper-line {
            display: none;
        }
        .bs-stepper-header .step {
            width: 100%;
        }
        .dstepper-block form {
            padding: 0 15px;
        }
        .dstepper-block form button.btn.btn-primary {
            padding: 8px 7px;
            font-size: 15px;
            border: 0;
        }
    } 
</style>

@section('content')
 <!-- Content Wrapper. Contains page content -->
 <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
     <!--  <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href=""{{route('student.parent.dashboard')}}">Home</a></li>
              <li class="breadcrumb-item active">Change Password</li>
            </ol>
          </div>
        </div>
      </div> -->
    </section>
    <section class="content">
      <div class="container-fluid">
        <a href="{{route('student.parent.portfolio')}}" class="btn btn-primary btn-sm">Go to Portfolio</a>
        <div class="row">
		    <div class="col-md-12">
            <div class="card card-primary">
              <div class="card-body p-0">
                <div class="bs-stepper">
                  <div class="bs-stepper-header" role="tablist">
                    <div class="step" data-target="#student-information-part">
                      <button type="button" class="step-trigger" role="tab" aria-controls="student-information-part" id="student-information-part-trigger" onclick="stepper.to(1)">
                        <span class="bs-stepper-circle">1</span>
                        <span class="bs-stepper-label">Personal`s Documents</span>
                      </button>
                    </div>
                    <div class="line"></div>
                    <div class="step" data-target="#father-information-part">
                      <button type="button" class="step-trigger" role="tab" aria-controls="father-information-part" id="father-information-part-trigger" onclick="stepper.to(2)">
                        <span class="bs-stepper-circle">2</span>
                        <span class="bs-stepper-label">Result`s Documents</span>
                      </button>
                    </div>
                    <div class="line"></div>
                    <div class="step" data-target="#mother-information-part">
                      <button type="button" class="step-trigger" role="tab" aria-controls="mother-information-part" id="mother-information-part-trigger" onclick="stepper.to(3)">
                        <span class="bs-stepper-circle">3</span>
                        <span class="bs-stepper-label">Other`s Documents</span>
                      </button>
                    </div>
                  </div>
                  <div class="bs-stepper-content">
                    <div id="student-information-part" class="content" role="tabpanel" aria-labelledby="student-information-part-trigger">
                      <form id="studentInformation" action="{{route('student.parent.update-student-document')}}" method="post" enctype="multipart/form-data">
                          <input type="hidden" name="actionType" value="1">
                          <div class="form-group row">    
                              @php 
                                  $expiresAt = now()->addHours(24); // Expiration time (for example, 10 minutes)
                                  $imagePath = schoolRedisDetail()['code'].'/live-students/'.$studentDetail->admno.'ad.jpg';
                              @endphp
                              <div class="col-sm-6 form-validation">
                                  <label class="col-form-label">Adhaar Photo(jpg Only)</label>
                                  <input type="file" name="student_adhaar" class="form-control" placeholder="Adhaar Photo" aria-label="Name" id="adhaarInput" accept=".jpg, .jpeg, .png" />    
                                  <a href="{{Storage::disk('s3')->exists($imagePath) ? Storage::disk('s3')->temporaryUrl($imagePath, $expiresAt) : asset('students/images/no-image.jpg')}}" target="_blank"><img src="{{Storage::disk('s3')->exists($imagePath) ? Storage::disk('s3')->temporaryUrl($imagePath, $expiresAt) : asset('students/images/no-image.jpg')}}" style="width:200px;height:100px;" id="adhaar_image"></a>
                              </div>
                              @php 
                                  $dob_certificate = schoolRedisDetail()['code'].'/live-students/'.$studentDetail->admno.'dob.jpg';
                              @endphp
                              <div class="col-sm-6 form-validation">
                                  <label class="col-form-label">Birth Certificate(jpg Only)</label>
                                 
                                  <input type="file" name="dob_certificate" class="form-control" placeholder="Birth Certificate" aria-label="Name" id="dob_certificate_input" accept=".jpg, .jpeg, .png" />
                                    
                                  <a href="{{Storage::disk('s3')->exists($dob_certificate) ? Storage::disk('s3')->temporaryUrl($dob_certificate, $expiresAt) : asset('students/images/no-image.jpg')}}" target="_blank"><img src="{{Storage::disk('s3')->exists($dob_certificate) ? Storage::disk('s3')->temporaryUrl($dob_certificate, $expiresAt) : asset('students/images/no-image.jpg')}}" style="width:200px;height:100px;" id="dob_certificate_image"></a>
                              </div>
                          </div>
                          <div class="form-group row">
                              @php 
                                  $pass_book = schoolRedisDetail()['code'].'/live-students/'.$studentDetail->admno.'pass.jpg';
                              @endphp
                              <div class="col-sm-6 form-validation">
                                  <label class="col-form-label">Pass Book</label>
                                  <input type="file" name="pass_book" class="form-control" placeholder="Mark Sheet" aria-label="Name" id="pass_book_input" accept=".jpg, .jpeg, .png" />  
                                  <a href="{{Storage::disk('s3')->exists($pass_book) ? Storage::disk('s3')->temporaryUrl($pass_book, $expiresAt) : asset('students/images/no-image.jpg')}}" target="_blank"><img src="{{Storage::disk('s3')->exists($pass_book) ? Storage::disk('s3')->temporaryUrl($pass_book, $expiresAt) : asset('students/images/no-image.jpg')}}" style="width:200px;height:100px;" id="pass_book_image"></a>
                              </div>
                          </div>
                         
                          <button id="studentInformationButton" type="button" class="btn btn-success" onclick="return saveAndNext(1);">Next</button>
                      </form>   
                     <br/><br/><br/><br/>
                    </div>
                    <div id="father-information-part" class="content" role="tabpanel" aria-labelledby="father-information-part-trigger">
                        <form id="fatherInformation" action="{{route('student.parent.update-student-document')}}" method="post" enctype="multipart/form-data">
                          <input type="hidden" name="actionType" value="2">
                          <div class="form-group row">
                            @php 
                                $mark_sheet = schoolRedisDetail()['code'].'/live-students/'.$studentDetail->admno.'dmc.jpg';
                            @endphp
                            <div class="col-sm-6 form-validation">
                                <label class="col-form-label">Mark Sheet(jpg Only)</label>
                                
                                <input type="file" name="mark_sheet" class="form-control" placeholder="Mark Sheet" aria-label="Name" id="mark_sheet_input" accept=".jpg, .jpeg, .png" />
                                
                                <a href="{{Storage::disk('s3')->exists($mark_sheet) ? Storage::disk('s3')->temporaryUrl($mark_sheet, $expiresAt) : asset('students/images/no-image.jpg')}}" target="_blank"><img src="{{Storage::disk('s3')->exists($mark_sheet) ? Storage::disk('s3')->temporaryUrl($mark_sheet, $expiresAt) : asset('students/images/no-image.jpg')}}" style="width:200px;height:100px;" id="mark_sheet_image">
                            </div>
                             @php 
                                  $pb_certificate = schoolRedisDetail()['code'].'/live-students/'.$studentDetail->admno.'pb.jpg';
                              @endphp
                              <div class="col-sm-6 form-validation">
                                  <label class="col-form-label">Pre-Board Result (New student only)(jpg Only)</label>
                                 
                                  <input type="file" name="pb_certificate" class="form-control" placeholder="Mark Sheet" aria-label="Name" id="pb_certificate_input" accept=".jpg, .jpeg, .png" />           
                                  <a href="{{Storage::disk('s3')->exists($pb_certificate) ? Storage::disk('s3')->temporaryUrl($pb_certificate, $expiresAt) : asset('students/images/no-image.jpg')}}" target="_blank"><img src="{{Storage::disk('s3')->exists($pb_certificate) ? Storage::disk('s3')->temporaryUrl($pb_certificate, $expiresAt) : asset('students/images/no-image.jpg')}}" style="width:200px;height:100px;" id="pb_certificate_image"></a>
                              </div>
                          </div>   
                          <button type="button" class="btn btn-primary" onclick="stepper.previous()">Previous</button>
                          <button id="fatherInformationButton" type="button" class="btn btn-success" onclick="return saveAndNext(2);">Next</button>
                          <br>
                        </form>  
                        
                    </div>
                    <div id="mother-information-part" class="content" role="tabpanel" aria-labelledby="mother-information-part-trigger">
                      <form id="motherInformation" action="{{route('student.parent.update-student-document')}}" method="post" enctype="multipart/form-data">
                          <input type="hidden" name="actionType" value="3">
                          <div class="form-group row">
                              @php 
                                  $school_living_certificate = schoolRedisDetail()['code'].'/live-students/'.$studentDetail->admno.'slc.jpg';
                              @endphp
                              <div class="col-sm-6 form-validation">
                                  <label class="col-form-label">School Leaving Certificate/TC(jpg Only)</label>
                                
                                  <input type="file" name="school_living_certificate" class="form-control" placeholder="Birth Certificate" aria-label="Name" id="school_living_certificate_input" accept=".jpg, .jpeg, .png" />
                                 
                                  <a href="{{Storage::disk('s3')->exists($school_living_certificate) ? Storage::disk('s3')->temporaryUrl($school_living_certificate, $expiresAt) : asset('students/images/no-image.jpg')}}" target="_blank"><img src="{{Storage::disk('s3')->exists($school_living_certificate) ? Storage::disk('s3')->temporaryUrl($school_living_certificate, $expiresAt) : asset('students/images/no-image.jpg')}}" style="width:200px;height:100px;" id="school_living_certificate_image"></a>
                              </div>
                              @php 
                                  $character_certificate = schoolRedisDetail()['code'].'/live-students/'.$studentDetail->admno.'cc.jpg';
                              @endphp
                              <div class="col-sm-6 form-validation">
                                  <label class="col-form-label">Character/ Bonafide Certificate(New student only)(jpg Only)</label>
                                  
                                  <input type="file" name="character_certificate" class="form-control" placeholder="Mark Sheet" aria-label="Name" id="character_certificate_input" accept=".jpg, .jpeg, .png" />
                                  
                                  <a href="{{Storage::disk('s3')->exists($character_certificate) ? Storage::disk('s3')->temporaryUrl($character_certificate, $expiresAt) : asset('students/images/no-image.jpg')}}" target="_blank"><img src="{{Storage::disk('s3')->exists($character_certificate) ? Storage::disk('s3')->temporaryUrl($character_certificate, $expiresAt) : asset('students/images/no-image.jpg')}}" style="width:200px;height:100px;" id="character_certificate_image"></a>
                              </div>
                              
                              
                          </div>
                          <button type="button" class="btn btn-primary" onclick="stepper.previous()">Previous</button>
                          <button id="motherInformationButton" type="button" class="btn btn-success" onclick="return saveAndNext(3);">Save</button>
                          
                      </form> 
                      <br/><br/><br/><br/> 
                      
                    </div>
                  </div>
                </div>
              </div>
            </div>
            </div>			
		</div>
	  </div>
    </section>
 </div>
 @include("parents.modal")
@endsection
@push('web-scripts')
<script src="{{asset('adminlte/plugins/bs-stepper/js/bs-stepper.min.js')}}"></script>
<script src="{{asset('js/cropper.min.js')}}"></script>
<script>
    let cropper, cropper_one, cropper_two, cropper_three, cropper_four, cropper_five, cropper_six,viewImage, hideModal; // Declare cropper instances globally
    let imagePreview = '';
    var AdhaarImage, birthCertificate, markSheet, slc, cc, pbc, pb; // Declare cropper instances globally
    const cropSaveButton = document.getElementById('crop-save');
    const imageTypeInput = document.getElementById('image_type');

    const MAX_FILE_SIZE = 100 * 1024; // 100 KB

    function resizeAndCompressImage(canvas, maxWidth = 800, maxHeight = 800, quality = 0.7) {
        const ratio = Math.min(maxWidth / canvas.width, maxHeight / canvas.height); // Calculate ratio for resizing
        const newWidth = canvas.width * ratio;
        const newHeight = canvas.height * ratio;
        
        // Create a new canvas for the resized image
        const resizedCanvas = document.createElement('canvas');
        const resizedContext = resizedCanvas.getContext('2d');
        
        // Set new canvas dimensions
        resizedCanvas.width = newWidth;
        resizedCanvas.height = newHeight;
        
        // Draw the resized image onto the new canvas
        resizedContext.drawImage(canvas, 0, 0, newWidth, newHeight);

        // Compress the image with quality setting (0-1 range)
        const compressedImage = resizedCanvas.toDataURL('image/jpeg', quality); // Using 'image/jpeg' for compression
        
        return compressedImage;
    }

    function initializeCropper(imageSrc, type) {

        if (type === 'Adhaar' && cropper) {
            cropper.destroy();
        }

        if (type === 'Adhaar') {
            imagePreview = document.getElementById('adhaar-image-preview');
            imagePreview.src = imageSrc;
            cropper = new Cropper(imagePreview, {
                aspectRatio: NaN,
                viewMode: 0,
                autoCropArea: 0.8,
                responsive: true,
                cropBoxResizable: true,
                cropBoxMovable: true,
            });
        } else if(type == 'BirthCertificate') {
            imagePreview = document.getElementById('birth-certificate-image-preview');
            imagePreview.src = imageSrc;
            cropper_one = new Cropper(imagePreview, {
                aspectRatio: NaN,
                viewMode: 0,
                autoCropArea: 0.8,
                responsive: true,
                cropBoxResizable: true,
                cropBoxMovable: true,
            });
        } else if(type == 'markSheet') {
            imagePreview = document.getElementById('mark-sheet-image-preview');
            imagePreview.src = imageSrc;
            cropper_two = new Cropper(imagePreview, {
                aspectRatio: NaN,
                viewMode: 0,
                autoCropArea: 0.8,
                responsive: true,
                cropBoxResizable: true,
                cropBoxMovable: true,
            });
        } else if(type == 'SLC') {
            imagePreview = document.getElementById('slc-image-preview');
            imagePreview.src = imageSrc;
            cropper_three = new Cropper(imagePreview, {
                aspectRatio: NaN,
                viewMode: 0,
                autoCropArea: 0.8,
                responsive: true,
                cropBoxResizable: true,
                cropBoxMovable: true,
            });
        } else if(type == 'CC') {
            imagePreview = document.getElementById('cc-image-preview');
            imagePreview.src = imageSrc;
            cropper_four = new Cropper(imagePreview, {
                aspectRatio: NaN,
                viewMode: 0,
                autoCropArea: 0.8,
                responsive: true,
                cropBoxResizable: true,
                cropBoxMovable: true,
            });
        } else if(type == 'PBC') {
            imagePreview = document.getElementById('pbc-image-preview');
            imagePreview.src = imageSrc;
            cropper_five = new Cropper(imagePreview, {
                aspectRatio: NaN,
                viewMode: 0,
                autoCropArea: 0.8,
                responsive: true,
                cropBoxResizable: true,
                cropBoxMovable: true,
            });
        } else if(type == 'PB') {
            imagePreview = document.getElementById('pb-image-preview');
            imagePreview.src = imageSrc;
            cropper_six = new Cropper(imagePreview, {
                aspectRatio: NaN,
                viewMode: 0,
                autoCropArea: 0.8,
                responsive: true,
                cropBoxResizable: true,
                cropBoxMovable: true,
            });
        } 
    }

    document.addEventListener('DOMContentLoaded', function () {
        window.stepper = new Stepper(document.querySelector('.bs-stepper'))

         // Add event listener to each step button to toggle content visibility
        const stepButtons = document.querySelectorAll('.step-trigger');

        stepButtons.forEach(button => {
            button.addEventListener('click', function () {
                // Get the target content section
                const targetContent = document.querySelector(this.getAttribute('aria-controls'));

                // Toggle the visibility of the target content
                if (targetContent.style.display === 'none') {
                    targetContent.style.display = 'block';
                } else {
                    targetContent.style.display = 'none';
                }
            });
        });
    });

    async function saveAndNext(i) {
        let form;
        let formData;
        let submitButton;
        let originalText;
        let messageText;
        let actionType;
        switch(i) {
            case 1:
              form = document.getElementById('studentInformation');
              formData = new FormData(form);

              formData.append('AdhaarImage', AdhaarImage);
              formData.append('birthCertificate', birthCertificate);
              formData.append('pb', pb);

              submitButton = $("#studentInformationButton");
              originalText = submitButton.text();
              messageText = 'Stident informations has been updated';
              actionType = false;
              break;
            case 2:
              // Collect father info
              form = document.getElementById('fatherInformation');
              formData = new FormData(form);

              formData.append('markSheet', markSheet);
              formData.append('pbc', pbc);

              submitButton = $("#fatherInformationButton");
              originalText = submitButton.text();
              messageText = 'Father information has been updated';
              actionType = false;
              break;
            case 3:
              // Collect mother info
              form = document.getElementById('motherInformation');
              formData = new FormData(form);

              formData.append('slc', slc);
              formData.append('cc', cc);

              submitButton = $("#motherInformationButton");
              originalText = submitButton.text();
              messageText = 'Mother information has been updated';
              actionType = false;
              break;
        }

        // AJAX request options
        const options = {
            type:  'POST',
            data: formData,
            url:  "{{ route('student.parent.update-student-document') }}",  // Your route
            headers: { Accept: "application/json" },
            dataType: 'json',
            processData: false,  // Necessary for sending FormData
            contentType: false,  // Necessary for sending FormData
            beforeSend: function () {
                submitButton.prop('disabled', true).text('Updating...');  // Disable button
            },
            complete: function () {
                submitButton.prop('disabled', false).text(originalText);  // Re-enable button
            }
        };

        try {
            if(i == 3) {
                const response = await ajaxRequest(options);  // Make the AJAX request
                if(response.success && response.uploadStatus) {
                    Swal.fire({
                        title: 'Success!',
                        text: response.message,
                        icon: 'success',
                        timer: 1000,
                        timerProgressBar: true,
                        willClose: () => {
                            location.reload(true);
                        }
                    })
                } else {
                    location.reload(true); 
                } 
            } else {
                const response = await ajaxRequest(options);  // Make the AJAX request
                if(response.success && response.uploadStatus) {
                    Swal.fire({
                        title: 'Success!',
                        text: response.message,
                        icon: 'success',
                        timer: 1000,
                        timerProgressBar: true,
                        willClose: () => {
                            window.stepper.next();
                        }
                    })
                } else {
                    window.stepper.next(); 
                }
            }
        } catch (error) {
            console.log(error);
            if (error.status === 'error') {
                const errors = error.xhr.responseJSON.errors;  // Handle validation errors
                await renderErrors(errors);  // Use a common function to render errors
            } else {
                alert('An error occurred. Please try again.');  // Generic error message
            }
        }
    }

     // Function to handle the image preview update
    function handleImagePreview(inputId, imageId) {
        const inputElement = document.getElementById(inputId);
        const imageElement = document.getElementById(imageId);
        inputElement.addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    imageElement.src = e.target.result; // Update the image preview
                };
                reader.readAsDataURL(file); // Read the selected file as a data URL (base64 encoded)
            }
        });
    }

    $(document).on("change", "#adhaarInput", function(e) {
        var reader = new FileReader();
        reader.onload = function (event) {
            imageTypeInput.value = 'Adhaar'; // Set image type
            initializeCropper(event.target.result, 'Adhaar');
            $('#imageAdhaarCropModal').modal('show');
        };
        reader.readAsDataURL(e.target.files[0]);
    });

    $(document).on("change", "#dob_certificate_input", function(e) {
        var reader = new FileReader();
        reader.onload = function (event) {
            imageTypeInput.value = 'BirthCertificate'; // Set image type
            initializeCropper(event.target.result, 'BirthCertificate');
            $('#imagebirthCertificateCropModal').modal('show');
        };
        reader.readAsDataURL(e.target.files[0]);
    });

    $(document).on("change", "#mark_sheet_input", function(e) {
        var reader = new FileReader();
        reader.onload = function (event) {
            imageTypeInput.value = 'markSheet'; // Set image type
            initializeCropper(event.target.result, 'markSheet');
            $('#imageMarkSheetCropModal').modal('show');
        };
        reader.readAsDataURL(e.target.files[0]);
    });

    $(document).on("change", "#school_living_certificate_input", function(e) {
        var reader = new FileReader();
        reader.onload = function (event) {
            imageTypeInput.value = 'SLC'; // Set image type
            initializeCropper(event.target.result, 'SLC');
            $('#imageSLCCropModal').modal('show');
        };
        reader.readAsDataURL(e.target.files[0]);
    });

    $(document).on("change", "#character_certificate_input", function(e) {
        var reader = new FileReader();
        reader.onload = function (event) {
            imageTypeInput.value = 'CC'; // Set image type
            initializeCropper(event.target.result, 'CC');
            $('#imageCCCropModal').modal('show');
        };
        reader.readAsDataURL(e.target.files[0]);
    });

    $(document).on("change", "#pb_certificate_input", function(e) {
        var reader = new FileReader();
        reader.onload = function (event) {
            imageTypeInput.value = 'PBC'; // Set image type
            initializeCropper(event.target.result, 'PBC');
            $('#imagePBCCropModal').modal('show');
        };
        reader.readAsDataURL(e.target.files[0]);
    });

    $(document).on("change", "#pass_book_input", function(e) {
        var reader = new FileReader();
        reader.onload = function (event) {
            imageTypeInput.value = 'PB'; // Set image type
            initializeCropper(event.target.result, 'PB');
            $('#imagePBCropModal').modal('show');
        };
        reader.readAsDataURL(e.target.files[0]);
    });

    $(document).on("click", "#adhaar-crop-save, #birth-certificate-crop-save,  #mark-sheet-crop-save,  #slc-crop-save, #cc-crop-save, #pbc-crop-save, #pb-crop-save", function(e) {
        e.preventDefault();
        let canvas;
        if (imageTypeInput.value === 'Adhaar' && cropper) {
            canvas = cropper.getCroppedCanvas();
            AdhaarImage =  resizeAndCompressImage(canvas);
            viewImage = document.getElementById('adhaar_image');
            hideModal = $("#imageAdhaarCropModal");
        } else if (imageTypeInput.value === 'BirthCertificate' && cropper_one) {
            canvas = cropper_one.getCroppedCanvas();
            birthCertificate = resizeAndCompressImage(canvas);
            viewImage = document.getElementById('dob_certificate_image');
            hideModal = $("#imagebirthCertificateCropModal");
        } else if (imageTypeInput.value === 'markSheet' && cropper_two) {
            canvas = cropper_two.getCroppedCanvas();
            markSheet = resizeAndCompressImage(canvas);
            viewImage = document.getElementById('mark_sheet_image');
            hideModal = $("#imageMarkSheetCropModal");
        } else if (imageTypeInput.value === 'SLC' && cropper_three) {
            canvas = cropper_three.getCroppedCanvas();
            slc = resizeAndCompressImage(canvas); 
            viewImage = document.getElementById('school_living_certificate_image');
            hideModal = $("#imageSLCCropModal");
        } else if (imageTypeInput.value === 'CC' && cropper_four) {
            canvas = cropper_four.getCroppedCanvas();
            cc = resizeAndCompressImage(canvas);
            viewImage = document.getElementById('character_certificate_image');
            hideModal = $("#imageCCCropModal");
        } else if (imageTypeInput.value === 'PBC' && cropper_five) {
            canvas = cropper_five.getCroppedCanvas();
            pbc = resizeAndCompressImage(canvas);
            viewImage = document.getElementById('pb_certificate_image');
            hideModal = $("#imagePBCCropModal");
        } else if (imageTypeInput.value === 'PB' && cropper_six) {
            canvas = cropper_six.getCroppedCanvas();
            pb = resizeAndCompressImage(canvas);
            viewImage = document.getElementById('pass_book_image');
            hideModal = $("#imagePBCropModal");
        }

        if (canvas) {
            const croppedImage = canvas.toDataURL('image/png');
            viewImage.src = croppedImage;
            viewImage.style.display = 'block';
            hideModal.modal('hide');
        }
    });
</script>
@endpush