@extends('admin.layouts.masterlayout')

@section('title', 'Edit Tutorial')
@section('head_title', 'Event Management')

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

@section('content')
<div class="dashboard-body-content">
    <div class="dashboard-breadcrumb-section">
        <h2>Edit Tutorial</h2>
        <p><a href="{{route('admin.eventManagement', ['tab' => 'tutorial'])}}"> Event Management </a>/ Edit Tutorial</p>
    </div>
    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <form id="edit_tutorial_form" method="POST" action="{{route('admin.updateTutorial', $tutorial->id)}}" enctype="multipart/form-data">
        <div class="row">
            @csrf

            <div class="col-lg-6 mb-4">
                <div class="ct-admin-container mb-4 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>Tutorial Details</h2>
                            </div>
                        </div>
                        <div class="card-body">

                            <div class="row">
                                <div class="col-lg-12 mb-4">
                                    <label for="user_type">User Type<span class="required-star">*</span></label>
                                    <div class="auth-input-position">
                                        <select class="form-control form-menu" id="user_type" name="user_type" disabled>
                                            <option value="">Select</option>
                                            <option value="shop" {{ old('user_type', $tutorial->user_type) == 'shop' ? 'selected' : '' }}>Shop</option>
                                            <option value="artist" {{ old('user_type', $tutorial->user_type) == 'artist' ? 'selected' : '' }}>Artist</option>
                                        </select>
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/briefcase.png') }}" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-12 mb-4 {{ $tutorial->user_type == 'shop' ? '' : 'd-none' }}" id="shop_div">
                                <label for="shop_id">Select Shop</label>
                                <div class="auth-input-position">
                                    <select class="form-control form-menu" id="shop_id" name="shop_id" disabled>
                                        <option value="">-- Select a Shop --</option>
                                        @foreach($shops as $shop)
                                        <option value="{{ $shop->user_id }}" {{ old('shop_id', $tutorial->user_id) == $shop->user_id ? 'selected' : '' }}>
                                            {{ $shop->shop_name }}
                                        </option>
                                        @endforeach
                                    </select>
                                    <div class="auth-input-icon">
                                        <img src="{{asset('assets/img/dashboard/Shop.png')}}" alt="">
                                    </div>
                                </div>
                            </div>

                             <div class="col-lg-12 mb-4  {{ $tutorial->user_type == 'artist' ? '' : 'd-none' }}" id="artist_div">
                                <label for="shop_id">Select Artist</label>
                                <div class="auth-input-position">
                                    <select class="form-control form-menu" id="artist_id" name="artist_id" disabled>
                                        <option value="">-- Select a Artist --</option>
                                        
                                        @foreach($shop_artists as $shop_artist)
                                        <option value="{{ $shop_artist->artist->id }}" {{ old('artist_id', $tutorial->user_id) == $shop_artist->artist->id ? 'selected' : '' }}>
                                            {{ $shop_artist->artist->name }}
                                        </option>
                                        @endforeach
                                    </select>
                                    <div class="auth-input-icon">
                                        <img src="{{asset('assets/img/dashboard/Shop.png')}}" alt="">
                                    </div>
                                </div>
                            </div>

                              <div class="col-lg-12 mb-4 d-none" id="shop_artist_div">
                                <label for="shop_artist_id">Select Shop Artist</label>
                                <div class="auth-input-position">
                                    <select class="form-control form-menu" id="shop_artist_id" name="shop_artist_id">
                                        <option value="">-- Select an Artist --</option>
                                    </select>
                                    <div class="auth-input-icon">
                                        <img src="{{asset('assets/img/dashboard/Shop.png')}}" alt="">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-6 mb-4">
                                    <label for="title">Title<span class="required-star">*</span></label>
                                    <div class="auth-input-position">
                                        <input type="text" placeholder="Enter Your title" class="form-control" name="title" id="title" value="{{ old('title', $tutorial->title) }}">
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/mail.png') }}" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 mb-4">
                                    <label for="fee">Fee<span class="required-star">*</span></label>
                                    <div class="auth-input-position">
                                        <input type="text" placeholder="Enter Your fee" class="form-control" name="fee" id="fee" value="{{ old('fee', $tutorial->fee) }}">
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/mail.png') }}" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-4">
                                <label for="description">Description</label>
                                <div class="auth-input-position">
                                    <textarea class="form-control" id="description" name="description" placeholder="Enter Your Description">{{ old('description', $tutorial->additional_notes) }}</textarea>
                                    <div class="auth-input-icon">
                                        <img src="{{ asset('assets/img/dashboard/edit.png') }}" alt="">
                                    </div>
                                </div>
                            </div>

                            <div class="mt-4">
                                <label for="cover_image">Cover Image<span class="required-star">*</span></label>
                                <div class="ct-file-flex">
                                    <div>
                                        <div class="ct-file-container ct-file-shop-container">
                                            <input type="file" class="ct-file-input" name="cover_image" id="cover_image">
                                            <div class="d-flex gap-3 flex-wrap justify-content-center align-items-center">
                                                <img src="{{ asset('assets/img/upload-icon.png') }}" alt="">
                                                <p>Upload Image</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="preview_cover_image file-container-upload">
                                        <div class="file-container-upload">
                                            <div class="preview_business_proof_img">
                                                <div class="ct-file-image">
                                                    <img src="{{ $tutorial->cover_image }}" class="ct-file-images image-preview" onerror="this.src='{{ asset('assets/img/dashboard/default_img.jpg') }}'">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="cover_image_error_msg"></div>
                            </div>

                            <div class="mt-4 file-upload-wrapper">
                                <label for="tutorial_video">Tutorial Video<span class="required-star">*</span></label>
                                <div class="ct-file-flex">
                                    <div>
                                        <div class="ct-file-container ct-file-shop-container">
                                            <input type="file" class="ct-file-input" name="tutorial_video[]" id="tutorial_video" multiple>
                                            <div class="d-flex gap-3 flex-wrap justify-content-center align-items-center">
                                                <img src="{{ asset('assets/img/upload-icon.png') }}" alt="">
                                                <p>Upload Video</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="preview_tutorial_video file-container-upload video-upload-content">
                                        @if(!$tutorialVideos->isEmpty())
                                            @foreach ($tutorialVideos as $key => $t_video)
                                            <div class="ct-file-image existing-video" data-index="{{ $key }}">
                                                <video src="{{ asset($t_video->video) }}" controls class="ct-file-videos video-preview" style="max-width: 100%; max-height: 200px;"></video>
                                                <div class="ct-file-close-icon remove-existing-video c-cursor">
                                                    <img src="{{ asset('assets/img/round-close-icon.png') }}" alt="">
                                                </div>
                                                <input type="hidden" name="existing_video[]" value="{{ $t_video->id }}">
                                            </div>
                                            @endforeach
                                        @endif
                                    </div>
                                </div>
                                <div class="tutorial_video_error_msg"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="d-flex gap-3 submit-container">
            <a href="{{ route('admin.eventManagement', ['tab' => 'tutorial'])}}" class="ct-outline-btn text-center">Cancel</a>
            <button type="submit" class="ct-btn add_tutorial_btn"> <span>Update</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/flatpickr.js"></script>
