@extends('layouts.admin.app')

@section('content')
{{-- <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="{{ asset('css/datepickerjs.css') }}"> --}}
<div class="center-container">
    <div class="admin-box full-width">
        <div class="container">
            <div class="admin-title">
                <h2><img src="{{ asset($path.$activityProvider->logo)}}">
                    <b>
                        {{ $activityProvider->name }}
                        {{-- <span>Fotball</span> --}}
                    </b>
                </h2>
                <div class="title-name-logo">
                    {{ trans('activity.vadso_municipality') }} <img src="{{ asset('images/vads-logo.png')}}">
                </div>
            </div>
                      
            <div class="crate-from-main full-width">
                <form method="POST" class="activityform" autocomplete="off" action="{{ route('activity.store') }}">
                    @csrf
                   <input type="hidden" name="activityprovider" value="{{ $activityProvider->id }}">
                    <div class="crate-from-box full-width">                   
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="">{{ trans('activity.activity_name') }}</label>
                                    <input id="name" type="hidden" name="name" value="">
                                    <p class="readonlyTitle"></p>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">{{ trans('activity.subunit') }}</label>

                                    <select id="subUnit" name="subunit" data-size="6" class="form-control">
                                        {{-- <option value="">{{ trans('activity.subunit') }}</option> --}}
                                        @foreach ($subUnitDropDown as $value)
                                            <option value="{{ $value->id }}" @if($value->id==$subUnit->id) selected @endif>{{$value->title }}</option>
                                        @endforeach
                                    </select>

                                    @error('subunit')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>                            
                            <div class="col-md-4">
                                <div class="form-group genderafter">
                                    <label for="">{{ trans('activity.gender') }}</label>
                                    <div class="radio-box full-width">
                                        <label class="radio-button green-check">
                                            <input type="radio" name="gender" value="1" class="gender" data-text="{{ trans('activity.male') }}">
                                            <span class="checkmark"></span>
                                            <b>{{ trans('activity.male') }}</b>
                                        </label>
                                        <label class="radio-button green-check">
                                            <input type="radio" name="gender" value="2" class="gender" data-text="{{ trans('activity.female') }}">
                                            <span class="checkmark"></span>
                                            <b>{{ trans('activity.female') }}</b>
                                        </label>
                                        <label class="radio-button green-check">
                                            <input type="radio" name="gender" value="3" class="gender" data-text="{{ trans('activity.both_gender') }}">
                                            <span class="checkmark"></span>
                                            <b>{{ trans('activity.both_gender') }}</b>
                                        </label>
                                        @error('gender')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">{{ trans('activity.age') }}</label>
                                        <select id="age" name="age[]" data-size="6" class="agelabel" multiple>
                                            <option value="" disabled>{{ trans('activity.age') }}</option>
                                            @for($i=6;$i<=17;$i++)
                                            <option value="{{ $i }}">{{ $i.' '.trans('activity.year') }}</option>
                                            @endfor
                                        </select>
                                        @error('age')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">{{ trans('activity.period') }}</label>
                                    <select id="period" data-size="6" name="period" >
                                        {{-- <option value="">{{ trans('activity.period') }}</option> --}}
                                        @foreach ($period as $value)
                                        <option value="{{ $value->id }}">{{$value->period_name }}</option>
                                        @endforeach
                                    </select>
                                    @error('period')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">{{ trans('activity.participation_fee') }}</label>
                                    <div class="input-icon">
                                        <input id="price" autocomplete="off" type="text"  class="form-control" name="price" value="{{ old('price') }}" >
                                        <i>Kr.</i>
                                    </div>
                                        @error('price')
                                        <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="#" class="primary-btn sub-btn">Lagre aktivitet</a> --}}
                            <input class="primary-btn sub-btn" type="submit" value="{{ trans('activity.save_activity') }}" >
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script src="{{ asset('js/jquery.validate.js') }}"></script>
<script src="{{ asset('js/norway.js') }}"></script>
<script src="{{ asset('js/pages/activityformvalidation.js') }}"></script>
<script>
jQuery(document).ready(function(){
    // set dynamic name of activity
    activityTitle = $('.activityform #subUnit option:selected').text();
    $('.readonlyTitle').text(activityTitle);
    $('.activityform').on('change','#subUnit ,.gender ,#age, #period', function(){
        setNameTextbox();
    });

    $('#price').on('input', function () {
        this.value = this.value.match(/^\d+\.?\d{0,2}/);
    });
    
    function setNameTextbox()
    {
        var activityTitle = '';
        activityTitle += $('.activityform #subUnit option:selected').text();
        if($('.activityform .gender').is(':checked'))
            activityTitle += ' '+$('.activityform .gender:checked').attr('data-text');
        if($('.activityform #age option:selected').text() != 'Alder'){
            var ar=$('.activityform #age option:selected').text().split('år');
            ar=ar.filter(function(v){return v!==''});
            var max_val=Math.max.apply(Math,ar);
            var min_val=Math.min.apply(Math,ar);

            // activityTitle += ' '+$('.activityform #age option:selected').text();
            if(min_val!=max_val && (min_val != 'Infinity' && max_val != '-Infinity')){
                activityTitle += ' '+min_val+' år-'+max_val+' år';
            }else if (min_val != 'Infinity' && max_val != '-Infinity'){
                activityTitle += ' '+max_val+' år';
            }
        }

        if($('.activityform #period option:selected').text() != 'Periode')
            activityTitle += ' - '+$('.activityform #period option:selected').text();            
            
        $('.readonlyTitle').text(activityTitle);
        $('.activityform #name').val(activityTitle);
    }
})
</script>
@endsection