@extends('layouts.app')

@section('content')
    <section class="bDirectories">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2 class="headMem">Business Directories</h2>
                </div>
            </div>
            <div class="row">
                @forelse($companies as $company)
                    <div class="col-md-4">
                        <div class="bdCrad">
                            @if ($company->attachment)
                                <img
                                    src="{{asset('uploads')}}/{{$company->attachment->content}}" class="img-fluid"
                                    alt="{{$company->name}}" style="width: 300px; height: 300px">
                            @endif
                            <h3>{{$company->name}}</h3>
                            <p>{{$company->address}}</p>

                                <div class="row">
                                    <div class="col-md-6">
                                        <select name="select_Service" id="select_Service">
                                            <option value="" disabled selected>select service </option>
                                            @foreach($company->services as $service)
                                                <option id="service" value="{{$service->pivot->price}}">{{$service->service_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-6 sib">
                                        <h4 id="price"></h4>

                                    </div>
                                </div>
                        </div>
                    </div>
                @empty
                    <div class="col-md-4">
                        <div class="bdCrad">
                            <p>No companies found!</p>
                        </div>
                    </div>
            @endforelse

            <!--                <div class="col-md-12">
                    <div class="mnBtn">
                        <a href="javascript:;" class="themeBtn">
                            <span>View all Directories</span>
                        </a>
                    </div>
                </div>-->
            </div>
        </div>
    </section>
@endsection

@push('custom-scripts')
    <script>
        $(document).ready(function () {
            $(document).on('change', '#select_Service', function(e){
                e.preventDefault();
                $(this).parent().siblings('.sib').children().html($(this).val())
                // $('#price').html($(this).val());
                //Decrement field counter
            });
            $('.updateWallet').click(function () {
                var walletAmount = $('.walletAmount').val();
                var url = "{{route('update-user-wallet')}}";

                $.ajax({
                    url: url,
                    type: "POST",
                    dataType: 'JSON',
                    data: {
                        wallet_amount: walletAmount
                    },
                    success: function (output) {
                        $('#walletBal').text(output.result.wallet_balance)
                        toastr.success(output.message)
                        $('.walletAmount').val('')
                    },
                    error: function (error) {
                        if (error.status === 422) {
                            toastr.error(error.response.data.errors.wallet_amount[0])
                        } else {
                            toastr.error('Something went wrong. Please try again!')
                        }
                    }
                });
            })
        });
    </script>
@endpush