@extends('layouts.admin.app')

@section('content')
<link  href="{{url('css/jquery.dataTables.min.css')}}" rel="stylesheet">
<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
            @if(session('flash_warning'))
                <div class="alert alert-danger" role="alert">
                <button type="button" class="close" data-dismiss="alert">×</button>
                    {{ session('flash_warning') }}
                </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.update',$activityprovider->id) }}"  enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <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($path.$activityprovider->logo)}}" />
                                </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="{{ $activityprovider->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="{{ $activityprovider->contact_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" class="form-control" placeholder="E-post" id="contact_person_email" autocomplete="off" name="contact_person_email" value="{{ $activityprovider->contact_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" class="form-control" placeholder="Telefon" id="contact_person_phone_number" autocomplete="off" name="contact_person_phone_number" value="{{ $activityprovider->contact_phone ?? '' }}">
                                        @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" class="form-control" placeholder="Kontonummer (bank)" id="provider_account_number" autocomplete="off" name="provider_account_number" value="{{ $activityprovider->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">
                                    <img id="blah" src="{{ asset($path.$activityprovider->provider_image)}}" />
                                </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"  rows="4">{{ $activityprovider->description }}</textarea>
                                        @error('provider_description')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                            </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>
                </form>
                <!-- <div class="form-title">underenhet</div> -->
            </div>
            <div class="full-width activityProviderDiv" id="activityProviderDiv">
                <div class="col-md-6 subUnitDiv">
                    <div class="form-group">
                        <form method="POST" class="" id="subunitForm" autocomplete="off" action="{{ route('subunit.save') }}"  enctype="multipart/form-data">
                        @csrf
                            <input type="text" class="form-control" placeholder="navn på undernhet" id="subunit_name" autocomplete="off" name="subunit_name" value="{{ old('subunit_name') }}">
                            <input type="submit" class="primary-btn sub-btn data-btn" value="Legg til Underenhet" >
                            <input type="hidden" name="activity_provider_id" value="{{$activityprovider->id}}">
                        </form>
                    </div>
                </div>
                <table class="table data-table action-col tableDesign" id="subunitTable">
                    <thead>
                        <tr>
                            <th width="80%">{{ trans('activity.title') }}</th>
                            <th width="20%">{{ trans('activity.action') }}</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
             </div>
        </div>
    </div>
</div>

 <!-- Modal -->
 <div class="modal fade center-popup sm-popup" id="subunitModal" tabindex="-1" role="dialog" aria-labelledby="login-popup" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ trans('activity.Edit_Subunit') }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST" class="" id="subunitEditForm" autocomplete="off" action="{{ route('subunit.update') }}"  enctype="multipart/form-data">
            @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label>{{ trans('activity.title') }}</label>
                        <input type="text" value="" name="title" class="form-control title" placeholder="{{ trans('activity.Subunit_title') }}">
                        <input type="hidden" name="subunit_id" class="subunit_id">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="primary-btn sub-btn">{{ trans('activity.update') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>
@include('layouts.admin.includes.deletePopup')
@endsection
@section('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 src="{{ url('js/datatables.min.js')}}"></script>
<script>
    var config = {
        Subunit_DATATABLE:  "{{ route('activityprovidersubunit.datatable', $activityprovider->id) }}"
    };
</script>

<script>
$(document).ready(function () {

    $.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: {
            "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: true,
            },
            "provider_account_number": {
                required: true,
                digits:true,
                minlength: 11,
                maxlength: 11
            },
            "provider_description": {
                required: true,
            },
            "logo": {
                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;
          }
    });

    $('#subunitTable').DataTable({
        language: { search: '', searchPlaceholder: "Søk",emptyTable: "Ingen data tilgjengelig i tabellen",zeroRecords: "Fant ingen samsvarende poster",
            "processing":"<p class='dt-loading'>Laster inn..</p>"},
        processing: true,
        serverSide: true,
        ajax: config.Subunit_DATATABLE,
        type: "GET",
        "columnDefs": [
            {"orderable": false, "targets": 1},
            {"searchable": false, "targets": 1},
        ],
        columns: [
            {data: 'title', name: 'title'},
            {data: 'action', name: 'action'}
        ],
        drawCallback: function() {
		}
    });

    $('#subunitForm').validate({
        rules: {
            "subunit_name": {
                required: true,
                maxlength: 50
            },
        },
        'messages':{
            "subunit_name": {
                required:"{{ trans('activity.Please_enter_subunit') }}",
            },
        }
    });

    /* Show poup of edit subunit */
    $('#subunitTable').on('click','.edit_subunit',function(){
        var title = $(this).attr('data-title');
        var id = $(this).attr('data-id');
        $('#subunitModal').find('.title').val(title);
        $('#subunitModal').find('.subunit_id').val(id);
        $('#subunitModal').modal('show');
    });

    $('#subunitEditForm').validate({
        rules: {
            "title": {
                required: true,
            },
        },
        'messages':{
            "subunit_name": {
                required:"{{ trans('activity.Please_enter_subunit') }}",
            },
        }
    });

    $('#subunitTable').on('click','.delete-action',function(){
        var title = "{{ trans('activity.confirmation') }}";
        var text = "{{ trans('activity.Are_you_sure_you_want_to_delete_this_Subunit') }}"
        var url = $(this).attr('data-url');
        $('#deleteModal').find('.modal-title').text(title);
        $('#deleteModal').find('.main_text').text(text);
        $('#deleteModal').find('#deleteForm').attr('action', url);
        $('#deleteModal').modal('show');
    });

});

</script>
@endsection