converting react.js codes to laravel php

app/Livewire/StationLocator/AddBranch.php

@@ -0,0 +1,68 @@
+<?php
+
+namespace App\Livewire\StationLocator;
+
+use Livewire\Component;
+use Illuminate\Support\Facades\Http;
+use Jantinnerezo\LivewireAlert\LivewireAlert;
+
+class AddBranch extends Component
+{
+    use LivewireAlert;
+
+    public $code = '';
+    public $name = '';
+    public $details = '';
+    public $loading = false;
+    public $title = 'Add Branch';
+
+    protected $rules = [
+        'code' => 'required|string|max:255',
+        'name' => 'required|string|max:255',
+        'details' => 'required|string|max:255',
+    ];
+
+    protected $messages = [
+        'code.required' => 'Branch code is required',
+        'name.required' => 'Branch name is required!',
+        'details.required' => 'Branch details is required!',
+    ];
+
+    public function save()
+    {
+        $this->validate();
+
+        $this->loading = true;
+
+        try {
+            $response = Http::post('https://api.example.com/branches', [
+                'code' => $this->code,
+                'name' => $this->name,
+                'details' => $this->details,
+            ]);
+
+            if ($response->successful()) {
+                $this->alert('success', 'Branch saved successfully!');
+                return redirect('/branches');
+            } else {
+                $this->alert('error', 'Failed to save branch. Please try again.');
+            }
+        } catch (\Exception $e) {
+            $this->alert('error', 'An error occurred: ' . $e->getMessage());
+        } finally {
+            $this->loading = false;
+        }
+    }
+
+    public function cancel()
+    {
+        if (confirm('Are you sure you want to discard changes?')) {
+            return redirect('/branches');
+        }
+    }
+
+    public function render()
+    {
+        return view('livewire.station-locator.add-branch')->layout('layouts.app', ['title' => $this->title]);
+    }
+}

app/Livewire/StationLocator/AddFuel.php

@@ -0,0 +1,65 @@
+<?php
+
+namespace App\Livewire\StationLocator;
+
+use Livewire\Component;
+use Illuminate\Support\Facades\Http;
+use Jantinnerezo\LivewireAlert\LivewireAlert;
+
+class AddFuel extends Component
+{
+    use LivewireAlert;
+
+    public $name = '';
+    public $loading = false;
+    public $title = 'Add Fuel';
+
+    protected $rules = [
+        'name' => 'required|string|max:255',
+    ];
+
+    protected $messages = [
+        'name.required' => 'Fuel name is required!',
+    ];
+
+    public function mount()
+    {
+        // Initialize any default values if needed
+    }
+
+    public function save()
+    {
+        $this->validate();
+
+        $this->loading = true;
+
+        try {
+            $response = Http::post('https://api.example.com/fuels', [
+                'name' => $this->name,
+            ]);
+
+            if ($response->successful()) {
+                $this->alert('success', 'Fuel saved successfully!');
+                return redirect('/fuels');
+            } else {
+                $this->alert('error', 'Failed to save fuel. Please try again.');
+            }
+        } catch (\Exception $e) {
+            $this->alert('error', 'An error occurred: ' . $e->getMessage());
+        } finally {
+            $this->loading = false;
+        }
+    }
+
+    public function cancel()
+    {
+        if (confirm('Are you sure you want to discard changes?')) {
+            return redirect('/fuels');
+        }
+    }
+
+    public function render()
+    {
+        return view('livewire.station-locator.add-fuel')->layout('layouts.app', ['title' => $this->title]);
+    }
+}

app/Livewire/StationLocator/EditStation.php

