@extends('layout.template')
@section('title', 'Calculation')
@section('content')
<div class="container">
    <div class="row">
        <div class="col-12">
            <h1>Calculation Option</h1>
        </div>
        @if (session('status'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('status') }}
            </div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger" role="alert">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <form method="post" action="{{url('calculate/store')}}" id="calculate_option">
            <div class="col-6">
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="cal_option" id="opt_1" value="1">
                    <label class="form-check-label" for="opt_1">Evaluation of lightning performance</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="cal_option" id="opt_2"  value="2" checked>
                    <label class="form-check-label" for="opt_2">LLPD selection based on outage number</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="cal_option" id="opt_3" value="3">
                    <label class="form-check-label" for="opt_3">On hand LLPD based selection</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="take_account" value="" id="take_account">
                    <label class="form-check-label" for="take_account">Take into account the short-circuit current</label>
                </div>
                <div class="form-floating my-3">
                    <input type="number" class="form-control" id="number_outages" name="number_outages" placeholder="Target number of outages" value="5">
                    <label for="number_outages">Target number of outages</label>
                </div>
                <div class="form-floating my-3">
                    <input type="number" class="form-control" id="quantity" name="quantity" placeholder="On hand LLPD quantity" value="500000" disabled="disabled">
                    <label for="number_outages">On hand LLPD quantity</label>
                </div>
                <label class="mt-3">LLPD Selection</label>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="llpd_selection" id="dls" checked>
                    <label class="form-check-label" for="dls">DLS</label>
                </div>
                <select class="form-select" name="dls_select" aria-label="DLS selection">
                    <option selected>Select DLS</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="llpd_selection" id="iov">
                    <label class="form-check-label" for="iov">IOV</label>
                </div>
                <select class="form-select" name="iov_select" aria-label="IOV selection">
                    <option selected>Select IOV</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>
                <div class="mt-3">
                    <button class="btn btn-primary" type="submit">Ok</button>
                    <button class="btn btn-secondary">Cancel</button> 
                </div>
            </div>
        </form>
    </div>
</div>
@endsection
@section('footer')
<script type="text/javascript">
    $(document).ready(function() {
        $('#calculate_option input').on('change', function() {
            var cal_option_val = $('input[name=cal_option]:checked', '#calculate_option').val();  
            if(cal_option_val == 1){
                $('input[name=take_account], input[name=number_outages], input[name=quantity], input[name=llpd_selection], select[name=dls_select], select[name=iov_select]').attr('disabled', 'disabled');
            }else if(cal_option_val == 2){
                $('input[name=quantity]').attr('disabled', 'disabled');
                $('input[name=take_account], input[name=number_outages], input[name=llpd_selection], select[name=dls_select], select[name=iov_select]').removeAttr('disabled', 'disabled');
            }else{
                $('input[name=number_outages]').attr('disabled', 'disabled');
                $('input[name=take_account], input[name=quantity], input[name=llpd_selection], select[name=dls_select], select[name=iov_select]').removeAttr('disabled', 'disabled');
            }
        });
    });
</script>
@endsection