@extends('layout.styleadmin')
@section('content')
@if ($postphoto->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>Photos</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
          <li class="breadcrumb-item active ">Manage Photos</li>
         
          
        </ol>
      </nav>
    </div>
@if ($postphoto->count() > 0 )
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Photos</h5>
              <!-- Table Variants -->
              <table class="table datatable" >
                <thead>
                  <tr class="table-danger">
                    <th scope="col">#</th>
                    <th scope="col">Photo</th>
                    <th scope="col">Actions</th>
                  </tr>
                </thead>
                <tbody>
                @php
                        $i = 1;
                    @endphp
                @foreach ($postphoto as $photos)
                    <tr class="table-success">
                    <th scope="row">{{$i++}}</th>
                    <td>
                      @if($photos->photo)
                      <img src="{{ asset('public/'.$photos->photo) }}" alt="Photo" style="width: 100px; height: auto;">
                         @else
                          No photo available
                          @endif
                         </td>
                    <td>
                    <a class="text-success" href="#" data-bs-toggle="modal" data-bs-target="#imageModal{{$photos->id}}">
                     <i class="bi bi-file-plus"></i>
                      </a>                  
                                &nbsp;&nbsp;
                                <form action="{{ route('postphotos.destroy', $photos->id) }}" method="POST" style="display: inline;">
    @csrf
    @method('DELETE')
    <button type="submit" class="btn btn-link text-danger p-0" style="border: none;">
        <i class="bi bi-trash3"></i>
    </button>
</form>
                          </td>
                  </tr>

                  <div class="modal fade" id="imageModal{{$photos->id}}" tabindex="-1" aria-labelledby="imageModalLabel{{$photos->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('postphotos.update',$photos->post_id)}}" enctype="multipart/form-data">
@csrf
@method('PUT')

<div id="">
<div class="row mb-3 " data-photo-index="1">
<label for="inputNumber" class="col-sm-2 col-form-label"> Add Photo</label>
<div class="col-sm-8">
    <input class="form-control" name="photo" 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 Photo
              </div>
        </div>
        </main>
        @endif
@endsection