@extends('admin.layouts.masterlayout')

@section('title')
    Add Post
@endsection

@section('Css')
    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap-select.min.css') }}">
@endsection

@section('head_title')
    Post Management
@endsection

@section('content')
    <div class="dashboard-body-content">
        <div class="dashboard-breadcrumb-section">
            <h2>Add Post</h2>
            <p><a href="{{ route('admin.post-management.index') }}"> Post List </a> / Add Post </p>
        </div>
        <form id="addPostForm" method="POST" action="{{ route('admin.post-management.store') }}" enctype="multipart/form-data">
            @csrf
            <div class="row">
                <div class="col-lg-5 mb-4 mb-lg-0">
                    <div class="ct-admin-container h-100">
                        <div class="card h-100">
                            <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                                <div class="card-title mb-0">
                                    <h2>Media</h2>
                                </div>
                            </div>
                            <div class="card-body file-upload-wrapper">
                                <div class="file-container-upload"></div>
                                <div class="discover-add-post-image-container position-relative">
                                    <div class="text-center">
                                        <img src="{{ asset('assets') }}/img/discover-upload-post.png" alt="">
                                        <p>Upload Photos</p>
                                    </div>
                                    <input type="file" name="media[]" id="media" class="file-input" multiple>
                                </div>
                                <div class="media_error_msg"></div>
                            </div>
                            {{-- Upload note --}}
                            <div class="px-3 pb-3 mb-1">
                                <p class="text-muted mb-0">
                                    <strong>📌 Note:</strong>
                                    You can upload a maximum of 🖼️ <strong>{{ dataLimit('media_count') }}</strong> media files 
                                    (images or videos). Each file must not exceed 
                                    <strong>{{ number_format(dataLimit('media_file_size') / 1024, 0) }}MB</strong> in size. 🎥
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="ct-admin-container h-100">
                        <div class="card h-100">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="card-title mb-0">
                                    <h2>Other Details</h2>
                                </div>
                            </div>
                            <div class="card-body ">
                                @if ($errors->any())
                                    <div class="alert alert-danger alert-dismissible fade show mb-5 hdo-alert">
                                        <button type="button" class="btn-close" data-bs-dismiss="alert"
                                            aria-label="btn-close"></button>
                                        <ul>
                                            @foreach ($errors->all() as $error)
                                                <li> <strong> {{ $error }} </strong> </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                                <div class="mb-4">
                                    <label for="user_id">Select User<span class="required-block">*</span> </label>
                                    <div class="auth-input-position">
                                        <select class="form-control form-menu" id="user_id" name="user_id">
                                            <option value="">Select a User</option>
                                            @foreach ($users as $user)
                                                <option value="{{ $user->id }}"
                                                    {{ old('user_id') == $user->id ? 'selected' : '' }}>
                                                    {{ $user->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/role-icon.png') }}" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <label for="category_id">Select Category<span class="required-block">*</span> </label>
                                    <div class="auth-input-position">
                                        <select class="form-control form-menu" id="category_id" name="category_id">
                                            <option value="">Select Category</option>
                                            @foreach ($postCategories as $category)
                                                <option value="{{ $category->id }}"
                                                    {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                                    {{ $category->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/post-category-name.png') }}" alt="">
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="mb-4">
                                    <label for="address">Address<span class="required-block">*</span></label>
                                    <div class="auth-input-position">
                                        <input type="text" name="address" id="autocomplete" placeholder="Enter Address"
                                            class="form-control" value="{{ old('address') }}" required>
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets') }}/img/location.png" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <label for="tagged_user_ids">Tag People</label>
                                    <div class="">
                                      <div class="auth-input-position multi-select-input tag-people-select">
                                          <select name="tagged_user_ids[]" id="tagged_user_ids"
                                            class="w-100 form-menu selectpicker" multiple data-live-search="true">
                                            <option value="" disabled>Select Users</option>
                                        </select>
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets') }}/img/tag-icon.png" alt="">
                                        </div>
                                      </div>
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <label for="caption">Caption<span class="required-block"></span></label>
                                    <div class="auth-input-position">
                                        <textarea name="caption" id="caption" class="form-control textarea caption-textarea" placeholder="Enter Caption"
                                            required>{{ old('caption') }}</textarea>
                                    </div>
                                </div>
                                <div>
                                    <label for="visibility">Post Visibility<span class="required-block">*</span></label>
                                    <div class="auth-input-position">
                                        <select name="visibility" id="visibility"
                                            class="form-select form-control post-form">
                                            <option value="1" {{ old('visibility') == '1' ? 'selected' : '' }}>Visible
                                            </option>
                                            <option value="0" {{ old('visibility') == '0' ? 'selected' : '' }}>
                                                Invisible
                                            </option>
                                        </select>
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets') }}/img/visibility.png" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-check mt-3">
                                    <input type="checkbox" name="is_discover" id="is_discover" class="form-check-input"
                                        value="1" {{ old('is_discover') ? 'checked' : '' }}>
                                    <label class="form-check-label show-to-users-label" for="is_discover">
                                        Add Post Into Discover List
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex gap-3 submit-container">
                <a href="{{ route('admin.post-management.index') }}" class="ct-outline-btn">Cancel</a>
                {{-- if click this then take value with status="publish" --}}
                <button type="submit" name="btn_action" class="ct-btn add_btn" value="publish"> <span>Publish</span>
                </button>
                {{-- if click this then take value with status="draft" --}}
                <button type="submit" name="btn_action" class="ct-btn add_btn" value="draft"> <span>Save as
                        Draft</span>
                </button>
            </div>
        </form>
    </div>
@endsection

@section('script')
    <script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&libraries=places"></script>
    <script src="{{ asset('assets/js/fileUploads.js') }}"></script>
    <script src="{{ asset('assets/js/bootstrap-tagsinput.js') }}"></script>
    <script src="{{ asset('assets/js/select2.min.js') }}"></script>
    <script src="{{ asset('assets/js/bootstrap-select.min.js') }}"></script>
    <script>
        window.uploadLimits = {
            media_count: {{ dataLimit('media_count') }}
        };

        function initAutocomplete() {
            const input = document.getElementById('autocomplete');
            const autocomplete = new google.maps.places.Autocomplete(input, {
                types: ['geocode']
            });

            autocomplete.addListener('place_changed', () => {
                const place = autocomplete.getPlace();
                if (!place.geometry) {
                    console.warn("No geometry returned from place autocomplete.");
                    return;
                }
            });
        }

        // Initialize when the page loads
        google.maps.event.addDomListener(window, 'load', initAutocomplete);

        $(document).ready(function() {
            $('.selectpicker').selectpicker();

            // Upload Media
            $("#media").fileUpload({
                maxFileSize: 20,
                allowedFileTypes: ['jpg', 'gif', 'jpeg', 'png', 'mp4', 'mov', 'avi'],
                parentsElementOfInputFiles: 'file-upload-wrapper',
                appendFilesClass: 'file-container-upload',
                isShowProgressBar: 0,
            });

            let clickedButton = null;

            $('.add_btn').on('click', function () {
                clickedButton = this; // Save reference to clicked button
            });

            // Change Media File Input
            $(document).on('change', '#media', function() {
                const container = $('.discover-add-post-image-container');
                const files = $(this).prop('files');

                if (files && files.length > 0) {
                    container.addClass('show-discover-add-post');
                } else {
                    container.removeClass('show-discover-add-post');
                }
            });

            // Remove Image Btn
            $(document).on('click', '.ct-file-close-icon', function() {
                // Use timeout to ensure DOM updates first (file gets removed)
                setTimeout(function() {
                    const fileCount = $('.file-container-upload .ct-file-image').length;
                    const container = $('.discover-add-post-image-container');

                    if (fileCount === 0) {
                        container.removeClass('show-discover-add-post');
                    }
                }, 50); // Small delay to let the plugin finish removing the element
            });


            // On Changes: User Selection
            $('#user_id').on('change', function() {
                let userId = $(this).val();
                let $tagged = $('#tagged_user_ids');

                // Fully reset select
                $tagged.selectpicker('val', []);
                $tagged.html('');
                $tagged.selectpicker('destroy');

                if (userId) {
                    // Add loading option, but DO NOT initialize yet
                    $tagged.append('<option disabled>Loading followers...</option>');

                    // Now initialize so loading is shown
                    $tagged.selectpicker();

                    // AJAX call
                    $.ajax({
                        url: '{{ route('admin.post-management.get-follower-users') }}',
                        type: 'POST',
                        data: {
                            user_id: userId,
                            _token: $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            // Clear old options including loading
                            $tagged.html('');
                            if (response.status && response.followers.length > 0) {
                                $tagged.append(
                                    '<option value="" disabled hidden>Select Users</option>'
                                    );
                                $.each(response.followers, function(index, user) {
                                    $tagged.append(
                                        `<option value="${user.id}">${user.name}</option>`
                                        );
                                });
                            } else {
                                $tagged.append(
                                    '<option value="" disabled>No Users found</option>');
                            }

                            // Re-initialize and clear selection
                            $tagged.selectpicker('destroy');
                            $tagged.selectpicker();
                            $tagged.selectpicker('val', []);
                        },
                        error: function() {
                            $tagged.html('').append(
                                '<option value="" disabled>No Users found</option>');
                            $tagged.selectpicker('destroy');
                            $tagged.selectpicker();
                            $tagged.selectpicker('val', []);
                        }
                    });
                } else {
                    // If no user selected
                    $tagged.html('<option value="" disabled hidden>Select Users</option>');

                    $tagged.selectpicker();
                    $tagged.selectpicker('val', []);
                }
            });

            // Custom method to validate file extensions for multiple files
            $.validator.addMethod("extensionCheck", function(value, element, param) {
                const allowedExtensions = param; // e.g. ['jpg', 'jpeg', ...]
                const files = element.files;

                if (!files || files.length === 0) return true; // no file = no extension check

                for (let i = 0; i < files.length; i++) {
                    const ext = files[i].name.split('.').pop().toLowerCase();
                    if (!allowedExtensions.includes(ext)) {
                        return false;
                    }
                }
                return true;
            }, "Invalid file type.");

            $.validator.addMethod("fileCount", function(value, element) {
                var max = parseInt(window.uploadLimits.media_count) || 20;
                return element.files.length <= max;
            }, function() {
                var max = parseInt(window.uploadLimits.media_count) || 20;
                return "You can upload a maximum of " + max + " files.";
            });

            $('#addPostForm').validate({
                rules: {
                    user_id: {
                        required: true
                    },
                    category_id: {
                        required: true
                    },
                    address: {
                        required: true
                    },
                    "media[]": {
                        required: true,
                        extensionCheck: ['jpg', 'jpeg', 'png', 'gif', 'mp4', 'mov', 'avi', 'webm'],
                        fileCount: true,
                    },
                },
                messages: {
                    "media[]": {
                        extensionCheck: "Allowed file types: jpg, jpeg, png, gif, mp4, mov, avi, webm.",
                    }
                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") === "media[]") {
                        $(".media_error_msg").html(error);
                    } else {
                        error.insertAfter(element);
                    }
                },
                submitHandler: function(form) {
                    // Disable all buttons and add loader class
                    $('.add_btn').attr('disabled', true).addClass('loader-active');
                    // Hide all other buttons except the one clicked
                    $('.add_btn').not(clickedButton).hide();
                    form.submit();
                }
            });
        });
    </script>
@endsection