@extends('layouts/contentNavbarLayout')

@section('title', 'Community Guest Fees Details')

@section('page-style')
  <link rel="stylesheet" href="/assets/css/strength.css" />
@endsection

@section('content')
<h4 class="py-3 mb-4"><span class="text-muted fw-light">Home /</span> Community Guest Fees Details</h4>
<!-- Basic Layout & Basic with Icons -->
<div class="row">
  <!-- Basic Layout -->
  <div class="col-xxl">
    <div class="card mb-4">
      <div class="d-flex justify-content-between align-items-center flex-wrap mt-2 mb-1">
        <h5 class="m-0 me-2"></h5>
        <div class="mx-3">
          <a class="fw-medium btn btn-warning" href="/">
            Back </a>
        </div>
      </div>

      {!! Form::model($community, ['route' => ['communities.guest-fees', Crypt::encrypt($community->id)], 'method' => 'put', 'class' => 'p-4 progress-form', 'id' => 'progress-form', 'files' => true]) !!}

      <div class="col-md">
        <div class="card mb-4">
          <h5 class="card-header">Guest Fees Details</h5>
          <div class="card-body">
            <div class="row">
              <div class="col-sm-6">
                {!! Form::label('guest_fees', 'Guest Fees', ['class' => 'form-label']) !!}
                {!! Form::number('guest_fees', @$community->guest_fees, ['class' => 'form-control', 'placeholder' => 'Guest Fees', 'step'=>'0.01']) !!}
                <br>
                {!! Form::label('max_guest_allowed', 'Max guest allowed', ['class' => 'form-label']) !!}
                {!! Form::select('max_guest_allowed', $guest_count, @$community->max_guest_allowed, ['class' => 'form-control form-select']) !!}
                <br>
                {!! Form::button('Submit', ['type' => 'submit', 'class' => 'btn btn-primary']) !!}
              </div>

              <div class="col-sm-6 mb-4 text-center">
                  {!! Form::label('qr_code', 'QrCode to make payment', ['class' => 'form-label']) !!} <br>
                  <span id="guest_qrcode">{{ QrCode::size(150)->generate($qr_url) }}</span>
              </div>
              <div class="col-sm-6"></div>
              <a class="col-sm-6 fw-medium text-white btn btn-warning waves-effect waves-light sm:justify-end float-end" onclick="downloadQR('guest_qrcode')">
                Download QR
              </a>

            {!! Form::close() !!}
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-body row g-2">
          <div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
            <h5 class="m-0 me-2">Guest List</h5>
          </div>
          <div class="table-responsive text-nowrap">
            <table class="table table-bordered data-table">
              <thead>
              <tr>
                  <th>ID</th>
                  <th>Name</th>
                  <th>Phone Number</th>
                  <th>Vehicle Plate No</th>
                  <th>Amount</th>
                  <th>Guest Code</th>

                  <th>Action</th>
              </tr>
              </thead>
              <tbody class="table-border-bottom-0">

              </tbody>
            </table>
          </div>
        </div>
    </div>
    @endsection

    @section('page-script')

  <script type="text/javascript">
    $(document).ready(function () {

      var table = $('.data-table').DataTable({
          processing: true,
          serverSide: true,
          ajax: "{{ route('guest.data') }}",
          columns: [
              { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
              {data: 'name', name: 'name'},
              {data: 'phone_number', name: 'phone_number'},
              {data: 'vehicle_plate_no', name: 'vehicle_plate_no'},
              {data: 'amount', name: 'amount'},
              {data: 'guest_code', name: 'guest_code'},

              {data: 'action', name: 'action', orderable: false, searchable: false},
          ]
      });

      function downloadQR(qrid) {
        const svgElement = document.getElementById(qrid);
        const serializer = new XMLSerializer();
        const svgString = serializer.serializeToString(svgElement);
        const blob = new Blob([svgString], {type: 'image/svg+xml'});
        const url = URL.createObjectURL(blob);

        const downloadLink = document.createElement('a');
        downloadLink.href = url;
        downloadLink.download = 'GuestFees.svg'; // Customize the file name
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);

        URL.revokeObjectURL(url); // Clean up the object URL
      }

    });
  </script>

@endsection