@extends('st::layouts.app')

@section('head')
<!-- Prism -->
<link rel="stylesheet" href="{{ url('vendors/prism/prism.css') }}" type="text/css">

@endsection

@section('content')

<div class="row">
    <div class="col-md-12">
        <div class="card ">
            <div class="card-body">
                <h6 class="card-title">Message</h6>
                {{ csrf_field() }}
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <div class="row">
                            <div class="col-md-12 mb-2">
                                <i class="fa fa-search text-info" aria-hidden="true"></i>
                                <label>Field Officer ID</label>
                                <input type="text" class="form-control auto-complete" id="txtFieldOfficerID" autocomplete="off">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 mb-2">
                                <i class="fa fa-search text-info" aria-hidden="true"></i>
                                <label>Field Officer Name</label>
                                <input type="text" class="form-control auto-complete" id="txtFieldOfficerName" autocomplete="off">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 mb-3">
                        <br>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="imgContainer">
                                    <img class="img img-thumbnail" src="/images/employee.jpg" id="imgEmployee" alt="image/">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label>Message</label>
                        <textarea class="form-control"></textarea>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-5">

                    </div>
                    <div class="col-md-1">
                        <button class="btn btn-primary">Send</button>
                    </div>
                </div>
            </div>

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

<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
@section('script')

<!-- Prism -->
<script src="{{ url('vendors/prism/prism.js') }}"></script>


@endsection