@extends('admin.layouts.base')

@section('content')
    <div class="modal fade" id="newDeviceModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('devices.new') }}" method="post">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="device_type">Device Type</label>
                            <select class="form-control" name="device_type" id="device_type" required>
                                <option selected>--Select One--</option>
                                @foreach (DEVICE_TYPES as $device_type)
                                    <option value="{{ $device_type }}">{{ $device_type }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group mt-2">
                            <label for="name">Device</label>
                            <input type="text" name="name" id="name" class="form-control" placeholder="Device Name">
                        </div>

                        <div class="form-group mt-2">
                            <label for="udid">Device ID</label>
                            <input type="text" name="udid" id="udid" class="form-control"
                                placeholder="Unique Device ID">
                        </div>

                        <div class="form-group mt-2">
                            <label for="version">Version</label>
                            <input type="number" name="version" id="version" class="form-control"
                                placeholder="Device Version">
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save Device</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col">
            <div class="shadow rounded p-3">
                <div class="d-flex justify-content-between">
                    <h4>Devices</h4>
                    <button type="button" data-bs-toggle="modal" data-bs-target="#newDeviceModal" class="btn btn-sm"><i class="fa fa-plus-circle"></i> Add Device</button>
                </div>
                <div>
                  @foreach ($devices as $device)
                      <div class="shadow rounded p-4 m-2">
                        <div><small>Name:</small> {{ $device->name }}</div>
                        <div><small>Type:</small> {{ $device->device_type }}</div>
                        <div><small>UDID:</small> {{ $device->udid }}</div>
                        <div><small>version:</small> {{ $device->version }}</div>
                      </div>
                  @endforeach
                </div>
            </div>
        </div>
        <div class="col">
            <div class="shadow rounded p-3">
                <h4>Users</h4>
                <div>
                  @foreach ($users as $user)
                      <h4>{{ $user->name }}</h4>
                  @endforeach
                </div>
            </div>
        </div>
        <div class="col">
            <div class="shadow rounded p-3">
                <h4>Others</h4>
            </div>
        </div>
    </div>
@endsection