@extends('layouts.plain')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <h2 class="card-header">Select the Parking Stall Reference Location</h2>
                <h4>{{ $lot->reference_image }}</h4><br>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    <img src="{{ asset('img/references/'.$lot->reference_image) }}" alt="" id="lotimage">
                    <script>
                        const jc = Jcrop.attach('lotimage',{
                            shadeColor: 'red',
                            multi: false
                        });

                        console.log(jc.active.pos)
                    </script>
                    <br>

                    <script>
                        function submit_coordinates(){
                            const crops = []
                            jc.crops.forEach((crop) => {
                                const coords = crop.pos
                                crops.push(coords)
                            })
                            console.log(crops)

                            const form = document.createElement('form')
                            form.method = "POST"
                            form.action = "{{ url('/lot/reference/'.$lot->id) }}"

                            const coords_element = document.createElement('input')
                            coords_element.name = "coords"
                            coords_element.value = JSON.stringify(crops)
                            form.appendChild(coords_element)

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

                            document.body.appendChild(form)
                            form.submit()
                        }
                    </script>

                    <button onclick="submit_coordinates()">Submit</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection