@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>
                    <!-- Google Map -->
                    <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: {{ $lat ?: 16.1505 }}, lng: {{ $long ?: 119.9856 }} },
                                        zoom: 15,
                                    });
                                    const marker = new google.maps.Marker({
                                        position: { lat: {{ $lat ?: 16.1505 }}, lng: {{ $long ?: 119.9856 }} },
                                        map: map,
                                        draggable: true,
                                    });

                                    google.maps.event.addListener(marker, 'dragend', function(event) {
                                        @this.call('updateMap', event.latLng.lat(), event.latLng.lng());
                                    });
                                }

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

                    <!-- Form Fields -->
                    <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="Enter Map URL"></textarea>
                            @error('map_URL') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </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 @enderror" id="lat" wire:model="lat" placeholder="Latitude">
                            @error('lat') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </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 @enderror" id="long" wire:model="long" placeholder="Longitude">
                            @error('long') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </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 @enderror" id="code" wire:model="code" placeholder="Station Code">
                            @error('code') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <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="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.0') is-invalid @enderror" id="contact_number" wire:model="contact_number.0" placeholder="Contact Number">
                            @error('contact_number.*') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            <small>Accepted formats: +(63)9*********, +639*********, (02)****-****, 6***-****</small>
                        </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 @enderror" id="BranchId" wire:model="BranchId">
                                <option value="">Select Branch</option>
                                @foreach ($branches as $branch)
                                    <option value="{{ $branch['id'] }}">{{ $branch['name'] }}</option>
                                @endforeach
                            </select>
                            @error('BranchId') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <!-- Fuels -->
                    <div class="row mb-3">
                        <label class="col-sm-4 col-form-label">Fuels</label>
                        <div class="col-sm-8">
                            <button type="button" class="btn btn-primary mb-2" wire:click="$set('fuelModal', true)">Add Fuel</button>
                            @foreach($fuels as $index => $fuel)
                                <div class="input-group mb-2">
                                    <span class="input-group-text">{{ $fuel['name'] }}</span>
                                    <input type="number" class="form-control @error('fuels.' . $index . '.price') is-invalid @enderror" wire:model="fuels.{{ $index }}.price" placeholder="00.00">
                                    <button type="button" class="btn btn-danger" wire:click="removeFuel({{ $index }}, '{{ $fuel['name'] }}')">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                    @error('fuels.' . $index . '.price') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                </div>
                            @endforeach
                            @error('fuels') <div class="text-danger">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <!-- Form Buttons -->
                    <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>

                <!-- Fuel Modal -->
                @if($fuelModal)
                    <x-dialog-modal wire:model="fuelModal">
                        <x-slot name="title">
                            Add Fuel
                        </x-slot>
                        <x-slot name="content">
                            <select multiple class="form-control" wire:model="selectedFuels">
                                @foreach($newFuel as $fuel)
                                    <option value="{{ $fuel['id'] }}">{{ $fuel['name'] }}</option>
                                @endforeach
                            </select>
                        </x-slot>
                        <x-slot name="footer">
                            <x-secondary-button wire:click="$set('fuelModal', false)">
                                Close
                            </x-secondary-button>
                            <x-button wire:click="addToStationFuel">
                                Add Fuel
                            </x-button>
                        </x-slot>
                    </x-dialog-modal>
                @endif

                <!-- Remove Fuel Modal -->
                @if($removeModal)
                    <x-dialog-modal wire:model="removeModal">
                        <x-slot name="title">
                            Remove Fuel
                        </x-slot>
                        <x-slot name="content">
                            <p>Are you sure you want to remove {{ $fuelName }}?</p>
                        </x-slot>
                        <x-slot name="footer">
                            <x-secondary-button wire:click="$set('removeModal', false)">
                                Close
                            </x-secondary-button>
                            <x-button wire:click="confirmRemoveFuel">
                                Remove
                            </x-button>
                        </x-slot>
                    </x-dialog-modal>
                @endif
            </div>
        </div>
    </div>
@endsection