@extends(backpack_view('layouts.plain'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
@section('content')
    <div class="text-center mb-4">
        <img class="rounded mx-auto d-block" src="{{ url('/images/logo.png') }}" alt="Image" />
    </div>
    <div class="row justify-content-center mt-5">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header text-center">
                    <h4>Select Company</h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        @if ($companies->isEmpty())
                            <div class="col-md-12 text-center">
                                <p>No Company registered</p>
                            </div>
                        @endif
                        @foreach ($companies as $company)
                            <div class="col-md-3 text-center">
                                <a href="#" class="text-decoration-none reserve-button" data-id="{{ $company->id }}">

                                    <img style="
                                   width: 120px;
                                   border-radius: 10px;
                                   -webkit-box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.4);
                                   -moz-box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.4);
                                   box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.4);

                                    "
                                        src="{{ is_null($company->image)
                                            ? \Illuminate\Support\Facades\URL::asset('images/company.png')
                                            : \Illuminate\Support\Facades\URL::asset($company->image) }}">
                                    <p class="mt-3 ">{{ $company->name }}</p>
                                </a>
                                {{--                            <div class= "obutton feature2" data-id=""> --}}
                                {{--                                <button class="reserve-button">Reserve Book</button> --}}
                                {{--                            </div> --}}
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="card-footer text-center">
                    <a href="{{ url('/admin/logout') }}" class="btn btn-danger">
                        <i class="la la-sign-out-alt"></i>
                        Logout
                    </a>
                </div>
            </div>
        </div>
    </div>

    <script>
        $('.reserve-button').click(function() {

            var company_id = $(this).attr("data-id");
            $.ajax({
                url: '{{ route('companies') }}',
                data: {
                    "company_id": company_id
                },
                type: 'post',
                success: function(response) {
                    alert("You will now be redirected.");
                    window.location = "{{ backpack_url('dashboard') }}";
                }
            });
        });
    </script>
@endsection