@extends('layout.template')
@section('title', 'Home')
@section('content')
<div class="container my-5">
    <div>
        @if (session('status'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('status') }}
            </div>
        @elseif(session('failed'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('failed') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </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=""> -->
            <table class="table_main">
                <tr class="line_above d-none" id="line_above_0">
                    <td class="section" id="section_above_0">
                        <a href="#" col="0" data-bs-toggle="modal" data-bs-target="#modal_section_0">
                            <img src="{{url('img/icon-section.png')}}" class="width_icon">
                            <p id="section_above_txt_0">Section</p>
                        </a>
                    </td>
                    <td class="transfo d-none" id="transform_above_0">
                        <img src="{{url('img/icon-transformer.png')}}" class="width_icon">
                        <p id="tranform_above_txt_0">Step-up transformer</p>
                    </td>
                    <td class="plus_above_side" id="plus_above_side_0"><i class="fa-solid fa-circle-plus"></i></td>
                    <td class="div_card_above_side d-none">
                        <div class="card select_card" id="cardlist_above_side_0" style="position: absolute; z-index: 2; left: -50px; top: 0;">
                            <div class="card-header">
                                Please select
                            </div>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <a href="#" class="cardlist_above_side" id="add_stepup_above_side_0"><i class="fa-solid fa-circle-stop"></i> Step-up transformer</a>
                                </li>
                                <li class="list-group-item">
                                    <a href="#" class="cardlist_above_side" id="add_section_above_side_0" row="0" data-bs-toggle="modal" data-bs-target="#modal_section_0">
                                        <i class="fa-solid fa-circle-plus"></i> Additional section
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </td>   
                </tr>
                <tr class="main_line">
                    <td class="substation">
                        <a href="#" class="modal_bb" data-bs-toggle="modal" data-bs-target="#modal_substation" col="0">
                            <img src="{{url('img/icon-substation.png')}}" class="width_icon section_img_process">
                            <p id="substation_txt">Substation</p>
                        </a>
                    </td>
                    <td class="section d-none" id="tb_section" col="0">
                        <a href="#" class="modal_bb" col="0" id="a_name_b_0" data-bs-toggle="modal" data-bs-target="#modal_section_0">
                            <img src="{{url('img/icon-section.png')}}" class="width_icon">
                            <p id="section_txt_0">Section</p>
                        </a>
                    </td>
                    <td class="transfo d-none" id="transform">
                        <img src="{{url('img/icon-transformer.png')}}" class="width_icon">
                        <p id="tranform_txt_0">Step-up transformer</p>
                    </td>
                    <td class="node d-none" id="node">
                        <div class="div_section p-0 m-0 mt-3" id="div_section_0">
                            <a href="#" col="0" data-bs-toggle="modal" data-bs-target="#modal_section_0">
                                <span class="plus_sub_section_above" id="plus_sub_section_above_0" col="0"><i class="fa-solid fa-circle-plus"></i></span>
                            </a>
                            <div class="card d-none select_card" id="cardlist_above_0" style="position: absolute; z-index: 2; left: 50px; top: -39px;">
                                <div class="card-header">
                                    Please select
                                </div>
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">
                                        <a href="#" class="cardlist_above" id="add_stepup_above_0"><i class="fa-solid fa-circle-stop"></i> Step-up transformer</a>
                                    </li>
                                    <li class="list-group-item">
                                        <a href="#" class="cardlist_above" id="add_section_above_0" data-bs-toggle="modal" data-bs-target="#modal_section_0"><i class="fa-solid fa-circle-plus"></i> Additional section</a>
                                    </li>
                                    <li class="list-group-item">
                                        <a href="#" class="cardlist_above" id="add_node_above_0"><i class="fa-solid fa-diagram-project"></i> Node</a>
                                    </li>
                                </ul>
                            </div>
                            <!-- <span class="tbc_close_sub" id="tb_close_b_0" col="0"><i class="bi bi-x-circle"></i></span> -->
                            <span class="row_main section_img_process"><img src="{{url('img/icon-node.png')}}" class="height_node"></span>
                            <a href="#" col="0" data-bs-toggle="modal" data-bs-target="#modal_section_0">
                              <span class="plus_sub_section_below" id="plus_sub_section_below_0" col="0"><i class="fa-solid fa-circle-plus"></i></span>
                            </a>
                            <div class="card d-none select_card" id="cardlist_below_0" style="position: absolute; z-index: 2; left: 100px; top: 0;">
                                <div class="card-header">
                                    Please select
                                </div>
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">
                                        <a href="#" class="cardlist_below" id="add_stepup_below_0"><i class="fa-solid fa-circle-stop"></i> Step-up transformer</a>
                                    </li>
                                    <li class="list-group-item">
                                        <a href="#" class="cardlist_below" id="add_section_below_0" row="0" data-bs-toggle="modal" data-bs-target="#modal_section_0"><i class="fa-solid fa-circle-plus"></i> Additional section</a>
                                    </li>
                                    <li class="list-group-item">
                                        <a href="#" class="cardlist_below" id="add_node_below_0"><i class="fa-solid fa-diagram-project"></i> Node</a>
                                    </li>
                                </ul>
                            </div> 
                        </div>
                    </td>
                    <td class="section_plus d-none"><i class="fa-solid fa-circle-plus"></i></td>
                    <td class="div_card d-none">
                        <div class="card select_card" id="cardlist_0" style="position: absolute; z-index: 2; left: 0; top: 0;">
                            <div class="card-header">
                                Please select
                            </div>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <a href="#" class="cardlist" id="add_stepup_0"><i class="fa-solid fa-circle-stop"></i> Step-up transformer</a>
                                </li>
                                <li class="list-group-item">
                                    <a href="#" class="cardlist" id="add_section_0" col="0" data-bs-toggle="modal" data-bs-target="#modal_section_0">
                                        <i class="fa-solid fa-circle-plus"></i> Additional section
                                    </a>
                                </li>
                                <li class="list-group-item">
                                    <a href="#" class="cardlist" id="add_node_0"><i class="fa-solid fa-diagram-project"></i> Node</a>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tr>
                <tr class="line_below d-none" id="line_below_0">
                    <td class="section" id="section_below">
                        <a href="#" col="0" data-bs-toggle="modal" data-bs-target="#modal_section_0">
                            <img src="{{url('img/icon-section.png')}}" class="width_icon">
                            <p id="section_below_txt_0">Section</p>
                        </a>
                    </td>
                    <td class="transfo d-none" id="transform_below">
                        <img src="{{url('img/icon-transformer.png')}}" class="width_icon">
                        <p id="tranform_below_txt_0">Step-up transformer</p>
                    </td>
                    <td class="plus_below_side" id="plus_below_side_0">
                        <i class="fa-solid fa-circle-plus"></i>
                    </td>
                    <td class="div_card_below_side d-none">
                        <div class="card select_card" id="cardlist_below_side_0" style="position: absolute; z-index: 2; left: 0; top: 0;">
                            <div class="card-header">
                                Please select
                            </div>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <a href="#" class="cardlist_below_side" id="add_stepup_below_side_0"><i class="fa-solid fa-circle-stop"></i> Step-up transformer</a>
                                </li>
                                <li class="list-group-item">
                                    <a href="#" class="cardlist_below_side" id="add_section_below_side_0" row="0"  data-bs-toggle="modal" data-bs-target="#modal_section_0"><i class="fa-solid fa-circle-plus"></i> Additional section</a>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tr>   
            </table>
        <!-- </form> -->
    </div>
</div>
<div class="modal fade" id="modal_substation" tabindex="-1" aria-labelledby="modalALabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title blue_title" id="modalALabel">Substation Parameters</h5>
                <button type="button" class="btn-close blue_title" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="alert-success alert-dismissible fade show" id="alert_success" role="alert">
                <span id="alert_success_p"></span>
            </div>
            @if(count($data['project']) >= 1)
                @php
                    $data_project = $data['project'];
                @endphp
            @else
                @php
                    $data_project = '';
                @endphp
            @endif 
            <form method="post" action="{{url('main/store')}}" id="modal_substation_form">
                @csrf
                <div class="modal-body">
                    <div class="row" id="collapse_menu">
                        <div class="col-3">
                            <p>
                                <a id="use_sub" data-bs-toggle="collapse" href="#collapsesub" role="button" aria-expanded="false" aria-controls="collapsesub" data-parent="#collapse_menu" class="text_gray">
                                    <img src="{{url('img/icon-load.png')}}" class="img_load">
                                    <span>Load Substation from library</span>
                                </a>
                            </p>
                            <input type="hidden" name="type_sub" class="form-control" value="substation">
                        </div>
                        <div class="col-3">
                            <p>
                                <a href="#" id="save_sub" class="text_gray">
                                    <img src="{{url('img/icon-save.png')}}" class="img_save">
                                    <span>Save Substation to library</span>
                                </a>
                            </p>
                        </div>
                        <div class="col-3">
                            <p>
                                <a id="use_trans" data-bs-toggle="collapse" href="#collapsetrans" role="button" aria-expanded="false" aria-controls="collapsetrans" data-parent="#collapse_menu" class="text_gray">
                                    <img src="{{url('img/icon-load.png')}}" class="img_load">
                                    <span>Load Transformer from library</span>
                                </a>
                            </p>
                            <input type="hidden" name="type_trans" class="form-control" value="transformer">
                        </div>
                        <div class="col-3">
                            <p>
                                <a href="#" id="save_trans" class="text_gray">
                                    <img src="{{url('img/icon-save.png')}}" class="img_save">
                                    <span>Save Transformer to library</span> 
                                </a>
                            </p>
                        </div>
                        @php
                            $data_json = json_decode($data['library']);
                        @endphp
                        <div class="collapse" id="collapsesub">
                            <div class="card card-body">
                                <h3 class="blue_title">Substation library</h3>
                                <table class="table library m-0" id="sub_library_main" style="width:100%">
                                    <thead>
                                        <th>Name</th>
                                        <th>Nominal Voltage</th>
                                        <th>Recloseing Probability</th>
                                        <th>Power</th>
                                        <th>Short circuit losses</th>
                                        <th>Phase ground short circuit</th>
                                        <th>Neutral arrangement</th>
                                        <th>Number of circuits</th>
                                    </thead>
                                    <tbody>
                                        @for($i=0; $i < count($data_json); $i++)
                                            @if($data_json[$i]->type_lib == 'substation')
                                                @php 
                                                    $data_substation = json_decode($data_json[$i]->data);
                                                @endphp
                                                <tr>
                                                    <td>{{$data_json[$i]->name_lib}}</td>
                                                    <td class="voltage_class">{{$data_substation->voltage_class .'  '.$data_substation->voltage_class_type}}</td>
                                                    <td class="reclose">{{$data_substation->reclose .'  '.$data_substation->reclose_type}}</td>
                                                    <td class="power_transformer_number">{{$data_substation->power_transformer_number .'  '.$data_substation->power_transformer_voltage_type}}</td>
                                                    <td class="losses">{{$data_substation->losses .'  '.$data_substation->losses_voltage_type}}</td>
                                                    <td class="phase_ground">{{$data_substation->phase_ground .'  '.$data_substation->phase_ground_voltage_type}}</td>
                                                    <td class="neutral">{{$data_substation->neutral}}</td>
                                                    <td class="circuits_number">{{$data_substation->circuits_number}}</td>
                                                </tr>
                                            @endif
                                        @endfor
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="collapse" id="collapsetrans">
                            <div class="card card-body">
                                <h3 class="blue_title">Transformer library</h3>
                                <table class="table library m-0" id="trans_library_main" style="width:100%">
                                    <thead>
                                        <th>Name</th>
                                        <th>Nominal Voltage</th>
                                        <th>Power</th>
                                        <th>Short circuit losses</th>
                                        <th>Phase ground short circuit</th>
                                    </thead>
                                    <tbody>
                                        @for($i=0; $i < count($data_json); $i++)
                                            @if($data_json[$i]->type_lib == 'transformer')
                                                @php 
                                                    $data_substation = json_decode($data_json[$i]->data);
                                                @endphp
                                                <tr>
                                                    <td>{{$data_json[$i]->name_lib}}</td>
                                                    <td class="voltage_class">{{$data_substation->voltage_class .'  '.$data_substation->voltage_class_type}}</td>
                                                    <td class="power_transformer_number">{{$data_substation->power_transformer_number .'  '.$data_substation->power_transformer_voltage_type}}</td>
                                                    <td class="losses">{{$data_substation->losses .'  '.$data_substation->losses_voltage_type}}</td>
                                                    <td class="phase_ground">{{$data_substation->phase_ground .'  '.$data_substation->phase_ground_voltage_type}}</td>
                                                </tr>
                                            @endif
                                        @endfor
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <input type="hidden" name="project_name" class="form-control" value="default">
                        <div class="input-group mb-3">
                            <label class="blue_title">Substation Name:<span style="color: red;">*</span></label>
                            <input type="text" name="sub_name" class="form-control select_input" value="" placeholder="Please enter value">
                        </div>
                        <div class="input-group mb-3">
                            <label class="blue_title">Voltage Class (Un): </label>
                            <select class="form-select select_input" name="voltage_class">
                                @for ($i=30; $i<=40; $i++)
                                    <option value="{{$i}}">{{$i}}</option>
                                @endfor  
                            </select>
                            <input type="hidden" name="voltage_class_type" value="kV">
                            <label class="input-group-text blue_title" for="voltage_class">kV</label>
                        </div>
                        <div class="row">
                            <div class="col-5">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="1" id="short_circuit" name="short_circuit" checked=checked>
                                    <label class="form-check-label blue_title" for="short_circuit">Calculate short-circuit current</label>
                                </div>
                            </div>
                            <div class="col-7">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="power_transformer" id="power_transformer" checked="checked" value="1">
                                    <label class="form-check-label blue_title" for="power_transformer">In accordance with power of transformer</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input radio_input" type="radio" name="power_transformer" id="busbar" value="2">
                                    <label class="form-check-label blue_title" for="busbar">Measured short-circuit on busbar</label>
                                </div>
                            </div>
                        </div>
                        <div>
                            <table class="w-100">
                                <tbody>
                                    <tr>
                                        <td class="width_label">
                                            <label class="blue_title">Reclosing Probability (Pr): </label> 
                                        </td>
                                        <td class="pt-3">
                                            <input type="text" name="reclose" value="0.7" class="form-control select_input" placeholder="Please enter value">
                                            <input type="hidden" name="reclose_type" value="">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="width_label">
                                            <label class="blue_title">Power of transformers (P): </label>
                                        </td>
                                        <td class="pt-3">
                                            <div class="input-group">
                                                <input type="text" name="power_transformer_number" value="60" class="select_input form-control" placeholder="Please enter value">
                                                <input type="hidden" name="power_transformer_voltage_type" value="MVa90">
                                                <label class="input-group-text blue_title" for="power_transformer_number">MVa</label>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="width_label">
                                            <label class="blue_title">Short-circuit losses (Uk): </label>
                                        </td>
                                        <td class="pt-3">
                                            <div class="input-group">
                                                <input type="text" name="losses" value="10.5" class="select_input form-control" placeholder="Please enter value">
                                                <input type="hidden" name="losses_voltage_type" value="%">
                                                <label class="input-group-text blue_title" for="power_transformer_number">%</label>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="width_label">
                                            <label class="blue_title">Phase-ground short-circuit (Isc): </label>
                                        </td>
                                        <td class="pt-3">
                                            <div class="input-group">
                                                <input type="text" name="phase_ground" value="22" class="select_input form-control" placeholder="Please enter value" disabled>
                                                <input type="hidden" name="phase_ground_voltage_type" value="kA">
                                                <label class="input-group-text blue_title" for="power_transformer_number">kA</label>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="width_label">
                                            <label class="blue_title">Neutral arrangement: </label>
                                        </td>
                                        <td class="pt-3">
                                            <div class="input-group ps-2">
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input radio_input" type="radio" name="neutral" id="Solidly_grounded" value="Solidly_grounded" checked="checked">
                                                    <label class="form-check-label blue_title" for="Solidly_grounded">Solidly grounded</label>
                                                </div>
                                                 <div class="form-check form-check-inline">
                                                    <input class="form-check-input radio_input" type="radio" name="neutral" id="insulated" value="insulated">
                                                    <label class="form-check-label blue_title" for="insulated">Insulated</label>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="width_label">
                                            <label class="blue_title">Number of circuits: </label>
                                        </td>
                                        <td class="pt-3">
                                            <div class="input-group ps-2">
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input radio_input" type="radio" name="circuits_number" id="single_circuit" value="single_circuit" checked="checked">
                                                    <label class="form-check-label blue_title" for="single_circuit">Single circuit</label>
                                                </div>
                                                 <div class="form-check form-check-inline">
                                                    <input class="form-check-input radio_input" type="radio" name="circuits_number" id="double_circuit" value="double_circuit">
                                                    <label class="form-check-label blue_title" for="double_circuit">Double circuit</label>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="mt-3 text-end">
                            <a class="btn btn_grz_blue w-15" href="#" id="submit_substation">Accept</a>
                            <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Cancel</button> -->
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
@section('footer')
<script type="text/javascript">
    $(document).ready(function() {
        $("#modal_substation").modal('show');
        $(document).click(function() {
            $('.select_card').parent().addClass('d-none');
        });

        $('.library').DataTable({
            responsive: true,
            "scrollX": true,
            "info": false,
            "sort": false,
            language: {
                search: "",
            },
            "stateSave": true,
            "bDestroy": true
        });

        $('.dataTables_length').addClass('d-none');
        $('.dataTables_filter').addClass('text-start float-start');
        $('[type=search]').each(function () {
            $(this).attr("placeholder", "Search");
            $(this).before('<span class="fa fa-search"></span>');
        });
        $('.dataTables_scrollHeadInner').css('width','100%');
        $('.dataTable').css('width','100%'); 

        $('#modal_substation_form input').on('change', function() {
            var short_circuit_val = $('input[name=short_circuit]:checked', '#modal_substation_form').val();
             // alert(short_circuit_val);
            if(short_circuit_val == 1){
                $('input[name=power_transformer], input[name=power_transformer_number], select[name=power_transformer_voltage_type], input[name=losses], select[name=losses_voltage_type], input[name=busbar]').removeAttr('disabled', 'disabled');
                var power_transformer_val = $('input[name=power_transformer]:checked').val();
                if(power_transformer_val == 2){
                    $('input[name=power_transformer_number], select[name=power_transformer_voltage_type], input[name=losses], select[name=losses_voltage_type], input[name=busbar]').attr('disabled', 'disabled');
                    $('input[name=phase_ground], select[name=phase_ground_voltage_type]').removeAttr('disabled', 'disabled');
                }else{
                     $('input[name=power_transformer_number], select[name=power_transformer_voltage_type], input[name=losses], select[name=losses_voltage_type], input[name=busbar]').removeAttr('disabled', 'disabled');
                    $('input[name=phase_ground], select[name=phase_ground_voltage_type]').attr('disabled', 'disabled');
                }
            }
        });

        $('#submit_substation').click(function(){
            $('#modal_substation_form').submit();
        });

        $('#save_sub').click(function(){
            var serializedData = $('#modal_substation_form').serialize();
            $.ajax({
                url: "{{url('main/sub_lib')}}",
                type: "post",
                data: serializedData ,
                success: function (response) {
                    $("#alert_success_p").text(response);
                    $("#alert_success").addClass('alert');
                },
                error: function(jqXHR, textStatus, errorThrown) {
                   console.log(textStatus, errorThrown);
                }
            });
        });

        $('#save_trans').click(function(){
            var serializedData = $('#modal_substation_form').serialize();
            $.ajax({
                url: "{{url('main/trans_lib')}}",
                type: "post",
                data: serializedData ,
                success: function (response) {
                    $("#alert_success_p").text(response);
                    $("#alert_success").addClass('alert');
                },
                error: function(jqXHR, textStatus, errorThrown) {
                   console.log(textStatus, errorThrown);
                }
            });
        });
        
        $(".library tr").click(function(){
            var voltage_class = $(this).find('.voltage_class').text().split(" ");
            var reclose = $(this).find('.reclose').text().split(" ");
            var power_transformer_number = $(this).find('.power_transformer_number').text().split(" ");
            var losses = $(this).find('.losses').text().split(" ");
            var phase_ground = $(this).find('.phase_ground').text().split(" ");
            var neutral = $(this).find('.neutral').text();
            var circuits_number = $(this).find('.circuits_number').text();
            $("select[name=voltage_class]").find('option:selected').removeAttr('selected','selected');
            $("select[name=voltage_class] option[value="+voltage_class[0]+"]").attr('selected','selected');
            $("input[name=reclose]").val(reclose[0]);
            $("input[name=power_transformer_number]").val(power_transformer_number[0]);
            $("input[name=losses]").val(losses[0]);
            $("input[name=phase_ground]").val(phase_ground[0]);
            $("input[name=neutral]").removeAttr("checked");
            $("input[name=neutral][value='"+neutral+"']").prop("checked","checked");
            $("input[name=circuits_number]").removeAttr("checked");
            $("input[name=circuits_number][value='"+circuits_number+"']").prop("checked","checked");
        });        
    });
</script>
@endsection