@extends('layout.styleadmin')
@section('content')
@if ($device->count() > 0 )
<main id="main" class="main">
@if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif

@if(session('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
@endif
<div class="pagetitle"> 
      <h1>All Device</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
          <li class="breadcrumb-item active ">Manage Device</li>
         
          
        </ol>
      </nav>
    </div>
@if ($device->count() > 0 )
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Device</h5>
              <!-- Table Variants -->
              <table class="table datatable" >
                <thead>
                  <tr class="table-danger">
                    <th scope="col">#</th>
                    <th scope="col">Tag</th>
                    <th scope="col">Name</th>
                    <th scope="col">Type</th>
                    <th scope="col">Client</th>
                    <th scope="col">Actions</th>
                  </tr>
                </thead>
                <tbody>
                @php
                        $i = 1;
                    @endphp
                @foreach ($device as $devices)
                    <tr class="table-success">
                    <th scope="row">{{$i++}}</th>
                    <td >{{$devices->tag}}</td>
                    <td>{{$devices->name}}</td>
                    <td>{{$devices->type}}</td>
                    <td>{{$devices->client}}</td>
                    <td>
                    <a class="text-success" href="#" data-bs-toggle="modal" data-bs-target="#imageModal{{$devices->id}}">
                     <i class="bi bi-pencil-square"></i>
                      </a>                  
                                &nbsp;&nbsp;
                                
                
                            <a href="{{route('devices.edit',$devices->id)}}"> <i class="bi bi-image"></i>  </a>
                            &nbsp;&nbsp;
                            <form action="{{ route('devices.destroy', $devices->id) }}" method="POST" style="display: inline;">
        @csrf
        @method('DELETE')
        <button type="submit" class="btn btn-link text-danger p-0" onclick="return confirm('Are you sure you want to delete this device?');">
            <i class="bi bi-trash3"></i>
        </button>
    </form>

                          </td>
                  </tr>

                  <div class="modal fade" id="imageModal{{$devices->id}}" tabindex="-1" aria-labelledby="imageModalLabel{{$devices->id}}" aria-hidden="true">
                       <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                        <div class="card" >

<div class="card-body">
  <h5 class="card-title">Edit Device</h5>

  <!-- General Form Elements -->

  @if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
    <li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif

<!-- Show custom errors -->
@if (session('error'))
<div class="alert alert-danger">
{{ session('error') }}
</div>
@endif
<form method="POST" action="{{route('devices.update',$devices->id)}}" enctype="multipart/form-data">
@csrf
@method('PUT')
<div class="row mb-3">
<label class="col-sm-2 col-form-label">Tag</label>
<div class="col-sm-10">
<select id="tag" name="tag" class="form-control" required>
    <option value="">-- Choose Tag --</option>
    @foreach($tag as $tags)
        <option value="{{ $tags->name }}">{{ $tags->name }}</option>
    @endforeach
</select>
</div>
</div>

<div class="row mb-3">
    <label for="name" class="col-sm-2 col-form-label">Name</label>
      <div class="col-sm-10">
      <input id="name" type="text" value="{{$devices->name}}" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
       @error('name')
        <span class="invalid-feedback" role="alert">
         <strong>{{ $message }}</strong>
        </span>
       @enderror
      </div>
</div>

<div class="row mb-3">
    <label for="type" class="col-sm-2 col-form-label">Type</label>
      <div class="col-sm-10">
      <input id="type" type="text" value="{{$devices->type}}" class="form-control @error('type') is-invalid @enderror" name="type" value="{{ old('type') }}" required autocomplete="type" autofocus>
       @error('type')
        <span class="invalid-feedback" role="alert">
         <strong>{{ $message }}</strong>
        </span>
       @enderror
      </div>
</div>

<div class="row mb-3">
    <label for="client" class="col-sm-2 col-form-label">Client</label>
      <div class="col-sm-10">
      <input id="client" type="text" value="{{$devices->client}}" class="form-control @error('client') is-invalid @enderror" name="client" value="{{ old('client') }}" required autocomplete="client" autofocus>
       @error('client')
        <span class="invalid-feedback" role="alert">
         <strong>{{ $message }}</strong>
        </span>
       @enderror
      </div>
</div>


<div class="row mb-3">
    <label for="shortdescription" class="col-sm-2 col-form-label">Short Description</label>
      <div class="col-sm-10">
      <input id="shortdescription" value="{{$devices->shortdescription}}" type="text" class="form-control @error('shortdescription') is-invalid @enderror" name="shortdescription" value="{{ old('shortdescription') }}" required autocomplete="shortdescription" autofocus>
       @error('shortdescription')
        <span class="invalid-feedback" role="alert">
         <strong>{{ $message }}</strong>
        </span>
       @enderror
      </div>
</div>

<div class="row mb-3">
      <label for="detail" class="col-sm-2 col-form-label">Detail</label>
      <div class="col-sm-10">
        <textarea class="form-control" name="detail" id="detail" style="height: 65px;">{{$devices->detail}}</textarea>

        @error('detail')
        <span class="invalid-feedback" role="alert">
         <strong>{{ $message }}</strong>
        </span>
       @enderror
      </div>
</div>

<div id="">
<div class="row mb-3 " data-photo-index="1">
<label for="inputNumber" class="col-sm-2 col-form-label"> Catalog PDF</label>
<div class="col-sm-8">
    <input class="form-control" name="catalog" type="file" id="formFile">
</div>
</div>
</div>



<div class="row mb-3">
<label class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form><!-- End General Form Elements -->
  </div>
  </div>
  </div>
                    </div>
                   </div>
                  </div>
                @endforeach   
                  
                </tbody>
              </table>
              <!-- End Table Variants -->

            </div>
          </div>

        </div>
</main>

<!-- Modal -->
@endif
@else
<main id="main" class="main">
        <div class="col">
            <div class="alert alert-danger" role="alert">
                No Device
              </div>
        </div>
        </main>
        @endif
@endsection