<style>
    .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        padding: 10px;
        gap: 10px;
    }

    .form-select {
        margin-top: 5px
    }

    .center {
        text-align: center;
    }
    .btn-soft-primary-capture {
    --vz-btn-color: #192D4B;
    --vz-btn-bg: rgba(64, 81, 137, 0.1);
    --vz-btn-border-color: transparent;
    --vz-btn-hover-color: #fff;
    --vz-btn-hover-bg: #192D4B;
    --vz-btn-hover-border-color: transparent;
    --vz-btn-focus-shadow-rgb: 64, 81, 137;
    --vz-btn-active-color: var(--vz-btn-hover-color);
    --vz-btn-active-bg: #192D4B;
    --vz-btn-active-border-color: transparent;
}
</style>
<div class="col-12 p-0">
    {!! editcard('histopathology', 'histopathology.blade.php') !!}
    <div class="card card-custom gutter-b">
        <div class="card-body">
            <h5><b>Boston Bowel Prep Score</b></h5>

            <div class="row">
                <div class="col-4">
                    0 = Irremovable, heavy, hard stools <br>
                    1 = Semi-solid, only partially removable stools <br>
                    2 = Brown liquid/removable semi-solid stools <br>
                    3 = Clear liquid <br>
                    4 = Empty and Clean <br>
                    <!-- center modal -->
                    <button type="button" class="btn btn-soft-primary-capture w-100 mt-2" data-bs-toggle="modal"
                    data-bs-target="#modal_bostun">Example Score</button>
                </div>
                <div class="col-6">
                    <div class="grid-container">
                        <div class="grid-item">
                            <b>Rectum</b>
                            <select class="form-select boston_save boston_cal" id="rectum">
                                <option value="" selected>Score</option>
                                <option value="0" @selected(@$case->bowel_score['rectum'] == '0')>0</option>
                                <option value="1" @selected(@$case->bowel_score['rectum'] == '1')>1</option>
                                <option value="2" @selected(@$case->bowel_score['rectum'] == '2')>2</option>
                                <option value="3" @selected(@$case->bowel_score['rectum'] == '3')>3</option>
                                <option value="4" @selected(@$case->bowel_score['rectum'] == '4')>4</option>
                            </select>
                        </div>
                        <div class="grid-item">
                            <b>Sigmoid Colon</b>
                            <select class="form-select boston_save boston_cal" name="" id="sigmoid">
                                <option value=""selected>Score</option>
                                <option value="0" @selected(@$case->bowel_score['sigmoid'] == '0')>0</option>
                                <option value="1" @selected(@$case->bowel_score['sigmoid'] == '1')>1</option>
                                <option value="2" @selected(@$case->bowel_score['sigmoid'] == '2')>2</option>
                                <option value="3" @selected(@$case->bowel_score['sigmoid'] == '3')>3</option>
                                <option value="4" @selected(@$case->bowel_score['sigmoid'] == '4')>4</option>
                            </select>
                        </div>
                        <div class="grid-item">
                            <b>Descending Colon</b>
                            <select class="form-select boston_save boston_cal"  name="" id="descending">
                                <option value="" selected>Score</option>
                                <option value="0" @selected(@$case->bowel_score['descending'] == '0')>0</option>
                                <option value="1" @selected(@$case->bowel_score['descending'] == '1')>1</option>
                                <option value="2" @selected(@$case->bowel_score['descending'] == '2')>2</option>
                                <option value="3" @selected(@$case->bowel_score['descending'] == '3')>3</option>
                                <option value="4" @selected(@$case->bowel_score['descending'] == '4')>4</option>
                            </select>
                        </div>
                        <div class="grid-item">
                            <b>Transverse Colon</b>
                            <select class="form-select boston_save boston_cal" name="" id="transverse">
                                <option value="" selected>Score</option>
                                <option value="0" @selected(@$case->bowel_score['transverse'] == '0')>0 </option>
                                <option value="1" @selected(@$case->bowel_score['transverse'] == '1')>1</option>
                                <option value="2" @selected(@$case->bowel_score['transverse'] == '2')>2</option>
                                <option value="3" @selected(@$case->bowel_score['transverse'] == '3')>3</option>
                                <option value="4" @selected(@$case->bowel_score['transverse'] == '4')>4 </option>
                            </select>
                        </div>
                        <div class="grid-item">
                            <b>Ascending Colon</b>
                            <select class="form-select boston_save boston_cal" name="" id="ascending">
                                <option value="" selected>Score</option>
                                <option value="0" @selected(@$case->bowel_score['ascending'] == '0')>0</option>
                                <option value="1" @selected(@$case->bowel_score['ascending'] == '1')>1 </option>
                                <option value="2" @selected(@$case->bowel_score['ascending'] == '2')>2</option>
                                <option value="3" @selected(@$case->bowel_score['ascending'] == '3')>3 </option>
                                <option value="4" @selected(@$case->bowel_score['ascending'] == '4')>4 </option>
                            </select>
                        </div>
                        <div class="grid-item">
                            <b>Cecum</b>
                            <select class="form-select boston_save boston_cal" name="" id="cecum">
                                <option value="" selected>Score</option>
                                <option value="0" @selected(@$case->bowel_score['cecum'] == '0')>0 </option>
                                <option value="1" @selected(@$case->bowel_score['cecum'] == '1')>1 </option>
                                <option value="2" @selected(@$case->bowel_score['cecum'] == '2')>2 </option>
                                <option value="3" @selected(@$case->bowel_score['cecum'] == '3')>3 </option>
                                <option value="4" @selected(@$case->bowel_score['cecum'] == '4')>4 </option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-2 align-self-center text-center" style="justify-items: center;">
                    <div class="w-50">
                        Score
                        <hr>
                        <input type="text" class="form-control text-center" id="cal_boston" value="{{@$case->boston_score}}">
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>

<script>
    $(".boston_save").change(function(){
        var location = $(this).attr('id');
        var score = $(this).val();
        var cid    = "{{ $cid }}"
        $.post("{{url('api/procedure')}}",{
            event : "boston_bowel",
            cid : cid,
            location : location,
            score : score,
        },function(data,status) {

        })
    });




    $(".boston_cal").change(function(){

        var rectum = $("#rectum").val();
        var sigmoid = $("#sigmoid").val();
        var descending = $("#descending").val();
        var transverse = $("#transverse").val();
        var ascending = $("#ascending").val();
        var cecum = $("#cecum").val();

        if(rectum == 0 || sigmoid == 0 || descending == 0 || transverse == 0 || ascending == 0 || cecum == 0){
            var total = "D";
        }else if(rectum == 1 || sigmoid == 1 || descending == 1 || transverse == 1 || ascending == 1 || cecum == 1){
            var total = "C";
        }else if(rectum == 2 || sigmoid == 2 || descending == 2 || transverse == 2 || ascending == 2 || cecum == 2){
            var total = "B";
        }else if((rectum == 3 || rectum == 4) && (sigmoid == 3 || sigmoid == 4) && (descending == 3 || descending == 4) && (transverse == 3 || transverse == 4) && (ascending == 3 || ascending == 4) && (cecum == 3 || cecum == 4)){
            var total = "A";
        }
        $("#cal_boston").val(total);

        var total = $("#cal_boston").val();
        console.log(total);

        $.post("{{url('api/procedure')}}",{
            event : "save_boston",
            cid : "{{ $cid }}",
            total : total,
        },function(data,status) {

        })


    });
</script>
