@extends ('../welcome')
@section('content')
<div class="card-header">

    <form action="{{ route('hidePhase', $phase->id) }}" method="POST">
        @csrf
        @if(auth()->user()->isAbleTo('phases-update'))
        <a href="{{ route('phases.edit', $phase->id) }}">
            <button class="btn btn-square btn-warning" type="button">Update Phase</button>
        </a>
        @endif
        @if(auth()->user()->isAbleTo('buildings-create'))
        <a href="{{ route('buildings.create', 'id=' . $phase->id) }}">
            <button class="btn btn-square btn-primary" type="button">Create Building</button>
        </a>
        @endif
        @if(auth()->user()->type == 'admin')
        <button type="submit" class="btn btn-{{ $phase->is_active == 0 ? 'info' : 'danger' }}"
            title="{{ $phase->is_active == 0 ? 'unhide' : 'hide' }}">
            {{ $phase->is_active == 0 ? 'unhide' : 'hide' }}
        </button>
        @endif
    </form>
    @if(auth()->user()->isAbleTo('phases-delete'))
    <button onClick="clickDeletebutton(this)" title="Delete" class="btn btn-danger" data-id="{{$phase->id}}"
        data-toggle="modal" data-target="#phaseModal">
        <i class="fa fa-ban"></i>
    </button>
    @endif

</div>
<div class="card-body">
    <div class=" row">
        <label class="col-sm-3 col-form-label">Phase Name :</label>
        <label class="col-sm-4 col-form-label">{{ $phase->name }} </label>
    </div>

    <div class=" row">
        <label class="col-sm-3 col-form-label">Project Name :</label>
        <label class="col-sm-4 col-form-label">{{ $project->name }} </label>
    </div>

    <div class=" row">
        <label class="col-sm-3 col-form-label">Active :</label>
        <label class="col-sm-4 col-form-label">{{ $phase->is_active == 0 ? 'hidden' : 'active' }} </label>
    </div>
    <div class=" row">
        <label class="col-sm-3 col-form-label">Created at :</label>
        <label class="col-sm-4 col-form-label">{{ $phase->created_at }} </label>
    </div>
</div>
<br>


<!-- Phases -->
<!-- /.row -->
@if(auth()->user()->isAbleTo('buildings-read'))
<div class="col-12">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Buildings</h3>
        </div>
        <!-- /.card-header -->
        <div class="card-body">
            <table id="phases" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Building Type</th>
                        <th>Number of Floors</th>
                        <th>Roof Space</th>
                        <th>Roof Meter Percentage %</th>
                        <th>Created At</th>
                        @if(auth()->user()->type == 'admin')
                        <th>Active</th>
                        @endif
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($buildings as $building)
                    <tr>
                        <td>{{ $building->id }}</td>
                        <td>
                            <a title="Show" href="{{ route('buildings.show', $building->id) }}">
                                {{ $building->name }}
                            </a>
                        </td>
                        <td>{{ $building->type }}</td>
                        <td>{{ $building->number_of_floors }}</td>
                        <td>{{ $building->roof_space ? $building->roof_space : 'There is no roof available for this building' }}
                        </td>

                        <td
                            style="color:{{ $building->roof_percentage ? '' : 'red' }}; text-align:center; font-weight:bold;">
                            {{ $building->roof_percentage ? $building->roof_percentage . '%' : '--' }}
                        </td>
                        <td>{{ $building->created_at }}</td>
                        <td>
                            <form action="{{ route('hideBuilding', $building->id) }}" method="POST">
                                @csrf
                                @if(auth()->user()->type == 'admin')
                                <button type="submit"
                                    class="btn btn-{{ $building->is_active == 0 ? 'info' : 'danger' }}"
                                    title="{{ $building->is_active == 0 ? 'unhide' : 'hide' }}">
                                    {{ $building->is_active == 0 ? 'unhide' : 'hide' }}
                                </button>
                                @endif
                            </form>
                        </td>
                        <td>
                            @if(auth()->user()->isAbleTo('buildings-update'))
                            <a class="btn btn-primary" title="Edit" href="{{ route('buildings.edit',$building->id) }}">
                                <i class="fa fa-pen"></i>
                            </a>
                            @endif
                            @if(auth()->user()->isAbleTo('buildings-delete'))
                            <button onClick="clickDeletebutton(this)" title="Delete" class="btn btn-danger"
                                data-id="{{$building->id}}" data-toggle="modal" data-target="#exampleModalCenter">
                                <i class="fa fa-ban"></i>
                            </button>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            
        </div>
    </div>
</div>
@endif
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenter"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Delete Record</h5>
            </div>
            <div class="modal-body">
                <p>Are you sure to delete this record ?</p>
            </div>
            <form class="modal-footer" method="post">
                @csrf
                @method('DELETE')
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary yes" type="button">Yes</button>
            </form>
        </div>
    </div>
</div>



<!-- /.row -->
<script>
$(function() {
    $("#phases").DataTable({
        "responsive": true,
        "lengthChange": false,
        "autoWidth": false,
        "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
    }).buttons().container().appendTo('#phases_wrapper .col-md-6:eq(0)');
    $('#example2').DataTable({
        "paging": true,
        "lengthChange": false,
        "searching": false,
        "ordering": true,
        "info": true,
        "autoWidth": false,
        "responsive": true,
    });
});

clickDeletebutton = (e) => {
    const modelId = e.getAttribute("data-id");
    var route = "{{route('buildings.destroy',':id')}}";
    route = route.replace(':id', modelId);
    $('#exampleModalCenter').find($('form')).attr('action', route);
}
</script>

@endsection