@extends('layout.template')
@section('title', 'Project')
@section('content')
<div class="container my-5">
    <div class="row">
        <div class="col-10 blue_title">
            <h3>Projects</h3>
        </div>
        <div class="col-2 text-end mb-3">
            <a href="{{url('/main')}}" class="btn btn_grz_blue">Add Project</a>
        </div>
        <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
        </div>
        <table class="table project" style="width:100%">
            <thead>
                <th>ID</th>
                <th>Name</th>
                <th>Substation</th>
                <th>Section number</th>
                <th>Owner</th>
                <th></th>
            </thead>
            <tbody>
                                @if(!empty($project))
                    @for($i=0; $i < count($project); $i++)
                        <tr>
                            <td>{{$project[$i]->id}}</td>
                            <td><a href="{{url('project/'.$project[$i]->id)}}">{{$project[$i]->project_name}}</a></td>
                            @php
                                $project_data = $project[$i]->data;
                                $project_decode = json_decode($project_data);
                            @endphp
                            <td>{{$project_decode->substation->name}}</td>
                            <td>{{$project_decode->total->section}}</td>
                            <td>{{$project[$i]->firstname . ' ' . $project[$i]->lastname}}</td>
                            <td>
                                <a href="#" project_id="{{$project[$i]->id}}" class="delete_project">
                                    <i class="fas fa-trash-alt"></i>
                                </a>
                            </td>
                        </tr>
                    @endfor
                @endif
            </tbody>
        </table>
    </div>
</div>
@endsection
@section('footer')
<script type="text/javascript">
    $(document).ready(function() {
        $('.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>');
        });

        // $('.delete_project').click(function(){
        $(".project").on("click", ".delete_project", function() {
            var project_id = $(this).attr('project_id');
            if(confirm("Do you want to delete this project?")){
                window.location.href = "project/delete/" + project_id;              
            }else{
                return false;
            }
        });
    });
</script>
@endsection