@extends('layouts.dashboard')

@section('content')
<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1 class="m-0">Blog Pages</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item">
            <a href="{{ url('/dashboard') }}">Home</a>
          </li>
          <li class="breadcrumb-item active">Blog Pages</li>
        </ol>
      </div>
    </div>
  </div>
</div>

<section class="content">
  <div class="container-fluid">
    @include('util.notify')
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">Blog Pages (Manage your blog pages)</h3>
            <div class="card-tools">
              <a href="{{ url('admin-blog-new') }}" class="btn btn-primary btn-sm">New Blog Post</a>
            </div>
          </div>
          <div class="card-body">
            <div id="example1_wrapper" class="dataTables_wrapper dt-bootstrap4">
              <div class="row">
                <div class="col-sm-12">
                  <table id="example1" class="table table-bordered table-striped dataTable dtr-inline collapsed" aria-describedby="example1_info">
                    <thead>
                      <tr>
                        <th class="sorting sorting_asc" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending">Name</th>
                        <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Slug: activate to sort column ascending">Slug</th>
                        <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Type: activate to sort column ascending">Type</th>
                        <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Format: activate to sort column ascending">Format</th>
                        <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" style="display: none;">Action</th>
                      </tr>
                    </thead>
                    <tbody>
                      @foreach($pages as $page)
                      <tr class="odd">
                        <td class="dtr-control sorting_1" tabindex="0">{{ $page->name }}</td>
                        <td><a href="{{ url('admin-blog-edit', $page->id) }}">{{ $page->slug }}</a></td>
                        <td>{{ $page->type }}</td>
                        <td>{{ $page->format }}</td>
                        <td style="display: none;">
                          <!-- Existing Photo Modal Button -->
                          <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#modal-lg-{{ $page->id }}">
                            <i class="fa fa-camera"></i>
                          </button>

                          <!-- Delete Button -->
                          {!! Form::open(['method' => 'DELETE', 'route' => ['pages.destroy', $page->id], 'style' => 'display:inline']) !!}
                          <button type="submit" class="btn btn-danger btn-sm" data-toggle="tooltip" data-placement="top" title="Delete page">
                            <i class="fa fa-trash"></i>
                          </button>
                          {!! Form::close() !!}
                        </td>
                      </tr>

                      <!-- Existing Photo Modal -->
                      <div class="modal fade" id="modal-lg-{{ $page->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-lg" role="document">
                          <div class="modal-content">
                            <div class="modal-header">
                              <h5 class="modal-title" id="exampleModalLabel">Upload Photo for {{ $page->name }}</h5>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                            </div>
                            <div class="modal-body">
                              <form method="POST" action="{{ route('photos.store') }}" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="photoable_id" value="{{ $page->id }}">
                                <input type="hidden" name="photoable_type" value="App\Models\Page">
                                <div class="form-group">
                                  <label for="filename">Photo</label>
                                  <input type="file" name="filename" class="form-control" required>
                                </div>
                                <div class="form-group">
                                  <label for="description">Description</label>
                                  <textarea name="description" class="form-control"></textarea>
                                </div>
                                <div class="modal-footer">
                                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                  <button type="submit" class="btn btn-primary">Upload Photo</button>
                                </div>
                              </form>
                              <hr>
                              <h5>Uploaded Photos</h5>
                              @foreach($page->photos as $photo)
                              <div class="form-group">
                                <input type="text" class="form-control" value="<img src='{{ url('assets/uploads/' . $photo->filename) }}' alt='{{ $photo->description }}' ">
                              </div>
                              @endforeach
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Existing Photo Modal -->
                      @endforeach
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
@endsection