<script>
    $(document).ready(function() {
        $("#shop_id").select2();
        $("#currency").select2();
        $("#artist_id").select2();
        $("#shop_artist_id").select2();

        $(".flatpickr").flatpickr({
            enableTime: true,
            dateFormat: "Y-m-d H:i",
        });

        // Upload Portfolio
        $("#tutorial_video").fileUpload({
            maxFileSize: 510, // 2 MB
            allowedFileTypes: ['mp4', 'mov', 'avi'], // small case
            parentsElementOfInputFiles: 'file-upload-wrapper', // Class of parent div of input files which include list of files
            appendFilesClass: 'file-container-upload', // Class of Files listed
            isShowProgressBar: 0,
        });

        $("#user_type").change(function() {
            toggleUserTypeFields();
        });

         function toggleUserTypeFields() {
            var userType = $("#user_type").val();
            if (userType === "shop") {
                $("#shop_div").removeClass('d-none');
                $("#shop_artist_div").removeClass('d-none');
                $("#artist_div").addClass('d-none');
                $("#shop_id").prop('disabled', false);
                $("#artist_id").prop('disabled', true);
                fetchShopArtists($("#shop_id").val());
            } else if (userType === "artist") {
                $("#artist_div").removeClass('d-none');
                $("#shop_div").addClass('d-none');
                $("#shop_artist_div").addClass('d-none');
                $("#artist_id").prop('disabled', false);
                $("#shop_id").prop('disabled', true);
            } else {
                $("#shop_div, #artist_div, #shop_artist_div").addClass('d-none');
                $("#shop_id, #artist_id").prop('disabled', true);
            }
        }

        // Initialize user type fields on page load
        

        //fetch connected artist data.
         function fetchShopArtists(shopId) {
            if (shopId) {
                $.ajax({
                    url: '/admin/get-shop-connected-artist/' + shopId,
                    method: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $("#shop_artist_id").empty().append('<option value="">-- Select an Artist --</option>');

                        if (data.length > 0) {
                            $.each(data, function(index, artist) {
                                $("#shop_artist_id").append('<option value="' + artist.id + '">' + artist.name + '</option>');
                            });

                            // Set the selected artist AFTER options are appended
                            var selectedArtistId = "{{ old('shop_artist_id', $tutorial->assign_to) }}";
                           
                            if (selectedArtistId) {
                                $("#shop_artist_id").val(selectedArtistId).trigger('change'); // For Select2
                            }
                        } else {
                            $("#shop_artist_id").append('<option value="">No artists available</option>');
                        }

                        // Ensure Select2 refresh
                        $("#shop_artist_id").select2();
                    },
                    error: function() {
                        alert("Failed to fetch artists.");
                    }
                });
            } else {
                $("#shop_artist_id").empty().append('<option value="">-- Select an Artist --</option>');
            }
        }

        // On page load, if shop_id is selected, populate shop artist dropdown
        var initialShopId = $("#shop_id").val();
        if (initialShopId) {
            fetchShopArtists(initialShopId);
        }

        // If user type is already set to shop, populate shop artist dropdown
        if ($("#user_type").val() === "shop" && initialShopId) {
            $("#shop_artist_div").removeClass('d-none');
            fetchShopArtists(initialShopId);
        }
        //fetch connected artist data

        // Add file size validation method
        $.validator.addMethod("fileSize", function(value, element, param) {
            return this.optional(element) || (element.files[0].size <= (param * 1024 * 1024));
        }, "File size must be less than {0} MB");

        // jQuery Validation
        $("#edit_tutorial_form").validate({
            ignore: [],
            rules: {
                user_type: {
                    required: true
                },
                shop_id: {
                    required: function() {
                        return $("#user_type").val() === "shop";
                    }
                },
                artist_id: {
                    required: function() {
                        return $("#user_type").val() === "artist";
                    }
                },
                title: {
                    required: true,
                    maxlength: maxInput
                },
                fee: {
                    required: true,
                    number: true,
                    maxlength: maxInput
                },
                cover_image: {
                    extension: "jpg|jpeg|png|gif",
                    fileSize: 5
                },
                'tutorial_video[]': {
                    maxFiles: 20,
                    checkValidFileUpload: true,
                    required: function () {
                        return $(".preview_tutorial_video .ct-file-image").length === 0;
                    },
                },
            },
            messages: {
                cover_image: {
                    extension: "Only JPG, JPEG, PNG, or GIF files are allowed.",
                    fileSize: "File size must be less than 5 MB."
                },
            },
            errorPlacement: function(error, element) {
                if (element.attr("name") === "cover_image") {
                    $(".cover_image_error_msg").html(error);
                } else if (element.attr("name") === "tutorial_video[]") {
                    $(".tutorial_video_error_msg").html(error);
                } else {
                    error.insertAfter(element.closest('.auth-input-position'));
                }
            },
            submitHandler: function(form) {
                $('.add_tutorial_btn').attr('disabled', true).addClass('loader-active');
                form.submit();
            }
        });

        // Preview image with inline validation
        $('#cover_image').on('change', function() {
            const file = this.files[0];
            const previewContainer = $('.preview_cover_image');
            const errorContainer = $('.cover_image_error_msg');
            errorContainer.empty();
            previewContainer.empty();

            if (!file) return;

            const maxSize = 5 * 1024 * 1024; // 5MB
            if (file.size > maxSize) {
                errorContainer.text("File is too large. Please upload a file smaller than 5 MB.");
                $(this).val('');
                return;
            }

            const reader = new FileReader();
            reader.onload = function(e) {
                $('<div>', {
                        class: 'ct-file-image'
                    })
                    .append($('<img>', {
                        src: e.target.result,
                        alt: 'Preview',
                        class: 'ct-file-images image-preview'
                    }).on('error', function() {
                        $(this).attr('src', '{{ asset("assets/img/dashboard/default_img.jpg") }}');
                    }))
                    .appendTo(previewContainer);
            };
            reader.readAsDataURL(file);
        });

        // START: Add google address 
        function initAutocomplete() {
            const input = document.getElementById('autocomplete');
            if (!input) return;

            // Only enable autocomplete if artist selected
            if ($("#user_type").val() !== "artist") return;

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

            autocomplete.addListener('place_changed', () => {
                const place = autocomplete.getPlace();

                $('#latitude').val(place.geometry.location.lat());
                $('#longitude').val(place.geometry.location.lng());

                const components = {
                    locality: 'city',
                    administrative_area_level_1: 'state',
                    postal_code: 'postal_code',
                    country: 'country'
                };

                for (const component of place.address_components) {
                    const type = component.types[0];
                    if (components[type]) {
                        document.getElementById(components[type]).value = component.long_name;
                    }
                }
            });
        }

        // Initialize autocomplete if artist mode
        $("#user_type").on('change', function() {
            if ($(this).val() === "artist") {
                setTimeout(initAutocomplete, 200); // Allow DOM update
            }
        });
        if ($("#user_type").val() === "artist") {
            setTimeout(initAutocomplete, 200);
        }
        // END: Add google address 
    });

    // Remove existing image previews
    $(document).on('click', '.remove-existing-video', function() {
        $(this).closest('.ct-file-image').remove(); // Removes image + hidden input
    });
</script>
@endsection