converting reactjs codes to laravel php

app/Livewire/StationLocator/BranchList.php

@@ -0,0 +1,59 @@
+<?php
+
+namespace App\Livewire\StationLocator;
+
+use Livewire\Component;
+use Illuminate\Support\Facades\Http;
+use Jantinnerezo\LivewireAlert\LivewireAlert;
+
+class BranchList extends Component
+{
+    use LivewireAlert;
+
+    public $branches = [];
+    public $updating = false;
+
+    public function mount()
+    {
+        $this->fetchBranches();
+    }
+
+    public function fetchBranches()
+    {
+        try {
+            $response = Http::get('https://api.example.com/branches');
+            if ($response->successful()) {
+                $this->branches = $response->json()['data'] ?? [];
+            } else {
+                $this->alert('error', 'Failed to fetch branches.');
+            }
+        } 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 branch?')) {
+            try {
+                $this->updating = true;
+                $response = Http::delete("https://api.example.com/branches/{$id}");
+                if ($response->successful()) {
+                    $this->alert('success', 'Branch deleted successfully!');
+                    $this->fetchBranches();
+                } else {
+                    $this->alert('error', 'Failed to delete branch.');
+                }
+            } catch (\Exception $e) {
+                $this->alert('error', 'An error occurred: ' . $e->getMessage());
+            } finally {
+                $this->updating = false;
+            }
+        }
+    }
+
+    public function render()
+    {
+        return view('livewire.station-locator.branch-list')->layout('layouts.app', ['title' => 'Branch List']);
+    }
+}

app/Livewire/StationLocator/CreateBranch.php

@@ -0,0 +1,69 @@
+<?php
+
+namespace App\Livewire\StationLocator;
+
+use Livewire\Component;
+use Illuminate\Support\Facades\Http;
+use Jantinnerezo\LivewireAlert\LivewireAlert;
+
+class CreateBranch 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/add', [
+                'code' => $this->code,
+                'name' => $this->name,
+                'details' => $this->details,
+                'created_by' => auth()->user()->name ?? 'user', // Adjust based on your auth
+            ]);
+
+            if ($response->successful()) {
+                $this->alert('success', 'Branch created successfully! Don\'t forget to sync created branch to system parameters.');
+                return redirect('/branches');
+            } else {
+                $this->alert('error', 'Failed to create branch.');
+            }
+        } 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.create-branch')->layout('layouts.app', ['title' => $this->title]);
+    }
+}

app/Livewire/StationLocator/CreateFuel.php

@@ -1,12 +1,11 @@
 <?php
-
 namespace App\Livewire\StationLocator;
 
 use Livewire\Component;
 use Illuminate\Support\Facades\Http;
 use Jantinnerezo\LivewireAlert\LivewireAlert;
 
-class AddFuel extends Component
+class CreateFuel extends Component
 {
     use LivewireAlert;
 
@@ -22,11 +21,6 @@ class AddFuel extends Component
         'name.required' => 'Fuel name is required!',
     ];
 
