@extends('layouts.app')

@section('title', 'Area List')

@section('content')
<div class="page-wrapper">
    <div class="page-content">

        <div class="container-fluid px-4">

            <div class="d-flex justify-content-between mb-3">
                <h4>landscape Area list </h4>
                <a href="{{ route('landscape.area.create') }}" class="btn btn-primary">
                    + Create Area
                </a>
            </div>

            @if(session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif

            <div class="card shadow-sm">
                <div class="card-body">

                    <div class="table-responsive">
                                          <table class="table table-bordered">

    <thead>

        <tr>
            <th>#</th>
            <th>Area Code</th>
            <th>Area Name</th>
            <th>Type</th>
            <th>Size</th>
            <th>Status</th>
            <th>Action</th>
        </tr>

    </thead>

    <tbody>

        @foreach($areas as $key => $area)

        <tr>

            <td>{{ $key+1 }}</td>

            <td>{{ $area->area_code }}</td>

            <td>{{ $area->area_name }}</td>

            <td>{{ $area->area_type }}</td>

            <td>{{ $area->area_size }} {{ $area->size_unit }}</td>

            <td>{{ $area->status }}</td>

            <td>

                <a href="{{ route('landscape.area.edit',$area->id) }}"
                    class="btn btn-sm btn-primary">
                    Edit
                </a>

                <a href="{{ route('landscape.area.delete',$area->id) }}"
                    class="btn btn-sm btn-danger">
                    Delete
                </a>

            </td>

        </tr>

        @endforeach

    </tbody>

</table>
                    </div>

                </div>
            </div>

        </div>

    </div>
</div>


@endsection