@@ -0,0 +1,234 @@
+<?php
+
+namespace App\Livewire\StationLocator;
+
+use Livewire\Component;
+use Illuminate\Support\Facades\Http;
+use Jantinnerezo\LivewireAlert\LivewireAlert;
+
+class EditStation extends Component
+{
+    use LivewireAlert;
+
+    public $id;
+    public $name = '';
+    public $location = '';
+    public $map_URL = '';
+    public $lat = '';
+    public $long = '';
+    public $BranchId = '';
+    public $contact_number = [];
+    public $code = '';
+    public $fuels = [];
+    public $fuelsData = [];
+    public $newFuel = [];
+    public $branches = [];
+    public $isSched = 2; // 0 = No, 1 = Yes, 2 = Unset
+    public $date = '';
+    public $fuelModal = false;
+    public $removeModal = false;
+    public $fuelName = '';
+    public $fuelIndex = '';
+    public $loading = false;
+    public $title = 'Edit Station';
+
+    protected $rules = [
+        'name' => 'required|string|max:128',
+        'location' => 'required|string|max:128',
+        'map_URL' => 'required|url',
+        'lat' => 'required|string',
+        'long' => 'required|string',
+        'BranchId' => 'required|string',
+        'contact_number' => 'required|array|min:1',
+        'contact_number.*' => 'regex:/^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$/|min:7',
+        'code' => 'required|string',
+        'isSched' => 'required|in:0,1',
+        'date' => 'required_if:isSched,1|date',
+    ];
+
+    protected $messages = [
+        'name.required' => 'Station name is required!',
+        'location.required' => 'Station location is required!',
+        'map_URL.required' => 'Url is required!',
+        'lat.required' => 'Lat is required!',
+        'long.required' => 'Long is required!',
+        'BranchId.required' => 'Branch is required!',
+        'contact_number.required' => 'Contact number is required!',
+        'contact_number.*.regex' => 'Please enter a valid contact number',
+        'contact_number.*.min' => 'Minimum character is 7',
+        'code.required' => 'Station code is required!',
+        'isSched.required' => 'Please select a schedule update value.',
+        'date.required_if' => 'Scheduled date is required when scheduling is enabled.',
+    ];
+
+    public function mount($id)
+    {
+        $this->id = $id;
+        $this->fetchStation();
+        $this->fetchBranches();
+        $this->fetchFuels();
+    }
+
+    public function fetchStation()
+    {
+        try {
+            $response = Http::get("https://api.example.com/stations/{$this->id}");
+            if ($response->successful()) {
+                $station = $response->json();
+                $this->name = $station['name'];
+                $this->location = $station['location'];
+                $this->map_URL = $station['map_Url'];
+                $this->lat = $station['lat'];
+                $this->long = $station['long'];
+                $this->BranchId = $station['BranchId'];
+                $this->contact_number = explode(',', $station['contact_number']);
+                $this->code = $station['code'];
+                $this->fuels = $this->sortFuels($station['StationFuels'] ?? []);
+                $this->isSched = $station['Schedule'] ? 1 : 2;
+                $this->date = $station['Schedule'];
+            } else {
+                $this->alert('error', 'Failed to fetch station data.');
+            }
+        } catch (\Exception $e) {
+            $this->alert('error', 'An error occurred: ' . $e->getMessage());
+        }
+    }
+
+    public function fetchBranches()
+    {
+        try {
+            $response = Http::get('https://api.example.com/branches/noLimit');
+            if ($response->successful()) {
+                $this->branches = $response->json()['data'] ?? [];
+            }
+        } catch (\Exception $e) {
+            $this->alert('error', 'An error occurred while fetching branches.');
+        }
+    }
+
+    public function fetchFuels()
+    {
+        try {
+            $response = Http::get('https://api.example.com/fuels');
+            if ($response->successful()) {
+                $this->fuelsData = $response->json()['data'] ?? [];
+                $this->newFuel = array_filter($this->fuelsData, fn($fuel) => !in_array($fuel['id'], array_column($this->fuels, 'FuelId')));
+            }
+        } catch (\Exception $e) {
+            $this->alert('error', 'An error occurred while fetching fuels.');
+        }
+    }
+
+    public function sortFuels($fuels)
+    {
+        $sorted = array_map(function ($fuel) {
+            $nameParts = explode(' ', $fuel['Fuel']['name'] ?? $fuel['name']);
+            $val = (int) end($nameParts) ?: 0;
+            return ['val' => $val, 'data' => $fuel];
+        }, $fuels);
+
+        usort($sorted, fn($a, $b) => $a['val'] <=> $b['val']);
+
+        return array_map(fn($item) => $item['data'], $sorted);
+    }
+
+    public function updateFuels($price, $id, $isFuel = true)
+    {
+        $this->fuels = array_map(function ($fuel) use ($price, $id, $isFuel) {
+            $fuelId = $isFuel ? ($fuel['FuelId'] ?? $fuel['id']) : $fuel['id'];
+            if ($fuelId === $id) {
+                $fuel['price'] = $price;
+            }
+            return $fuel;
+        }, $this->fuels);
+    }
+
+    public function addToStationFuel($selectedFuels)
+    {
+        $newFuels = array_filter($this->fuelsData, fn($fuel) => in_array($fuel['id'], $selectedFuels));
+        $this->fuels = array_merge($this->fuels, array_map(fn($fuel) => [
+            'FuelId' => $fuel['id'],
+            'name' => $fuel['name'],
+            'price' => '0.00',
+        ], $newFuels));
+        $this->newFuel = array_filter($this->newFuel, fn($fuel) => !in_array($fuel['id'], $selectedFuels));
+        $this->fuelModal = false;
+    }
+
+    public function removeFuel($index, $name)
+    {
+        $this->fuelIndex = $index;
+        $this->fuelName = $name;
+        $this->removeModal = true;
+    }
+
+    public function confirmRemoveFuel()
+    {
+        $this->fuels = array_filter($this->fuels, fn($_, $i) => $i !== $this->fuelIndex, ARRAY_FILTER_USE_BOTH);
+        $this->removeModal = false;
+        $this->fetchFuels();
+    }
+
+    public function save()
+    {
+        $this->validate();
+
+        if (empty($this->fuels) && $this->isSched == 1) {
+            $this->alert('error', 'Cannot schedule a station without fuel.');
+            return;
+        }
+
+        if ($this->fuels && array_filter($this->fuels, fn($fuel) => in_array($fuel['price'], [0, '0.00', '00.00', null]))) {
+            $this->alert('error', 'Invalid price for fuel.');
+            return;
+        }
+
+        $this->loading = true;
+
+        try {
+            $response = Http::put("https://api.example.com/stations/{$this->id}", [
+                'name' => $this->name,
+                'location' => $this->location,
+                'map_Url' => $this->map_URL,
+                'lat' => $this->lat,
+                'long' => $this->long,
+                'contact_number' => implode(',', $this->contact_number),
+                'BranchId' => $this->BranchId,
+                'code' => $this->code,
+                'Schedule' => $this->isSched == 1 ? $this->date : null,
+                'NewStationFuel' => array_map(fn($fuel) => [
+                    'FuelId' => $fuel['FuelId'],
+                    'price' => $fuel['price'],
+                ], $this->fuels),
+                'modified_by' => auth()->user()->name ?? 'user', // Adjust based on your auth
+            ]);
+
+            if ($response->successful()) {
+                $this->alert('success', 'Station updated successfully!');
+                return redirect('/stations');
+            } else {
+                $this->alert('error', 'Failed to update station.');
+            }
+        } catch (\Exception $e) {
+            $this->alert('error', 'An error occurred: ' . $e->getMessage());
+        } finally {
+            $this->loading = false;
+        }
+    }
+
+    public function cancel()
+    {
+        if (confirm('Are you sure you want to discard changes?')) {
+            return redirect('/stations');
+        }
+    }
+
+    public function render()
+    {
+        return view('livewire.station-locator.edit-station', [
+            'branches' => $this->branches,
+            'fuelsData' => $this->fuelsData,
+            'newFuel' => $this->newFuel,
+        ])->layout('layouts.app', ['title' => $this->title]);
+    }
+}

