@extends('admin.layouts.masterlayout')

@section('title', 'Edit Competition')
@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 Competition</h2>
        <p><a href="{{route('admin.eventManagement', ['tab' => 'competition'])}}"> Event Management </a>/ Edit Competition</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_competition_form" method="POST" action="{{route('admin.updateCompetition', $competition->id)}}" enctype="multipart/form-data">
        <div class="row">
            @csrf
            <!-- @method('PUT') -->

            <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>Competition 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" >
                                <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="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', $competition->user_type) == 'shop' ? 'selected' : '' }}>Shop</option>
                                            <option value="artist" {{ old('user_type', $competition->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 {{ $competition->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', $competition->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  {{ $competition->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', $competition->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', $competition->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="registration_last_date">Registration last date<span class="required-block">*</span></label>
                                    <div class="auth-input-position auth-input-position-datepicker">
                                        <input type="text" name="registration_last_date" id="registration_last_date"
                                            class="form-control flatpickr" placeholder="Select Registration Last Date"
                                            value="{{ old('registration_last_date', $competition->registration_last_date) }}" required>
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/dashboard/calendar.png') }}" alt="">
                                        </div>
                                    </div>
                                    <div class="registration_last_date_error_msg"></div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-6 mb-4">
                                    <label for="max_participant">Max Participant<span class="required-star">*</span></label>
                                    <div class="auth-input-position">
                                        <input type="text" placeholder="Enter Max Participants" class="form-control" name="max_participant" id="max_participant" value="{{ old('max_participant', $competition->max_participent) }}">
                                        <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 Fee" class="form-control" name="fee" id="fee" value="{{ old('fee', $competition->fee) }}">
                                        <div class="auth-input-icon">
                                            <img src="{{ asset('assets/img/mail.png') }}" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-12 mb-4">
                                    <label for="autocomplete">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', $competition->address) }}">
                                        <input type="hidden" name="latitude" id="latitude" value="{{ old('latitude', $competition->latitude) }}">
                                        <input type="hidden" name="longitude" id="longitude" value="{{ old('longitude', $competition->longitude) }}">
                                        <input type="hidden" name="city" id="city" value="{{ old('city', $competition->city) }}">
                                        <input type="hidden" name="state" id="state" value="{{ old('state', $competition->state) }}">
                                        <input type="hidden" name="postal_code" id="postal_code" value="{{ old('postal_code', $competition->postal_code) }}">
                                        <input type="hidden" name="country" id="country" value="{{ old('country', $competition->country) }}">
                                        <div class="auth-input-icon">
                                            <img src="{{asset('assets/img/location.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', $competition->description) }}</textarea>
                                    <div class="auth-input-icon">
                                        <img src="{{ asset('assets/img/dashboard/edit.png') }}" alt="">
                                    </div>
                                </div>
                            </div>

                            <div class="w-100">
                                <div class="row">
                                    <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', $competition->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 class="col-md-6 mb-4">
                                        <label for="end_time">End Date<span class="required-block">*</span></label>
                                        <div class="auth-input-position auth-input-position-datepicker">
                                            <input type="text" name="end_time" id="end_time"
                                                class="form-control flatpickr" placeholder="Select End Date"
                                                value="{{ old('end_time', $competition->end_time) }}" required>
                                            <div class="auth-input-icon">
                                                <img src="{{ asset('assets/img/dashboard/calendar.png') }}" alt="">
                                            </div>
                                        </div>
                                        <div class="end_date_error_msg"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="w-100">
                                <div class="row">
                                    <div class="col-md-6 mb-4">
                                        <label for="voting_start_time">Start Voting Date<span class="required-block">*</span></label>
                                        <div class="auth-input-position auth-input-position-datepicker">
                                            <input type="text" name="voting_start_time" id="voting_start_time"
                                                class="form-control flatpickr" placeholder="Select Start Voting Date"
                                                value="{{ old('voting_start_time', $competition->voting_start_time) }}" required>
                                            <div class="auth-input-icon">
                                                <img src="{{ asset('assets/img/dashboard/calendar.png') }}" alt="">
                                            </div>
                                        </div>
                                        <div class="start_voting_date_error_msg"></div>
                                    </div>
                                    <div class="col-md-6 mb-4">
                                        <label for="voting_end_time">End Voting Date<span class="required-block">*</span></label>
                                        <div class="auth-input-position auth-input-position-datepicker">
                                            <input type="text" name="voting_end_time" id="voting_end_time"
                                                class="form-control flatpickr" placeholder="Select End Voting Date"
                                                value="{{ old('voting_end_time', $competition->voting_end_time) }}" required>
                                            <div class="auth-input-icon">
                                                <img src="{{ asset('assets/img/dashboard/calendar.png') }}" alt="">
                                            </div>
                                        </div>
                                        <div class="end_voting_date_error_msg"></div>
                                    </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">
                                        @if($competition->cover_image)
                                        <div class="ct-file-image">
                                            <img src="{{ $competition->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' => 'competition'])}}" class="ct-outline-btn text-center">Cancel</a>
            <button type="submit" class="ct-btn edit_competition_btn"> <span>Update</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 ?? '');
        }

        function handleAddressInputs() {
            var userType = $("#user_type").val();
            if (userType === "shop") {
                $("#autocomplete").prop('readonly', true);
                $("#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({});
                    }
                });
                var initialShopId = $("#shop_id").val();
                if (initialShopId) {
                    $("#shop_id").trigger('change');
                } else {
                    setAddressFields({});
                }
            } else {
                $("#autocomplete").prop('readonly', false);
                initAutocomplete();
            }
        }

        function initAutocomplete() {
            var input = document.getElementById('autocomplete');
            if (!input) return;
            if (input.autocompleteObj) {
                google.maps.event.clearInstanceListeners(input.autocompleteObj);
                input.autocompleteObj = null;
            }
            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());
                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]) {
                        $('#' + components[type]).val(component.long_name);
                    }
                }
            });
        }

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

        $.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");

        $.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.");

        $("#edit_competition_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
                },
                fee: {
                    required: true,
                    number: true,
                    maxlength: maxInput
                },
                max_participant: {
                    required: true,
                    digits: true,
                    maxlength: maxInput
                },
                registration_last_date: {
                    required: true,
                    date: true
                },
                full_address: {
                    required: true,
                    maxlength: maxInput
                },
                start_time: {
                    required: true,
                    date: true,
                    greaterThanOrEqualTo: "#registration_last_date"
                },
                end_time: {
                    required: true,
                    date: true,
                    greaterThanOrEqualTo: "#start_time"
                },
                voting_start_time: {
                    required: true,
                    date: true,
                    greaterThanOrEqualTo: "#end_time"
                },
                voting_end_time: {
                    required: true,
                    date: true,
                    greaterThanOrEqualTo: "#voting_start_time"
                },
                cover_image: {
                    extension: "jpg|jpeg|png|gif",
                    fileSize: 5
                }
            },
            messages: {
                start_time: "Start date must be after registration date.",
                end_time: "End date must be after or same as start date.",
                voting_start_time: "Start voting date must be after competition end date.",
                voting_end_time: "End voting date must be after or same as start voting date.",
                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 {
                    error.insertAfter(element.closest('.auth-input-position'));
                }
            },
            submitHandler: function(form) {
                $('.edit_competition_btn').attr('disabled', true).addClass('loader-active');
                form.submit();
            }
        });

        $('#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;
            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);
        });

        $("#user_type").on('change', function() {
            if ($(this).val() === "artist") {
                setTimeout(initAutocomplete, 200);
            }
        });
        if ($("#user_type").val() === "artist") {
            setTimeout(initAutocomplete, 200);
        }
    });
</script>
@endsection