@extends('modules.planner.layouts.base')

@section('content_body')
    <div class="flex flex-wrap items-center lg:items-end justify-between gap-5 pb-7.5">
        <div class="flex align-start gap-2">
            <a class="" href="{{ route('planner.index') }}" title="Return">
                <i class="ki-outline ki-left-square text-2xl leading-none text-muted-foreground hover:text-primary"></i>
            </a>
            <div class="flex flex-col gap-2">
                <span class="text-2xl font-medium text-mono leading-none tracking-tight">
                    {{ __('planner.points.title') }}
                </span>
            </div>
        </div>
        @include('modules.planner.partials.settings-menu')
    </div>

    <div class="grid w-full space-y-5">
        <div class="kt-card">
            <div class="kt-card-header">
                <h3 class="kt-card-title">
                    {{ __('planner.labels.list') }}
                </h3>
                <span class="inline-flex gap-2.5">
                    <div class="kt-input max-w-48">
                        <i class="ki-filled ki-magnifier"></i>
                        <input id="points_search_input" placeholder="{{ __('planner.labels.search') }}" type="text"></input>
                    </div>
                    <button class="kt-btn kt-btn-outline" id="btn-add-point">
                        <i class="ki-filled ki-plus-squared"></i>
                        {{ __('planner.labels.add') }}
                    </button>
                </span>
            </div>

            <div class="kt-card-body">
                <table id="kt_datatable_points" class="kt-table table-striped table-row-bordered gy-5 gs-7">
                    <thead>
                        <tr class="fw-semibold fs-6 text-gray-800">
                            <th class="min-w-200px">{{ __('planner.labels.name') }}</th>
                            <th class="min-w-200px">{{ __('planner.labels.coordinates') }}</th>
                            <th class="min-w-100px">{{ __('planner.labels.status') }}</th>
                            <th class="min-w-100px text-end"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Loaded via AJAX -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    @include('modules.planner.points.partials.modal-add')
    @include('modules.planner.points.partials.modal-edit')
@endsection

@section('config')
    <script>
        window.PointsConfig = {
            apiUrl: '{{ route('planner.points.data') }}',
            pointsUrl: '{{ url('planner/points') }}',
        };
    </script>
@endsection

@section('extra_scripts')
    @include('partials.google-maps')
    <script src="{{ asset('assets/js/apps/planner/points/index.js') }}"></script>
@endsection