@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">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">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">Service Pages</h3>
            <div class="card-tools">
              <a href="{{ route('pages.create') }}" class="btn btn-primary btn-sm">New Service Page</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">Actions</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="{{ route('pages.edit', $page->id) }}">{{ $page->slug }}</a></td>
    <td>{{ $page->type }}</td>
    <td>{{ $page->format }}</td>
    <td>
        <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>
        {!! 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>
</div>
<!-- End Existing Photo Modal -->
@endforeach

                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

@endsection