@extends('admin.masterv2')
@section('styleSheet')
    <!-- BEGIN PAGE LEVEL STYLES -->
<!-- Krajee FileInput CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.min.css" rel="stylesheet" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet">



   
    <!-- END PAGE LEVEL STYLES -->
@endsection
@section('content')
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <ul class="page-breadcrumb">
                    <li>
                        <i class="fa fa-home"></i>
                        <a href="{{route('home')}}">Dashboard</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="{{route('homePage')}}">Home Page</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="#">Sections</a>
                    </li>
                </ul>
            </div>
            <!-- END PAGE HEADER-->
            <!-- BEGIN PAGE CONTENT-->

            

            
            
            <div class="row">
                <div class="col-md-12">

                    {{-- <form id="uploadForm" action="{{ route('homeSettingPage') }}" enctype="multipart/form-data" method="POST">
                        @csrf
                        
                    </form> --}}
                    
                </div>
                <div class="col-md-12">
                    <form  class="custom form" id="homeSectionForm" method="POST" action="{{ route('homeSettingPage') }}" enctype="multipart/form-data" name="homeSettings">
                        @csrf
                        <div class="row form-group mb-3">
                            <label class="col-md-2 form-label">Section Name: <span class="required"> * </span>
                            </label>
                            <div class="col-md-10">
                                <input type="text" class="form-control" name="section_name" value="{{!empty($homeSettings) ? $homeSettings->section_name : ''}}" placeholder="Page section name" autocomplete="off" readonly>
                            </div>
                        </div>
                        <div class="row">
                            
                        </div> 
                        @php
                        $banners = array();
                        @endphp   
                        @if(!empty($homeSettings) && $homeSettings->section_name == 'header')
                            @php
                                $banners = json_decode($homeSettings->banner,true);

                            @endphp
                            <div class="row mb-3">
                                <!-- File input for new uploads -->
                                <input id="multiFiles" name="multiFiles[]" type="file" multiple>
                                
                                <!-- Hidden field to store sorted preloaded images -->
                                <input type="hidden" id="sorted-images" name="sorted_images">
                            </div>
                            <div class="row">
                                <div class="col alert alert-primary" role="alert">For best size banner image size should be 1200px X 480px</div>
                            </div>        

                        @endif
                        @if(!empty($homeSettings))
                            <input type="hidden" class="form-control" name="home_settings_id" value="{{$homeSettings->home_settings_id}}" placeholder="">
                        @endif
                        
                        
                        <div class="titleContainer">
                            <div class="header p-2">
                                <div class="row">
                                    <div class="col">
                                        <i class="fa fa-thumb-tack"></i> Popup Image
                                    </div>
                                </div>
                            </div>
                            <div class="body p-3">
                                <div class="row">
                                    @if(!empty($homeSettings->popImage))
                                    <div class="col-md-6">
                                    
                                    <img src="{{asset('storage/uploads/pages/home/popup/'.$homeSettings->popImage)}}" style="max-width: 100%;">
                            
                                    </div>
                                    @endif
                                    <div class="col-md-6">
                                        <div class="fileinput fileinput-new" data-provides="fileinput">
                                            <span class="btn default btn-file" style="border:1px solid #000">
                                                <span class="fileinput-new">Upload image / </span>
                                                <span class="fileinput-exists">Change </span>
                                                <input type="file" class="form-control" name="popImage" placeholder="" accept="image/*">
                                            </span>
                                            @if(!empty($homeSettings->popImage))
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="checkbox" name="remove_popup" value="Y">
                                                <label class="form-check-label form-label" for="remove_popup">Remove Popup</label>
                                            </div>
                                            @endif

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row form-group mb-3">
                            <label class="col-md-2 control-label">Pop Up Image:</label>
                            {{-- <div class="col-md-3">
                                <div class="fileinput fileinput-new" data-provides="fileinput">

                                    <div>
                                                                    <span class="btn default btn-file">
                                                                        <span class="fileinput-new">Select image </span>
                                                                        <span class="fileinput-exists">Change </span>
                                                                        <input type="file" class="form-control" name="popImage" placeholder="" accept="image/*">
                                                                    </span>
                                                                    @if(!empty($homeSettings->popImage))
                                                                    <div class="form-check form-check-inline">
                                                                      <input class="form-check-input" type="checkbox" name="remove_popup" value="Y">
                                                                      <label class="form-check-label form-label" for="remove_image">Remove Image</label>
                                                                    </div>
                                                                    @endif
                                    </div>
                                </div>

                            </div> --}}
                            {{-- @if(!empty($homeSettings->popImage))
                                <div class="col-md-6">
                                    <label class="col-md-2 control-label">Current Image</label>
                                    
                                    <img src="{{asset('storage/uploads/pages/home/popup/'.$homeSettings->popImage)}}" style="width: 200px; height: 150px;">
                                </div>
                            @endif --}}

                        </div>

                        <div class="row form-group mb-3">
                            <label class="col-md-2 form-label">Title: <span class="required"> * </span>
                            </label>
                            <div class="col-md-10">
                                <input type="text" class="form-control" name="title" value="{{!empty($homeSettings) ? $homeSettings->title : ''}}" placeholder="Page Title" autocomplete="off">
                            </div>
                        </div>
                        <div class="row form-group mb-3">
                            <label class="col-md-2 form-label">Description:
                            </label>
                            <div class="col-md-10">
                                <textarea class="ckeditor form-control" name="description">{{!empty($homeSettings->description) ? $homeSettings->description : ''}}</textarea>
                            </div>
                        </div>
                        <div class="row form-group mb-3">
                            <label class="col-md-2 control-label">Status: <span class="required">
                                                        * </span>
                            </label>
                            <div class="col-md-4">
                                <select class="form-control input-medium select2me"
                                        data-placeholder="Status..." name="status">
                                    <option value=""></option>
                                    <option value="Y" {{!empty($homeSettings->status) && $homeSettings->status == 'Y' ? 'selected' : ''}}>Show</option>
                                    <option value="N" {{!empty($homeSettings->status) && $homeSettings->status == 'N' ? 'selected' : ''}}>Inactive</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-actions">
                            <button type="submit" class="btn btn-success" style="float: right">Save</button>
                        </div>
                    </form>
                </div>
            </div>
            <!-- END PAGE CONTENT-->
        </div>
    </div>
