@extends('layouts.app')
@extends('layouts.navbar')

@section('title', 'Data EWS | Monitoring Gambut')

@section('content')
<div class="container mt-5">
    <h3>Data EWS</h3>
    <button type="button" class="btn btn-primary my-3" data-toggle="modal" data-target="#addDataModal">Tambah Data EWS</button>

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

    <table class="table table-dark">
        <thead class="font-weight-bold" align="center">
            <tr>
                <td>#</td>
                <td>Nama EWS</td>
                <td>Longitude</td>
                <td>Latitude</td>
                <td style="width: 35%;">Deskripsi EWS</td>
                <td>Aksi</td>
            </tr>
        </thead>
        <tbody align="center">
            @foreach($ews as $data)
            <tr>
                <td>{{$loop->iteration}}</td>
                <td>{{$data->ews_nama}}</td>
                <td>{{$data->ews_longitude}}</td>
                <td>{{$data->ews_latitude}}</td>
                <td>{{$data->ews_deskripsi}}</td>
                <td>
                    <a href="{{route('ews.show', $data->ews_id)}}" class="badge badge-warning">Show</a>
                    <a href="{{route('ews.edit', $data->ews_id)}}" class="badge badge-primary">Edit</a>
                    <a href="#" data-uri="{{route('ews.destroy', $data->ews_id)}}" class="badge badge-danger" data-toggle="modal" data-target="#confirmDeleteModal">Delete</a>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endsection

<!-- Insert Data Modal -->
<div class="modal fade" id="addDataModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Tambah EWS</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{route('ews.store')}}" method="post">
                        @csrf
                        <div class="form-group">
                            <label for="nama">Nama EWS:</label>
                            <input type="text" class="form-control @error('nama') is-invalid @enderror" id="nama" placeholder="Nama EWS" name="nama" value="{{old('nama')}}">
                            @error('nama') <div class="invalid-feedback">{{$message}}</div> @enderror
                        </div>
                        <div class="form-group">
                            <label for="longitude">Longitude:</label>
                            <input type="text" class="form-control @error('longitude') is-invalid @enderror" id="longitude" placeholder="Longitude" name="longitude" value="{{old('longitude')}}">
                            @error('longitude') <div class="invalid-feedback">{{$message}}</div> @enderror
                        </div>
                        <div class="form-group">
                            <label for="latitude">Latitude:</label>
                            <input type="text" class="form-control @error('latitude') is-invalid @enderror" id="latitude" placeholder="Latitude" name="latitude" value="{{old('latitude')}}">
                            @error('latitude') <div class="invalid-feedback">{{$message}}</div> @enderror
                        </div>
                        <div class="form-group">
                            <label for="deskripsi">Deskripsi EWS:</label>
                            <textarea name="deskripsi" id="" cols="30" rows="10" class="form-control @error('deskripsi') is-invalid @enderror" id="deskripsi" placeholder="Deskripsi EWS">{{old('deskripsi')}}</textarea>
                            @error('deskripsi') <div class="invalid-feedback">{{$message}}</div> @enderror
                        </div>
                        <button type="submit" class="btn btn-primary float-right">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>