@extends('admin.layout.main')

@push('custom-resource')
    <link href="{{ asset('/') }}syncfusion/material.css" rel="stylesheet">
    <script src="{{ asset('/') }}syncfusion/ej2.min.js" type="text/javascript"></script>
    <script src="{{ asset('/') }}syncfusion/syncfusion-helper.js" type="text/javascript"></script>
@endpush

@section('content')
    <main id="main" class="main">

        <div class="pagetitle">
            <h1>Data Unit</h1>
            <nav>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Beranda</a></li>
                    <li class="breadcrumb-item active" > Data Unit</li>
                </ol>
            </nav>
        </div>

        <section class="section">
            @session('success')
                <div class="alert alert-primary">{{ session()->get('success') }}</div>
            @endsession

            <div class="row">
                <div class="col-md-4">
                    <div class="card">
                        <form action="" method="post">
                            @csrf
                            <div class="card-body p-3">
                                <div class="form-group">
                                    <input type="text" placeholder="Nama Unit" class="form-control" name="name">
                                </div>
                                <div class="mt-3">
                                    <button type="submit" class="btn btn-primary w-100">Tambah Unit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body p-3">
                    <div class="table-responsive">

                        <table class="table">
                            <thead>
                                <tr>
                                    <th scope="col">No</th>
                                    <th scope="col">Nama Unit</th>
                                    <th scope="col">Devices</th>
                                    <th scope="col">Opsi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($units as $key => $unit)
                                    <tr>
                                        <th scope="row">{{ $key + 1 }}</th>
                                        <td>{{ $unit->name }}</td>
                                        <td>
                                            <a href="{{ route('unit.devices', $unit->id) }}" class="btn btn-sm btn-primary">
                                                <i class="bi bi-eye"></i>
                                                Selengkapnya
                                            </a>
                                        </td>
                                        <td>
                                            <form style="margin-left: 14px;" action="{{ route('unit.destroy', $unit->id) }}"
                                                class="d-inline"
                                                onsubmit="return confirm('anda yakin akan menghapus data unit ini?')"
                                                method="post">
                                                @method('DELETE')
                                                @csrf
                                                <button type="submit"
                                                    style="border: none; border-radius: 50rem; margin: 0;"
                                                    class="bg-white text-danger">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection