@extends('includes.main')

@section('main-container')
    <div class="card">
        <div class="card-body">
            <button type="button" class="btn btn-primary float-right" data-toggle="modal" id="btn-add">
                Add
            </button>
            <h4 class="card-title">{{ $pump_name }} Dispenser List</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>title</th>
                            <th>Category</th>
                            <th>status</th>
                            <th colspan="3" class="text-center"> Action</th>
                        </tr>
                    </thead>
                    <tbody>
                                                @forelse ($dispensers as $dispenser)
                            @if ($dispenser->trash == 'active')
                                <tr class="item-row-{{ $dispenser->id }}">
                                    <th>{{ $cnt }}</th>
                                    <td>{{ $dispenser->title }}</td>
                                    <td>{{ $dispenser->product['title'] }}</td>
                                    <td>{{ $dispenser->status }}</td>
                                    <td>
                                        <div class="btn-group" role="group" aria-label="Basic example">
                                            <a data-route="{{ route('meter.index') }}"
                                                data-route-create="{{ route('meter.create') }}"
                                                data-route-show="{{ route('meter.show', $dispenser->id) }}"
                                                data-route-update="{{ route('meter.update', $dispenser->id) }}"
                                                data-id={{ $dispenser->id }} class="btn-reading"><i class='mdi mdi-gauge'
                                                    style="font-size: 1.1rem;"></i></a>

                                            {{-- <x-edit-btn itemId="{{$dispenser->id}}" class="editDispenser"/> --}}
                                            {!! btnEdit('dispenser.edit', 'dispenser.update', $dispenser->id) !!}

                                            {!! btnDelete('dispenser.destroy', 'dispenser', $dispenser->id) !!}
                                        </div>
                                    </td>
                                </tr>
                                                            @endif
                        @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">
                    {{-- {!! $pumps->links() !!} --}}
                </div>
            </div>
        </div>
    </div>

    <!--Add Customer Modal -->
    <div class="modal fade" id="modal-dispenser" 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="modal-title">Add New</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 method="POST" id="frm-dispenser" action="{{ url('dispenser') }}">
                        <input type="hidden" id="route-store" value="{{ url('dispenser') }}">
                        <input type="hidden" name="pump_id" value="{{ $pump_id }}" id="pump">
                        <input type="hidden" name="_method" id="frm-method" value="">
                        @csrf
                        <x-form-input label="Title" type="text" name="title" placeholder="Title" id="title"
                            value="" />
                        
                            <label for="status">Trash</label>
                            <select name="trash" id="trash" class="form-control">
                                <option value="active" {{ old('trash') == 'active' ? 'selected' : '' }}>Active</option>
                                <option value="inactive" {{ old('trash') == 'inactive' ? 'selected' : '' }}>Inactive
                                </option>

                            </select>
                        

                        <div class="form-group">
                            <label>Category</label>
                            {!! Form::select('product_id', $products, null, ['class' => 'form-control', 'id' => 'category']) !!}
                        </div>
                        <x-form-input label="Current Reading" value="" type="number" name="reading"
                            placeholder="Current Reading" id="reading" />
                        <x-form-input label="Date" type="date" name="date" placeholder="Date" id="created_at"
                            value="" />

                        <button type="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>

    <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
                        @method('PUT')
                        {{-- <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="">
                        <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="" 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>
@endsection