@extends('layouts.app')

@section('content')
    <div class="container mt-4">
        <div class="card">
            <div class="card-header">
                <h4>{{ $title }}</h4>
            </div>
            <div class="card-body">
                <form wire:submit.prevent="save" novalidate>
                    <div class="row mb-3">
                        <label for="name" class="col-sm-4 col-form-label">Station Name</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" wire:model="name" placeholder="Station Name">
                            @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label for="location" class="col-sm-4 col-form-label">Station Location</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control @error('location') is-invalid @enderror" id="location" wire:model="location" placeholder="Complete Station Information">
                            @error('location') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label for="map_URL" class="col-sm-4 col-form-label">Map URL</label>
                        <div class="col-sm-8">
                            <textarea class="form-control @error('map_URL') is-invalid @enderror" id="map_URL" wire:model="map_URL" placeholder=""></textarea>
                            @error('map_URL') <div class="invalid-feedback">{{ $message }}</div> @endregion
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label for="lat" class="col-sm-4 col-form-label">Latitude</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control @error('lat') is-invalid @endregion" id="lat" wire:model="lat" placeholder="">
                            @error('lat') <div class="invalid-feedback">{{ $message }}</div> @endregion
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label for="long" class="col-sm-4 col-form-label">Longitude</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control @error('long') is-invalid @endregion" id="long" wire:model="long" placeholder="">
                            @error('long') <div class="invalid-feedback">{{ $message }}</div> @endregion
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label for="code" class="col-sm-4 col-form-label">Station Code</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control @error('code') is-invalid @endregion" id="code" wire:model="code" placeholder="Station Code">
                            @error('code') <div class="invalid-feedback">{{ $message }}</div> @endregion
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label for="BranchId" class="col-sm-4 col-form-label">Branch</label>
                        <div class="col-sm-8">
                            <select class="form-control @error('BranchId') is-invalid @endregion" id="BranchId" wire:model="BranchId">
                                @foreach ($branches as $branch)
                                    <option value="{{ $branch['id'] }}">{{ $branch['name'] }}</option>
                                @endforeach
                            </select>
                            @error('BranchId') <div class="invalid-feedback">{{ $message }}</div> @endregion
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label for="contact_number" class="col-sm-4 col-form-label">Contact Number</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control @error('contact_number') is-invalid @endregion" id="contact_number" wire:model="contact_number" placeholder="Contact Number">
                            @error('contact_number') <div class="invalid-feedback">{{ $message }}</div> @endregion
                        </div>
                    </div>

                    <div class="d-flex justify-content-end gap-2">
                        <button type="button" class="btn btn-secondary" wire:click="cancel">Cancel</button>
                        <button type="submit" class="btn btn-primary" wire:loading.attr="disabled" wire:target="save">
                            @if($loading) <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Saving... @else Save @endif
                        </button>
                    </div>
                </form>
            </div>


            <!-- After the form fields, add this -->
<div class="row mb-3">
    <label class="col-sm-4 col-form-label">Map</label>
    <div class="col-sm-8">
        <div id="map" style="height: 400px; width: 100%; margin-bottom: 20px;"></div>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyARzdIELzb2Uvoly4-Er4B7-QzXKr4j3bg&libraries=places"></script>
        <script>
            function initMap() {
                const map = new google.maps.Map(document.getElementById("map"), {
                    center: { lat: 16.1505, lng: 119.9856 },
                    zoom: 15,
                });
                const marker = new google.maps.Marker({
                    position: { lat: 16.1505, lng: 119.9856 },
                    map: map,
                    draggable: true,
                });

                google.maps.event.addListener(marker, 'dragend', function(event) {
                    document.querySelector('[wire\\:model="lat"]').value = event.latLng.lat();
                    document.querySelector('[wire\\:model="long"]').value = event.latLng.lng();
                    @this.set('lat', event.latLng.lat());
                    @this.set('long', event.latLng.lng());
                });
            }

            window.initMap = initMap;
        </script>
    </div>
</div>

        </div>
    </div>
@endsection