@extends ('../welcome')

@section('content')
<div class="card-header">
    <form action="{{ route('hideBuilding', $building->id) }}" method="POST">
        @csrf
        @if(auth()->user()->isAbleTo('buildings-update'))
        <a href="{{ route('buildings.edit', $building->id) }}">
            <button class="btn btn-square btn-warning" type="button">Update Building</button>
        </a>
        @endif
        @if(auth()->user()->isAbleTo('units-create'))
        <a href="{{ route('units.create', 'id=' . $building->id) }}">
            <button class="btn btn-square btn-primary" type="button">Create Unit</button>
        </a>
        @endif
        <a href="{{route('units.importView')}}">
            <button class="btn btn-square btn-secondary" type="button">Import Units</button>
        </a>
        @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>
    @if(auth()->user()->isAbleTo('units-delete'))
    <button onClick="clickDeletebutton(this)" title="Delete" class="btn btn-danger" data-id="{{ $building->id }}"
        data-toggle="modal" data-target="#buildingModal">
        <i class="fa fa-ban"></i>
    </button>
    @endif

</div>
<div class="card-body">
    <div class=" row">
        <label class="col-sm-3 col-form-label">Building Name :</label>
        <label class="col-sm-4 col-form-label">{{ $building->name }} </label>
    </div>
    <div class=" row">
        <label class="col-sm-3 col-form-label">Building Type :</label>
        <label class="col-sm-4 col-form-label">{{ $building->type }} </label>
    </div>
    <div class=" row">
        <label class="col-sm-3 col-form-label">Active :</label>
        <label class="col-sm-4 col-form-label">{{ $building->is_active }} </label>
    </div>
    <div class=" row">
        <label class="col-sm-3 col-form-label">Number Of Floors :</label>
        <label class="col-sm-4 col-form-label">{{ $building->number_of_floors }} </label>
    </div>

    <div class=" row">
        <label class="col-sm-3 col-form-label">Phase Name :</label>
        <label class="col-sm-4 col-form-label">{{ $building->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">{{ $building->phase->project->name }} </label>
    </div>

    <div class=" row">
        <label class="col-sm-3 col-form-label">Created at :</label>
        <label class="col-sm-4 col-form-label">{{ $building->created_at }} </label>
    </div>
</div>
<br>
</div>
@if(auth()->user()->isAbleTo('units-read'))
<div class="card-body">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Units</h3>
            </div>
            <div class="card-body">
                <table id="phases" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Floor</th>
                            <th>Unit Total Price</th>
                            <th>Roof Total Price</th>
                            <th>Garden Total Price</th>
                            <th>Created At</th>
                            @if(auth()->user()->type == 'admin')
                            <th>Active</th>
                            @endif
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>

                        @foreach ($units as $unit)
                        <tr>
                            <td>{{ $unit->id }}</td>
                            <td>
                                <a href="{{ route('units.show', $unit->id) }}">
                                    {{ $unit->name }}
                                </a>
                            </td>
                            <td>{{ $unit->floor == 0 ? 'Ground' : $unit->floor }}</td>
                            <td>{{ $unit->unit_total_price }}</td>
                            <td>{{ $unit->roof_total_price }}</td>

                            <td
                                style="{{ $unit->garden_total_price == '' ? 'color:red;' : $unit->garden_total_price }}">
                                {{ $unit->garden_total_price == '' ? 'No garden Available to this unit' : $unit->garden_total_price }}
                            </td>

                            <td>{{ $unit->created_at }}</td>
                            <td>
                                <form action="{{ route('hideUnit', $unit->id) }}" method="POST">
                                    @csrf
                                    @if(auth()->user()->type == 'admin')
                                    <button type="submit"
                                        class="btn btn-{{ $unit->is_active == 0 ? 'info' : 'danger' }}"
                                        title="{{ $unit->is_active == 0 ? 'unhide' : 'hide' }}">
                                        {{ $unit->is_active == 0 ? 'unhide' : 'hide' }}
                                    </button>
                                    @endif
                                </form>
                            </td>
                            <td>
                            @if(auth()->user()->isAbleTo('units-update'))
                                <a class="btn btn-primary" title="Edit" href="{{ route('units.edit', $unit->id) }}">
                                    <i class="fa fa-pen"></i>
                                </a>
                                @endif
                                @if(auth()->user()->isAbleTo('units-delete'))
                                <button onClick="clickDeletebutton(this)" title="Delete" class="btn btn-danger"
                                    data-id="{{ $unit->id }}" data-toggle="modal" data-target="#exampleModalCenter">
                                    <i class="fa fa-ban"></i>
                                </button>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                <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>
            </div>
        </div>
    </div>
</div>
@endif
<div class="modal fade" id="buildingModal" tabindex="-1" role="dialog" aria-labelledby="buildingModal"
    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('units.destroy',':id')}}";
    route = route.replace(':id', modelId);
    $('#exampleModalCenter').find($('form')).attr('action', route);
}

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

@endsection