<?php
use App\Models\Role;
use Illuminate\Support\Facades\Auth;
?>
@php
$configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Bacheca - '.$bacheca->nome)

@section('vendor-style')
@vite([
'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
'resources/assets/vendor/libs/flatpickr/flatpickr.scss',
'resources/assets/vendor/libs/@form-validation/form-validation.scss'
])
@endsection

<!-- Vendor Scripts -->
@section('vendor-script')
@vite([
'resources/assets/vendor/libs/moment/moment.js',
'resources/assets/vendor/libs/flatpickr/flatpickr.js',
'resources/assets/vendor/libs/@form-validation/popular.js',
'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
'resources/assets/vendor/libs/@form-validation/auto-focus.js',
'resources/assets/vendor/libs/@form-validation/popular.js',
'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
'resources/assets/vendor/libs/@form-validation/auto-focus.js',
'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js'
])
@endsection

@section('pageTitle')
<div class="d-flex flex-column">
  <h4 class="mb-1"> 
    <i class="bx bx-aperture"></i>
    <!-- <span class="text-muted">Bacheca</span> -->
    <span class="text-primary fw-bold text-uppercase">{{ $bacheca->nome }}</span></h4>
</div>
@endsection

@section('content')

<div class="row">

<div class="col-md-6 col-xxl-4">
    <div class="card h-100">
      <div class="card-header d-flex align-items-center justify-content-between">
        <h5 class="card-title m-0 me-2">Generali</h5>
        <div class="dropdown">
          <button class="btn text-muted p-0" type="button" id="transactionID" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="bx bx-dots-vertical-rounded bx-lg"></i>
          </button>
          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="transactionID">
            <a class="dropdown-item" href="javascript:void(0);">Last 28 Days</a>
            <a class="dropdown-item" href="javascript:void(0);">Last Month</a>
            <a class="dropdown-item" href="javascript:void(0);">Last Year</a>
          </div>
        </div>
      </div>
      <div class="card-body pt-4">
      <!-- Sezione di input per eventuale modifica delle informazioni della bacheca -->
      <form method="POST" action="{{ route('bacheca.store') }}" id="form_generali_bacheca" name="form_generali_bacheca">
        @csrf
        @method('POST')
        <input type="hidden" name="bacheca_id" value="{{ $bacheca->id }}">
        <input type="hidden" name="action" value="edit">
        <div class="mb-3">
          <label for="nome" class="form-label">Nome</label>
          <input type="text" class="form-control" id="nome" name="nome" value="{{ old('nome', $bacheca->nome) }}">
          @error('nome')
            <div class="text-danger">{{ $message }}</div>
          @enderror
        </div>

        <div class="mb-3">
          <label for="descrizione" class="form-label">Descrizione</label>
          <textarea class="form-control" id="descrizione" name="descrizione">{{ old('descrizione', $bacheca->descrizione) }}</textarea>
          @error('descrizione')
            <div class="text-danger">{{ $message }}</div>
          @enderror
        </div>

        <div class="form-check mb-3">
          <input class="form-check-input" type="checkbox" value="1" id="is_attiva" name="is_attiva" {{ old('is_attiva', $bacheca->is_attiva) ? 'checked' : '' }}>
          <label class="form-check-label" for="is_attiva">
            Attiva
          </label>
          @error('is_attiva')
            <div class="text-danger">{{ $message }}</div>
          @enderror
        </div>

        <!-- Eventuale spazio per input icona -->
        <div class="mb-3">
          <label for="icona" class="form-label">Icona</label>
          <input type="text" class="form-control" id="icona" name="icona" value="{{ old('icona', $bacheca->icona) }}">
          @error('icona')
            <div class="text-danger">{{ $message }}</div>
          @enderror
        </div>

        <button type="submit" class="btn btn-primary">Salva Modifiche</button>
      </form>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-xxl-4">
    <div class="card h-100">
      <div class="card-header d-flex align-items-center justify-content-between">
        <h5 class="card-title m-0 me-2">Contenuti</h5>
        
        <div class="dropdown">
          <button class="btn text-muted p-0" type="button" id="transactionID" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="bx bx-dots-vertical-rounded bx-lg"></i>
          </button>
          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="transactionID">
            <a class="dropdown-item" href="javascript:void(0);">Tutti i contenuti</a>
            <a class="dropdown-item" href="javascript:void(0);">Contenuti propri</a>
            <!-- <a class="dropdown-item" href="javascript:void(0);">Last Year</a> -->
          </div>
        </div>
        
      </div>
      <div class="card-body pt-4">
          {{ $dataTable_contenuto_bacheca->table(['class' => 'table table-bordered']) }}
      </div>
    </div>
  </div>


  <div class="col-md-6 col-xxl-4">
    <div class="card h-100">
      <div class="card-header d-flex align-items-center justify-content-between">
        <h5 class="card-title m-0 me-2">Mockup</h5>
        <div class="dropdown">
          <button class="btn text-muted p-0" type="button" id="transactionID" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="bx bx-dots-vertical-rounded bx-lg"></i>
          </button>
          <div class="dropdown-menu dropdown-menu-end" aria-labelledby="transactionID">
            <a class="dropdown-item" href="javascript:void(0);">Monitor</a>
            <a class="dropdown-item" href="javascript:void(0);">Mobile</a>
            <!-- <a class="dropdown-item" href="javascript:void(0);">Last Year</a> -->
          </div>
        </div>
      </div>
      <div class="card-body pt-4">
         

      <!-- Esempio base di mockup monitor: puoi sostituire 'mockup_base.png' con un'immagine PNG trasparente di un monitor e sovrapporre dentro il contenuto desiderato. -->
      <div class="position-relative" style="width:100%; max-width:500px; margin:auto;">
        <!-- Immagine del monitor (mockup PNG trasparente) -->
        <img src="{{ asset('assets/img/mockup/monitor_frame.png') }}" alt="Monitor Mockup" class="img-fluid w-100" style="position: relative; z-index:2;">
        <!-- Area dello schermo dove puoi inserire il contenuto dinamico -->
        <div style="position:absolute; top:12%; left:10%; width:80%; height:72%; background:#fff; z-index:1; overflow:hidden; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.1);">
          <!-- Esempio: screenshot del gestionale o contenuto della bacheca -->
          <img src="{{ asset('assets/img/mockup/screenshot_bacheca.png') }}" alt="Contenuto schermata bacheca" class="img-fluid w-100 h-100" style="object-fit:contain;">
          <!-- Puoi sostituire l'img sopra con <iframe> oppure altro contenuto dinamico -->
        </div>
      </div>
      <div class="text-muted small mt-2">
        <em>Per creare un mockup di un monitor: usa una PNG trasparente del frame del monitor come sfondo e sovrapponi all’interno lo screenshot o il contenuto desiderato.</em>
      </div>
      </div>
    </div>
  </div>