@endsection

@section('customJs')
<!-- Krajee FileInput JS -->


<!-- Sortable.js -->
<script src="https://plugins.krajee.com/assets/dd65075d/js/plugins/sortable.min.js"></script>
<script src="https://plugins.krajee.com/assets/dd65075d/js/fileinput.min.js?ver=202206191928"></script>
<script type="text/javascript" src="{{ asset('') }}assets/global/plugins/ckeditor/ckeditor.js"></script>
<script>
$(document).ready(function() {
    // Convert PHP array to JSON for use in JavaScript



    // Prepare arrays for initialPreview and initialPreviewConfig
    var initialPreview = [];
    var initialPreviewConfig = [];
    var baseUrl = "{{ asset('storage/uploads/pages/home/banner') }}/";

    // Loop through banners to set up initial preview and config

//console.log(banners);
var banners = @json($banners) || [];
if(banners.length>0){
    banners.forEach(function(banner, index) {
        var imageUrl = baseUrl + banner;
        initialPreview.push(imageUrl);

        initialPreviewConfig.push({
            caption: banner.caption || banner, // Use caption or fallback to banner
            downloadUrl: imageUrl,
            description: '',
            size: 0,
            width: "120px",
            key: index + 1 // Assign unique key to each image
        });
    });
}else{
    initialPreview = [];
    initialPreviewConfig = [];
}

    // Function to handle image deletion from the frontend
    function handleImageDeletion(key) {
        // Remove the image from the file input preview
        $('.file-preview-frame[data-fileindex="' + key + '"]').remove();
        
        // Optionally update sorted images or any other state
        updateSortedImages();
    }

    // Initialize the file input with dynamic data
    $("#multiFiles").fileinput({
        initialPreview: initialPreview,
        initialPreviewAsData: true,
        initialPreviewConfig: initialPreviewConfig,
        overwriteInitial: false,
        maxFileSize: 6000,
        initialCaption: "Your Banners",
        deleteUrl: '', // Empty URL to disable AJAX deletion
        fileActionSettings: {
            showZoom: true,
            showRemove: true, // Show the remove button
            showUpload: false
        }
    }).on('filebeforedelete', function(event, key) {
        // Prevent the default AJAX request and handle the deletion manually
        event.preventDefault(); // Stop AJAX deletion
        handleImageDeletion(key); // Call custom frontend deletion function
        return false; // Return false to fully prevent the AJAX call
    });

    // Function to update sorted images after deletion or sorting
    function updateSortedImages() {
        var sortedImages = [];
        var seenImages = new Set();

        $('.file-preview-frame img').each(function() {
            var imageUrl = $(this).attr('src');
            if (imageUrl.includes('loading.gif')) {
                return; // Skip loading gifs
            }
            var imageName = imageUrl.replace(baseUrl, '');
            if (!seenImages.has(imageName)) {
                seenImages.add(imageName);
                sortedImages.push(imageName);
            }
        });

        $("#sorted-images").val(JSON.stringify(sortedImages)); // Update hidden input
    }

    // Trigger update on form submit
    $("#homeSectionForm").on('submit', function() {
        updateSortedImages();
    });

    // Adding click event for dynamically created remove buttons
    $(document).on('click', '.kv-file-remove', function() {
        var key = $(this).closest('.file-preview-frame').data('fileindex');
        handleImageDeletion(key); // Handle removal of image from the frontend
        updateSortedImages();
    });
});


</script>
   
@endsection

@section('documentJquery')
@endsection