@extends('layouts/contentNavbarLayout')

@section('title', 'Community Fine 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 Fine 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.fine-update', 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">Fine Details</h5>
          <div class="card-body">
            <div class="row">
              <div class="col-sm-6">
                {!! Form::label('fine_per_hour', 'Fine per Hour', ['class' => 'form-label']) !!}
                {!! Form::number('fine_per_hour', @$community->fine_per_hour, ['class' => 'form-control', 'placeholder' => 'Community Name', 'step'=>'0.01']) !!}
              </div>

              <div class="d-flex justify-center sm:justify-end mt-4 sm:mt-5 float-end">

                <!-- Assuming you want to clear the form with JavaScript -->
                <button type="button" class="fw-medium btn btn-warning" style="margin-right: 10px" onclick="clearForm()">Clear</button>

                <!-- This button is for submitting the form -->
                {!! Form::button('Submit', ['type' => 'submit', 'class' => 'btn btn-primary']) !!}

              </div>

            {!! 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">Reported Vehicle 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>Report Type</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('hourly-fine.data') }}",
              columns: [
                  { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                  {data: 'vehicle.resident.name', name: 'name'},
                  {data: 'vehicle.resident.phone_number', name: 'phone_number'},
                  {data: 'vehicle.license_plate_number', name: 'vehicle_plate_no'},
                  {data: 'report_type', name: 'report_type'},

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

        });
      </script>

    @endsection