@extends('includes.main')

@section('main-container')
<div class="card">
    <div class="card-body">
        <h4 class="card-title">Meter</h4>
        @if (session()->has('type'))
            <div class=" mt-5 alert alert-{{ session()->get('type') }}" role="alert">
                <p>{{ session()->get('message') }}</p>
            </div>
        @endif
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Products</th>
                        <th>Old Reading</th>
                        <th>New Reading</th>
                        <th>Date</th>
                        <th> Action</th>
                    </tr>
                </thead>
                <tbody>
                    <form action="{{url('meter')}}" method="POST">
                        @csrf
                   @forelse ($meters as $dispenser) 
                       <tr>
                            <td>{{$dispenser->title}}</td>
                            <td>{{$dispenser->product}}</td>
                            <td>{{$dispenser->reading}}</td>
                            <td><input type="number" name="products[{{ $dispenser->id }}][reading]" class="form-control">
                                <input type="hidden" name="products[{{ $dispenser->id }}][dispenser_id]" value="{{$dispenser->dispenser_id}}">
                            </td>
                            <td><input type="date" class="form-control" name="date" ></td>
                            <td> <a href="{{ route('meter.readings', $dispenser->id) }}" ><i
                                class="mdi mdi-eye"></i></a></td>
                       </tr>
                   @empty
                   <tr>
                    <td colspan="4" align="center">
                        No record found.
                    </td>
                </tr>
                   @endforelse
                </tbody>
            </table>
            {{-- Pagination --}}
            <div class="d-flex justify-content-center float-right mr-4 mt-3">
                {{-- {!! $customer->links() !!} --}}
            </div>
            <button type="submit" id="" class="btn btn-info float-right mt-3">Submit</button>
            </form>
        </div>
    </div>
</div>
    

    <!--Add Meter Modal -->
    <div class="modal fade" id="modal-meter-reading" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Meter Reading</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- Modal content goes here -->
                    <form action="" id="frm-meter" method="POST">
                        @csrf
                        <input type="hidden" name="_method" id="frm-method" value="">
                        <input type="hidden" name="dispenser_id" id="dispenser-id" value="">
                        <label>Old Reading</label> 
                        <input type="text" name="old_reading" id="old-reading"
                        readonly class="form-control" placeholder="" value="">
                        <x-form-input label="Meter Reading" type="number" name="reading" 
                        placeholder="Meter Reading" id="reading" value="" />
                        <x-form-input label="Date" type="date" name="date" 
                        placeholder="Date" id="date" value="" />
                       
                        <button type="submit" id="btn-submit" class="btn btn-info float-right">Submit</button>
                        <button type="button" class="btn btn-default float-right" data-dismiss="modal">Close</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Customer Model -->
    <div class="modal fade" id="userEditModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Edit User</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

                </div>

                <div class="modal-body">
                    <form action="" method="POST">
                        @csrf
                        @method('PUT')
                        {{-- <input type="hidden" id="pump-id" name="id"></span> --}}
                        <x-form-input label="Name" type="text" name="name" placeholder="Name" id="name" value="" />
                        <x-form-input label="Location" type="text" name="location" placeholder="Location"
                            id="location" value=""/>
                        <x-form-input label="Initial Investment" type="number" name="initial_investment" 
                        placeholder="Initial Investment" id="initial_investment" value=""/>
                        
                        <button type="submit" class="btn btn-info float-right">Update</button>
                        <button type="button" class="btn btn-default float-right" data-dismiss="modal">Close</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    </div>

    
@endsection