@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" data-target="#pumpModal">
                Add
            </button>
            <h4 class="card-title">Pumps</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>Pump</th>
                            <th>Location</th>
                            <th>Initial Investment</th>
                            <th> Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($pumps as $item)
                            <tr>
                                <td>{{$item->name}}</td>
                                <td>{{$item->location}}</td>
                                <td>{{$item->initial_investment}}</td>
                                <td>
                                    <div class="btn-group" role="group" aria-label="Basic example">
                                    <a href="{{ url('pump/'. $item->id.'/dispensers') }}">
                                    <i class="mdi mdi-ev-station" style="font-size: 1.1rem;"></i></a>
                                
                                    <x-edit-btn itemId="{{$item->id}}" class="edit-pump" />
                              
                                        {!! btnDelete('pump.destroy', 'pump', $item->id) !!}

                                        <a href="{{ route('meter.index', ['id' => $item->id]) }}"
                                        ><i class='mdi mdi-gauge' style="font-size: 1.1rem;"></i></a>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                       
                    </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="pumpModal" 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">Add Pump</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="{{url('pump')}}" method="POST">
                        @csrf

                        <x-form-input label="Name" type="text" name="name" placeholder="Name" id="pumpName" value=""/>
                        <x-form-input label="Location" type="text" name="location" placeholder="Location"
                            id="pumpphone" value=""/>
                        <x-form-input label="Initial Investment" type="number" name="initial_investment" 
                        placeholder="Initial Investment" id="pumpAddress" value=""/>
                        @foreach ($products as $product)
                                <input type="hidden" name="product_ids[]" value="{{ $product->id }}">
                                <x-form-input label="{{ $product->title }} Capacity" value="" type="text" name="capacities[]" placeholder="Stock Capacity" id="capacties" />
                            @endforeach
                        <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>

    <!-- 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=""/>
                        @foreach ($products as $product)
                            <input type="hidden" name="product_ids[]" value="{{ $product->id }}">
                            <x-form-input label="{{ $product->title }} Capacity" value="" type="text" name="capacities[]" placeholder="Stock Capacity" id="capacties" />
                        @endforeach
                        <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>

    <script>
        $(document).ready(function() {
            $(document).on('click', '.edit-pump', function() {
                var id = $(this).data('item-id');
                console.log(id);
                $.ajax({
                    url: "{{ route('pump.edit', ':id') }}".replace(':id', id),
                    method: 'GET',
                    success: function(data) {
                        // Handle the response data
                        $("#name").val(data.pump.name);
                        $("#location").val(data.pump.location);
                        $("#initial_investment").val(data.pump.initial_investment);
                        $('#userEditModal').modal('show');
                    },
                });
            });
        });
    </script>
@endsection