@extends('layouts.master')
    
@section('title', 'Member Report Setting')
    
@section('style')
	<style>
		.select2-container--default .select2-selection--single {
				display: block;
				width: 100%;
				padding: 0.6rem 2.25rem 0.6rem 1rem;
				-moz-padding-start: calc(1rem - 3px);
				font-size: 0.75rem;
				font-weight: 500;
				line-height: 1.7;
				color: #959ca9;
				background-color: #fff;
				background-image: url(data:image/svg+xml,%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='45' height='32' viewBox='0 0 45 32'%3e%3cpath fill='%2360697b' d='M26.88 29.888c-1.076 1.289-2.683 2.103-4.48 2.103s-3.404-0.814-4.472-2.093l-0.008-0.009-5.12-7.040-8.192-10.048-3.52-4.608c-0.646-0.848-1.036-1.922-1.036-3.087 0-2.828 2.292-5.12 5.12-5.12 0.139 0 0.277 0.006 0.413 0.016l-0.018-0.001h33.664c0.118-0.010 0.256-0.015 0.396-0.015 2.828 0 5.12 2.292 5.12 5.12 0 1.165-0.389 2.239-1.045 3.1l0.009-0.013-3.52 4.608-7.872 10.048z'/%3e%3c/svg%3e);
				background-repeat: no-repeat;
				background-position: right 1rem center;
				background-size: 8px 8px;
				border: 1px solid rgba(8, 60, 130, 0.06);
				border-radius: 0.4rem;
				box-shadow: 0rem 0rem 1.25rem rgb(30 34 40 / 4%);
				transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				height: 50px
			}

			.select2-container--default .select2-selection--multiple {
				display: block;
				width: 100%;
				padding: 0.6rem 2.25rem 0.6rem 1rem;
				-moz-padding-start: calc(1rem - 3px);
				font-size: 0.75rem;
				font-weight: 500;
				line-height: 1.7;
				color: #959ca9;
				background-color: #fff;
				background-image: url(data:image/svg+xml,%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='45' height='32' viewBox='0 0 45 32'%3e%3cpath fill='%2360697b' d='M26.88 29.888c-1.076 1.289-2.683 2.103-4.48 2.103s-3.404-0.814-4.472-2.093l-0.008-0.009-5.12-7.040-8.192-10.048-3.52-4.608c-0.646-0.848-1.036-1.922-1.036-3.087 0-2.828 2.292-5.12 5.12-5.12 0.139 0 0.277 0.006 0.413 0.016l-0.018-0.001h33.664c0.118-0.010 0.256-0.015 0.396-0.015 2.828 0 5.12 2.292 5.12 5.12 0 1.165-0.389 2.239-1.045 3.1l0.009-0.013-3.52 4.608-7.872 10.048z'/%3e%3c/svg%3e);
				background-repeat: no-repeat;
				background-position: right 1rem center;
				background-size: 8px 8px;
				border: 1px solid rgba(8, 60, 130, 0.06);
				border-radius: 0.4rem;
				box-shadow: 0rem 0rem 1.25rem rgb(30 34 40 / 4%);
				transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				overflow-y: auto;
			}
	</style>
@endsection
    
@section('script')
	<script>
		$('#user_in').select2({
			maximumSelectionLength: 500
		});
		
		$('#user_out').select2({
			maximumSelectionLength: 500
		});
		
		$('#in_select').click(function(){
			$("#user_in > option").prop("selected","selected");
			$("#user_in").trigger("change");
		});
			
		$('#in_clear').click(function(){
			$("#user_in > option").prop("selected",false);
			$("#user_in").trigger("change");
		});
		
		$('#out_select').click(function(){
			$("#user_out > option").prop("selected","selected");
			$("#user_out").trigger("change");
		});
			
		$('#out_clear').click(function(){
			$("#user_out > option").prop("selected",false);
			$("#user_out").trigger("change");
		});
	</script>
@endsection
    
@section('content')
    
	@include('layouts.header')
	@include('layouts.header-sub')

	<section class="wrapper bg-light">
		<div class="container py-14 py-md-16">
			<div class="row gx-lg-8 gx-xl-12">

				<div class="col-md-12">
					<h5 class="display-1 mb-3" style="font-size: 30px">{{ $member_get->user_fullname }} [{{ $member_get->school_shortname }}]</h5>
					<p class="lead fs-lg pe-lg-15 pe-xxl-12"></p>
				</div>

				<div class="col-lg-12">
					<div class="blog single">
						<div class="card">
							<div class="card-body">

								<form class="contact-form" method="post" action="{{ url('/memberreportedit') }}" enctype="multipart/form-data">
									{{ csrf_field() }}
									
									<input type="hidden" name="member_id" value="{{ $member_id }}">
									
									<div class="col-md-12">
										<div class="form-select-wrapper mb-4">

											<span id="in_clear" class="btn btn-soft-red rounded-pill" style="font-size: 13px; cursor: pointer; float: right; margin-left: 5px">Clear All</span>
											<span id="in_select" class="btn btn-soft-green rounded-pill" style="font-size: 13px; cursor: pointer; float: right">Select All</span>
											
											<div style="clear: both"></div> <br>
											
											<label style="font-size: 16px; font-weight: bold; color: #000">Internal Members</label>
											
											<br>
											
											<select class="form-select" id="user_in" name="user[]" style="width: 100%" multiple>
												@foreach($member as $new_member)
													<option value='{{ $new_member->user_userid }}'