@extends('admin.layouts.masterlayout')

@section('title', 'Add 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>Add Live Stream </h2>
        <p><a href="{{route('admin.eventManagement', ['tab' => 'live-stream'])}}"> Event Management </a>/ Add 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="add_livestream_form" method="POST" action="{{route('admin.storeLiveStream')}}" 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">
                                            <option value="">Select</option>
                                            <option value="shop">Shop</option>
                                            <option value="artist">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 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">
                                        <option value="">-- Select a Shop --</option>
                                        @foreach($shops as $shop)
                                        <option value="{{ $shop->user_id }}" {{ old('shop_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  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">
                                        <option value="">-- Select a Artist --</option>
                                        @foreach($shop_artists as $shop_artist)
                                        <option value="{{ $shop_artist->artist->id }}" {{ old('artist_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') }}">
                                        <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') }}" 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">

                                        <input type="hidden" name="latitude" id="latitude">
                                        <input type="hidden" name="longitude" id="longitude">
                                        <input type="hidden" name="city" id="city">
                                        <input type="hidden" name="state" id="state">
                                        <input type="hidden" name="postal_code" id="postal_code">
                                        <input type="hidden" name="country" id="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') }}</textarea>
                                    <div class="auth-input-icon">
                                        <img src="{{ asset('assets/img/dashboard/edit.png') }}" alt="">
                                    </div>
                                </div>
                            </div>

                            <div class="mt-4">
                                <label for="Upload1">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">
                                    </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 add_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",
        });

         $("#shop_id").change(function() {
        var shopId = $(this).val();

        // Check if shop is selected
        if (shopId) {
            // Make an AJAX request to fetch connected artists
            $.ajax({
                url: '/admin/get-shop-connected-artist/' + shopId, // URL for getting artists
                method: 'GET',
                dataType: 'json',
                success: function(data) {
                    // Clear the artist dropdown
                    $("#shop_artist_id").empty().append('<option value="">-- Select an Artist --</option>');

                    // Populate the artist dropdown with the returned data
                    if (data.length > 0) {
                        $.each(data, function(index, artist) {
                            $("#shop_artist_id").append('<option value="' + artist.id + '">' + artist.name + '</option>');
                        });
                    } else {
                        $("#shop_artist_id").append('<option value="">No artists available</option>');
                    }
                },
                error: function() {
                    // Handle error
                    alert("Failed to fetch artists.");
                }
            });
        } else {
            // Clear the artist dropdown if no shop is selected
            $("#shop_artist_id").empty().append('<option value="">-- Select an Artist --</option>');
        }
    });

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

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


        // 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
        $("#add_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) {
                $('.add_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);
        });

        // 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