-    public function mount()
-    {
-        // Initialize any default values if needed
-    }
-
     public function save()
     {
         $this->validate();
@@ -34,15 +28,16 @@ class AddFuel extends Component
         $this->loading = true;
 
         try {
-            $response = Http::post('https://api.example.com/fuels', [
+            $response = Http::post('https://api.example.com/fuels/add', [
                 'name' => $this->name,
+                'created_by' => auth()->user()->name ?? 'user', // Adjust based on your auth
             ]);
 
             if ($response->successful()) {
-                $this->alert('success', 'Fuel saved successfully!');
+                $this->alert('success', 'Fuel created successfully! Don\'t forget to sync created fuel to system parameters.');
                 return redirect('/fuels');
             } else {
-                $this->alert('error', 'Failed to save fuel. Please try again.');
+                $this->alert('error', 'Failed to create fuel.');
             }
         } catch (\Exception $e) {
             $this->alert('error', 'An error occurred: ' . $e->getMessage());
@@ -60,6 +55,6 @@ class AddFuel extends Component
 
     public function render()
     {
-        return view('livewire.station-locator.add-fuel')->layout('layouts.app', ['title' => $this->title]);
+        return view('livewire.station-locator.create-fuel')->layout('layouts.app', ['title' => $this->title]);
     }
-}
+}

app/Livewire/StationLocator/EditBranch.php

@@ -0,0 +1,95 @@
+<?php
+
+namespace App\Livewire\StationLocator;
+
+use Livewire\Component;
+use Illuminate\Support\Facades\Http;
+use Jantinnerezo\LivewireAlert\LivewireAlert;
+
+class EditBranch extends Component
+{
+    use LivewireAlert;
+
+    public $id;
+    public $code = '';
+    public $name = '';
+    public $details = '';
+    public $loading = false;
+    public $title = 'Edit 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 mount($id)
+    {
+        $this->id = $id;
+        $this->fetchBranch();
+    }
+
+    public function fetchBranch()
+    {
+        try {
+            $response = Http::get("https://api.example.com/branches/{$this->id}");
+            if ($response->successful()) {
+                $branch = $response->json();
+                $this->code = $branch['code'];
+                $this->name = $branch['name'];
+                $this->details = $branch['details'];
+            } else {
+                $this->alert('error', 'Failed to fetch branch data.');
+                return redirect('/branches');
+            }
+        } catch (\Exception $e) {
+            $this->alert('error', 'An error occurred: ' . $e->getMessage());
+            return redirect('/branches');
+        }
+    }
+
+    public function save()
+    {
+        $this->validate();
+
+        $this->loading = true;
+
+        try {
+            $response = Http::put("https://api.example.com/branches/{$this->id}", [
+                'code' => $this->code,
+                'name' => $this->name,
+                'details' => $this->details,
+                'modified_by' => auth()->user()->name ?? 'user', // Adjust based on your auth
+            ]);
+
+            if ($response->successful()) {
+                $this->alert('success', 'Branch updated successfully! Don\'t forget to sync updated branch to system parameters.');
+                return redirect('/branches');
+            } else {
+                $this->alert('error', 'Failed to update branch.');
+            }
+        } 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.edit-branch')->layout('layouts.app', ['title' => $this->title]);
+    }
+}

app/Livewire/StationLocator/EditFuel.php

@@ -0,0 +1,85 @@
+<?php
+
+namespace App\Livewire\StationLocator;
+
+use Livewire\Component;
+use Illuminate\Support\Facades\Http;
+use Jantinnerezo\LivewireAlert\LivewireAlert;
+
+class EditFuel extends Component
+{
+    use LivewireAlert;
+
+    public $id;
+    public $name = '';
+    public $loading = false;
+    public $title = 'Edit Fuel';
+
+    protected $rules = [
+        'name' => 'required|string|max:255',
+    ];
+
+    protected $messages = [
+        'name.required' => 'Fuel name is required!',
+    ];
+
+    public function mount($id)
+    {
+        $this->id = $id;
+        $this->fetchFuel();
+    }
+
+    public function fetchFuel()
+    {
+        try {
+            $response = Http::get("https://api.example.com/fuels/{$this->id}");
+            if ($response->successful()) {
+                $fuel = $response->json();
+                $this->name = $fuel['name'];
+            } else {
+                $this->alert('error', 'Failed to fetch fuel data.');
+                return redirect('/fuels');
+            }
+        } catch (\Exception $e) {
+            $this->alert('error', 'An error occurred: ' . $e->getMessage());
+            return redirect('/fuels');
+        }
+    }
+
+    public function save()
+    {
+        $this->validate();
+
+        $this->loading = true;
+
+        try {
+            $response = Http::put("https://api.example.com/fuels/{$this->id}", [
+                'name' => $this->name,
+                'modified_by' => auth()->user()->name ?? 'user', // Adjust based on your auth
+            ]);
+
+            if ($response->successful()) {
+                $this->alert('success', 'Fuel updated successfully! Don\'t forget to sync updated fuel to system parameters.');
+                return redirect('/fuels');
+            } else {
+                $this->alert('error', 'Failed to update fuel.');
+            }
+        } 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.edit-fuel')->layout('layouts.app', ['title' => $this->title]);
+    }
+}

app/Livewire/StationLocator/FuelList.php

@@ -0,0 +1,58 @@
+<?php
+namespace App\Livewire\StationLocator;
+
+use Livewire\Component;
+use Illuminate\Support\Facades\Http;
+use Jantinnerezo\LivewireAlert\LivewireAlert;
+
+class FuelList extends Component
+{
+    use LivewireAlert;
+
+    public $fuels = [];
+    public $updating = false;
+
+    public function mount()
+    {
+        $this->fetchFuels();
+    }
+
+    public function fetchFuels()
+    {
+        try {
+            $response = Http::get('https://api.example.com/fuels');
+            if ($response->successful()) {
+                $this->fuels = $response->json()['data'] ?? [];
+            } else {
+                $this->alert('error', 'Failed to fetch fuels.');
+            }
+        } 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 fuel?')) {
+            try {
+                $this->updating = true;
+                $response = Http::delete("https://api.example.com/fuels/{$id}");
+                if ($response->successful()) {
+                    $this->alert('success', 'Fuel deleted successfully!');
+                    $this->fetchFuels();
+                } else {
+                    $this->alert('error', 'Failed to delete fuel.');
+                }
+            } catch (\Exception $e) {
+                $this->alert('error', 'An error occurred: ' . $e->getMessage());
+            } finally {
+                $this->updating = false;
+            }
+        }
+    }
+
+    public function render()
+    {
+        return view('livewire.station-locator.fuel-list')->layout('layouts.app', ['title' => 'Fuel List']);
+    }
+}

app/Livewire/StationLocator/StationCreate.php

@@ -1,5 +1,4 @@
 <?php
-
 namespace App\Livewire\StationLocator;
 
 use Livewire\Component;
@@ -16,9 +15,17 @@ class StationCreate extends Component
     public $lat = '';
     public $long = '';
     public $BranchId = '';
-    public $contact_number = [];
+    public $contact_number = [''];
     public $code = '';
     public $fuels = [];
+    public $fuelsData = [];
+    public $newFuel = [];
+    public $branches = [];
+    public $fuelModal = false;
+    public $removeModal = false;
+    public $fuelName = '';
+    public $fuelIndex = '';
+    public $selectedFuels = [];
     public $loading = false;
     public $title = 'Add Station';
 
@@ -30,7 +37,10 @@ class StationCreate extends Component
         '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',
+        'fuels' => 'required|array|min:1',
+        'fuels.*.price' => 'required|numeric|gt:0',
     ];
 
     protected $messages = [
@@ -41,7 +51,12 @@ class StationCreate extends Component
         '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!',
+        'fuels.required' => 'At least one fuel is required!',
+        'fuels.*.price.required' => 'Fuel price is required!',
+        'fuels.*.price.gt' => 'Fuel price must be greater than 0!',
     ];
 
     public function mount()
