@extends('admin.layouts.masterlayout')

@section('title')
    Edit 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>Edit Post</h2>
            <p><a href="{{ route('admin.post-management.index') }}"> Post List </a> / Edit Post </p>
        </div>
        <form id="editPostForm" method="POST" action="{{ route('admin.post-management.update', $post->id) }}"
            enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <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 ">
                                <div class="ct-file-flex">
                                    <div id="portfolio-preview-container" class="file-container-upload">
                                        @foreach ($post->files as $index => $media)
                                            <div
                                                class="ct-file-image file-upload-container file-upload-container-{{ $index }}">
                                                {{-- <a href="{{ $media->file_path }}" target="_blank"> --}}
                                                    @if ($media->file_type === 'image')
                                                        <img src="{{ $media->file_path }}"
                                                            class="ct-file-images preview-file file-preview image-preview"
                                                            alt="Image Preview"
                                                            onerror="this.src='{{ asset('assets/img/dashboard/default_img.jpg') }}'">
                                                    @elseif ($media->file_type === 'video')
                                                        <div class="position-relative video-cover-box overflow-hidden">
                                                            <video class="ct-file-images preview-file file-preview video-preview"
                                                                onerror="this.poster='{{ asset('assets/img/dashboard/default_img.jpg') }}'">
                                                                <source src="{{ $media->file_path }}" type="video/mp4">
                                                                Your browser does not support the video tag.
                                                            </video>
                                                            <div
                                                                class="play-button-box d-flex align-items-center justify-content-center">
                                                                <img src="{{ asset('assets/img/play-icon.png') }}"
                                                                    alt="play" />
                                                            </div>
                                                        </div>
                                                    @endif
                                                {{-- </a> --}}
                                                <p class="file-size-replace error"></p>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>

                            </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">User<span class="required-block">*</span></label>
                                    <div class="auth-input-position">
                                        <select class="form-control form-menu" id="user_id" name="user_id" disabled>
                                            <option value="{{ $post->user->id }}">{{ $post->user->name }}</option>
                                        </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" required>
                                            <option value="" disabled>Select Category</option>
                                            @foreach ($postCategories as $category)
                                                <option value="{{ $category->id }}"
                                                    {{ $post->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', $post->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="auth-input-position multi-select-input select-picker-disabled">
                                        <select name="tagged_user_ids[]" id="tagged_user_ids"
                                            class="w-100 form-menu selectpicker" multiple data-live-search="true" disabled>
                                            @foreach ($taggedUsers as $taggedUser)
                                                <option value="{{ $taggedUser->id }}" selected>
                                                    {{ $taggedUser->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets') }}/img/tag-icon.png" alt="">
                                        </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', $post->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" required>
                                            <option value="1"
                                                {{ old('visibility', $post->visibility) == '1' ? 'selected' : '' }}>
                                                Visible</option>
                                            <option value="0"
                                                {{ old('visibility', $post->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" {{ $post->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">
                @php
                    $btnName = $post->status === 'draft' ? 'publish' : 'update';
                @endphp
                <a href="{{ route('admin.post-management.index') }}" class="ct-outline-btn">Cancel</a>
                <button type="submit" name="btn_action" class="ct-btn add_btn" value="{{ $btnName }}"><span>
                        {{ ucfirst($btnName) }} </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/bootstrap-select.min.js') }}"></script>
    <script>
        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;
                }
            });
        }

        google.maps.event.addDomListener(window, 'load', initAutocomplete);

        $(document).ready(function() {

            $('.selectpicker').selectpicker();

            $('#editPostForm').validate({
                rules: {
                    category_id: {
                        required: true
                    },
                    address: {
                        required: true
                    },
                    visibility: {
                        required: true
                    }
                },
                errorPlacement: function(error, element) {
                    error.insertAfter(element);
                },
                submitHandler: function(form) {
                    $('.add_btn').attr('disabled', true);
                    $('.add_btn').addClass('loader-active');
                    form.submit();
                }
            });
        });
    </script>
@endsection