@extends('layout.template')
@section('title', 'Welcome')
@section('content')
    <div class="container my-5">
        <div class="row home">
            <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
              <div class="card border-0 shadow rounded-3 my-5">
                <div class="card-body p-3 p-sm-3">                    
                    <div id="div_start">
                        <h3 class="card-title text-center mb-5 blue_title">Welcome to Groza</h3>
                        <div class="row text-center">
                            <div class="col-md-4 mb-5">
                              <a class="btn btn_grz_blue" href="{{url('main')}}">Start Design</a>
                            </div>
                            @if(count($data['project']) >= 1)
                                <div class="col-md-4 mb-5">
                                    <a class="btn btn_grz_blue" href="{{url('project/'.$data['project']['0']->id)}}">Latest Design</a>
                                </div>
                            @endif
                            <div class="col-md-4">
                                <!-- <a class="btn btn-primary" href="{{url('main')}}" id="template" data-bs-target="#modal_template_list" data-bs-toggle="modal">Use Templates</a> -->
                                <a class="btn btn_grz_blue" data-bs-target="#modal_template_list" data-bs-toggle="modal">Use Templates</a>
                            </div>
                            <div class="d-grid blue_title">
                              <p>or <a href="#">check the manual before</a> you begin</p>
                            </div>
                        </div>
                    </div>
                    <div class="d-none" id="div_template">
                        <h3 class="card-title text-center mb-5">Templates page</h3>
                        <div class="row text-center">
                            <div class="col-md-6 mb-5">
                              <a class="btn btn_grz_blue" href="{{url('main')}}">Per-Creates Templates</a>
                            </div>
                            <div class="col-md-6">
                              <a class="btn btn_grz_blue" href="#">Templates From Drive</a>
                            </div>
                        </div>
                    </div>
                </div>
              </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal_template_list" tabindex="-1" aria-labelledby="modalALabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title blue_title" id="modalALabel">Template</h5>
                    <button type="button" class="btn-close" 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>
                <div class="modal-body">
                    <div class="row">
                        <table class="table template_project text-center" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Voltage</th>
                                    <th>Circuits Number</th>
                                    <th>Neutral</th>
                                    <th>Section Number</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @for($i=0; $i < count($data['project_list']); $i++)
                                @php
                                $project_list_data =  json_decode($data['project_list'][$i]->data);
                                @endphp
                                <tr>
                                    <td>{{$project_list_data->substation->name}}</td>
                                    <td>{{$project_list_data->substation->voltage_class .' '. $project_list_data->substation->voltage_class_type}}</td>
                                    <td>{{$project_list_data->substation->circuits_number}}</td>
                                    <td>{{$project_list_data->substation->neutral}}</td>
                                    <td>{{$project_list_data->total->section}}</td>
                                    <td><a href="project/{{$data['project_list'][$i]->id.'/'.$data['project_list'][$i]->created_by}}" class="btn btn_grz_blue">Open</a></td>
                                </tr>
                                @endfor
                            </tbody>
                        </table> 
                    </div>
                </div> 
            </div>
        </div>
    </div>
@endsection
@section('footer')
<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery("#template").click(function(){
            jQuery("#div_template").removeClass('d-none');
            jQuery('#div_start').addClass('d-none');
        });

        $(".template_project").DataTable({
            responsive: true,
            "scrollX": true,
            "info": false,
            "sort": false,
            language: {
                search: "",
            }
        });
        $('.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%');   
    });
</script>
@endsection