@extends('admin.masterv2')
@section('styleSheet')

        <link rel="stylesheet" type="text/css" href="{{ asset('assets/plugins/cropper/cropper.min.css') }}"/> 
    <!-- END PAGE LEVEL STYLES -->
@endsection
@section('content')


    <div class="page-content-wrapper">
        <div class="page-content">
            @include('admin.includesV2.adminHeader', 
                [
                    'pageRoute' => route('listItem'), 
                    'pageName' => 'Edit Item Info',
                    'addItemRoute' => route('newListItem', ['id' => 'new']),
                    'addItemName' => 'Add List Item',
                ])
            <!-- BEGIN PAGE CONTENT-->
            <div class="row">
                <div class="col">
                    <form  name="listForm" id="listForm" class="custom form nees-validation" method="POST" action="{{ route('storeListItem') }}" enctype="multipart/form-data" novalidate>
                                @csrf
                                <div class="row">
                                    <p>
                                    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#imageUploadContainer" aria-expanded="false" aria-controls="collapseExample">
                                      Upload Image
                                    </button>
                                    </p>
                                  <div class="collapse" id="imageUploadContainer">
                                    <div class="card card-body">
                                        <div class="row justify-content-between">
                                            <div class="col-md-4">
                                                <div class="input-group mb-3">
                                                    <input type="file" name="image" class="form-control" id="uploadImage" accept="image/*" aria-describedby="inputGroupFileAddon03" aria-label="Upload">
                                                    <input type="hidden" id="croppedImageData" name="cropped_image_data">
                                                  </div>
                                                  <div class="alert alert-primary" role="alert">1. Choose file, 2. Crop and resize and 3.Upload/Save</div>
                    
                                                    <img id="cropImage" style="max-width: 100%; display: none;">
                                                    
                                            </div> 
                                            <div class="col-md-5 d-flex flex-column justify-content-center align-items-center">
                                                
                                                <div class="inline-block">
                                                <button class="btn btn-primary" id="cropButton" style="display: none;" type="button">Crop & Resize</button>
                                                <button class="btn btn-primary" id="uploadButton" style="display: none;" type="button">Upload/Save</button>
                                                </div>
                                                <div id="resizedImageContainer" style="margin-top: 20px;"></div>
                                            </div>
                                                  
                                        </div> 
                                    </div>
                                  </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col-md-3">
                                      
                                        @if($item->image!==null)
                                        <img src="{{ asset('storage/uploads/lists/thumbnail') }}/{{$item->image}}" style="width: 200px;background:#fff" />
                                        @else
                                        <img src="{{ asset('assets/frontend/images/avatar.png') }}" style="width: 200px;background:#fff" />
                                        @endif
                                    </div>
                                    <div class="col-md-9">
                                        <div class="row form-group mb-3">
                                                
                                            <div class="col-md-6 form-group">
                                                <label class="form-label">Title</label>
                                                <input type="hidden" class="form-control" placeholder="List Id" name="list_id" value="{{$item->id}}" />
                                                <input type="text" class="form-control" placeholder="Title" name="title" value="{{$item->title}}" required />
                                                
                                            </div>
                                            <div class="col-md-3 form-group">
                                                <label class="form-label">View Order</label>
                                                <input type="text" class="form-control" placeholder="eg: 1" name="view_order" value="{{$item->view_order}}" />
                                            </div>
                                            <div class="col-md-3">
                                                <label class="form-label">Status</label>
                                                <select class="form-control form-select" id="status" name="status">
                                                    <option value=""></option>
                                                    <option value="Y" {{!empty($item->status) && $item->status == 'Y' ? 'selected' : ''}}>Show</option>
                                                    <option value="N" {{!empty($item->status) && $item->status == 'N' ? 'selected' : ''}}>Inactive</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row form-group mb-3">
                                            <div class="col form-group">
                                                <label class="form-label">Sub Title</label>
                                                <input type="text" required class="form-control" placeholder="Sub Title" name="sub_title" value="{{$item->sub_title}}" />
                                            </div>
                                            <div class="col">
                                                <label class="form-label">Page</label>
                                                <select id="page_id" class="form-control form-select" name="page_id" required>
                                                    <option value="">-- Select Page --</option>
                                                    @foreach($pages as $page)
                                                        <option value="{{$page->page_id}}" data-type="{{$page->page_type}}" {{!empty($item) && $item->page_id == $page->page_id ? 'selected' : ''}}>{{$page->page_name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row form-group mb-3">
                                            <div class="col">
                                                <label class="form-label">Contact Link</label>
                                                @php
                                                    $links = json_decode($item->contact_link);
                                                @endphp 
                                                <input type="text" class="form-control" placeholder="facebook Link" name="contact_link[]" value="{{isset($links['0']) ? $links['0'] : ''}}" />
                                                <input type="text" class="form-control" placeholder="linkedin Link" name="contact_link[]" value="{{isset($links['1']) ? $links['1'] : ''}}" />
                                                <input type="text"  class="form-control" placeholder="twitter Link" name="contact_link[]" value="{{isset($links['2']) ? $links['2'] : ''}}" />
                                            </div>
                                            <div class="col">
                                                <label class="form-label">Mobile</label>
                                                <input type="text" required class="form-control" placeholder="Mobile Number" name="contact" value="{{$item->contact}}" />
                                            </div>
                                            <div class="col">
                                                <label class="form-label">Qualification/Degrees</label>
                                                <textarea id="qualification" name="qualification" class="form-control" style="height:100px">{!! htmlspecialchars_decode($item->qualification) !!}</textarea>
                                            </div>
                                        </div>
                                    </div>    
                                </div> 
                                
                                <div class="row form-group">
                                    <div class="col">
                                        <textarea class="ckeditor form-control" name="description">{{!empty($item->description) ? $item->description : ''}}</textarea>
                                    </div>
                                </div>
                                
                                <div class="row mt-3 mb-5">
                                    <div class="col mb-5">
                                        <button type="submit" class="btn btn-success btn-lg pull-right rounded-0"> Update / Save </button>
                                    </div>
                                </div>
                            </form>
                </div>
            </div>
            <!-- END PAGE CONTENT-->
        </div>
    </div>
@endsection

@section('customJs')

<script type="text/javascript" src="{{ asset('assets/plugins/ckeditor_4.22.1/ckeditor.js') }}"></script>
<script src="{{ asset('assets/plugins/cropper/cropper.min.js') }}"></script>
<script>



        $(document).ready(function () {
    $("#listForm").validate({
        rules: {
            title: {
                required: true,
            },
            page_id: {
                required: true,
            },
            status: {
                required: true,
            },
            qualification:{
                maxlength: 250,
            }
        },
        messages: {
            title: {
                required: "Please provide a Title",
            },
            page_id: {
                required: "You have to select a page",
            },
            qualification:{
                maxlength: "Maximum 250 characters"
            }
        },
        errorElement: "div",
        errorPlacement: function (error, element) {
            var feedbackElement = element.siblings('.invalid-feedback');
            if (feedbackElement.length) {
                feedbackElement.html(error.html());
            } else {
                error.addClass("invalid-feedback");
                element.closest(".form-group").append(error);
            }
        },
        // errorPlacement: function (error, element) {
        //     error.addClass("invalid-feedback"); // Bootstrap's error class
        //     element.closest(".form-group").append(error);
        // },
        highlight: function (element) {
            $(element).addClass("is-invalid").removeClass("is-valid");
        },
        unhighlight: function (element) {
            $(element).addClass("is-valid").removeClass("is-invalid");
        },
        submitHandler: function (form) {
            // Add 'was-validated' class to trigger Bootstrap validation
            form.classList.add('was-validated');
            form.submit(); // Perform the default form submission
        }
    });
});



</script>    
    <script>
$(document).ready(function() {
    var cropper;
    var $img = $('#cropImage');
    var maxSizeInKB = 512;

    $('#uploadImage').on('change', function(event) {
        var file = event.target.files[0];
        if (!file) return;

        var reader = new FileReader();
        reader.onload = function(e) {
            $img.attr('src', e.target.result).show();

            // Initialize Cropper.js
            cropper = new Cropper($img[0], {
                aspectRatio: 1 / 1,
                viewMode: 1,
                autoCropArea: 1,
                scalable: true,
                zoomable: true,
            });

            $('#cropButton').show();
        };
        reader.readAsDataURL(file);
    });

    $('#cropButton').on('click', function() {
        var croppedCanvas = cropper.getCroppedCanvas({
            fillColor: '#fff',
        });

        // Resize the image to limit its size to 512KB
        function resizeImage(canvas, maxSizeInKB) {
            var quality = 0.9;
            var resizedDataUrl;

            do {
                resizedDataUrl = canvas.toDataURL('image/jpeg', quality);
                var fileSizeInKB = dataURLToBlob(resizedDataUrl).size / 1024;
                quality -= 0.05;
            } while (fileSizeInKB > maxSizeInKB && quality > 0.1);

            return resizedDataUrl;
        }

        var resizedDataUrl = resizeImage(croppedCanvas, maxSizeInKB);
        // Display the resized image inside the div
        $('#resizedImageContainer').html('<img src="' + resizedDataUrl + '" alt="Resized Image" style="max-width: 100%;">');

        // Store the resized image data in the hidden input
        $('#croppedImageData').val(resizedDataUrl);

        // Show the Upload/Save button
        $('#uploadButton').show();
    });

    $('#uploadButton').on('click', function(e) {
        var croppedImageData = $('#croppedImageData').val();
        
        // Check if cropped image data is present
        if (!croppedImageData) {
            alert('Please crop the image before submitting.');
            e.preventDefault(); // Prevent form submission
        }

        // Submit the form
        $('#studentForm').submit();
    });

    $('#listForm').on('submit', function(e) {
        var croppedImageData = $('#croppedImageData').val();
        
        // Prevent submission if no cropped image data
        // if (!croppedImageData) {
        //     alert('Please crop the image before submitting.');
        //     e.preventDefault(); // Prevent form submission
        // }

        // Additional form validation can go here
    });

    // Utility function to convert dataURL to Blob
    function dataURLToBlob(dataUrl) {
        var arr = dataUrl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {type:mime});
    }
});

    </script>
@endsection

@section('documentJquery')

@endsection