@@ -52,20 +67,65 @@ class StationCreate extends Component
 
     public function fetchBranches()
     {
-        $response = Http::get('https://api.example.com/branches/noLimit');
+        try {
-        if ($response->successful()) {
+            $response = Http::get('https://api.example.com/branches/noLimit');
-            $this->branches = $response->json()['data'];
+            if ($response->successful()) {
+                $this->branches = $response->json()['data'] ?? [];
+            } else {
+                $this->alert('error', 'Failed to fetch branches.');
+            }
+        } catch (\Exception $e) {
+            $this->alert('error', 'An error occurred: ' . $e->getMessage());
         }
     }
 
     public function fetchFuels()
     {
-        $response = Http::get('https://api.example.com/fuels');
+        try {
-        if ($response->successful()) {
+            $response = Http::get('https://api.example.com/fuels');
-            $this->fuelsData = $response->json()['data'];
+            if ($response->successful()) {
+                $this->fuelsData = $response->json()['data'] ?? [];
+                $this->newFuel = $this->fuelsData;
+            } else {
+                $this->alert('error', 'Failed to fetch fuels.');
+            }
+        } catch (\Exception $e) {
+            $this->alert('error', 'An error occurred: ' . $e->getMessage());
         }
     }
 
+    public function updateFuelPrice($index, $price)
+    {
+        $this->fuels[$index]['price'] = $price;
+    }
+
+    public function addToStationFuel()
+    {
+        $newFuels = array_filter($this->fuelsData, fn($fuel) => in_array($fuel['id'], $this->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'], $this->selectedFuels));
+        $this->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();
@@ -73,23 +133,27 @@ class StationCreate extends Component
         $this->loading = true;
 
         try {
-            $response = Http::post('https://api.example.com/stations', [
+            $response = Http::post('https://api.example.com/stations/add', [
                 'name' => $this->name,
                 'location' => $this->location,
-                'map_URL' => $this->map_URL,
+                'map_Url' => $this->map_URL,
                 'lat' => $this->lat,
                 'long' => $this->long,
-                'BranchId' => $this->BranchId,
                 'contact_number' => implode(',', $this->contact_number),
+                'created_by' => auth()->user()->name ?? 'user', // Adjust based on your auth
+                'BranchId' => $this->BranchId,
                 'code' => $this->code,
-                'fuels' => $this->fuels,
+                'StationFuels' => array_map(fn($fuel) => [
+                    'FuelId' => $fuel['FuelId'],
+                    'price' => $fuel['price'],
+                ], $this->fuels),
             ]);
 
             if ($response->successful()) {
-                $this->alert('success', 'Station saved successfully!');
+                $this->alert('success', 'Station created successfully!');
                 return redirect('/stations');
             } else {
-                $this->alert('error', 'Failed to save station. Please try again.');
+                $this->alert('error', 'Failed to create station.');
             }
         } catch (\Exception $e) {
             $this->alert('error', 'An error occurred: ' . $e->getMessage());
@@ -105,11 +169,19 @@ class StationCreate extends Component
         }
     }
 
+    public function updateMap($lat, $long, $url = '')
+    {
+        $this->lat = $lat;
+        $this->long = $long;
+        $this->map_URL = $url ?: $this->map_URL;
+    }
+
     public function render()
     {
         return view('livewire.station-locator.station-create', [
-            'branches' => $this->branches ?? [],
+            'branches' => $this->branches,
-            'fuelsData' => $this->fuelsData ?? [],
+            'fuelsData' => $this->fuelsData,
+            'newFuel' => $this->newFuel,
         ])->layout('layouts.app', ['title' => $this->title]);
     }
-}
+}

composer.json

@@ -14,7 +14,8 @@
         "laravel/tinker": "^2.9",
         "laravel/ui": "^4.6",
         "livewire/livewire": "^3.6",
-        "paragonie/sodium_compat": "^2.1"
+        "paragonie/sodium_compat": "^2.1",
+        "yajra/laravel-datatables": "*"
     },
     "require-dev": {
         "fakerphp/faker": "^1.23",

resources/views/layouts/app.blade.php

@@ -8,6 +8,9 @@
     <head>
     <!-- ... other meta tags -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
+    <!-- ... 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>

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

@@ -0,0 +1,47 @@
+@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>Branch List</h4>
+                <a href="{{ route('branches.create') }}" class="btn btn-primary">Add Branch</a>
+            </div>
+            <div class="card-body">
+                <table class="table table-bordered">
+                    <thead>
+                        <tr>
+                            <th>Branch Code</th>
+                            <th>Branch Name</th>
+                            <th>Details</th>
+                            <th>Date Created</th>
+                            <th>Created By</th>
+                            <th>Date Modified</th>
+                            <th>Action</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        @forelse ($branches as $branch)
+                            <tr>
+                                <td>{{ $branch['code'] }}</td>
+                                <td>{{ $branch['name'] }}</td>
+                                <td>{{ $branch['details'] }}</td>
+                                <td>{{ \Carbon\Carbon::parse($branch['createdAt'])->format('M d, Y H:i') }}</td>
+                                <td>{{ $branch['created_by'] ?? 'N/A' }}</td>
+                                <td>{{ \Carbon\Carbon::parse($branch['updatedAt'])->format('M d, Y H:i') }}</td>
+                                <td>
+                                    <a href="{{ route('branches.edit', $branch['id']) }}" class="btn btn-sm btn-warning">Edit</a>
+                                    <button class="btn btn-sm btn-danger" wire:click="delete({{ $branch['id'] }})" wire:loading.attr="disabled" wire:target="delete">Delete</button>
+                                </td>
+                            </tr>
+                        @empty
+                            <tr>
+                                <td colspan="7" class="text-center">No branches found.</td>
+                            </tr>
+                        @endforelse
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+@endsection

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

@@ -0,0 +1,14 @@
+@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">
+                @include('partials.branch-form')
+            </div>
+        </div>
+    </div>
+@endsection

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

@@ -11,8 +11,8 @@
                     <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">
+                            <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" wire:model="name" placeholder="Enter Fuel Name">
-                            @error('name') <div class="invalid-feedback">{{ $message }}</div> @endregion
+                            @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                         </div>
                     </div>
 

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

@@ -0,0 +1,14 @@
+@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">
+                @include('partials.branch-form')
+            </div>
+        </div>
+    </div>
+@endsection

resources/views/livewire/station-locator/edit-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 Fuel Name">
+                            @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
+                        </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/fuel-list.blade.php

@@ -0,0 +1,41 @@
+@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>Fuel List</h4>
+                <a href="{{ route('fuels.create') }}" class="btn btn-primary">Add Fuel</a>
+            </div>
+            <div class="card-body">
+                <table class="table table-bordered">
+                    <thead>
+                        <tr>
+                            <th>Fuel Name</th>
+                            <th>Date Created</th>
+                            <th>Date Modified</th>
+                            <th>Action</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        @forelse ($fuels as $fuel)
+                            <tr>
+                                <td>{{ $fuel['name'] }}</td>
+                                <td>{{ \Carbon\Carbon::parse($fuel['createdAt'])->format('M d, Y H:i') }}</td>
+                                <td>{{ \Carbon\Carbon::parse($fuel['updatedAt'])->format('M d, Y H:i') }}</td>
+                                <td>
+                                    <a href="{{ route('fuels.edit', $fuel['id']) }}" class="btn btn-sm btn-warning">Edit</a>
+                                    <button class="btn btn-sm btn-danger" wire:click="delete({{ $fuel['id'] }})" wire:loading.attr="disabled" wire:target="delete">Delete</button>
+                                </td>
+                            </tr>
+                        @empty
+                            <tr>
+                                <td colspan="4" class="text-center">No fuels found.</td>
+                            </tr>
+                        @endforelse
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+@endsection

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

@@ -8,6 +8,67 @@
             </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">
@@ -25,57 +86,47 @@
                     </div>
 
                     <div class="row mb-3">
-                        <label for="map_URL" class="col-sm-4 col-form-label">Map URL</label>
+                        <label for="contact_number" class="col-sm-4 col-form-label">Contact Number</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>
+                            <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('map_URL') <div class="invalid-feedback">{{ $message }}</div> @endregion
+                            @error('contact_number.*') <div class="invalid-feedback">{{ $message }}</div> @enderror
-                        </div>
+                            <small>Accepted formats: +(63)9*********, +639*********, (02)****-****, 6***-****</small>
-                    </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">
+                            <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> @endregion
+                            @error('BranchId') <div class="invalid-feedback">{{ $message }}</div> @enderror
                         </div>
                     </div>
 
+                    <!-- Fuels -->
                     <div class="row mb-3">
-                        <label for="contact_number" class="col-sm-4 col-form-label">Contact Number</label>
+                        <label class="col-sm-4 col-form-label">Fuels</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">
+                            <button type="button" class="btn btn-primary mb-2" wire:click="$set('fuelModal', true)">Add Fuel</button>
-                            @error('contact_number') <div class="invalid-feedback">{{ $message }}</div> @endregion
+                            @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">
@@ -83,40 +134,51 @@
                         </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>
-
-
-            <!-- 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/partials/branch-form.blade.php

@@ -0,0 +1,32 @@
+<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> @enderror
+        </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> @enderror
+        </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> @enderror
+        </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>

routes/web.php

@@ -47,16 +47,30 @@ 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\FuelList;
+use App\Livewire\StationLocator\CreateFuel;
+use App\Livewire\StationLocator\EditFuel;
 use App\Livewire\StationLocator\StationList;
 use App\Livewire\StationLocator\StationCreate;
 use App\Livewire\StationLocator\EditStation;
+use App\Livewire\StationLocator\BranchList;
+use App\Livewire\StationLocator\CreateBranch;
+use App\Livewire\StationLocator\EditBranch;
+
+// Route::get('/fuels', FuelList::class)->name('fuels.list');
+// Route::get('/fuels/create', CreateFuel::class)->name('fuels.create');
+// Route::get('/fuels/view/{id}', EditFuel::class)->name('fuels.edit');
+// 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::get('/branches', BranchList::class)->name('branches.list');
+// Route::get('/branches/create', CreateBranch::class)->name('branches.create');
+// Route::get('/branches/add', CreateBranch::class)->name('branches.add');
+// Route::get('/branches/view/{id}', EditBranch::class)->name('branches.edit');
+
 
-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 () {
@@ -84,8 +98,7 @@ Route::middleware(['auth'])->group(function () {
 // });
 
 
-// Route::get('/fuels/add', AddFuel::class)->name('fuels.add');
+
-// Route::get('/branches/add', AddBranch::class)->name('branches.add');