@extends('layouts.app')

@section('content')
    

<div class="pagetitle">
    <h1>Device-uri</h1>
    <nav>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{route('home')}}">Acasa</a></li>
        <li class="breadcrumb-item">Decieuri de securitate</li>
        <li class="breadcrumb-item active">Management</li>
      </ol>
    </nav>
  </div><!-- End Page Title -->

  <section class="section">
    <div class="row">
      <div class="col-lg-6">

        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Lista cu device-uri</h5>
            <table class="table table-hover table-stripped datatable">
                <thead>
                    <tr>
                        <th>ID</th>
                
                        <th>Denumire</th>
                        <th>Status</th>
                        <th>Optiuni</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($devices as $device)
                    @php $device->status ? $status='Activ' : $status = 'Suspendat';@endphp
                    <tr>
                        <td>{{$device->id}}</td>
  
                        
                        <td>{{$device->name}}</td>

                        <td>{{$status}}</td>
                        <td>
                            <button class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#update-modal{{$device->id}}" ><i class="bi bi-pencil"></i></button>
                            <button class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#warning-modal{{$device->id}}"><i class="bi bi-trash"></i></button>
                        </td>
                    </tr>
                    <!--Warning modal -->
                    <div class="modal fade" id="warning-modal{{$device->id}}" tabindex="-1">
                        <div class="modal-dialog">
                          <div class="modal-content">
                            <div class="modal-header">
                              <h5 class="modal-title"><i class="bi bi-trash"></i> {{$device->name}}</h5>
                              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                             <p>Sunteti sigur/a ca doriti sa stergeti declansator {{$device->name}}. Se va sterge si toate teste care sunt facute pe declansator {{$device->name}}. Acest lucru este ireversibil....</p>
                            </div>
                            <div class="modal-footer">
                              <a class="btn btn-danger" href="{{route('destroy-device',$device->id)}}" ><i class="bi bi-trash"></i> DA STERGE</a>
                              <button type="button" class="btn btn-success" data-bs-dismiss="modal"><i class="bi  bi-file-earmark-excel-fill"></i>Inchide</button>
                            </div>
                          </div>
                        </div>
                      </div>

                    <!--End of warning modal -->

                    <!--Update device modal -->
                    <div class="modal fade" id="update-modal{{$device->id}}" tabindex="-1">
                        <div class="modal-dialog">
                          <div class="modal-content">
                            <div class="modal-header">
                              <h5 class="modal-title"><i class="bi bi-pencil"></i> {{$device->name}}</h5>
                              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                             <form action="{{route('update-device',$device->id)}}" method="post" id="update-device-form{{$device->id}}">
                                @csrf 
                                @method('PUT')  
                               
                                <label for="">Name</label>
                                <input type="text" name="name" value="{{$device->name}}" class="form-control">
                                <label for="">Status</label>
                                <select name="status" id="" class="form-control">
                                    <option value="1" @if($device->status) selected @endif >Activ</option>
                                    <option value="0" @if(!$device->status) selected @endif >Suspendat</option>
                                </select>
                            </form> 
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="bi bi-file-earmark-excel-fill"></i> Inchide</button>
                              <button type="submit" form="update-device-form{{$device->id}}" class="btn btn-warning"><i class="bi bi-check"></i> Salveaza</button>
                            </div>
                          </div>
                        </div>
                      </div>

                    <!--End of update device modal -->
                    @endforeach
                </tbody>
            </table>
          </div>
        </div>

      </div>

      <div class="col-lg-6">

        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Adauga Declansator</h5>
            <form action="{{route('store-device')}}" method="post">
                @csrf 
               
                    <div class="name">
                    <label for="">Denumire</label>
                    <input type="text" name="name[]" class="form-control">
                   
                    </div>
                <label for="">Status</label>
                <select name="status" id="" class="form-control">
                    <option value="1" selected>Activ</option>
                    <option value="0">Suspendat</option>
                </select>
                <button  type="button" class="adauga btn btn-warning form-control mt-3"><i class="bi bi-plus"></i><i class="bi bi-plus"></i> Multipla Adaugare</button>
                <button class="btn btn-success form-control mt-3"><i class="bi bi-plus"></i> Adauga</button>
            </form>
          </div>
        </div>

      </div>
    </div>
  </section>


@endsection

@push('js')
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>

  <script>
    
    $(document).on('click','.adauga',function(){
        var html = '';
        html+='<div class="dinamyc-div mt-3 mb-3">';
        html+='<label>Denumire <span class="text-danger">*</span></label>';
        html+='<input type="text" name="name[]" class="form-control">';       
        html+='<button id="remove" class="btn btn-danger form-control mt-3"><i class="bi bi-trash"></i>Elimina </button>';
        html+='</div>';
        
        $('.name').append(html);
    });

    $(document).on('click','#remove',function(){
        $(this).closest('.dinamyc-div').remove();
    });



   

  </script>
@endpush