@extends('layouts.admin')
@section('content')

<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
            <h4 class="mb-sm-0">Create Post</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript:void(0);">Home</a></li>
                    <li class="breadcrumb-item"><a href="javascript:void(0);">Posts</a></li>
                    <li class="breadcrumb-item active">{{ !empty($post->id) ? 'Edit' : 'Create' }} Post</li>
                </ol>
            </div>
        </div>
    </div>
</div>
<!-- end page title -->

<div class="row">
    <div class="col-lg-12">
        <div class="card" id="orderList">
            <div class="card-body">
                <form class="tablelist-form {{ !empty($post->id) ? 'edit-form' : '' }}" autocomplete="off" action="{{ route('admin.posts.store') }}" method="post" enctype="multipart/form-data" novalidate name="postForm" id="postForm">
                    @csrf
                    <input type="hidden" id="id" name="id" value="{{ $post->id ?? '' }}">

                    <div class="row">
                        <!-- User Dropdown -->
                        <div class="mb-6 col-lg-6">
                            <label for="user_id" class="form-label">User</label>
                            <select id="user_id" name="user_id" class="form-control" required>
                                <option value="">Select User</option>
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}" {{ old('user_id', $post->user_id ?? '') == $user->id ? 'selected' : '' }}>
                                        {{ $user->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Post Type Dropdown -->
                        <div class="mb-6 col-lg-6">
                            <label for="post_type" class="form-label">Post Type</label>
                            <select id="post_type" name="post_type" class="form-control" required>
                                <option value="">Select Post Type</option>
                                @foreach($postTypes as $postType)
                                    <option value="{{ $postType->id }}" {{ old('post_type', $post->post_type ?? '') == $postType->id ? 'selected' : '' }}>
                                        {{ $postType->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                         <!-- Description -->
                         <div class="mb-12 col-lg-12">
                            <label for="description" class="form-label">Description</label>
                            <textarea id="description" name="description" class="form-control" placeholder="Enter Description" required>{{ old('description', $post->description ?? '') }}</textarea>
                        </div>

                        <!-- Post Date -->
                        <div class="mb-3 col-lg-4">
                            <label for="postdate" class="form-label">Post Date</label>
                            <input type="text" id="postdate" name="postdate" class="form-control" placeholder="DD-MM-YYYY" required value="{{ !empty($post->postdate) ? \Carbon\Carbon::parse($post->postdate)->format('d-m-Y') : '' }}" />
                        </div>
                    </div>

                    <!-- Dynamic Fields -->
                    <div id="dynamicFields" class="row">
                        @if(!empty($post) && $post->post_type == 1) <!-- Poll -->
                            <div class="col-lg-12 mb-3">
                                <label class="form-label">Poll Question</label>
                                <input type="text" name="poll_question" class="form-control" placeholder="Enter Poll Question" required value="{{ old('poll_question', $post->poll_question ?? '') }}">
                            </div>

                            <div class="col-lg-12 mb-3">
                                <label class="form-label">Poll Options</label>
                                <div id="pollOptions">
                                    @if($post->poll_options)
                                        @foreach(json_decode($post->poll_options, true) as $option)
                                            <div class="input-group mb-2">
                                                <input type="text" name="poll_options[]" class="form-control" placeholder="Option" required value="{{ $option }}">
                                                <button type="button" class="btn btn-danger btn-sm removeOption">Remove</button>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="input-group mb-2">
                                            <input type="text" name="poll_options[]" class="form-control" placeholder="Option 1" required>
                                        </div>
                                        <div class="input-group mb-2">
                                            <input type="text" name="poll_options[]" class="form-control" placeholder="Option 2" required>
                                        </div>
                                    @endif
                                </div>
                                <button type="button" class="btn btn-sm btn-primary" id="addOption">Add More Option</button>
                            </div>
                            @elseif(!empty($post) && $post->post_type == 3) <!-- Images Post -->
                            <div class="col-lg-12 mb-3" id="imageSection">
                                <label class="form-label">Upload Images</label>
                                <div id="imageUploads">
                                    @php
                                        $images = $post->image ? json_decode($post->image, true) : [];
                                    @endphp
                                    @if(!empty($images))
                                        @foreach($images as $image)
                                            <div class="input-group mb-3">
                                                <input type="file" name="post_images[]" class="form-control image-upload" accept="image/*">
                                                <button type="button" class="btn btn-danger btn-sm removeImage">Remove</button>
                                                <div class="image-preview-container ms-2">
                                                    <img src="{{ asset('storage/'.$image) }}" alt="Image Preview" class="img-thumbnail" style="max-width: 100px; height: auto;">
                                                </div>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="input-group mb-3">
                                            <input type="file" name="post_images[]" class="form-control image-upload" accept="image/*">
                                            <button type="button" class="btn btn-danger btn-sm removeImage">Remove</button>
                                            <div class="image-preview-container ms-2"></div>
                                        </div>
                                    @endif
                                </div>
                                <button type="button" class="btn btn-sm btn-primary" id="addImage">Add More Images</button>
                            </div>

                            @elseif(!empty($post) && $post->post_type == 2) <!-- Videos Post -->
                            <div class="col-lg-12 mb-3" id="videoSection">
                                <label class="form-label">Upload Videos</label>
                                <div id="videoUploads">
                                    @php
                                        $videos = $post->post_video ? json_decode($post->post_video, true) : [];
                                    @endphp
                                    @if(!empty($videos))
                                        @foreach($videos as $video)
                                            <div class="input-group mb-3">
                                                <input type="file" name="post_videos[]" class="form-control video-upload" accept="video/*">
                                                <button type="button" class="btn btn-danger btn-sm removeVideo">Remove</button>
                                                <div class="video-preview-container ms-2">
                                                    <video width="150" controls class="img-thumbnail">
                                                        <source src="{{ asset('storage/'.$video) }}" type="video/mp4">
                                                        Your browser does not support the video tag.
                                                    </video>
                                                </div>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="input-group mb-3">
                                            <input type="file" name="post_videos[]" class="form-control video-upload" accept="video/*">
                                            <button type="button" class="btn btn-danger btn-sm removeVideo">Remove</button>
                                            <div class="video-preview-container ms-2"></div>
                                        </div>
                                    @endif
                                </div>
                                <button type="button" class="btn btn-sm btn-primary" id="addVideo">Add More Videos</button>
                            </div>
                            @endif

                    </div>

                    <div class="hstack gap-2 justify-content-between">
                        <a href="{{ route('admin.posts') }}" class="btn btn-back">Back</a>
                        <button type="submit" class="btn btn-success" id="submitBtn">{{ !empty($post->id) ? 'Update' : 'Create' }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/additional-methods.min.js"></script>
    <script src="{{ asset('assets/libs/%40ckeditor/ckeditor5-build-classic/build/ckeditor.js') }}"></script>
    <script>
        // Initialize CKEditor
        let editor;
        ClassicEditor.create(document.querySelector('#description'))
            .then(newEditor => {
                editor = newEditor;
                editor.model.document.on('change:data', function () {
                    var submitButton = document.getElementById('submitBtn');
                    if (submitButton.disabled) {
                        submitButton.disabled = false;  
                    }
                });
            })
            .catch(error => {
                console.error('Error initializing CKEditor:', error);
            });
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Function to handle image preview
            function handleImagePreview(input, previewContainer) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    
                    reader.onload = function(e) {
                        previewContainer.html(`<img src="${e.target.result}" class="img-thumbnail" style="max-width: 100px; height: auto;">`);
                    }
                    
                    reader.readAsDataURL(input.files[0]);
                    $('#submitBtn').prop('disabled', false);
                }
            }

            // Function to handle video preview
            function handleVideoPreview(input, previewContainer) {
                if (input.files && input.files[0]) {
                    var videoUrl = URL.createObjectURL(input.files[0]);
                    previewContainer.html(`
                        <video width="150" controls class="img-thumbnail">
                            <source src="${videoUrl}" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                    `);
                    $('#submitBtn').prop('disabled', false);
                }
            }

            // Dynamic fields based on post type
            $('#post_type').change(function() {
                var selectedValue = $(this).val();
                var dynamicHtml = '';
                $('#dynamicFields').empty();

                if (selectedValue == '1') { // Poll
                    dynamicHtml += `
                        <div class="col-lg-12 mb-3">
                            <label class="form-label">Poll Question</label>
                            <input type="text" name="poll_question" class="form-control" placeholder="Enter Poll Question" required>
                        </div>

                        <div class="col-lg-12 mb-3">
                            <label class="form-label">Poll Options</label>
                            <div id="pollOptions">
                                <div class="input-group mb-2">
                                    <input type="text" name="poll_options[]" class="form-control" placeholder="Option 1" required>
                                </div>
                                <div class="input-group mb-2">
                                    <input type="text" name="poll_options[]" class="form-control" placeholder="Option 2" required>
                                </div>
                            </div>
                            <button type="button" class="btn btn-sm btn-primary" id="addOption">Add More Option</button>
                        </div>
                    `;
                } else if (selectedValue == 3) { // Image
                    dynamicHtml += `
                        <div class="col-lg-12 mb-3" id="imageSection">
                            <label class="form-label">Upload Images</label>
                            <div id="imageUploads">
                                <div class="input-group mb-3">
                                    <input type="file" name="post_images[]" class="form-control image-upload" accept="image/*">
                                    <button type="button" class="btn btn-danger btn-sm removeImage">Remove</button>
                                    <div class="image-preview-container ms-2"></div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-sm btn-primary" id="addImage">Add More Images</button>
                        </div>
                    `;
                } else if (selectedValue == 2) { // Video
                    dynamicHtml += `
                        <div class="col-lg-12 mb-3" id="videoSection">
                            <label class="form-label">Upload Video</label>
                            <div id="videoUploads">
                                <div class="input-group mb-3">
                                    <input type="file" name="post_videos[]" class="form-control video-upload" accept="video/*">
                                    <button type="button" class="btn btn-danger btn-sm removeVideo">Remove</button>
                                    <div class="video-preview-container ms-2"></div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-sm btn-primary" id="addVideo">Add More Videos</button>
                        </div>
                    `;
                }

                $('#dynamicFields').html(dynamicHtml);
            });

            // Add more poll options
            $(document).on('click', '#addOption', function() {
                $('#pollOptions').append(`
                    <div class="input-group mb-2">
                        <input type="text" name="poll_options[]" class="form-control" placeholder="New Option" required>
                        <button type="button" class="btn btn-danger btn-sm removeOption">Remove</button>
                    </div>
                `);
            });

            // Remove a poll option
            $(document).on('click', '.removeOption', function() {
                $(this).closest('.input-group').remove();
            });

            // Add more image field
            $(document).on('click', '#addImage', function () {
                $('#imageUploads').append(`
                    <div class="input-group mb-3">
                        <input type="file" name="post_images[]" class="form-control image-upload" accept="image/*">
                        <button type="button" class="btn btn-danger btn-sm removeImage">Remove</button>
                        <div class="image-preview-container ms-2"></div>
                    </div>
                `);
            });

            // Remove image field
            $(document).on('click', '.removeImage', function () {
                $(this).closest('.input-group').remove();
            });

            // Add more video field
            $(document).on('click', '#addVideo', function () {
                $('#videoUploads').append(`
                    <div class="input-group mb-3">
                        <input type="file" name="post_videos[]" class="form-control video-upload" accept="video/*">
                        <button type="button" class="btn btn-danger btn-sm removeVideo">Remove</button>
                        <div class="video-preview-container ms-2"></div>
                    </div>
                `);
            });

            // Remove video field
            $(document).on('click', '.removeVideo', function () {
                $(this).closest('.input-group').remove();
            });

            // Image preview handler - for existing and dynamically added elements
            $(document).on('change', '.image-upload', function() {
                var previewContainer = $(this).siblings('.image-preview-container');
                handleImagePreview(this, previewContainer);
            });

            // Video preview handler - for existing and dynamically added elements
            $(document).on('change', '.video-upload', function() {
                var previewContainer = $(this).siblings('.video-preview-container');
                handleVideoPreview(this, previewContainer);
            });

            // Initialize datepicker
            $("#postdate").datepicker({
                dateFormat: 'dd-mm-yy',
                changeMonth: true,
                changeYear: true,
                minDate: 0
            });

            // Form Validation and Submission
            $("#postForm").validate({
                rules: {
                    user_id: { required: true },
                    description: { required: true },
                    post_type: { required: true },
                    postdate: { required: true },
                  'post_images[]': {
                        required: function() {
                            return $('#post_type').val() == 3 && $('#imageSection .image-preview-container img').length === 0;
                        },
                        extension: "jpg|jpeg|png|gif"
                    },
                    'post_videos[]': {
                        required: function() {
                            return $('#post_type').val() == 2 && $('#videoSection .video-preview-container video').length === 0;
                        },
                        extension: "mp4|mov|avi"
                    }

                },
                messages: {
                    'post_images[]': {
                        extension: "Please upload valid image files (jpg, jpeg, png, gif)"
                    },
                    'post_videos[]': {
                        extension: "Please upload valid video files (mp4, mov, avi)"
                    }
                },
                submitHandler: function (form) {
                    let formData = new FormData(form);

                    $.ajax({
                        url: form.action,
                        type: "POST",
                        data: formData,
                        processData: false,
                        contentType: false,
                        headers: {
                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                        },
                        success: function (response) {
                            Swal.fire({
                                iconHtml: `<img src="{{ asset('assets/images/success-circle.svg') }}" class="img-fluid">`,
                                text: response.message,
                                confirmButtonText: "OK",
                                customClass: {
                                    confirmButton: 'custom-ok-button-class w-sm'
                                }
                            }).then(() => {
                                window.location.href = "{{ route('admin.posts') }}";
                            });
                        },
                        error: function (xhr) {
                            if (xhr.status === 422) {
                                let errors = xhr.responseJSON.errors;
                                $.each(errors, function (key, value) {
                                    let field = $(`[name="${key}"]`);
                                    field.addClass("error");
                                    field.after(`<label class="error">${value[0]}</label>`);
                                });
                            } else {
                                Swal.fire({
                                    text: "Something went wrong. Please try later",
                                    iconHtml: `<img src="{{ asset('assets/images/error-circle.svg') }}" class="img-fluid">`,
                                    confirmButtonText: "OK",
                                    customClass: {
                                        confirmButton: 'custom-ok-button-class w-sm'
                                    }
                                });
                            }
                        }
                    });

                    return false; // Prevent default form submission
                },
                invalidHandler: function(event, validator) {
                    var firstInvalidField = $(validator.errorList[0].element);
                    $('html, body').animate({
                        scrollTop: firstInvalidField.offset().top - 100
                    }, 500);
                }
            });
        });
    </script>
@endsection