@push('before-scripts')
    <div class="modal fade" id="inboxModal" tabindex="-1" role="dialog" aria-labelledby="inboxModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="inboxModalLabel">Inbox</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group row">
                        <label for="email" class="col-sm-4 col-form-label">Email :</label>
                        <div class="col-sm-8">
                            <input type="text" readonly class="form-control-plaintext disabled" id="email">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="name" class="col-sm-4 col-form-label">Name :</label>
                        <div class="col-sm-8">
                            <input type="text" readonly class="form-control-plaintext disabled" id="name">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="last_name" class="col-sm-4 col-form-label">Last Name :</label>
                        <div class="col-sm-8">
                            <input type="text" readonly class="form-control-plaintext disabled" id="last_name">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="phone" class="col-sm-4 col-form-label">Phone Number :</label>
                        <div class="col-sm-8">
                            <input type="text" readonly class="form-control-plaintext disabled" id="phone">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="base_in_jakarta" class="col-sm-4 col-form-label">Are you based in Jakarta :</label>
                        <div class="col-sm-8">
                            <input type="text" readonly class="form-control-plaintext disabled" id="base_in_jakarta">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="address" class="col-sm-4 col-form-label">Address :</label>
                        <div class="col-sm-8">
                            <textarea readonly class="form-control-plaintext" rows="4" id="address"></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="about_yourself" class="col-sm-4 col-form-label">about yourself and the reasons why you want to join idein :</label>
                        <div class="col-sm-8">
                            <textarea readonly class="form-control-plaintext" rows="4" id="about_yourself"></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="find_idein" class="col-sm-4 col-form-label">How did you find out about idein :</label>
                        <div class="col-sm-8">
                            <input type="text" readonly class="form-control-plaintext disabled" id="find_idein">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="cv" class="col-sm-4 col-form-label">CV / Portfolio :</label>
                        <div class="col-sm-8">
                            {{-- <input type="text" readonly class="form-control-plaintext disabled" id="cv"> --}}
                            <a href="#" id="cv" class="btn btn-primary btn-sm">Download CV</a>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endpush
@push('after-scripts')
    <script>
        window.addEventListener('loadModalInbox', event => {
            console.log(event.detail.cv);
            $('#inboxModal').find('#email').val(event.detail.email)
            $('#inboxModal').find('#name').val(event.detail.name)
            $('#inboxModal').find('#last_name').val(event.detail.last_name)
            $('#inboxModal').find('#phone').val(event.detail.phone)
            $('#inboxModal').find('#base_in_jakarta').val(event.detail.base_in_jakarta)
            $('#inboxModal').find('textarea#address').val(event.detail.address)
            $('#inboxModal').find('textarea#about_yourself').val(event.detail.about_yourself)
            $('#inboxModal').find('#find_idein').val(event.detail.find_idein)
            $('#inboxModal').find('#cv').prop("href", event.detail.cv)
            if (event.detail.readCount > 0) {
                $('#badge-book-session').html(event.detail.readCount)
            }else {
                $('#badge-book-session').hide()
            }
        })
    </script>
@endpush