@extends ('layouts.template')

@section('content')

    <?php $patients = [1,2,3,4]; ?>

    <div class="p-3 mcp-theme-1" id="newPatientContainer">
        <div class="col-12 col-lg-6 px-0">
            <div class="card d-block mb-3" moe="">

                <div class="card-header">
                    <strong>
                        <i class="fas fa-user-plus"></i>
                        New Patient
                    </strong>
                </div>
                <div class="card-body">
                    <form show url="/api/client/create" class="px-3 pt-3 pb-1 primary-form" redir="patients/view/[data]">
                        @if (session('message'))
                            <div class="alert alert-danger">{{ session('message') }}</div>
                        @endif
                        <div class='form-group mb-3'>
                            <label class='control-label'>How is quarantine treating you?</label>
                            <textarea class='form-control' type='text' name='howIsQuarantine'></textarea>
                        </div>
                        <div class='form-group mb-3'>
                            <label class='control-label'>First Name *</label>
                            <input class='form-control' type='text' name='nameFirst' required>
                        </div>
                        <div class='form-group mb-3'>
                            <label class='control-label'>Last Name *</label>
                            <input class='form-control' type='text' name='nameLast' value='' required>
                        </div>
                        <div class='form-group mb-3'>
                            <label class='control-label'>Sex</label>
                            <select class='form-control' name='sex' value='' >
                                <option value=''>-- Select --</option>
                                <option value='M'>M</option>
                                <option value='F'>F</option>
                            </select>
                        </div>
                        <div class='form-group mb-3'>
                            <label class='control-label'>Date Of Birth *</label>
                            <input class='form-control' type='date' name='dateOfBirth' max="{{ date('Y-m-d') }}" required>
                        </div>
                        <div class='form-group mb-3'>
                            <label class='control-label d-flex align-items-center'>
                                <span>Home Phone Number</span>
                                <a href="#"
                                   class="ml-2 px-1 on-hover-opaque hpn-to-cpn">
                                    <i class="fa fa-arrow-down"></i>
                                </a>
                                <a href="#"
                                   class="ml-2 px-1 on-hover-opaque swap-pns">
                                    <i class="fa fa-retweet"></i>
                                </a>
                            </label>
                            <input class='form-control' stag-input-phone type='tel' name='homeNumber'>
                        </div>
                        <div class='form-group mb-3'>
                            <label class='control-label d-flex align-items-center'>
                                <span>Cell Phone Number</span>
                                <a href="#"
                                   class="ml-2 px-1 on-hover-opaque cpn-to-hpn">
                                    <i class="fa fa-arrow-up"></i>
                                </a>
                            </label>
                            <input class='form-control' stag-input-phone type='tel' name='cellNumber'>
                        </div>
                        <div class='form-group mb-3'>
                            <label class='control-label'>Email Address </label>
                            <input class='form-control' type='email' name='emailAddress'>
                        </div>
                        <div class='form-group mb-3'>
                            <label class='control-label'>Medicare Number *</label>
                            <input class='form-control' type='text' name='medicareNumber' required>
                        </div>
                        <div class='form-group mb-3'>
                            <label class='control-label'>Initiative</label>
                            <select name="initiative" class="form-control">
                                <option value="">-- select --</option>
                                @foreach($intiatives as $initiative)
                                <option value="{{$initiative}}">{{$initiative}}</option>
                                @endforeach
                            </select>
                        </div>
                    </form>
                </div>
                <div class="card-footer">
                    <button class="btn btn-primary" submit>Create New Patient</button>
                </div>
            </div>
        </div>
    </div>

    <script src="/inputmask-5.x/dist/inputmask.js"></script>
    <script>
        (function() {
            function init() {
                let im = new Inputmask("(999) 999-9999").mask('[stag-input-phone]');
                $(document)
                    .off('click.hpn-to-cpn', '.hpn-to-cpn')
                    .on('click.hpn-to-cpn', '.hpn-to-cpn', function() {
                        $('[name="cellNumber"]').val($('[name="homeNumber"]').val());
                        $('[name="homeNumber"]').val('');
                        return false;
                    });
                $(document)
                    .off('click.cpn-to-hpn', '.cpn-to-hpn')
                    .on('click.cpn-to-hpn', '.cpn-to-hpn', function() {
                        $('[name="homeNumber"]').val($('[name="cellNumber"]').val());
                        $('[name="cellNumber"]').val('');
                        return false;
                    });
                $(document)
                    .off('click.swap-pns', '.swap-pns')
                    .on('click.swap-pns', '.swap-pns', function() {
                        let hpn = $('[name="homeNumber"]').val();
                        $('[name="homeNumber"]').val($('[name="cellNumber"]').val());
                        $('[name="cellNumber"]').val(hpn);
                        return false;
                    });
            }
            addMCInitializer('new-patient', init, '#newPatientContainer');
        }).call(window);
    </script>

@endsection
