@extends('layouts.dashboard-skelton')

@section('main')
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="gta-card card">
                <div class="card-header">Gérer les quartiers :</div>
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="form-group col-md-6">
                            <form action="{{ route('points.quartier.store') }}" method="POST"
                                enctype="multipart/form-data" class="form-inline">
                                @csrf
                                <div class="form-group mx-sm-3">
                                    <label for="inputQuartiers" class="sr-only">Quartiers :</label>
                                    <input type="text" class="form-control" name="quartier" id="inputQuartiers"
                                        placeholder="Quartier">
                                </div>
                                <button type="submit" class="btn btn-primary">Ajouter</button>
                            </form>
                        </div>
                        <div class="form-group col-md-6">
                            <div class='gta-selectbox'>
                                <div class='gta-sb-header'>
                                    <label>Quartiers :</label>
                                </div>
                                <ul class='gta-sb-list'>
                                    @forelse ($quartiers as $quartier)
                                        <li>
                                            <span> {{ $quartier->name }} </span>
                                            <form
                                                action="{{ route('points.quartier.delete', ['quartier' => $quartier->id]) }}"
                                                method="POST" enctype="multipart/form-data">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn">
                                                    <i class="bi bi-x-lg text-white"></i>
                                                </button>
                                            </form>
                                        </li>
                                    @empty
                                    @endforelse
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8 mt-4">
            <div class="gta-card card">
                <div class="card-header">Gérer les points de ramassages :</div>
                <div class="card-body">
                    <form action="{{ route('points.point.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="form-row">
                            <div class="form-group col-md-5">
                                <label for="inputQuartier">Quartier :</label>
                                <select id="inputQuartier" name="quartier" class="form-control custom-selectbox">
                                    <option></option>
                                    @forelse ($quartiers as $quartier)
                                        <option value="{{ $quartier->id }}">{{ $quartier->name }}</option>
                                    @empty
                                    @endforelse
                                </select>
                            </div>
                            <div class="form-group col-md-7">
                                <label for="inputAddress">Address :</label>
                                <input type="text" class="form-control" name="address" id="inputAddress">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-3">
                                <label>Géolocalisation :</label>
                                <input type="text" class="form-control" placeholder="Latitude" name="longitude"
                                    id="inputLongitude">
                            </div>
                            <div class="form-group col-md-3">
                                <input type="text" class="form-control" style="margin-top: 2rem" placeholder="Longitude"
                                    name="latitude" id="inputLatitude">
                            </div>
                            <div class="col-md-3" style="margin-top: 2rem">
                                <button type="submit" class="btn btn-primary">Ajouter</button>
                            </div>
                        </div>
                    </form>
                    <div class='gta-selectbox'>
                        <div class='gta-sb-header'>
                            <label>Points de ramassages :</label>
                        </div>
                        <ul class='gta-sb-list'>
                            @forelse ($points as $point)
                                <li>
                                    <span> {{ $point->address }} </span>
                                    <form action="{{ route('points.point.delete', ['point' => $point->id]) }}"
                                        method="POST" enctype="multipart/form-data">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn">
                                            <i class="bi bi-x-lg text-white"></i>
                                        </button>
                                    </form>
                                </li>
                            @empty
                            @endforelse
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection