@extends('layouts.auth')
@section('content')
@section('bodyClass', 'mobile_banner')
<a href="{{ route('logout') }}" class="backto-login">
    <svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
            d="M11.3334 4.83329H3.22008L6.94675 1.10663L6.00008 0.166626L0.666748 5.49996L6.00008 10.8333L6.94008 9.89329L3.22008 6.16663H11.3334V4.83329Z"
            fill="white" />
    </svg>
    Back to Login
</a>
<div class="row align-items-center banner_layout login-form-align-center">
    <div class="col-md-7">
        <div class="contents">
            <p>Focus on what's most important in your gym, in your business, and in your life.</p>
        </div>
    </div>
    <div class="col-md-5 carousel-contents">
        <div id="demo" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
            <!-- The slideshow/carousel -->
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <div class="card_layout">
                        <div class="card_body">
                            <span class="business-details">
                                <h3 class="card_title">Your Details </h3>
                                <div class="alert mt-2" style="display: none;"><span></span></div>
                                <form method="post" class="process-form" action="{{ route('studio.profile.update') }}"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <div class="form-floating form-group">
                                        <input type="text" name="first_name" class="form-control form-flating-input"
                                            id="floatingInputValue" placeholder="Name" value="{{ $user->first_name }}">
                                        <label for="floatingInputValue" class="floating-text">First Name</label>
                                    </div>
                                    <div class="form-floating form-group">
                                        <input type="text" name="last_name" class="form-control form-flating-input"
                                            id="floatingInputValue2" placeholder="Name" value="{{ $user->last_name }}">
                                        <label for="floatingInputValue2" class="floating-text">Last Name</label>
                                    </div>
                                    <!--                     <div class="form-group">
                        <input type="text" class="form-input form-flating-input" placeholder="Mobile" name="mobile" value="{{ $user->mobile }}" id="contact-number">
                     </div>-->
                                    <h3 class="card_title subtitle">Your Businesses</h3>
                                    <span id="studio-list">
                                        @include('studio.business_list')
                                    </span>
                                    <span id="business-add-edit-details">
                                        @include('studio.add_business')
                                    </span>
                                </form>
                                <div class="form-group text-center">
                                    <div class="spinner-border  d-none" style="width: 1rem; height: 1rem;"
                                        role="status">
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                    <div class="alert alert-success sm-custom-alert business-success-msg d-none"
                                        role="alert">
                                        Business Saved successfully.
                                    </div>
                                </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                </div>
                <div class="carousel-item">
                </div>
                <div class="carousel-item ">
                    <div class="card_layout">
                    </div>
                </div>
            </div>
            @if(auth()->user()->role_id==4)
            <!-- Indicators/dots -->
            @include('studio.slider_buttons')
            @endif
        </div>
    </div>
    @include('confirm_modal')
    @endsection

    @push('scripts')
    <script type="text/javascript">
    $(document).on('click', '.business-save-btn', function(e) {
        e.preventDefault();
        $('.spinner-border').removeClass('d-none');
        $('.business-details .has-error').remove();
        var formData = new FormData();
        formData.append('business_type', $('input[name="business_type"]:checked').val());
        formData.append('business_name', $('#business_name').val());
        formData.append('country', $('#country').val());
        formData.append('franchise', $('#franchise').val());
        formData.append('same_invoice_name', $('input[name="same_invoice_name"]:checked').val());
        formData.append('invoice_business_name', $('#invoice_business_name').val());
        if ($('#logo')[0].files[0]) {
            formData.append('logo', $('#logo')[0].files[0]);
        }
        formData.append('business_address', $('.business_address').val());
        formData.append('page', 'profile');
        if ($('#studio-id').val()) {
            formData.append('business_id', $('#studio-id').val());
        }
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type: "post",
            url: "{{ route('studio.business.store') }}",
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'json',
            success: function(response) {
                $('.spinner-border').addClass('d-none');
                if (response.status == 0) {
                    $('.business-details .has-error').remove();
                    $.each(response.errors, function(key, value) {
                        if ($(".business-details #custom-error_" + key)
                            .length) { // this is for custom error placement
                            $(".business-details #custom-error_" + key).after(
                                '<span class="has-error text-danger">' + value +
                                '</span>');
                        } else {
                            $(".business-details [name='" + key + "']").after(
                                '<span class="has-error text-danger">' + value +
                                '</span>');
                        }
                    });
                }
                if (response.status == 1) {
                    $('#studio-list').html(response.business_list);
                    $('#business-add-edit-details').html(response.add_business);
                    $('select').selectpicker('refresh');
                    // $('.business-success-msg').removeClass('d-none');
                    setTimeout(function() {
                        $('.business-success-msg').addClass('d-none');
                    }, 1500);
                }
            },
            error: function(error) {}
        });
    });

    $(document).on('click', '.btn-edit-studio', function(e) {
        e.preventDefault();
        $('#studio-id').val($(this).attr("data-id"))
        $('#country').val();
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type: "post",
            url: "{{ route('studio.business.edit') }}",
            data: {
                studio_id: $(this).attr("data-id"),
                country: $('#country').val()
            },
            dataType: 'json',
            success: function(response) {
                if (response.status == 1) {
                    $('#business-add-edit-details').html(response.html)
                    $('select').selectpicker('refresh');
                    var sameInvoiceName = $('input[name="same_invoice_name"]:checked').val();
                    toggleBusinessName(sameInvoiceName == 2); // Show/hide field based on initial selection
                }
            },
            error: function(error) {}
        });
    });

    $(document).on('click', '.studio-delete-btn', function(e) {
        e.preventDefault();
        var modal = $('.confirm-modal');
        modal.find('p').text('Are you sure to delete?')
        modal.appendTo("body").modal('show');
        $("#action-link").removeAttr("href");
        $('#action-link button').addClass('studio-delete-confirm-btn')
    });

    $(document).on('click', '.studio-delete-confirm-btn', function(e) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type: "post",
            url: "{{ route('studio.business.delete') }}",
            data: {
                studio_id: $('#studio-id').val()
            },
            dataType: 'json',
            success: function(response) {
                if (response.status == 1) {
                    $('#studio-list').html(response.business_list);
                    $('#business-add-edit-details').html(response.add_business);
                    $('select:not(.multiselect)').selectpicker();
                    $('select:not(.multiselect)').selectpicker('refresh');
                    $('.confirm-modal').modal('hide');;
                }
            },
            error: function(error) {}
        });
    });

    $(document).ready(function() {
        $('.banner').removeClass('mobile_banner_img');
        $('.mobile_img').hide();
    });
    $(function() {
        $('select:not(.multiselect)').selectpicker();
    });
    //validate logo based on franchise selection
    $(document).on('change', '#franchise', function() {
        var logo = '{{ asset('images/camera_new.svg') }}';
        var cimg = $('#franchise option:selected').data('image')
       
        if (cimg != '' && cimg != undefined) {
            var $fileInput = $('#logo');
            $fileInput.attr('disabled', 'disabled');
            var $closestForm = $fileInput.closest('form');
            if ($closestForm.length) {
                $fileInput.wrap('<form>').closest('form').get(0).reset();
                $fileInput.unwrap();
            }
            var logo = '{{ asset('images') }}/'+cimg;
             
        } else {
            logo = '{{ asset('images/camera_new.svg') }}';
             $('#logo').removeAttr('disabled');
        }
        $('.logo-img').removeClass('logo-img').addClass('camera-img img-fluid').css('width', 'auto');
        $('.camera-img').attr('src', logo);
    });
    const addressInput = $('.auto-address');
    
    $(document).on('input', '.auto-address', function() {
        const addressList =  $(this).parent().find('.address-list');
        const input = $(this).val();
        // Perform the auto-completion when the input field changes
        if (input.length > 2) {
            $('.cust-tag-inputs-list').css('display', 'block');
            $('.cust-tag-inputs-list').addClass('cust-tag-inputs-list-show');
            $.ajax({
                url: "{{route('autocomplete')}}",
                method: 'GET',
                data: { 'input': input },
                dataType: 'json',
                success: function (data) {
                    const predictions = data.predictions;
                    addressList.empty();
                    predictions.forEach(function (prediction) {
                    // Format the suggestion with the matched string in bold
                        const suggestionText = prediction.description;
                        const matchedString = prediction.matched_substrings[0];
                        const formattedSuggestion = suggestionText.substring(0, matchedString.offset) + 
                            '<b>' + suggestionText.substring(matchedString.offset, matchedString.offset + matchedString.length) + '</b>' + 
                            suggestionText.substring(matchedString.offset + matchedString.length);

                        const option = $('<div>').html(formattedSuggestion); // Use .html() to render HTML
                        addressList.append(option);

                        // Handle suggestion selection
                        option.on('click', function() {
                            $('.auto-address').val(prediction.description);
                            addressList.empty();
                            $('.cust-tag-inputs-list').css('display', 'none');
                            $('.cust-tag-inputs-list').removeClass('cust-tag-inputs-list-show');
                        });
                        
                    });
                },
                error: function (error) {
                    console.error(error);
                }
            });
        } else {
            addressList.empty();
            $('.cust-tag-inputs-list').css('display', 'none');
            $('.cust-tag-inputs-list').removeClass('cust-tag-inputs-list-show');
        }
    });
    </script>
    @endpush('scripts')