@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="#myModal">
                Add
            </button>
            <h4 class="card-title">Customers</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> Name</th>
                            <th>Phone</th>
                            <th>Nic</th>
                            <th>Address</th>
                            <th colspan="3" class="text-center"> Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($customer as $item)
                            <tr>
                                <td>{{ $item->id }}</td>
                                <td>{{ $item->name }}</td>
                                <td>{{ $item->phone }}</td>
                                <td>{{ $item->nic }}</td>
                                <td>{{ $item->address }}</td>
                                <td>
                                    <div class="btn-group" role="group" aria-label="Basic example">
                                    <a href="{{ route('customer-transection.show', $item->id) }}"><i class="mdi mdi-currency-usd"></i></a>
                                    <x-edit-btn itemId="{{ $item->id }}" class="edit-user" />
                                    {!! btnDelete('customer.destroy', 'customers', $item->id) !!}
                                </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>
            </div>
        </div>
    </div>

    <!--Add Customer Modal -->
    <div class="modal fade" id="myModal" 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 Customer</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('customer') }}" method="POST">
                        @csrf
                        <x-form-input label="Name" type="text" name="name" placeholder="Name" id="formName" value=""/>
                        <x-form-input label="Phone Number" type="number" name="phone" placeholder="Phone Number"
                            id="formphone" value=""/>
                        <x-form-input label="Nic" type="number" name="nic" placeholder="Nic" id="formAddress" value=""/>
                        <x-form-input label="Address" type="text" name="address" placeholder="Address" id="formNic" value=""/>
                        <x-form-input label="Vehicle Number" data-role="tagsinput" type="text" name="vehical_number"
                            id="formVehicleNumber" placeholder="Vehicle Number" 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>

    <!-- 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="{{ url('customer/' . ($item->id ?? '')) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <input type="hidden" id="user-id" name="id"></span>
                        <x-form-input label="Name" type="text" name="name" placeholder="Name" id="name" value=""/>
                        <x-form-input label="Phone Number" type="number" name="phone" placeholder="Phone Number"
                            id="phone" value=""/>
                        <x-form-input label="Nic" type="number" name="nic" placeholder="Nic" id="nic" value="" />
                        <x-form-input label="Address" type="text" name="address" placeholder="Address"
                            id="address" value=""/>
                        <x-form-input label="Vehicle Number" data-role="tagsinput" type="text" id="vehicle_number"
                            name="vehical_number" placeholder="Vehicle Number" 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>

    <script>
        $(document).ready(function() {
            $(document).on('click', '.edit-user', function() {
                var id = $(this).data('item-id');
                console.log(id);
                $.ajax({
                    url: "{{ route('customer.edit', ':id') }}".replace(':id', id),
                    method: 'GET',
                    success: function(data) {
                        // Handle the response data
                        console.log(data.customerVehicle);
                        $("#name").val(data.customer.name);
                        $("#phone").val(data.customer.phone);
                        $("#nic").val(data.customer.nic);
                        $("#address").val(data.customer.address);
                        $('#userEditModal').modal('show');
                        $.each(data.customerVehicle, function(index, value) {
                            $("#vehicle_number").val(value.vehicle_number);

                        });
                    },
                });
            });
        });
    </script>
@endsection