app/Livewire/StationLocator/StationCreate.php

@@ -0,0 +1,115 @@
+<?php
+
+namespace App\Livewire\StationLocator;
+
+use Livewire\Component;
+use Illuminate\Support\Facades\Http;
+use Jantinnerezo\LivewireAlert\LivewireAlert;
+
+class StationCreate extends Component
+{
+    use LivewireAlert;
+
+    public $name = '';
+    public $location = '';
+    public $map_URL = '';
+    public $lat = '';
+    public $long = '';
+    public $BranchId = '';
+    public $contact_number = [];
+    public $code = '';
+    public $fuels = [];
+    public $loading = false;
+    public $title = 'Add Station';
+
+    protected $rules = [
+        'name' => 'required|string|max:128',
+        'location' => 'required|string|max:128',
+        'map_URL' => 'required|url',
+        'lat' => 'required|string',
+        'long' => 'required|string',
+        'BranchId' => 'required|string',
+        'contact_number' => 'required|array|min:1',
+        'code' => 'required|string',
+    ];
+
+    protected $messages = [
+        'name.required' => 'Station name is required!',
+        'location.required' => 'Station location is required!',
+        'map_URL.required' => 'Url is required!',
+        'lat.required' => 'Lat is required!',
+        'long.required' => 'Long is required!',
+        'BranchId.required' => 'Branch is required!',
+        'contact_number.required' => 'Contact number is required!',
+        'code.required' => 'Station code is required!',
+    ];
+
+    public function mount()
+    {
+        $this->fetchBranches();
+        $this->fetchFuels();
+    }
+
+    public function fetchBranches()
+    {
+        $response = Http::get('https://api.example.com/branches/noLimit');
+        if ($response->successful()) {
+            $this->branches = $response->json()['data'];
+        }
+    }
+
+    public function fetchFuels()
+    {
+        $response = Http::get('https://api.example.com/fuels');
+        if ($response->successful()) {
+            $this->fuelsData = $response->json()['data'];
+        }
+    }
+
+    public function save()
+    {
+        $this->validate();
+
+        $this->loading = true;
+
+        try {
+            $response = Http::post('https://api.example.com/stations', [
+                'name' => $this->name,
+                'location' => $this->location,
+                'map_URL' => $this->map_URL,
+                'lat' => $this->lat,
+                'long' => $this->long,
+                'BranchId' => $this->BranchId,
+                'contact_number' => implode(',', $this->contact_number),
+                'code' => $this->code,
+                'fuels' => $this->fuels,
+            ]);
+
+            if ($response->successful()) {
+                $this->alert('success', 'Station saved successfully!');
+                return redirect('/stations');
+            } else {
+                $this->alert('error', 'Failed to save station. Please try again.');
+            }
+        } catch (\Exception $e) {
+            $this->alert('error', 'An error occurred: ' . $e->getMessage());
+        } finally {
+            $this->loading = false;
+        }
+    }
+
+    public function cancel()
+    {
+        if (confirm('Are you sure you want to discard changes?')) {
+            return redirect('/stations');
+        }
+    }
+
+    public function render()
+    {
+        return view('livewire.station-locator.station-create', [
+            'branches' => $this->branches ?? [],
+            'fuelsData' => $this->fuelsData ?? [],
+        ])->layout('layouts.app', ['title' => $this->title]);
+    }
+}

