@extends('admin.layouts.masterlayout')

@section('title', 'Add 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>Add Tutorial </h2>
        <p><a href="{{route('admin.eventManagement', ['tab' => 'tutorial'])}}"> Event Management </a>/ Add 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="add_tutorial_form" method="POST" action="{{route('admin.storeTutorial')}}" 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 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-lg-6 mb-4">
                                    <label for="owner-name">Fee<span class="required-star">*</span></label>
                                    <div class="auth-input-position">
                                        <input type="text" placeholder="Enter Your Fee" class="form-control number-only" name="fee" id="fee" value="{{ old('fee') }}">
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/dollar.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 Description">{{ 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 Image</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="preview_cover_image file-container-upload">
                                    </div>
                                </div>
                                <div class="cover_image_error_msg"></div>
                            </div>

                            <div class="mt-4 file-upload-wrapper">
                                <label for="Upload1">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">
                                    </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>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?rer') }}"></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>');
            }
        });

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

        // 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_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: {
                    required: true,
                    extension: "jpg|jpeg|png|gif",
                    fileSize: 5
                },
                'tutorial_video[]': {
                    maxFiles: 20,
                    checkValidFileUpload: true
                },
            },
            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_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 
    });
</script>

@endsection