@extends('layouts.admin.app')

@section('content')
<div class="center-container">
    <div class="admin-box full-width">
        <div class="container">
            @if(session('flash_success'))
                <div class="alert alert-success" role="alert">
                <button type="button" class="close" data-dismiss="alert">×</button>
                    {{ session('flash_success') }}
                </div>
            @endif
            <div class="admin-title">
                <h2>Aktivitetstilbydere</h2>
                <div class="title-name-logo">
                    VADSØ KOMMUNE <img src="{{asset('images/vads-logo.png')}}">
                </div>

            </div>

            <div class="crate-from-main full-width">
                <form method="POST" class="actvityproviderform" autocomplete="off" action="{{ route('activityprovider.store') }}"  enctype="multipart/form-data">
                @csrf
                <div class="crate-from-box full-width">
                    <div class="img-upload-main-box">
                        <label for="">Logo</label>
                        <div class="img-upload-box full-width">
                            <div class="form-img-box">
                                <img id="blah1" src="{{asset('images/image_icon.svg')}}" />
                            </div>
                            <div class="primary-btn upload-btn">
                                Last opp logo
                                <input id="logo" type="file" name="logo" accept="image/png,image/jpeg,image/jpeg"  onchange="document.getElementById('blah1').src = window.URL.createObjectURL(this.files[0])" title="">
                                @error('logo')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>                    
                    <div class="full-width">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="">Navn på aktivitetstilbyder</label>
                                    <input type="text" class="form-control" placeholder="Navn på aktivitetstilbyder" id="provider_name" autocomplete="off" name="provider_name" value="{{ old('provider_name') }}">
                                    @error('provider_name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="">Kontaktperson</label>
                                    <input type="text"  class="form-control" placeholder="Kontaktperson" id="contact_person_name" autocomplete="off" name="contact_person_name" value="{{ old('contact_person_name') }}">
                                    @error('contact_person_name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">E-post</label>
                                    <input type="text" value="" class="form-control" placeholder="E-post" id="contact_person_email" autocomplete="off" name="contact_person_email" value="{{ old('contact_person_email') }}">
                                    @error('contact_person_email')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                            <div class="form-group">
                                    <label for="">Telefon</label>
                                    <input type="text" value="" class="form-control" placeholder="Telefon" id="contact_person_phone_number" autocomplete="off" name="contact_person_phone_number" value="{{ old('contact_person_phone_number') }}">
                                    @error('contact_person_phone_number')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>

                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">Kontonummer (bank)</label>
                                    <input type="text" value="" class="form-control" placeholder="Kontonummer (bank)" id="provider_account_number" autocomplete="off" name="provider_account_number" value="{{ old('provider_account_number') }}">
                                    @error('provider_account_number')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="img-upload-main-box">
                        <label for="">Bilde</label>
                        <div class="img-upload-box full-width ">                    
                            <div class="form-img-box form-group">
                                <img id="blah" src="{{asset('images/image_icon.svg')}}" />
                            </div>
                            <div class="primary-btn upload-btn">
                                Last opp bilde
                                <input type="file"  id="provider_image" class="form-control " name="provider_image" accept="image/png,image/jpeg,image/jpg" onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])" title="">
                                @error('provider_image')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="full-width">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="">Om underenheten (Skriv en beskrivende tekst)</label>
                                    <textarea id="provider_description" autocomplete="off" type="text" class="form-control" placeholder="Skriv en beskrivende tekst"  name="provider_description" value="{{ old('provider_description') }}" rows="4"></textarea>
                                    @error('provider_description')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="form-title">underenhet</div> -->
                </div>
                <div class="footer-form full-width">
                    <div class="float-right">
                        <a href="{{url('admin/dashboard')}}" class="primary-btn sub-btn">Avbryt</a>
                        <input type="submit" class="primary-btn sub-btn" value="Lagre">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