app/Livewire/StationLocator/StationList.php

@@ -0,0 +1,71 @@
+<?php
+
+namespace App\Livewire\StationLocator;
+
+use Livewire\Component;
+use Illuminate\Support\Facades\Http;
+use Jantinnerezo\LivewireAlert\LivewireAlert;
+
+class StationList extends Component
+{
+    use LivewireAlert;
+
+    public $stations = [];
+    public $uploadPriceModal = false;
+    public $locationModal = false;
+    public $dataLocation = null;
+
+    public function mount()
+    {
+        $this->fetchStations();
+    }
+
+    public function fetchStations()
+    {
+        try {
+            $response = Http::get('https://api.example.com/stations');
+            if ($response->successful()) {
+                $this->stations = $response->json()['data'] ?? [];
+            } else {
+                $this->alert('error', 'Failed to fetch stations.');
+            }
+        } catch (\Exception $e) {
+            $this->alert('error', 'An error occurred: ' . $e->getMessage());
+        }
+    }
+
+    public function delete($id)
+    {
+        if (confirm('Are you sure you want to delete this station?')) {
+            try {
+                $response = Http::delete("https://api.example.com/stations/{$id}");
+                if ($response->successful()) {
+                    $this->alert('success', 'Station deleted successfully!');
+                    $this->fetchStations();
+                } else {
+                    $this->alert('error', 'Failed to delete station.');
+                }
+            } catch (\Exception $e) {
+                $this->alert('error', 'An error occurred: ' . $e->getMessage());
+            }
+        }
+    }
+
+    public function showLocation($station)
+    {
+        $this->dataLocation = $station;
+        $this->locationModal = true;
+    }
+
+    public function toggleUploadPriceModal()
+    {
+        $this->uploadPriceModal = !$this->uploadPriceModal;
+    }
+
+    public function render()
+    {
+        return view('livewire.station-locator.station-list', [
+            'stations' => $this->stations,
+        ])->layout('layouts.app', ['title' => 'Station List']);
+    }
+}

