@extends('layouts')
@section('content')

<section class="py-5 bg-light">
  <div class="container">
    <!-- Project Summary Card -->
    <div class="card shadow-sm mb-4">
      <div class="card-body d-flex flex-wrap justify-content-between align-items-center">
        <div>
          <h4 class="mb-1">Project: <strong>{{ $projectName }}</strong></h4>
          <p class="mb-0">Total Modules: <strong>{{ $totalModules }}</strong></p>
        </div>
        <div class="d-flex flex-wrap gap-2 mt-3 mt-md-0">
          <!-- <a href="#" class="btn btn-outline-success">Add Module</a> -->
         <a href="https://wa.me/916369680321" target="_blank" class="btn btn-outline-secondary">
    Chat with Developer
</a>
<a href="tel:6369680321" class="btn btn-outline-danger">
    Talk With Developer
</a>

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

    <div class="row">
      <!-- Feature List -->
      <div class="col-md-6 mb-4">
        <h5 class="mb-3">Key Features</h5>
        <div class="border rounded shadow-sm bg-white feature-list" style="max-height: 500px; overflow-y: auto;">
          @forelse ($modules as $module)
          <div class="feature-item d-flex justify-content-between align-items-center p-3 border-bottom">
            <span>{{ $module->module }}</span>
            <div>
<!-- Button to View Screen -->
              <button class="btn btn-sm btn-link text-primary" onclick="showPreview('{{ asset( $module->screens) }}')">View Screen</button>
             <!--  <button class="btn btn-sm btn-link text-danger" onclick="removeScreen('{{ $module->module }}')">Remove Screen</button>
              <button class="btn btn-sm btn-link text-success" onclick="modifyScreen('{{ $module->module }}')">Modify Screen</button> -->
            </div>
          </div>
          @empty
            <p class="p-3">No modules found for this project.</p>
          @endforelse
        </div>
      </div>

      <!-- Preview Panel -->
     <div class="col-md-6">
    <h5 class="mb-3">Screen Preview</h5>
    <div class="d-flex justify-content-center">
        <div class="shadow-sm border rounded bg-white" 
             style="width: 375px; max-height: 667px; overflow-y: auto; border: 1px solid #ccc; border-radius: 20px;">
            <img id="previewImage" 
                 src="{{ asset(optional($modules->first())->screens) }}" 
                 alt="Preview Screen" 
                 style="width: 100%; height: auto; border-radius: 20px;">
        </div>
    </div>
</div>


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

<script>
  function showPreview(imagePath) {
    document.getElementById('previewImage').src = imagePath;
  }

  function removeScreen(featureName) {
    alert("Remove screen for: " + featureName);
  }
</script>

@endsection