@extends('layouts.admin')
@section("style")
    <link href="{{ asset('assets/plugins/select2/css/select2.min.css')}}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/select2/css/select2-bootstrap4.css')}}" rel="stylesheet" />
@endsection
@section('pageTitle')
<title>{{ trans('panel.site_title') }} {{ trans('global.volunteer') }}</title>
@endsection

@section('content')

    <!--start page wrapper -->
    <div class="page-wrapper">
        <div class="page-content">
            <!--breadcrumb-->
            <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
                <div class="breadcrumb-title pe-3">{{ trans('global.volunteer') }}</div>
                <div class="ps-3">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0 p-0">
                            <li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt"></i></a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">{{ trans('global.create') }} {{ trans('global.volunteer') }} </li>
                        </ol>
                    </nav>
                </div>
                
                <div class="ms-auto">
                    <div class="btn-group">
                        <a href="{{ route("admin.volunteers.index") }}" class="btn btn-primary"> {{ trans('global.volunteers') }} {{ trans('global.list') }}</a>
                        
                    </div>
                </div>
                
            </div>
            <!--end breadcrumb-->
            <hr/>
            
                    @include('layouts/notification')
                    <form action="{{ route("admin.volunteers.store") }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="card">
                            <div class="card-body">

                                <h3>Volunteer Detail</h3>
                                <hr/>
                                <input type="hidden" id="roles" name="roles[]" class="" value="4" required>
                                <input type="hidden" id="user_type" name="user_type" class="" value="Volunteer" required>
                                
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group {{ $errors->has('name') ? 'has-error' : '' }}">
                                            <label for="name">Volunteer Name<small class="text-danger">*</small></label>
                                            <input type="text" id="name" name="name" class="form-control" value="{{ old('name', isset($user) ? $user->name : '') }}" required>
                                            @if($errors->has('name'))
                                                <p class="text-danger small">
                                                    {{ $errors->first('name') }}
                                                </p>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group {{ $errors->has('email') ? 'has-error' : '' }}">
                                            <label for="email">Volunteer Email<small class="text-danger">*</small></label>
                                            <input type="email" id="email" name="email" class="form-control" value="{{ old('email', isset($user) ? $user->email : '') }}" required>
                                            @if($errors->has('email'))
                                                <p class="text-danger small">
                                                    {{ $errors->first('email') }}
                                                </p>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group {{ $errors->has('password') ? 'has-error' : '' }}">
                                            <label for="password">{{ trans('cruds.user.fields.password') }}</label>
                                            <input type="password" id="password" name="password" class="form-control" required>
                                            @if($errors->has('password'))
                                                <p class="text-danger small">
                                                    {{ $errors->first('password') }}
                                                </p>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <button class="btn btn-primary" type="submit" >{{ trans('global.save') }}</button>
                                    <a class="btn btn-secondary waves-effect waves-ripple mr-3" href="{{ url()->previous() }}">{{ trans('global.back_to_list') }}</a>
                                    
                                </div>
                            </div>
                        </div>
                        
                    </form>
                </div>
            </div>
        </div>
    </div>
    
@endsection
@section("script")
<script src="{{ asset('assets/plugins/select2/js/select2.min.js')}}"></script>
<script>
    $('.single-select').select2({
        theme: 'bootstrap4',
        width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
        placeholder: $(this).data('placeholder'),
        allowClear: Boolean($(this).data('allow-clear')),
    });
    $('.multiple-select').select2({
        theme: 'bootstrap4',
        width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
        placeholder: $(this).data('placeholder'),
        allowClear: Boolean($(this).data('allow-clear')),
    });
</script>
@endsection