composer.json

@@ -8,6 +8,7 @@
     "require": {
         "php": "^8.2",
         "guzzlehttp/guzzle": "^7.9",
+        "jantinnerezo/livewire-alert": "^4.0",
         "jenssegers/agent": "^2.6",
         "laravel/framework": "^11.31",
         "laravel/tinker": "^2.9",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "a76eb60c479c8d60dd14c1dc914f137b",
+    "content-hash": "cbf41d952611e3353e0bca416abca632",
     "packages": [
         {
             "name": "brick/math",
@@ -1054,6 +1054,70 @@
             ],
             "time": "2025-02-03T10:55:03+00:00"
         },
+        {
+            "name": "jantinnerezo/livewire-alert",
+            "version": "v4.0.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/jantinnerezo/livewire-alert.git",
+                "reference": "c1f3477f6d22d8bb88247028c6bc97fee24a679f"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/jantinnerezo/livewire-alert/zipball/c1f3477f6d22d8bb88247028c6bc97fee24a679f",
+                "reference": "c1f3477f6d22d8bb88247028c6bc97fee24a679f",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/support": "^10.0|^11.0|^12.0",
+                "livewire/livewire": "^3.0",
+                "php": "^8.1"
+            },
+            "require-dev": {
+                "friendsofphp/php-cs-fixer": "^3.70",
+                "orchestra/testbench": "^8.0|^9.0|^10.0",
+                "phpstan/phpstan": "^2.1",
+                "phpunit/phpunit": "^9.5|^10.0|^11.5.3"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "aliases": {
+                        "LivewireAlert": "Jantinnerezo\\LivewireAlert\\LivewireAlert"
+                    },
+                    "providers": [
+                        "Jantinnerezo\\LivewireAlert\\LivewireAlertServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Jantinnerezo\\LivewireAlert\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Jantinn Erezo",
+                    "email": "erezojantinn@gmail.com",
+                    "role": "Developer"
+                }
+            ],
+            "description": "This package provides a simple alert utilities for your livewire components.",
+            "homepage": "https://github.com/jantinnerezo/livewire-alert",
+            "keywords": [
+                "jantinnerezo",
+                "livewire-alert"
+            ],
+            "support": {
+                "issues": "https://github.com/jantinnerezo/livewire-alert/issues",
+                "source": "https://github.com/jantinnerezo/livewire-alert/tree/v4.0.4"
+            },
+            "time": "2025-03-20T06:47:20+00:00"
+        },
         {
             "name": "jaybizzle/crawler-detect",
             "version": "v1.3.4",

package-lock.json

@@ -5,6 +5,7 @@
     "packages": {
         "": {
             "dependencies": {
+                "@popperjs/core": "^2.11.8",
                 "bootstrap": "^5.3.5",
                 "bootstrap-icons": "^1.11.3",
                 "sweetalert2": "^11.17.2"
@@ -545,7 +546,6 @@
             "version": "2.11.8",
             "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
             "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
-            "peer": true,
             "funding": {
                 "type": "opencollective",
                 "url": "https://opencollective.com/popperjs"

package.json

@@ -15,6 +15,7 @@
         "vite": "^6.0.11"
     },
     "dependencies": {
+        "@popperjs/core": "^2.11.8",
         "bootstrap": "^5.3.5",
         "bootstrap-icons": "^1.11.3",
         "sweetalert2": "^11.17.2"

resources/views/layouts/app.blade.php

@@ -5,6 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Unioil - @yield('title')</title>
     <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+    <head>
+    <!-- ... other meta tags -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
+</head>
     @if(app()->environment('local'))
         <script>
             localStorage.setItem('debug', 'awesome-react-app:*');

resources/views/livewire/station-locator/add-branch.blade.php

@@ -0,0 +1,45 @@
+@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="code" class="col-sm-4 col-form-label">Branch Code</label>
+                        <div class="col-sm-8">
+                            <input type="text" class="form-control @error('code') is-invalid @enderror" id="code" wire:model="code" placeholder="Enter branch code">
+                            @error('code') <div class="invalid-feedback">{{ $message }}</div> @endregion
+                        </div>
+                    </div>
+
+                    <div class="row mb-3">
+                        <label for="name" class="col-sm-4 col-form-label">Branch Name</label>
+                        <div class="col-sm-8">
+                            <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" wire:model="name" placeholder="Enter branch name">
+                            @error('name') <div class="invalid-feedback">{{ $message }}</div> @endregion
+                        </div>
+                    </div>
+
+                    <div class="row mb-3">
+                        <label for="details" class="col-sm-4 col-form-label">Details</label>
+                        <div class="col-sm-8">
+                            <input type="text" class="form-control @error('details') is-invalid @enderror" id="details" wire:model="details" placeholder="Enter branch details">
+                            @error('details') <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>
+        </div>
+    </div>
+@endsection

resources/views/livewire/station-locator/add-fuel.blade.php

@@ -0,0 +1,29 @@
+@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">Fuel Name</label>
+                        <div class="col-sm-8">
+                            <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" wire:model="name" placeholder="Enter">
+                            @error('name') <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>
+        </div>
+    </div>
+@endsection

resources/views/livewire/station-locator/edit-station.blade.php

@@ -0,0 +1,208 @@
+@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>
+                    <!-- 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.set('lat', event.latLng.lat());
+                                        @this.set('long', 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"></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">
+                            @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">
+                            @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') is-invalid @enderror" id="contact_number" wire:model="contact_number.0" placeholder="Contact Number">
+                            @error('contact_number.*') <div class="invalid-feedback">{{ $message }}</div> @enderror
+                        </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>
+
+                    <!-- Schedule Update -->
+                    <div class="row mb-3">
+                        <label class="col-sm-4 col-form-label">Scheduled Update</label>
+                        <div class="col-sm-8">
+                            <div class="form-check form-check-inline">
+                                <input class="form-check-input" type="radio" id="noSched" wire:model="isSched" value="0">
+                                <label class="form-check-label" for="noSched">No</label>
+                            </div>
+                            <div class="form-check form-check-inline">
+                                <input class="form-check-input" type="radio" id="yesSched" wire:model="isSched" value="1">
+                                <label class="form-check-label" for="yesSched">Yes</label>
+                            </div>
+                            @error('isSched') <div class="invalid-feedback">{{ $message }}</div> @enderror
+                        </div>
+                    </div>
+
+                    @if($isSched == 1)
+                        <div class="row mb-3">
+                            <label for="date" class="col-sm-4 col-form-label">Scheduled Date and Time</label>
+                            <div class="col-sm-8">
+                                <input type="datetime-local" class="form-control @error('date') is-invalid @enderror" id="date" wire:model="date">
+                                @error('date') <div class="invalid-feedback">{{ $message }}</div> @enderror
+                            </div>
+                        </div>
+                    @endif
+
+                    <!-- 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" 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>
+                                </div>
+                            @endforeach
+                        </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(selectedFuels)">
+                                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

resources/views/livewire/station-locator/station-create.blade.php

@@ -0,0 +1,122 @@
+@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

resources/views/livewire/station-locator/station-list.blade.php

@@ -0,0 +1,64 @@
+@extends('layouts.app')
+
+@section('content')
+    <div class="container mt-4">
+        <div class="card">
+            <div class="card-header d-flex justify-content-between align-items-center">
+                <h4>Station List</h4>
+                <div>
+                    <button class="btn btn-primary" wire:click="toggleUploadPriceModal">Upload Prices</button>
+                    <a href="{{ route('stations.create') }}" class="btn btn-success">Add Station</a>
+                </div>
+            </div>
+            <div class="card-body">
+                <table class="table table-bordered">
+                    <thead>
+                        <tr>
+                            <th>Station Code</th>
+                            <th>Station Name</th>
+                            <th>Branch Name</th>
+                            <th>Date Created</th>
+                            <th>Created By</th>
+                            <th>Modified By</th>
+                            <th>Date Modified</th>
+                            <th>Action</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        @forelse ($stations as $station)
+                            <tr>
+                                <td>{{ $station['code'] }}</td>
+                                <td>{{ $station['name'] }}</td>
+                                <td>{{ $station['Branch']['name'] ?? 'N/A' }}</td>
+                                <td>{{ \Carbon\Carbon::parse($station['createdAt'])->format('M d, Y H:i') }}</td>
+                                <td>{{ $station['created_by'] ?? 'N/A' }}</td>
+                                <td>{{ $station['modified_by'] ?? 'N/A' }}</td>
+                                <td>{{ \Carbon\Carbon::parse($station['updatedAt'])->format('M d, Y H:i') }}</td>
+                                <td>
+                                    <button class="btn btn-sm btn-info" wire:click="showLocation({{ json_encode($station) }})">Location</button>
+                                    <a href="{{ route('stations.edit', $station['id']) }}" class="btn btn-sm btn-warning">Edit</a>
+                                    <button class="btn btn-sm btn-danger" wire:click="delete({{ $station['id'] }})">Delete</button>
+                                </td>
+                            </tr>
+                        @empty
+                            <tr>
+                                <td colspan="8" class="text-center">No stations found.</td>
+                            </tr>
+                        @endforelse
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <!-- Floating Add Button -->
+        <div style="position: fixed; right: 10px; bottom: 30px;">
+            <a href="{{ route('stations.create') }}" class="btn btn-success btn-lg rounded-circle">
+                <i class="fas fa-plus"></i>
+            </a>
+        </div>
+
+        <!-- Include Modals -->
+        <livewire:station-locator.upload-prices-modal :visible="$uploadPriceModal" />
+        <livewire:station-locator.location-modal :visible="$locationModal" :data="$dataLocation" />
+    </div>
+@endsection

routes/web.php

@@ -47,6 +47,18 @@ use App\Livewire\FetchData;
 use App\Livewire\Logout;
 use App\Livewire\ErrorHandler;
 
+use App\Livewire\StationLocator\AddFuel;
+use App\Livewire\StationLocator\AddBranch;
+
+use App\Livewire\StationLocator\StationList;
+use App\Livewire\StationLocator\StationCreate;
+use App\Livewire\StationLocator\EditStation;
+
+Route::get('/stations', StationList::class)->name('stations.list');
+Route::get('/stations/create', StationCreate::class)->name('stations.create');
+Route::get('/stations/view/{id}', EditStation::class)->name('stations.edit');
+
+
 Route::middleware(['auth'])->group(function () {
     Route::get('/user-management', \App\Livewire\UserManagement\UserList::class)->name('user-management');
     Route::get('/user-management/create', \App\Livewire\UserManagement\Create::class)->name('user-management.create');
@@ -61,15 +73,21 @@ Route::middleware(['auth'])->group(function () {
     Route::get('/top-up/view/{id}', \App\Livewire\TopUp\View::class)->name('top-up.view');
 });
 
-Route::middleware(['auth'])->group(function () {
+// Route::middleware(['auth'])->group(function () {
-    Route::get('/system-parameters', \App\Livewire\SystemPreferences\Create::class)->name('system-parameters');
+//     Route::get('/system-parameters', \App\Livewire\SystemPreferences\Create::class)->name('system-parameters');
-});
+// });
-Route::middleware(['auth'])->group(function () {
+// Route::middleware(['auth'])->group(function () {
-    Route::get('/fuels', \App\Livewire\StationLocator\Fuels::class)->name('fuels');
+//     Route::get('/fuels', \App\Livewire\StationLocator\Fuels::class)->name('fuels');
-    Route::get('/fuels/create', \App\Livewire\StationLocator\FuelCreate::class)->name('fuels.create');
+//     Route::get('/fuels/create', \App\Livewire\StationLocator\FuelCreate::class)->name('fuels.create');
-    Route::get('/branches', \App\Livewire\StationLocator\Branches::class)->name('branches');
+//     Route::get('/branches', \App\Livewire\StationLocator\Branches::class)->name('branches');
-    Route::get('/branches/create', \App\Livewire\StationLocator\BranchCreate::class)->name('branches.create');
+//     Route::get('/branches/create', \App\Livewire\StationLocator\BranchCreate::class)->name('branches.create');
-});
+// });
+
+
+// Route::get('/fuels/add', AddFuel::class)->name('fuels.add');
+// Route::get('/branches/add', AddBranch::class)->name('branches.add');
+
+
 
 Route::get('/change-password', \App\Livewire\ChangePassword::class)->name('change-password');
 Route::get('/registration', \App\Livewire\Registration::class)->name('registration');