@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">
    <div class="col-md-7 contents pl-ipad-30">
        <p>{{ config('constants.auth_banner_text') }}</p>
    </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 ">

                </div>
                <div class="carousel-item">

                </div>
                <div class="carousel-item active">
                    <div class="card_layout">
                        <div class="card_body">
                            <h3 class="card_title">Payment Plan Options</h3>
                            @if($plans)
                            @foreach($plans as $plan)
                            <div class="form-group form_checkbox_selected_layout">
                                <div class="form_checkbox_label form_checkbox_payment">
                                    <div class="form_checkbox_payment_desc">
                                        <h6>{{$plan->name}}</h6>
                                        <p>{{$plan->description}}</p>
                                    </div>    
                                    <div class="form_checkbox_payment_det">
                                        <div class="form_checkbox_payment_det_price">
                                            {{-- <span class="actual-price">${{$plan->old_amount}}</span> --}}
                                            <span class="discount-price">${{$plan->amount}} {{($plan->amount!=0)?'USD':''}}</span>
                                    
                                        </div>
                                        <p>/Month</p>
                                       
                                    </div>
                                    @include('payment.discounts')
                                </div>
                            </div>
                            @endforeach
                            @endif
                            <form method="get" action="{{ route('payment.payment_plan') }}">
                                @csrf
                                <h3 class="card_title subtitle">Choose Your Plan Setup</h3>
                                @if ($errors->has('plan_type'))
                                <p><span class="text-danger">{{ $errors->first('plan_type') }}</span></p>
                                @endif
                                <div class="form-group form_checkbox_layout form_checkbox_layout_sec1">
                                    <div class="form_checkbox_label">
                                        <p>Use the same type of plan for all studios</p>
                                    </div>
                                    <div class="form_checkbox">
                                        <div class="round">
                                            <input type="radio" id="single_plan" name="plan_type" value="single_plan"
                                                {{app('request')->input('plan_type')=='single_plan' ? 'checked="checked"' : '' }}>
                                            <label for="single_plan"></label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group form_checkbox_layout form_checkbox_layout_sec1">
                                    <div class="form_checkbox_label">
                                        <p>Choose a different type of plan for each studio</p>
                                    </div>
                                    <div class="form_checkbox">
                                        <div class="round">
                                            <input type="radio" id="multiple_plan" name="plan_type"
                                                value="multiple_plan"
                                                {{app('request')->input('plan_type')=='multiple_plan' ? 'checked="checked"' : '' }}>
                                            <label for="multiple_plan"></label>
                                        </div>

                                    </div>
                                </div>
                                <h3 class="card_title subtitle">Choose Your Payment Method</h3>
                                @if ($errors->has('card_type'))
                                <p><span class="text-danger">{{ $errors->first('card_type') }}</span></p>
                                @endif
                                <div class="form-group form_checkbox_layout form_checkbox_layout_sec2">
                                    <div class="form_checkbox_label">
                                        <p>Use one bank account for all studios</p>
                                    </div>
                                    <div class="form_checkbox">
                                        <div class="round">
                                            <input type="radio" id="single_card" name="card_type" value="single_card"
                                                {{app('request')->input('card_type')=='single_card' ? 'checked="checked"' : '' }}>
                                            <label for="single_card"></label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group form_checkbox_layout form_checkbox_layout_sec2">
                                    <div class="form_checkbox_label">
                                        <p>Use different bank accounts</p>
                                    </div>
                                    <div class="form_checkbox">
                                        <div class="round">
                                            <input type="radio" id="multiple_card" name="card_type"
                                                value="multiple_card"
                                                {{app('request')->input('card_type')=='multiple_card' ? 'checked="checked"' : '' }}>
                                            <label for="multiple_card"></label>
                                        </div>
                                    </div>
                                </div>
                                <button type="submit" class="profile-btn fw-700"><span class="font-lato">Next</span>
                                    {{ \App\Helpers\Helper::getArrowSvg() }}
                                </button>
                            </form>
                                <a href="{{ route('studio.form_notification') }}">
                                <button type="button" class="btn-theme light w-100 mt-3 fw-700">
                                    <img src="{{ asset('images/arrow_back_black.svg') }}" alt="plus">
                                    <span class="font-lato">Previous Step</span>
                                </button>
                                </a>
                        </div>
                    </div>
                </div>
                <div class="carousel-item ">
                </div>
            </div>
            <!-- Indicators/dots -->
            @include('studio.slider_buttons')
        </div>
    </div>
    @endsection
    @push('scripts')
    <script type="text/javascript">
    $(document).ready(function() {
        $('.form_checkbox_layout_sec1:first').addClass('active');
        $(document).on('change', '.form_checkbox_layout_sec1 .form_checkbox input', function() {
            $('.form_checkbox_layout_sec1').removeClass('active');
            if ($(this).is(':checked') ) {
                $(this).parents('.form_checkbox_layout_sec1').addClass('active');
            } 
        });
        $('#mblSubTitle').html('Your billing plan');
        $('.banner').removeClass('mobile_banner_img');
        $(document).on('change', '.form_checkbox_layout_sec1 .form_checkbox input', function() {
            var checkbox = $(this); 
            value = checkbox.val(); 
            $('.form_checkbox_layout_sec1').removeClass('active');
            if (checkbox.is(':checked') && value == 1) {
                $(this).parents('.form_checkbox_layout').removeClass('active');
            } else {
                $(this).parents('.form_checkbox_layout').addClass('active');
            }
        });
        $(document).on('change', '.form_checkbox_layout_sec2 .form_checkbox input', function() {
            var checkbox = $(this); 
            value = checkbox.val(); 
            $('.form_checkbox_layout_sec2').removeClass('active');
            if (checkbox.is(':checked') && value == 1) {
                $(this).parents('.form_checkbox_layout').removeClass('active');
            } else {
                $(this).parents('.form_checkbox_layout').addClass('active');
            }
        });
    });
    $(document).on('click', '.business-save-btn', function() {
        $('.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('logo', $('#logo')[0].files[0]);
        formData.append('business_address', $('#business_address').val());
        formData.append('page', $('#page').val());
        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) {
                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.html);
                    $('#business_name, #business_address, #logo, #studio-id').val('')
                    $('.studio-delete-btn').addClass('d-none');
                }
            },
            error: function(error) {}
        });
    });

    $(document).on('click', '.btn-edit-studio', function() {
        $('.business-details .has-error').remove();
        $('#studio-id').val($(this).attr("data-id"))
        $('#business_name').val($(this).attr("data-name"));
        $('#business_address').val($(this).attr("data-address"))
        $('input[value="' + $(this).attr("data-type") + '"]').prop("checked", true)
        $('.studio-delete-btn').removeClass('d-none');
    });

    $(document).on('click', '.studio-delete-btn', function() {
        var result = confirm("Want to delete?");
        if (result) {
            $.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) {
                    $('#studio-list').html(response.html);
                    $('#business_name, #business_address, #logo, #studio-id').val('')
                },
                error: function(error) {}
            });
        }

    });

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                //$('.image_upload_wrap').hide();

                // $('.custom_image').attr('src', e.target.result);
                $('.custom_image').html('<img id="theImg" width="100" src="' + e.target.result +
                    '" alt="custom image" />')
                $('.file-upload-content').show();

                $('.image-title').html(input.files[0].name);
            };

            reader.readAsDataURL(input.files[0]);

        } else {
            removeUpload();
        }
    }

    function removeUpload() {
        $('.file-upload-input').replaceWith($('.file-upload-input').clone());
        $('.file-upload-content').hide();
        $('.image_upload_wrap').show();
    }

    $('.image_upload_wrap').bind('dragover', function() {
        $('.image_upload_wrap').addClass('image-dropping');
    });
    $('.image_upload_wrap').bind('dragleave', function() {
        $('.image_upload_wrap').removeClass('image-dropping');
    });

    </script>
    @endpush('scripts')