@section('script')
{{-- <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> --}}
<script src="{{ asset('js/jquery.validate.js') }}"></script>
<script src="{{ asset('js/additional-methods.js') }}"></script>
<script src="{{ asset('js/norway.js') }}"></script>
<script>
$(document).ready(function () {
    jQuery.validator.addMethod(
        'email_validation',
        function (value) {
            return/[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}/igm.test(value);
        },
        "{{ trans('activity.valid_email') }}"
    );



    /*======================= Form Start =========================== */
    $.validator.addMethod('filesize', function (value, element, param) {        
        param = param * 1000000;
        console.log(element.files[0].size + '--' + param);
        return this.optional(element) || (element.files[0].size <= param)
    }, 'Filstørrelsen må være mindre enn {0} mb');

    $('.actvityproviderform').validate({
        lang:'no',
        rules: {
            "logo": {
                required: true,
                extension: "jpg|jpeg|png",
                filesize: 5,
            },
            "provider_name": {
                required: true,
                maxlength: 100
            },
            "contact_person_name": {
                required: true,
            },
            "contact_person_phone_number": {
                required: true,
                digits:true,
                minlength: 8,
                maxlength: 10
            },
            "contact_person_email": {
                required: true,
                email_validation: true,
            },
            "provider_account_number": {
                required: true,
                digits:true,
                minlength: 11,
                maxlength: 11
            },
            "provider_description": {
                required: true,
            },
            "provider_image": {
                required: true,
                extension: "jpg|jpeg|png",
                filesize: 5,
            },
        },
        errorPlacement: function(error, element) {
                if (element.attr("name") == "logo" || element.attr("name") == "provider_image")
                {
                    console.log('dsd');
                    element.parents('.img-upload-box').append(error);
                    //error.insertAfter(".img-upload-box");
                }
                else
                {
                    error.insertAfter(element);
                }
                return false;
          }
    });


    $('.add').on('click', add);

function add() {
    var new_chq_no = parseInt($('#total_chq').val()) + 1;

    if(new_chq_no<=1){
        var new_input = "<input class='ml-2' type='text' id='new_subunit'> <input type='button' id='subunitbtn' class='subunitbtn' value='ok'>";
        $('#new_chq').append(new_input);
        $('#total_chq').val(new_chq_no);
    }else{
        $('.add').prop('disabled', true);
    }
}

var count = 0;
    $('#new_chq').on('click','.subunitbtn', function() {

        var new_subunit  = $('#new_subunit').val();

        if(new_subunit!=''){
            $("#new_subunit").removeClass('is-invalid');
        }else{
            $("#new_subunit").addClass('form-control is-invalid');
            return false;
        }
        var html = '<tr class="remove_row subunitdiv"><td class="subunitTitle"><span>'+new_subunit+
            '</span><input type="hidden" name="subunit[]" value="'+new_subunit+'">'+'</div>'+
            '<td>'+'<a class="btn btn-sm btn-primary editBtn" data-id="'+count+'" data-title="'+new_subunit+'" >Edit</a> '+
            ' <a href="javascript:void(0);" class="btn btn-sm btn-danger removeBtn" data-id="'+count+'">Remove</a> '+'</td>'+
            '</tr>';
            count++;
        $('#subunitlist').append(html);
        $('#new_chq').html('');
        $('#total_chq').val(0);
        $('.add').prop('disabled', false);
    });

    $('#subunitlist').on('click', '.removeBtn', function() {
        if (confirm('Are you sure you want remove ?')) {
            $(this).closest(".remove_row").remove();
        }
    });

    $('#subunitlist').on('click', '.editBtn', function() {

            $('#subunitlist').find(".editrow").removeClass("editrow");
            $(this).closest("#subunitlist").addClass("editrow");

			var editTitle = $(this).attr('data-title');

            var html = '<td class="subunitTitle">'+
            '<input type="text" id="edit_subunit" name="subunit[]" value="'+editTitle+'">'+'</div>'+
            '<td>'+'<input type="button" id="updatesubunitbtn" class="updatesubunitbtn" value="update"></td>';

            $(this).closest(".subunitdiv").html(html);
    });

    $('#subunitlist').on('click','.updatesubunitbtn', function() {
            var updateValue = $('#edit_subunit').val();

            if(updateValue!=''){
                $("#edit_subunit").removeClass('is-invalid');
            }else{
                $("#edit_subunit").addClass('form-control is-invalid');
                // $("#new_subunit").after('<label id="logo-error" class="error" for="logo">This field is required.</label>');
                return false;
            }

            var html = '<td class="subunitTitle"><span>'+updateValue+
            '</span><input type="hidden" name="subunit[]" value="'+updateValue+'">'+'</div>'+
            '<td>'+'<a class="btn btn-sm btn-primary editBtn" data-id="'+count+'" data-title="'+updateValue+'" >Edit</a> '+
            ' <a href="javascript:void(0);" class="btn btn-sm btn-danger removeBtn" data-id="'+count+'">Remove</a> '+'</td>';
            count++;

        $(this).closest(".subunitdiv").html(html);
        $('#new_chq').html('');
    });


});
</script>
@endsection