@extends('layouts.main')

@section('content')
<h1>Compose Message</h1>
<hr> 

<div class="card-box">
    <div class="card-body">
        <input type="checkbox" id="selectAll"> Select All <hr>
        <form action="{{route('customer_messages.store')}}" method="POST">
            @csrf

            <label for="phone_numbers">Phone number</label>
            <select name="customers[]" multiple id="customers" class="form-control">
                @foreach($customers as $customer)
                    <option selected value="{{$customer->id}}">{{$customer->name." (".$customer->phone_number.")"}}</option>
                @endforeach
            </select>  
            
            <label for="message">Message</label>
            <textarea name="smsMessage" class="form-control" cols="30" rows="5"></textarea>

            <hr>
            <button class="btn btn-dark" type="submit">Save</button>
        </form>                   
    </div>
</div>

@endsection

@push('scripts')
<script>
    $("#customers").chosen({
        width:"100%"
    })
</script>

<script type="text/javascript">
	// $("#selectAll").click(function(){

	// 	$("#customers").chosen('destroy');

	// 	if($("#selectAll").is(':checked'))

	// 		$("#customers option").attr("selected","selected");

	// 	else 

	// 		$('#customers option').removeAttr("selected");

	// 	$("#customers").chosen({
    //         with:"100%",
    //     });

	// });
</script>
@endpush