@extends('admin.layouts.masterlayout')

@section('title', 'Edit Live Stream')
@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 Live Stream </h2>
        <p><a href="{{route('admin.eventManagement',, ['tab' => 'live-stream'])}}"> Event Management </a>/ Edit Live Stream</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_livestream_form" method="POST" action="{{route('admin.updateLiveStream', $livestream->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>Live Stream Details</h2>
                            </div>
                            <!-- <div class="form-check form-check-toggle form-switch ps-3 ps-md-0">
                                <input type="hidden" name="active" value="inactive">
                                <input class="form-check-input" type="checkbox" role="switch" id="active" name="active" value="1" {{ old('active', 'checked' ?? '') }}>
                                <label class="form-check-label" for="active">Is Active?</label>
                            </div> -->
                        </div>
                        <div class="card-body ">


                            <div class="row ">
                                <div class="col-lg-12  mb-4">
                                    <label for="owner-name">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', $livestream->user_type) == 'shop' ? 'selected' : '' }}>Shop</option>
                                            <option value="artist" {{ old('user_type', $livestream->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 {{ $livestream->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', $livestream->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  {{ $livestream->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', $livestream->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="owner-name">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', $livestream->title) }}">
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/mail.png') }}" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <label for="start_time">Start Date<span class="required-block">*</span>
                                    </label>
                                    <div class="auth-input-position auth-input-position-datepicker">
                                        <input type="text" name="start_time" id="start_time"
                                            class="form-control flatpickr" placeholder="Select Start Date"
                                            value="{{ old('start_time', $livestream->start_time) }}" required>
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/dashboard/calendar.png') }}"
                                                alt="">
                                        </div>
                                    </div>
                                    <div class="start_date_error_msg"></div>
                                </div>


                            </div>

                            <div class="row">
                                <div class="col-lg-12  mb-4">
                                    <label for="owner-name">Shop Address<span class="required-star">*</span></label>
                                    <div class="auth-input-position">
                                        <input type="text" id="autocomplete" name="full_address" placeholder="Enter address" class="form-control" value="{{ old('full_address', $livestream->address) }}">

                                        <input type="hidden" name="latitude" id="latitude" value="{{ old('latitude', $livestream->latitude) }}">
                                        <input type="hidden" name="longitude" id="longitude" value="{{ old('longitude', $livestream->longitude) }}">
                                        <input type="hidden" name="city" id="city" value="{{ old('city', $livestream->city) }}">
                                        <input type="hidden" name="state" id="state" value="{{ old('state', $livestream->state) }}">
                                        <input type="hidden" name="postal_code" id="postal_code" value="{{ old('postal_code', $livestream->postal_code) }}">
                                        <input type="hidden" name="country" id="country" value="{{ old('country', $livestream->country) }}">

                                        <div class="auth-input-icon">
                                            <img src="{{asset('assets/img/location.png')}}" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-4">
                                <label for="notes">Description</label>
                                <div class="auth-input-position">
                                    <textarea class="form-control " id="description" name="description" placeholder="Enter Your Bio">{{ old('description', $livestream->description) }}</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 Proof</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="preview_cover_image file-container-upload">

                                        @if($livestream->cover_image)
                                        <div class="ct-file-image">
                                            <img src="{{ $livestream->cover_image }}" alt="Preview" class="ct-file-images image-preview">
                                        </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="cover_image_error_msg"></div>
                            </div>


                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="d-flex gap-3 submit-container">
            <a href="{{ route('admin.eventManagement', ['tab' => 'live-stream'])}}" class="ct-outline-btn text-center">Cancel</a>
            <button type="submit" class="ct-btn edit_livestream_btn"> <span>Save</span> </button>
        </div>
    </form>
</div>

@include('admin.shop.availability_day')
@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",
        });

        function setAddressFields(data) {
            $('#autocomplete').val(data.full_address ?? '');
            $('#latitude').val(data.latitude ?? '');
            $('#longitude').val(data.longitude ?? '');
            $('#city').val(data.city ?? '');
            $('#state').val(data.state ?? '');
            $('#postal_code').val(data.postal_code ?? '');
            $('#country').val(data.country ?? '');
        }

        function handleAddressInputs() {
            var userType = $("#user_type").val();
            if (userType === "shop") {
                $("#autocomplete").prop('readonly', true);
                // Will autofill on shop change
                $("#shop_id").off('change.autofill').on('change.autofill', function() {
                    var shopId = $(this).val();
                    if (shopId) {
                        $.ajax({
                            url: '/admin/get-shop-address/' + shopId,
                            method: 'GET',
                            dataType: 'json',
                            success: function(data) {
                                setAddressFields(data);
                            },
                            error: function() {
                                setAddressFields({});
                            }
                        });
                    } else {
                        setAddressFields({});
                    }
                });
                // If page loaded with existing value (during edits), autofill
                var initialShopId = $("#shop_id").val();
                if (initialShopId) {
                    $("#shop_id").trigger('change');
                } else {
                    setAddressFields({});
                }
            } else {
                $("#autocomplete").prop('readonly', false);
                setAddressFields({});
                // Google Places autocomplete
                initAutocomplete();
            }
        }

        function initAutocomplete() {
            var input = document.getElementById('autocomplete');
            if (!input) return;
            // Detach any previous autocompletes
            if (input.autocompleteObj) {
                google.maps.event.clearInstanceListeners(input.autocompleteObj);
                input.autocompleteObj = null;
            }
            // Only for artist mode
            if ($("#user_type").val() !== "artist") return;
            var autocomplete = new google.maps.places.Autocomplete(input, {
                types: ['geocode']
            });
            input.autocompleteObj = autocomplete;
            autocomplete.addListener('place_changed', () => {
                var place = autocomplete.getPlace();
                $('#latitude').val(place.geometry.location.lat());
                $('#longitude').val(place.geometry.location.lng());
                // Extract components
                const components = {
                    locality: 'city',
                    administrative_area_level_1: 'state',
                    postal_code: 'postal_code'
                };
                for (const component of place.address_components) {
                    const type = component.types[0];
                    if (components[type]) {
                        $('#' + components[type]).val(component.long_name);
                    }
                }
            });
        }

        // On load and when user_type changes, update address inputs
        // handleAddressInputs();
        $("#user_type").change(function() {
            toggleUserTypeFields();
            handleAddressInputs();
        });

        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);
            }
        }

        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', $livestream->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);
        }


        // 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");

        // Custom date compare method
        $.validator.addMethod("greaterThanOrEqualTo", function(value, element, params) {
            var startDate = $(params).val();
            if (!startDate || !value) return true;
            var start = Date.parse(startDate);
            var end = Date.parse(value);
            return end >= start;
        }, "Please enter a later date.");

        // jQuery Validation
        $("#edit_livestream_form").validate({
            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
                },
                cover_image: {
                    // required: true,
                    extension: "jpg|jpeg|png|gif",
                    fileSize: 5
                },
                start_time: {
                    required: true,
                    date: true,

                },
                full_address: {
                    required: true,
                    maxlength: maxInput
                },
            },
            messages: {
                cover_image: {
                    required: "Please upload a 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); // show file errors here
                } else if (element.attr("name") === "tutorial_video") {
                    $(".tutorial_video_error_msg").html(error);
                } else {
                    error.insertAfter(element.closest('.auth-input-position'));
                }
            },
            submitHandler: function(form) {
                $('.edit_livestream_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);
        });

        // Preview video with inline validation
        // $('#tutorial_video').on('change', function() {
        //     const file = this.files[0];
        //     const previewContainer = $('.preview_tutorial_video');
        //     const errorContainer = $('.tutorial_video_error_msg');
        //     errorContainer.empty();
        //     previewContainer.empty();

        //     if (!file) return;

        //     const maxSize = 50 * 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 validExtensions = ['mp4', 'mov', 'avi', 'wmv'];
        //     const fileExtension = file.name.split('.').pop().toLowerCase();
        //     if (!validExtensions.includes(fileExtension)) {
        //         errorContainer.text("Only MP4, MOV, AVI, or WMV files are allowed.");
        //         $(this).val('');
        //         return;
        //     }

        //     const reader = new FileReader();
        //     reader.onload = function(e) {
        //         $('<div>', {
        //                 class: 'ct-file-video'
        //             })
        //             .append($('<video>', {
        //                 src: e.target.result,
        //                 controls: true,
        //                 class: 'ct-file-videos video-preview',
        //                 style: 'max-width: 100%; max-height: 200px;'
        //             }).on('error', function() {
        //                 errorContainer.text("Error loading video preview.");
        //             }))
        //             .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 
    });
</script>

@endsection