</div>

 <div class="modal fade" id="associaContenutoModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="associaContenutoModalTitle">Associa contenuto</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Chiudi</button>
                  <button type="button" class="btn btn-primary">Associa</button>
                </div>
              </div>
            </div>
          </div>

@endsection

@section('page-script')
@vite('resources/assets/vendor/libs/notyf/notyf.js')
<script>
addEventListener('DOMContentLoaded', function() {

  $('#form_generali_bacheca').on('submit', function(e) {
    e.preventDefault();
    $.ajax({
      url: $(this).attr('action'),
      type: 'POST',
      data: $(this).serialize(),
      headers: {
        'X-CSRF-TOKEN': '{{csrf_token()}}'
      },
      success: function(response) {
        new Notyf({
          type: 'success',
          layout: 'topRight',
          text: response.message || 'Bacheca aggiornata',
          timeout: 3000
        }).success(response.message);
      },
      error: function(xhr) {
        new Notyf({
          type: 'error',
          layout: 'topRight',
          text: xhr.responseJSON.message || 'Si è verificato un errore',
          timeout: 3000
        }).error(xhr.responseJSON.message);
      }
    });
  });
});

function associaContenuto() {
$('#associaContenutoModal .modal-body').load("{{ route('bacheca.associa-contenuto' , ['bacheca_id' => $bacheca->id]) }}");
$('#associaContenutoModal .modal-title').text('Associa contenuto');
$('#associaContenutoModal').modal('show');
}
</script>


{{$dataTable_contenuto_bacheca->scripts(attributes: ['type' => 'module'])}}


<script type="module">
  $(document).ready(function(){
    // Editor edit
    $("#dataTable_contenuto_bacheca").on('click', 'a.editor_edit', function (e) {
      e.preventDefault();
      window.LaravelDataTables["dataTable_contenuto_bacheca-editor"].edit( $(this).closest('tr'), {
        title: 'Modifica',
        buttons: 'Aggiorna',
      });
    });

    // Editor delete
    $("#dataTable_contenuto_bacheca").on('click', 'a.editor_delete', function (e) {
      e.preventDefault();
      window.LaravelDataTables["dataTable_contenuto_bacheca-editor"].remove($(this).closest('tr'), {
        title: 'Cancella record',
        message: 'Sei sicuro di voler eliminare il record selezionato?',
        buttons: 'Cancella record'
      });
    } );

    $("#dataTable_contenuto_bacheca").on('dblclick', 'tbody td', function (e) {
      window.LaravelDataTables["dataTable_contenuto_bacheca-editor"].edit( $(this).closest('tr'), {
        title: 'Modifica',
        buttons: 'Aggiorna',
      });
    });

  });

</script>

<script>
  function initComplete_contenuto_bacheca(){
    $('div.dt-buttons button').removeClass('btn-secondary');
    $('div.dt-search').addClass('mt-0 mb-4');
  }


</script>
@endsection
