@extends('ctrl.app')

@section('head-script')
@endsection

@section('head-styles')
    <style>
        .select2-container--default .select2-results__option.optInvisible {
            display: none;
        }
    </style>
@endsection

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card">

                    <div class="card-header">
                        <div class="row justify-content-between">
                            <div class="mt-2 ml-3">Members</div>
                            <div>
                                <a class="btn btn-outline-primary mr-3" href="{{session('ctrl_back', route('members.index'))}}">Back to
                                    Members</a>
                            </div>
                        </div>
                    </div>


                    <div class="card-body">

                        @include('ctrl.common.i_error_notification')

                        <form method="POST" action="{{ $edit ? route('members.update', $member->fake_id) : route('members.index') }}">
                            @if($edit) @method('PATCH') @endif
                            @csrf

                            <div class="form-group row">
                                <div class="col-md-4">
                                    <label class="m-0 text-primary" for="name">Name</label>
                                    <input id="name" type="text"
                                           class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }} text-capitalize"
                                           name="name" value="{{ $edit ? $member->name : old('name') }}" required>
                                </div>

                                <div class="col-md-4">
                                    <label class="m-0 text-primary" for="email">Email</label>
                                    <input id="email" type="text"
                                           class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}"
                                           name="email" value="{{ $edit ? $member->email : old('email')}}" required>
                                </div>


                            </div>

                            <div class="form-group row">

                                <div class="col-md-4">
                                    <label class="m-0 text-primary" for="company_id">Company</label>
                                    <select id="company_id" name="company_id" required
                                            class="custom-select form-control{{ $errors->has('company_id') ? ' is-invalid' : '' }}">
                                        @foreach($companies as $company)
                                            <option value="{{$company->fake_id}}" @if(($edit ? $member->company_id : old('company_id')) == $company->id) selected @endif>{{$company->title}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="m-0 text-primary" for="category_id">Categories (All are selected by default)</label>
                                    <select id="category_id" name="category_id[]"
                                            class="custom-select form-control{{ $errors->has('category_id') ? ' is-invalid' : '' }}" multiple>
                                        @foreach($categories as $category)
                                            <option value="{{$category->fake_id}}" data-company="{{encryptToFakeId($category->company_id)}}" @if(in_array($category->id, \Illuminate\Support\Arr::wrap(($edit ? $member->categories : old('category_id'))) )) selected @endif>{{$category->title}}</option>
                                        @endforeach
                                    </select>
                                </div>

                            </div>


                            <div class="form-group row">
                                <div class="col-md-4">
                                    <label class="m-0 text-primary" for="password">Password</label>
                                    <input id="password" type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" @if(!$edit) required @endif>
                                </div>
                                <div class="col-md-4">
                                    <label class="m-0 text-primary" for="password-confirm">Confirm Password</label>
                                    <input id="password-confirm" type="password" class="form-control" name="password_confirmation" @if(!$edit) required @endif>
                                </div>
                                @if($edit)
                                    <div class="col-md-4">
                                        <label class="m-0 text-primary" for="cp" >Current Password</label>
                                        <input id="cp" type="text" class="form-control" disabled value="{{$member->current_password}}">
                                    </div>
                                @endif
                            </div>


                            <div class="form-group row float-right">
                                <div class="mr-3">
                                    <button type="submit" class="btn btn-primary">
                                        {{ $edit ? __('fields.update') : __('fields.create') }}
                                    </button>
                                </div>
                            </div>
                        </form>

                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection

@section('footer-script')
    <script>
        $('#category_id').select2({
            templateResult: (data, container)=>{
                if (data.element) {
                    $(container).addClass($(data.element).attr("class"));
                }
                return data.text;
            },
        });

        $('#company_id').on('change', function () {
            let selected = $(this).val();
            $("#category_id option").each(function () {
                let element = $(this);
                if(selected === element.data("company") || element.data("company") === ''){
                    element.removeClass('optInvisible');
                } else {
                    if(element.is(':selected')){
                        element.prop('selected', false);
                    }
                    element.addClass('optInvisible');
                }
            });
        }).triggerHandler('change');
    </script>
@endsection