@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Manage Parking Lot</div>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif
                    <h3>Manage Handicap</h3>
                    <div class="container" id="stalls">
                        @foreach( $stalls as $stallgroup )
                            <div class="row">
                                @foreach( $stallgroup as $stall )
                                    @if( $stall['data']['handicap'] )
                                        <button onclick="$(this).toggleClass('handicap-btn')" class="btn btn-default stall-btn handicap-btn" id="{{ $stall['id'] }}" style="margin: 10px; padding-top: 10px; padding-bottom: 10px;">{{ $stall['id'] }}</button>
                                    @else
                                        <button onclick="$(this).toggleClass('handicap-btn')" class="btn btn-default stall-btn" id="{{ $stall['id'] }}" style="margin: 10px; padding-top: 10px; padding-bottom: 10px;">{{ $stall['id'] }}</button>
                                    @endif
                                @endforeach
                            </div>
                        @endforeach
                    </div>
                    <script>
                        function submit_handicap(){
                            const handicap_ids = []
                            $('.handicap-btn').each(function(k, e){
                                handicap_ids.push(e.id)
                            })

                            const form = document.createElement('form')
                            form.method = "POST";
                            form.action = "{{ url('/lot/manage/'.$thruid) }}";

                            const ids = document.createElement('input')
                            ids.type = "hidden"
                            ids.name = "handicaps"
                            ids.value = JSON.stringify(handicap_ids)

                            const csrf = document.createElement('input')
                            csrf.type = "hidden"
                            csrf.name = "_token"
                            csrf.value = "{{ csrf_token() }}"

                            form.appendChild(ids)
                            form.appendChild(csrf)
                            document.body.appendChild(form)

                            // console.log(form)
                            form.submit()

                        }
                    </script>
                    <br><button class="btn btn-success" onclick="submit_handicap()">Save Changes</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection