Adjust : fix bug and temporary ui
This commit is contained in:
parent
0ff4a9c42e
commit
bd3c6193c0
|
|
@ -0,0 +1,69 @@
|
|||
<?php
|
||||
|
||||
namespace App\Http\Controllers;
|
||||
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\Password;
|
||||
use Illuminate\Support\Facades\Hash;
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
|
||||
class ForgotPasswordController extends Controller
|
||||
{
|
||||
// Tampilkan Form Lupa Password
|
||||
public function showLinkRequestForm()
|
||||
{
|
||||
return view('auth.forgot-password');
|
||||
}
|
||||
|
||||
// Kirim Link Reset ke Email
|
||||
public function sendResetLinkEmail(Request $request)
|
||||
{
|
||||
$request->validate(['email' => 'required|email', 'role' => 'required|in:petani,pembeli']);
|
||||
|
||||
$broker = $request->role == 'petani' ? 'petanis' : 'pembelis';
|
||||
|
||||
$status = Password::broker($broker)->sendResetLink(
|
||||
$request->only('email')
|
||||
);
|
||||
|
||||
return $status == Password::RESET_LINK_SENT
|
||||
? back()->with(['status' => __($status)])
|
||||
: back()->withErrors(['email' => __($status)]);
|
||||
}
|
||||
|
||||
// Tampilkan Form Reset Password (Link dari Email)
|
||||
public function showResetForm(Request $request, $token = null)
|
||||
{
|
||||
return view('auth.reset-password')->with(
|
||||
['token' => $token, 'email' => $request->email, 'role' => $request->role]
|
||||
);
|
||||
}
|
||||
|
||||
// Proses Simpan Password Baru
|
||||
public function reset(Request $request)
|
||||
{
|
||||
$request->validate([
|
||||
'token' => 'required',
|
||||
'email' => 'required|email',
|
||||
'password' => 'required|min:6|confirmed',
|
||||
]);
|
||||
|
||||
$broker = 'pembelis';
|
||||
if (\App\Models\Petani::where('email', $request->email)->exists()) {
|
||||
$broker = 'petanis';
|
||||
}
|
||||
|
||||
$status = Password::broker($broker)->reset(
|
||||
$request->only('email', 'password', 'password_confirmation', 'token'),
|
||||
function ($user, $password) {
|
||||
$user->forceFill([
|
||||
'password' => Hash::make($password)
|
||||
])->save();
|
||||
}
|
||||
);
|
||||
|
||||
return $status == Password::PASSWORD_RESET
|
||||
? redirect()->route('login')->with('success', 'Password berhasil direset! Silakan login.')
|
||||
: back()->withErrors(['email' => __($status)]);
|
||||
}
|
||||
}
|
||||
|
|
@ -7,17 +7,31 @@
|
|||
|
||||
class LandingController extends Controller
|
||||
{
|
||||
public function index()
|
||||
public function index(Request $request)
|
||||
{
|
||||
$produks = Produk::latest()->take(8)->get();
|
||||
return view('landing.home', compact('produks'));
|
||||
$query = Produk::with('petani')->latest();
|
||||
if ($request->has('kategori') && $request->kategori != '' && $request->kategori != 'Semua') {
|
||||
$query->where('kategori', $request->kategori);
|
||||
}
|
||||
|
||||
$produks = $query->take(8)->get();
|
||||
if ($request->ajax()) {
|
||||
return view('landing.partials.product_list', compact('produks'))->render();
|
||||
}
|
||||
|
||||
$produkTerlaris = Produk::with('petani')
|
||||
->inRandomOrder()
|
||||
->take(4)
|
||||
->get();
|
||||
|
||||
return view('landing.home', compact('produks', 'produkTerlaris'));
|
||||
}
|
||||
|
||||
public function shop(Request $request)
|
||||
{
|
||||
$query = Produk::query();
|
||||
$query = Produk::with('petani');
|
||||
|
||||
if ($request->has('search')) {
|
||||
if ($request->has('search') && $request->search != '') {
|
||||
$query->where('nama_produk', 'like', '%' . $request->search . '%');
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,30 +10,23 @@
|
|||
|
||||
class PesanController extends Controller
|
||||
{
|
||||
// Menampilkan Daftar Percakapan (Inbox Utama)
|
||||
public function index()
|
||||
// Helper untuk mengambil daftar chat
|
||||
private function getChatList($user)
|
||||
{
|
||||
$user = $this->getAuthenticatedUser();
|
||||
$isPetani = Auth::guard('petani')->check();
|
||||
|
||||
$allMessages = Pesan::where(function ($q) use ($user) {
|
||||
$q->where('pengirim_id', $user->id)->where('pengirim_type', get_class($user));
|
||||
})->orWhere(function ($q) use ($user) {
|
||||
$q->where('penerima_id', $user->id)->where('penerima_type', get_class($user));
|
||||
})->orderBy('created_at', 'desc')->get();
|
||||
|
||||
// Kelompokkan berdasarkan ID Lawan Bicara
|
||||
$conversations = $allMessages->groupBy(function ($pesan) use ($user) {
|
||||
return $pesan->pengirim_id == $user->id
|
||||
? $pesan->penerima_type . '_' . $pesan->penerima_id
|
||||
: $pesan->pengirim_type . '_' . $pesan->pengirim_id;
|
||||
});
|
||||
|
||||
// Format data untuk view
|
||||
$chatList = $conversations->map(function ($msgs) use ($user) {
|
||||
return $conversations->map(function ($msgs) use ($user) {
|
||||
$lastMsg = $msgs->first();
|
||||
|
||||
// Tentukan siapa lawan bicaranya
|
||||
if ($lastMsg->pengirim_id == $user->id) {
|
||||
$lawan = $lastMsg->penerima;
|
||||
} else {
|
||||
|
|
@ -44,28 +37,38 @@ public function index()
|
|||
'lawan_id' => $lawan->id ?? 0,
|
||||
'lawan_type' => get_class($lawan ?? new \stdClass),
|
||||
'nama' => $lawan->nama_lengkap ?? 'User Terhapus',
|
||||
'foto' => $lawan->foto ?? null,
|
||||
'foto' => $lawan->foto ?? null, // Pastikan ada accessor url foto
|
||||
'last_message' => $lastMsg->isi_pesan,
|
||||
'time' => $lastMsg->created_at->diffForHumans(),
|
||||
'unread' => $msgs->where('penerima_id', $user->id)->where('sudah_dibaca', false)->count()
|
||||
];
|
||||
});
|
||||
}
|
||||
|
||||
public function index()
|
||||
{
|
||||
$user = $this->getAuthenticatedUser();
|
||||
$isPetani = Auth::guard('petani')->check();
|
||||
|
||||
// Panggil helper
|
||||
$chatList = $this->getChatList($user);
|
||||
|
||||
$view = $isPetani ? 'petani.pesan.index' : 'landing.pesan.index';
|
||||
return view($view, compact('chatList'));
|
||||
}
|
||||
|
||||
// Menampilkan Detail Chat
|
||||
public function show($id)
|
||||
{
|
||||
$user = $this->getAuthenticatedUser();
|
||||
$isPetani = Auth::guard('petani')->check();
|
||||
|
||||
// Tentukan model lawan bicara
|
||||
// Ambil List Chat juga (untuk Sidebar Kiri)
|
||||
$chatList = $this->getChatList($user);
|
||||
|
||||
// Logika Detail Chat (Kanan)
|
||||
$lawanType = $isPetani ? Pembeli::class : Petani::class;
|
||||
$lawan = $lawanType::findOrFail($id);
|
||||
|
||||
// Ambil percakapan antara User Login & Lawan Bicara
|
||||
$chats = Pesan::where(function ($q) use ($user, $lawan, $lawanType) {
|
||||
$q->where('pengirim_id', $user->id)->where('pengirim_type', get_class($user))
|
||||
->where('penerima_id', $lawan->id)->where('penerima_type', $lawanType);
|
||||
|
|
@ -74,22 +77,21 @@ public function show($id)
|
|||
->where('penerima_id', $user->id)->where('penerima_type', get_class($user));
|
||||
})->orderBy('created_at', 'asc')->get();
|
||||
|
||||
// Tandai pesan masuk sebagai "Sudah Dibaca"
|
||||
// Tandai dibaca
|
||||
Pesan::where('pengirim_id', $lawan->id)->where('pengirim_type', $lawanType)
|
||||
->where('penerima_id', $user->id)->update(['sudah_dibaca' => true]);
|
||||
|
||||
$view = $isPetani ? 'petani.pesan.show' : 'landing.pesan.show';
|
||||
return view($view, compact('chats', 'lawan'));
|
||||
|
||||
// Kirim $chatList, $chats, dan $lawan
|
||||
return view($view, compact('chatList', 'chats', 'lawan'));
|
||||
}
|
||||
|
||||
// Proses Kirim Pesan
|
||||
public function store(Request $request)
|
||||
{
|
||||
$request->validate(['isi_pesan' => 'required']);
|
||||
$user = $this->getAuthenticatedUser();
|
||||
$isPetani = Auth::guard('petani')->check();
|
||||
|
||||
// Menentukan tipe penerima
|
||||
$penerimaType = $isPetani ? 'App\Models\Pembeli' : 'App\Models\Petani';
|
||||
|
||||
Pesan::create([
|
||||
|
|
|
|||
|
|
@ -4,10 +4,12 @@
|
|||
|
||||
use Illuminate\Foundation\Auth\User as Authenticatable;
|
||||
use Illuminate\Notifications\Notifiable;
|
||||
use Illuminate\Contracts\Auth\CanResetPassword;
|
||||
use Illuminate\Auth\Passwords\CanResetPassword as CanResetPasswordTrait;
|
||||
|
||||
class Pembeli extends Authenticatable
|
||||
class Pembeli extends Authenticatable implements CanResetPassword
|
||||
{
|
||||
use Notifiable;
|
||||
use Notifiable, CanResetPasswordTrait;
|
||||
|
||||
protected $table = 'pembelis';
|
||||
|
||||
|
|
|
|||
|
|
@ -4,10 +4,12 @@
|
|||
|
||||
use Illuminate\Foundation\Auth\User as Authenticatable;
|
||||
use Illuminate\Notifications\Notifiable;
|
||||
use Illuminate\Contracts\Auth\CanResetPassword;
|
||||
use Illuminate\Auth\Passwords\CanResetPassword as CanResetPasswordTrait;
|
||||
|
||||
class Petani extends Authenticatable
|
||||
class Petani extends Authenticatable implements CanResetPassword
|
||||
{
|
||||
use Notifiable;
|
||||
use Notifiable, CanResetPasswordTrait;
|
||||
|
||||
protected $table = 'petanis';
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ class Produk extends Model
|
|||
protected $fillable = [
|
||||
'petani_id',
|
||||
'nama_produk',
|
||||
'kategori',
|
||||
'harga',
|
||||
'stok',
|
||||
'deskripsi',
|
||||
|
|
|
|||
|
|
@ -114,7 +114,23 @@
|
|||
'passwords' => [
|
||||
'users' => [
|
||||
'provider' => 'users',
|
||||
'table' => env('AUTH_PASSWORD_RESET_TOKEN_TABLE', 'password_reset_tokens'),
|
||||
'table' => 'password_reset_tokens',
|
||||
'expire' => 60,
|
||||
'throttle' => 60,
|
||||
],
|
||||
|
||||
// untuk PETANI
|
||||
'petanis' => [
|
||||
'provider' => 'petanis',
|
||||
'table' => 'password_reset_tokens',
|
||||
'expire' => 60,
|
||||
'throttle' => 60,
|
||||
],
|
||||
|
||||
// untuk PEMBELI
|
||||
'pembelis' => [
|
||||
'provider' => 'pembelis',
|
||||
'table' => 'password_reset_tokens',
|
||||
'expire' => 60,
|
||||
'throttle' => 60,
|
||||
],
|
||||
|
|
|
|||
|
|
@ -10,20 +10,19 @@
|
|||
* Run the migrations.
|
||||
*/
|
||||
public function up(): void
|
||||
{
|
||||
Schema::create('produks', function (Blueprint $table) {
|
||||
$table->id();
|
||||
$table->foreignId('petani_id')->constrained('petanis')->onDelete('cascade');
|
||||
|
||||
$table->string('nama_produk');
|
||||
$table->decimal('harga', 12, 0);
|
||||
$table->integer('stok');
|
||||
$table->text('deskripsi');
|
||||
$table->string('foto_produk')->nullable();
|
||||
|
||||
$table->timestamps();
|
||||
});
|
||||
}
|
||||
{
|
||||
Schema::create('produks', function (Blueprint $table) {
|
||||
$table->id();
|
||||
$table->foreignId('petani_id')->constrained('petanis')->onDelete('cascade');
|
||||
$table->string('nama_produk');
|
||||
$table->string('kategori')->default('Lainnya');
|
||||
$table->decimal('harga', 12, 0);
|
||||
$table->integer('stok');
|
||||
$table->text('deskripsi');
|
||||
$table->string('foto_produk')->nullable();
|
||||
$table->timestamps();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Reverse the migrations.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
<?php
|
||||
|
||||
use Illuminate\Database\Migrations\Migration;
|
||||
use Illuminate\Database\Schema\Blueprint;
|
||||
use Illuminate\Support\Facades\Schema;
|
||||
|
||||
return new class extends Migration
|
||||
{
|
||||
/**
|
||||
* Run the migrations.
|
||||
*/
|
||||
public function up(): void
|
||||
{
|
||||
Schema::create('password_reset_tokens', function (Blueprint $table) {
|
||||
$table->string('email')->index();
|
||||
$table->string('token');
|
||||
$table->timestamp('created_at')->nullable();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Reverse the migrations.
|
||||
*/
|
||||
public function down(): void
|
||||
{
|
||||
Schema::dropIfExists('password_reset_tokens');
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
<title>Lupa Password - TaniDesa</title>
|
||||
<link href="{{ asset('template/frontend/css/bootstrap.min.css') }}" rel="stylesheet">
|
||||
</head>
|
||||
<body class="d-flex align-items-center justify-content-center vh-100" style="background-color: #f0f7e6;">
|
||||
<div class="card border-0 shadow-sm p-4" style="max-width: 400px; width: 100%;">
|
||||
<div class="text-center mb-4">
|
||||
<h4 class="fw-bold" style="color: #81c408;">Lupa Password?</h4>
|
||||
<p class="text-muted small">Masukkan email dan peran Anda untuk reset password.</p>
|
||||
</div>
|
||||
|
||||
@if (session('status'))
|
||||
<div class="alert alert-success small">{{ session('status') }}</div>
|
||||
@endif
|
||||
@if ($errors->any())
|
||||
<div class="alert alert-danger small">{{ $errors->first() }}</div>
|
||||
@endif
|
||||
|
||||
<form action="{{ route('password.email') }}" method="POST">
|
||||
@csrf
|
||||
<div class="mb-3">
|
||||
<label class="form-label small fw-bold text-muted">Saya adalah:</label>
|
||||
<select name="role" class="form-select">
|
||||
<option value="pembeli">👤 Pembeli</option>
|
||||
<option value="petani">🌾 Petani</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label small fw-bold text-muted">Email Terdaftar</label>
|
||||
<input type="email" name="email" class="form-control" required>
|
||||
</div>
|
||||
<div class="d-grid">
|
||||
<button type="submit" class="btn text-white fw-bold" style="background-color: #81c408;">Kirim Link Reset</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="text-center mt-3">
|
||||
<a href="{{ route('login') }}" class="text-decoration-none small text-muted">Kembali ke Login</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,96 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Masuk - TaniDesa</title>
|
||||
|
||||
<link href="{{ asset('template/frontend/css/bootstrap.min.css') }}" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" />
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: #f4f6f9;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.card-auth {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 0 20px rgba(0,0,0,0.05);
|
||||
}
|
||||
.form-control:focus {
|
||||
border-color: #81c408; /* Warna Hijau Frontend */
|
||||
box-shadow: 0 0 0 0.25rem rgba(129, 196, 8, 0.25);
|
||||
}
|
||||
.btn-tani {
|
||||
background-color: #81c408;
|
||||
border-color: #81c408;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
.btn-tani:hover {
|
||||
background-color: #6da705;
|
||||
color: white;
|
||||
}
|
||||
.text-tani {
|
||||
color: #81c408;
|
||||
}
|
||||
body { background-color: #f0f7e6; height: 100vh; display: flex; align-items: center; justify-content: center; }
|
||||
.card-auth { max-width: 400px; width: 100%; border: none; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
|
||||
.text-tani { color: #81c408; }
|
||||
.btn-tani { background-color: #81c408; border-color: #81c408; color: white; font-weight: bold; }
|
||||
.btn-tani:hover { background-color: #6da705; color: white; }
|
||||
.form-control:focus { border-color: #81c408; box-shadow: 0 0 0 0.25rem rgba(129, 196, 8, 0.25); }
|
||||
.cursor-pointer { cursor: pointer; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="card card-auth bg-white p-4">
|
||||
<div class="card-body">
|
||||
<div class="text-center mb-4">
|
||||
<a href="{{ url('/') }}" class="text-decoration-none">
|
||||
<h1 class="text-tani display-6 fw-bold">TaniDesa</h1>
|
||||
<h2 class="fw-bold text-tani"><i class="fas fa-leaf me-2"></i>TaniDesa</h2>
|
||||
</a>
|
||||
<p class="text-muted">Masuk untuk melanjutkan</p>
|
||||
<p class="text-muted small">Masuk untuk melanjutkan</p>
|
||||
</div>
|
||||
|
||||
{{-- Pesan Sukses --}}
|
||||
@if (session('success'))
|
||||
<div class="alert alert-success py-2" role="alert">
|
||||
<small>{{ session('success') }}</small>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Pesan Error --}}
|
||||
@if ($errors->any())
|
||||
<div class="alert alert-danger py-2">
|
||||
<ul class="mb-0 ps-3 small">
|
||||
@foreach ($errors->all() as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
@if(session('success')) <div class="alert alert-success py-2 small">{{ session('success') }}</div> @endif
|
||||
@if($errors->any()) <div class="alert alert-danger py-2 small">{{ $errors->first() }}</div> @endif
|
||||
|
||||
<form action="{{ route('login.proses') }}" method="POST">
|
||||
@csrf
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-muted small">Username</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-light border-end-0"><i class="fas fa-user text-muted"></i></span>
|
||||
<span class="input-group-text bg-white border-end-0 text-tani"><i class="fas fa-user"></i></span>
|
||||
<input type="text" name="username" class="form-control border-start-0 ps-0" placeholder="Masukkan username" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-muted small">Password</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-light border-end-0"><i class="fas fa-lock text-muted"></i></span>
|
||||
<input type="password" name="password" class="form-control border-start-0 ps-0" placeholder="Masukkan password" required>
|
||||
<span class="input-group-text bg-white border-end-0 text-tani"><i class="fas fa-lock"></i></span>
|
||||
<input type="password" name="password" id="password" class="form-control border-start-0 border-end-0 ps-0" placeholder="Masukkan password" required>
|
||||
{{-- Icon Mata --}}
|
||||
<span class="input-group-text bg-white border-start-0 cursor-pointer" onclick="togglePassword('password', 'icon-pass')">
|
||||
<i class="fas fa-eye text-muted" id="icon-pass"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-end mb-4">
|
||||
<a href="{{ route('password.request') }}" class="small text-muted text-decoration-none">Lupa Password?</a>
|
||||
</div>
|
||||
|
||||
<div class="d-grid gap-2">
|
||||
<button type="submit" class="btn btn-tani rounded-pill py-2">MASUK</button>
|
||||
</div>
|
||||
|
|
@ -102,5 +68,22 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Script Show/Hide Password --}}
|
||||
<script>
|
||||
function togglePassword(inputId, iconId) {
|
||||
const input = document.getElementById(inputId);
|
||||
const icon = document.getElementById(iconId);
|
||||
|
||||
if (input.type === "password") {
|
||||
input.type = "text";
|
||||
icon.classList.remove("fa-eye");
|
||||
icon.classList.add("fa-eye-slash");
|
||||
} else {
|
||||
input.type = "password";
|
||||
icon.classList.remove("fa-eye-slash");
|
||||
icon.classList.add("fa-eye");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,95 +1,139 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="id">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Daftar - TaniDesa</title>
|
||||
|
||||
<link href="{{ asset('template/frontend/css/bootstrap.min.css') }}" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" />
|
||||
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: #f4f6f9;
|
||||
background-color: #f0f7e6;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px 0;
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.card-auth {
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
max-width: 500px; /* Sedikit lebih lebar */
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 0 20px rgba(0,0,0,0.05);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.form-control:focus, .form-select:focus {
|
||||
border-color: #81c408;
|
||||
box-shadow: 0 0 0 0.25rem rgba(129, 196, 8, 0.25);
|
||||
|
||||
.text-tani {
|
||||
color: #81c408;
|
||||
}
|
||||
|
||||
.btn-tani {
|
||||
background-color: #81c408;
|
||||
border-color: #81c408;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn-tani:hover {
|
||||
background-color: #6da705;
|
||||
color: white;
|
||||
}
|
||||
.text-tani {
|
||||
color: #81c408;
|
||||
|
||||
.form-control:focus,
|
||||
.form-select:focus {
|
||||
border-color: #81c408;
|
||||
box-shadow: 0 0 0 0.25rem rgba(129, 196, 8, 0.25);
|
||||
}
|
||||
.bg-tani-light {
|
||||
background-color: #eef8d8;
|
||||
color: #4c7a04;
|
||||
|
||||
.bg-petani-info {
|
||||
background-color: #e8f5e9;
|
||||
border: 1px solid #c8e6c9;
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Style Validasi Password */
|
||||
.valid-item {
|
||||
color: #dc3545;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 2px;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.valid-item.valid {
|
||||
color: #198754;
|
||||
}
|
||||
|
||||
.valid-item i {
|
||||
width: 15px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="card card-auth bg-white p-4">
|
||||
<div class="card card-auth p-4 bg-white">
|
||||
<div class="card-body">
|
||||
<div class="text-center mb-4">
|
||||
<a href="{{ url('/') }}" class="text-decoration-none">
|
||||
<h2 class="text-tani fw-bold">Daftar Akun</h2>
|
||||
</a>
|
||||
<p class="text-muted small">Bergabunglah dengan TaniDesa</p>
|
||||
<h2 class="fw-bold text-tani">Daftar Akun</h2>
|
||||
<p class="text-muted small">Gabung komunitas TaniDesa</p>
|
||||
</div>
|
||||
|
||||
<form action="{{ route('register.proses') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
{{-- Pilihan Role --}}
|
||||
<div class="mb-3">
|
||||
<label class="form-label small fw-bold text-muted">Daftar Sebagai</label>
|
||||
<select name="role" id="role" class="form-select text-center fw-bold" onchange="toggleForm()" style="cursor: pointer;">
|
||||
<option value="pembeli">👤 Pembeli (Ingin Belanja)</option>
|
||||
<option value="petani">🌾 Petani (Ingin Jualan)</option>
|
||||
<label class="form-label small fw-bold text-muted">Daftar Sebagai:</label>
|
||||
<select name="role" id="role" class="form-select text-center fw-bold text-tani"
|
||||
onchange="toggleForm()">
|
||||
<option value="pembeli">👤 Pembeli (Belanja)</option>
|
||||
<option value="petani">🌾 Petani (Jualan)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="col-6 mb-3">
|
||||
<label class="form-label small text-muted">Nama Lengkap</label>
|
||||
<input type="text" name="nama_lengkap" class="form-control" required>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="col-6 mb-3">
|
||||
<label class="form-label small text-muted">Username</label>
|
||||
<input type="text" name="username" class="form-control" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label small text-muted">Email</label>
|
||||
<input type="email" name="email" class="form-control" required>
|
||||
</div>
|
||||
|
||||
{{-- PASSWORD DENGAN VALIDASI --}}
|
||||
<div class="mb-2">
|
||||
<label class="form-label small text-muted">Password</label>
|
||||
<input type="password" name="password" class="form-control" required>
|
||||
<div class="input-group">
|
||||
<input type="password" name="password" id="password" class="form-control border-end-0" required
|
||||
onkeyup="checkPassword()">
|
||||
<span class="input-group-text bg-white border-start-0 cursor-pointer"
|
||||
onclick="togglePassword('password', 'icon-pass')">
|
||||
<i class="fas fa-eye text-muted" id="icon-pass"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Indikator Kekuatan Password --}}
|
||||
<div class="mb-3 ps-1">
|
||||
<div id="req-length" class="valid-item"><i class="fas fa-times"></i> Minimal 8 Karakter</div>
|
||||
<div id="req-number" class="valid-item"><i class="fas fa-times"></i> Ada Angka (0-9)</div>
|
||||
<div id="req-upper" class="valid-item"><i class="fas fa-times"></i> Ada Huruf Kapital (A-Z)</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label small text-muted">Nomor HP / WA</label>
|
||||
<label class="form-label small text-muted">Nomor HP</label>
|
||||
<input type="number" name="no_hp" class="form-control" required>
|
||||
</div>
|
||||
|
||||
|
|
@ -98,34 +142,77 @@
|
|||
<textarea name="alamat" class="form-control" rows="2" required></textarea>
|
||||
</div>
|
||||
|
||||
{{-- Input Khusus Petani --}}
|
||||
<div id="form-petani" style="display: none;" class="bg-tani-light p-3 rounded mb-3 border border-success">
|
||||
<label class="form-label small fw-bold"><i class="fas fa-store me-1"></i> Nama Toko / Usaha Tani</label>
|
||||
<input type="text" name="nama_usaha" class="form-control" placeholder="Contoh: Sayur Segar Pak Budi">
|
||||
<small class="d-block mt-2" style="font-size: 11px;">*Akun petani memerlukan verifikasi Admin sebelum bisa login.</small>
|
||||
<div id="form-petani" style="display: none;" class="p-3 rounded mb-3 bg-petani-info">
|
||||
<label class="form-label small fw-bold"><i class="fas fa-store me-1"></i> Nama Toko</label>
|
||||
<input type="text" name="nama_usaha" class="form-control"
|
||||
placeholder="Contoh: Sayur Segar Pak Budi">
|
||||
<small class="d-block mt-2" style="font-size: 11px;">*Butuh verifikasi Admin.</small>
|
||||
</div>
|
||||
|
||||
<div class="d-grid gap-2 mt-4">
|
||||
<div class="d-grid mt-4">
|
||||
<button type="submit" class="btn btn-tani rounded-pill py-2">DAFTAR SEKARANG</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<small class="text-muted">Sudah punya akun? <a href="{{ route('login') }}" class="text-tani fw-bold text-decoration-none">Login</a></small>
|
||||
<small class="text-muted">Sudah punya akun? <a href="{{ route('login') }}"
|
||||
class="text-tani fw-bold text-decoration-none">Login</a></small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Toggle Show/Hide Password
|
||||
function togglePassword(inputId, iconId) {
|
||||
const input = document.getElementById(inputId);
|
||||
const icon = document.getElementById(iconId);
|
||||
if (input.type === "password") {
|
||||
input.type = "text";
|
||||
icon.classList.remove("fa-eye");
|
||||
icon.classList.add("fa-eye-slash");
|
||||
} else {
|
||||
input.type = "password";
|
||||
icon.classList.remove("fa-eye-slash");
|
||||
icon.classList.add("fa-eye");
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle Form Petani
|
||||
function toggleForm() {
|
||||
var role = document.getElementById('role').value;
|
||||
var formPetani = document.getElementById('form-petani');
|
||||
if(role === 'petani') {
|
||||
formPetani.style.display = 'block';
|
||||
formPetani.style.display = (role === 'petani') ? 'block' : 'none';
|
||||
}
|
||||
|
||||
// Real-time Password Validator
|
||||
function checkPassword() {
|
||||
const password = document.getElementById('password').value;
|
||||
|
||||
// Regex patterns
|
||||
const hasLength = password.length >= 8;
|
||||
const hasNumber = /\d/.test(password);
|
||||
const hasUpper = /[A-Z]/.test(password);
|
||||
|
||||
updateRequirement('req-length', hasLength);
|
||||
updateRequirement('req-number', hasNumber);
|
||||
updateRequirement('req-upper', hasUpper);
|
||||
}
|
||||
|
||||
function updateRequirement(id, isValid) {
|
||||
const element = document.getElementById(id);
|
||||
const icon = element.querySelector('i');
|
||||
|
||||
if (isValid) {
|
||||
element.classList.add('valid');
|
||||
icon.classList.remove('fa-times');
|
||||
icon.classList.add('fa-check');
|
||||
} else {
|
||||
formPetani.style.display = 'none';
|
||||
element.classList.remove('valid');
|
||||
icon.classList.remove('fa-check');
|
||||
icon.classList.add('fa-times');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,133 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
|
||||
<head>
|
||||
<title>Reset Password - TaniDesa</title>
|
||||
<link href="{{ asset('template/frontend/css/bootstrap.min.css') }}" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" />
|
||||
<style>
|
||||
body {
|
||||
background-color: #f0f7e6;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.text-tani {
|
||||
color: #81c408;
|
||||
}
|
||||
|
||||
.valid-item {
|
||||
color: #dc3545;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.valid-item.valid {
|
||||
color: #198754;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="card border-0 shadow-sm p-4 bg-white" style="max-width: 400px; width: 100%;">
|
||||
<div class="text-center mb-4">
|
||||
<h4 class="fw-bold text-tani">Buat Password Baru</h4>
|
||||
</div>
|
||||
|
||||
@if ($errors->any())
|
||||
<div class="alert alert-danger small">{{ $errors->first() }}</div>
|
||||
@endif
|
||||
|
||||
<form action="{{ route('password.update') }}" method="POST">
|
||||
@csrf
|
||||
<input type="hidden" name="token" value="{{ $token }}">
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label small fw-bold text-muted">Email</label>
|
||||
<input type="email" name="email" class="form-control" value="{{ $email ?? old('email') }}" readonly>
|
||||
</div>
|
||||
|
||||
{{-- Password Baru --}}
|
||||
<div class="mb-2">
|
||||
<label class="form-label small fw-bold text-muted">Password Baru</label>
|
||||
<div class="input-group">
|
||||
<input type="password" name="password" id="password" class="form-control border-end-0" required
|
||||
onkeyup="checkPassword()">
|
||||
<span class="input-group-text bg-white border-start-0 cursor-pointer"
|
||||
onclick="togglePassword('password', 'icon-1')">
|
||||
<i class="fas fa-eye text-muted" id="icon-1"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Indikator Validasi --}}
|
||||
<div class="mb-3 ps-1">
|
||||
<div id="req-length" class="valid-item"><i class="fas fa-times"></i> Minimal 8 Karakter</div>
|
||||
<div id="req-number" class="valid-item"><i class="fas fa-times"></i> Ada Angka (0-9)</div>
|
||||
<div id="req-upper" class="valid-item"><i class="fas fa-times"></i> Ada Huruf Kapital (A-Z)</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label small fw-bold text-muted">Ulangi Password</label>
|
||||
<div class="input-group">
|
||||
<input type="password" name="password_confirmation" id="password_conf"
|
||||
class="form-control border-end-0" required>
|
||||
<span class="input-group-text bg-white border-start-0 cursor-pointer"
|
||||
onclick="togglePassword('password_conf', 'icon-2')">
|
||||
<i class="fas fa-eye text-muted" id="icon-2"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-grid">
|
||||
<button type="submit" class="btn text-white fw-bold" style="background-color: #81c408;">Simpan
|
||||
Password</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function togglePassword(inputId, iconId) {
|
||||
const input = document.getElementById(inputId);
|
||||
const icon = document.getElementById(iconId);
|
||||
if (input.type === "password") {
|
||||
input.type = "text";
|
||||
icon.classList.remove("fa-eye");
|
||||
icon.classList.add("fa-eye-slash");
|
||||
} else {
|
||||
input.type = "password";
|
||||
icon.classList.remove("fa-eye-slash");
|
||||
icon.classList.add("fa-eye");
|
||||
}
|
||||
}
|
||||
|
||||
function checkPassword() {
|
||||
const password = document.getElementById('password').value;
|
||||
updateRequirement('req-length', password.length >= 8);
|
||||
updateRequirement('req-number', /\d/.test(password));
|
||||
updateRequirement('req-upper', /[A-Z]/.test(password));
|
||||
}
|
||||
|
||||
function updateRequirement(id, isValid) {
|
||||
const element = document.getElementById(id);
|
||||
const icon = element.querySelector('i');
|
||||
if (isValid) {
|
||||
element.classList.add('valid');
|
||||
icon.classList.remove('fa-times');
|
||||
icon.classList.add('fa-check');
|
||||
} else {
|
||||
element.classList.remove('valid');
|
||||
icon.classList.remove('fa-check');
|
||||
icon.classList.add('fa-times');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -3,180 +3,168 @@
|
|||
@section('title', 'Keranjang Belanja')
|
||||
|
||||
@section('content')
|
||||
<div class="container-fluid page-header py-5">
|
||||
<h1 class="text-center text-white display-6">Keranjang Belanja</h1>
|
||||
<ol class="breadcrumb justify-content-center mb-0">
|
||||
<li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
|
||||
<li class="breadcrumb-item active text-white">Cart</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="container py-5 mt-4">
|
||||
<h2 class="mb-4 fw-bold">Keranjang Belanja</h2>
|
||||
|
||||
<div class="container-fluid py-5">
|
||||
<div class="container py-5">
|
||||
{{-- Alert Notification --}}
|
||||
@if(session('success'))
|
||||
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
||||
<i class="fa fa-check-circle me-2"></i> {{ session('success') }}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Produk</th>
|
||||
<th scope="col">Nama</th>
|
||||
<th scope="col">Harga</th>
|
||||
<th scope="col">Jumlah</th>
|
||||
<th scope="col">Total</th>
|
||||
<th scope="col">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@php $total_belanja = 0; @endphp
|
||||
@forelse($cart as $id => $details)
|
||||
@php
|
||||
$total = $details['price'] * $details['quantity'];
|
||||
$total_belanja += $total;
|
||||
@endphp
|
||||
<tr data-id="{{ $id }}">
|
||||
<th scope="row">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="{{ $details['photo'] ? asset('storage/' . $details['photo']) : asset('template/frontend/img/vegetable-item-3.png') }}"
|
||||
class="img-fluid me-5 rounded-circle" style="width: 80px; height: 80px;"
|
||||
alt="{{ $details['name'] }}">
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<p class="mb-0 mt-4">{{ $details['name'] }}</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="mb-0 mt-4">Rp {{ number_format($details['price'], 0, ',', '.') }}</p>
|
||||
</td>
|
||||
<td>
|
||||
<div class="input-group quantity mt-4" style="width: 100px;">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-sm btn-minus-custom rounded-circle bg-light border">
|
||||
<i class="fa fa-minus"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<input type="text" class="form-control form-control-sm text-center border-0 qty-input bg-white"
|
||||
value="{{ $details['quantity'] }}" readonly>
|
||||
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-sm btn-plus-custom rounded-circle bg-light border">
|
||||
<i class="fa fa-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="mb-0 mt-4">Rp {{ number_format($total, 0, ',', '.') }}</p>
|
||||
</td>
|
||||
<td>
|
||||
<form action="{{ route('cart.remove') }}" method="POST">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<input type="hidden" name="id" value="{{ $id }}">
|
||||
<button class="btn btn-md rounded-circle bg-light border mt-4" onclick="return confirm('Hapus produk ini?')">
|
||||
<i class="fa fa-times text-danger"></i>
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="6" class="text-center py-5">
|
||||
<div class="d-flex flex-column align-items-center">
|
||||
<i class="fa fa-shopping-basket fa-3x text-muted mb-3"></i>
|
||||
<h4>Keranjang belanja masih kosong.</h4>
|
||||
<a href="{{ route('shop') }}"
|
||||
class="btn btn-primary rounded-pill px-4 py-2 mt-3 text-white">Mulai Belanja</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
{{-- Alert Notification --}}
|
||||
@if (session('success'))
|
||||
<div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
|
||||
<i class="fa fa-check-circle me-2"></i> {{ session('success') }}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if (count($cart) > 0)
|
||||
<div class="row g-4 justify-content-end">
|
||||
<div class="col-sm-8 col-md-7 col-lg-6 col-xl-4">
|
||||
<div class="bg-light rounded">
|
||||
<div class="p-4">
|
||||
<h1 class="display-6 mb-4">Total <span class="fw-normal">Belanja</span></h1>
|
||||
<div class="d-flex justify-content-between mb-4">
|
||||
<h5 class="mb-0 me-4">Subtotal:</h5>
|
||||
<p class="mb-0">Rp {{ number_format($total_belanja, 0, ',', '.') }}</p>
|
||||
</div>
|
||||
@if (count($cart) > 0)
|
||||
<div class="row g-5">
|
||||
<div class="col-lg-8">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table align-middle mb-0">
|
||||
<thead class="bg-light">
|
||||
<tr>
|
||||
<th class="py-3 ps-4 border-0">Produk</th>
|
||||
<th class="py-3 border-0">Harga</th>
|
||||
<th class="py-3 border-0">Jumlah</th>
|
||||
<th class="py-3 border-0">Total</th>
|
||||
<th class="py-3 pe-4 border-0 text-end"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@php $total_belanja = 0; @endphp
|
||||
@foreach ($cart as $id => $details)
|
||||
@php
|
||||
$total = $details['price'] * $details['quantity'];
|
||||
$total_belanja += $total;
|
||||
@endphp
|
||||
<tr data-id="{{ $id }}" class="border-bottom">
|
||||
<td class="ps-4 py-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="{{ $details['photo'] ? asset('storage/' . $details['photo']) : asset('template/frontend/img/vegetable-item-3.png') }}"
|
||||
class="rounded-3 me-3"
|
||||
style="width: 60px; height: 60px; object-fit: cover;">
|
||||
<span class="fw-bold text-dark">{{ $details['name'] }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-muted">Rp
|
||||
{{ number_format($details['price'], 0, ',', '.') }}</td>
|
||||
<td>
|
||||
<div class="input-group quantity" style="width: 100px;">
|
||||
<button class="btn btn-sm btn-light border btn-minus-custom">
|
||||
<i class="fa fa-minus x-small"></i>
|
||||
</button>
|
||||
<input type="text"
|
||||
class="form-control form-control-sm text-center border-0 qty-input bg-white"
|
||||
value="{{ $details['quantity'] }}" readonly>
|
||||
<button class="btn btn-sm btn-light border btn-plus-custom">
|
||||
<i class="fa fa-plus x-small"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<td class="fw-bold text-dark">Rp {{ number_format($total, 0, ',', '.') }}
|
||||
</td>
|
||||
<td class="pe-4 text-end">
|
||||
<form action="{{ route('cart.remove') }}" method="POST"
|
||||
class="d-inline">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<input type="hidden" name="id" value="{{ $id }}">
|
||||
<button class="btn btn-link text-danger p-0 text-decoration-none"
|
||||
onclick="return confirm('Hapus item ini?')">
|
||||
<i class="fa fa-trash"></i>
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="py-4 mb-4 border-top border-bottom d-flex justify-content-between px-4">
|
||||
<h5 class="mb-0 ps-4 me-4">Total</h5>
|
||||
<p class="mb-0 pe-4">Rp {{ number_format($total_belanja, 0, ',', '.') }}</p>
|
||||
</div>
|
||||
|
||||
{{-- Button Checkout --}}
|
||||
<a href="{{ route('checkout') }}"
|
||||
class="btn border-secondary rounded-pill px-4 py-3 text-primary text-uppercase mb-4 ms-4"
|
||||
type="button">Proses Checkout</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div class="card border-0 shadow-sm bg-light">
|
||||
<div class="card-body p-4">
|
||||
<h5 class="fw-bold mb-4">Ringkasan Belanja</h5>
|
||||
<div class="d-flex justify-content-between mb-3">
|
||||
<span class="text-muted">Subtotal</span>
|
||||
<span class="fw-bold">Rp {{ number_format($total_belanja, 0, ',', '.') }}</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mb-4 border-top pt-3">
|
||||
<span class="fw-bold fs-5">Total</span>
|
||||
<span class="fw-bold fs-5 text-primary">Rp
|
||||
{{ number_format($total_belanja, 0, ',', '.') }}</span>
|
||||
</div>
|
||||
<a href="{{ route('checkout') }}"
|
||||
class="btn btn-primary w-100 rounded-pill py-3 fw-bold shadow-sm">
|
||||
Checkout Sekarang
|
||||
</a>
|
||||
<a href="{{ route('shop') }}"
|
||||
class="btn btn-link text-muted w-100 mt-2 text-decoration-none small">
|
||||
Lanjut Belanja
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="text-center py-5">
|
||||
<div class="mb-3">
|
||||
<i class="fas fa-shopping-basket fa-4x text-muted opacity-25"></i>
|
||||
</div>
|
||||
<h4 class="text-muted fw-bold">Keranjang Kosong</h4>
|
||||
<p class="text-muted mb-4">Yuk isi dengan beras berkualitas kami.</p>
|
||||
<a href="{{ route('shop') }}" class="btn btn-primary rounded-pill px-5 py-3">
|
||||
Mulai Belanja
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('js')
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$(".quantity button").off("click");
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$(".quantity button").off("click");
|
||||
|
||||
// Event saat tombol Plus Custom diklik
|
||||
$(".btn-plus-custom").click(function (e) {
|
||||
e.preventDefault();
|
||||
var ele = $(this);
|
||||
var input = ele.closest("tr").find(".qty-input");
|
||||
var currentVal = parseInt(input.val()) || 0;
|
||||
var newVal = currentVal + 1;
|
||||
|
||||
input.val(newVal);
|
||||
|
||||
updateCart(ele.closest("tr").attr("data-id"), newVal);
|
||||
});
|
||||
|
||||
// Event saat tombol Minus Custom diklik
|
||||
$(".btn-minus-custom").click(function (e) {
|
||||
e.preventDefault();
|
||||
var ele = $(this);
|
||||
var input = ele.closest("tr").find(".qty-input");
|
||||
var currentVal = parseInt(input.val()) || 0;
|
||||
|
||||
if (currentVal > 1) {
|
||||
var newVal = currentVal - 1;
|
||||
$(".btn-plus-custom").click(function(e) {
|
||||
e.preventDefault();
|
||||
var ele = $(this);
|
||||
var input = ele.closest("tr").find(".qty-input");
|
||||
var currentVal = parseInt(input.val()) || 0;
|
||||
var newVal = currentVal + 1;
|
||||
input.val(newVal);
|
||||
updateCart(ele.closest("tr").attr("data-id"), newVal);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Fungsi AJAX
|
||||
function updateCart(id, qty) {
|
||||
$.ajax({
|
||||
url: "{{ route('cart.update') }}",
|
||||
method: "patch",
|
||||
data: {
|
||||
_token: '{{ csrf_token() }}',
|
||||
id: id,
|
||||
quantity: qty
|
||||
},
|
||||
success: function (response) {
|
||||
window.location.reload();
|
||||
$(".btn-minus-custom").click(function(e) {
|
||||
e.preventDefault();
|
||||
var ele = $(this);
|
||||
var input = ele.closest("tr").find(".qty-input");
|
||||
var currentVal = parseInt(input.val()) || 0;
|
||||
if (currentVal > 1) {
|
||||
var newVal = currentVal - 1;
|
||||
input.val(newVal);
|
||||
updateCart(ele.closest("tr").attr("data-id"), newVal);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
|
||||
function updateCart(id, qty) {
|
||||
$.ajax({
|
||||
url: "{{ route('cart.update') }}",
|
||||
method: "patch",
|
||||
data: {
|
||||
_token: '{{ csrf_token() }}',
|
||||
id: id,
|
||||
quantity: qty
|
||||
},
|
||||
success: function(response) {
|
||||
window.location.reload();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -46,11 +46,30 @@
|
|||
placeholder="Tulis alamat lengkap Anda...">{{ Auth::guard('pembeli')->user()->alamat }}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label fw-bold">Metode Pembayaran</label>
|
||||
<select name="metode_pembayaran" class="form-select">
|
||||
<option value="cod" selected>Bayar di Tempat (COD)</option>
|
||||
</select>
|
||||
<div class="card border-0 shadow-sm rounded-4 mb-4">
|
||||
<div class="card-header bg-white py-3 border-bottom-0">
|
||||
<h5 class="mb-0 fw-bold text-dark">Metode Pembayaran</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="alert alert-success d-flex align-items-center border-0 shadow-sm"
|
||||
role="alert" style="background-color: #d1e7dd; color: #0f5132;">
|
||||
<div class="bg-white p-3 rounded-circle me-3 text-success d-flex align-items-center justify-content-center"
|
||||
style="width: 50px; height: 50px;">
|
||||
<i class="fas fa-hand-holding-usd fs-4"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="fw-bold mb-1">Bayar di Tempat (COD)</h6>
|
||||
<p class="mb-0 small opacity-75">
|
||||
Pembayaran dilakukan secara tunai langsung kepada petani/kurir saat pesanan
|
||||
sampai di lokasi Anda.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="metode_pembayaran" value="cod">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-grid gap-2">
|
||||
|
|
|
|||
|
|
@ -3,178 +3,196 @@
|
|||
@section('title', $produk->nama_produk)
|
||||
|
||||
@section('content')
|
||||
<!-- Single Page Header -->
|
||||
<div class="container-fluid page-header py-5">
|
||||
<h1 class="text-center text-white display-6">{{ $produk->nama_produk }}</h1>
|
||||
<ol class="breadcrumb justify-content-center mb-0">
|
||||
<li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="{{ route('shop') }}">Belanja</a></li>
|
||||
<li class="breadcrumb-item active text-white">Detail</li>
|
||||
</ol>
|
||||
|
||||
<div class="container-fluid bg-light py-3 mb-4">
|
||||
<div class="container">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb m-0">
|
||||
<li class="breadcrumb-item"><a href="{{ url('/') }}" class="text-muted text-decoration-none">Home</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item"><a href="{{ route('shop') }}"
|
||||
class="text-muted text-decoration-none">Belanja</a></li>
|
||||
<li class="breadcrumb-item active text-primary fw-bold" aria-current="page">{{ $produk->nama_produk }}
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Single Product Start -->
|
||||
<div class="container-fluid py-5 mt-5">
|
||||
<div class="container py-5">
|
||||
<div class="row g-4 mb-5">
|
||||
<div class="col-lg-8 col-xl-9">
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-6">
|
||||
<div class="border rounded">
|
||||
<a href="#">
|
||||
<img src="{{ $produk->foto_produk ? asset('storage/' . $produk->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}"
|
||||
class="img-fluid rounded" alt="Image">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<h4 class="fw-bold mb-3">{{ $produk->nama_produk }}</h4>
|
||||
<p class="mb-3">Kategori: {{ $produk->kategori ?? 'Sayuran' }}</p>
|
||||
<h5 class="fw-bold mb-3">Rp {{ number_format($produk->harga, 0, ',', '.') }} / kg</h5>
|
||||
<div class="d-flex mb-4">
|
||||
<i class="fa fa-star text-secondary"></i>
|
||||
<i class="fa fa-star text-secondary"></i>
|
||||
<i class="fa fa-star text-secondary"></i>
|
||||
<i class="fa fa-star text-secondary"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
</div>
|
||||
<p class="mb-4">{{ $produk->deskripsi }}</p>
|
||||
<div class="container pb-5">
|
||||
<div class="row g-5">
|
||||
<div class="col-lg-6">
|
||||
<div class="rounded-4 overflow-hidden shadow-sm border position-relative bg-white">
|
||||
<img src="{{ $produk->foto_produk ? asset('storage/' . $produk->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}"
|
||||
class="img-fluid w-100" style="object-fit: cover; max-height: 500px;"
|
||||
alt="{{ $produk->nama_produk }}">
|
||||
|
||||
{{-- Form Add to Cart --}}
|
||||
<form action="{{ route('cart.add') }}" method="POST">
|
||||
@csrf
|
||||
<input type="hidden" name="id" value="{{ $produk->id }}">
|
||||
<div class="input-group quantity mb-5" style="width: 100px;">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-sm btn-minus rounded-circle bg-light border"
|
||||
onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
|
||||
<i class="fa fa-minus"></i>
|
||||
</button>
|
||||
</div>
|
||||
<input type="number" name="qty"
|
||||
class="form-control form-control-sm text-center border-0" value="1"
|
||||
min="1">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-sm btn-plus rounded-circle bg-light border"
|
||||
onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
|
||||
<i class="fa fa-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit"
|
||||
class="btn border border-secondary rounded-pill px-4 py-2 mb-4 text-primary"><i
|
||||
class="fa fa-shopping-bag me-2 text-primary"></i> Masukkan Keranjang</button>
|
||||
<div class="position-absolute top-0 start-0 m-3">
|
||||
@if ($produk->stok > 0)
|
||||
<span class="badge bg-primary shadow-sm px-3 py-2 rounded-pill">Stok Tersedia</span>
|
||||
@else
|
||||
<span class="badge bg-danger shadow-sm px-3 py-2 rounded-pill">Stok Habis</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="{{ route('checkout', ['produk_id' => $produk->id]) }}" class="...">
|
||||
Beli Sekarang
|
||||
</a>
|
||||
</form>
|
||||
<div class="col-lg-6">
|
||||
<div class="h-100 d-flex flex-column justify-content-center">
|
||||
|
||||
<div class="mb-2">
|
||||
<span
|
||||
class="badge bg-light text-dark border border-secondary text-uppercase px-3 py-2 rounded-pill fw-bold">
|
||||
{{ $produk->kategori ?? 'Hasil Tani' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 class="fw-bold display-6 text-dark mb-2">{{ $produk->nama_produk }}</h1>
|
||||
|
||||
<div class="mb-4">
|
||||
<h2 class="fw-bold text-primary display-5 mb-0">
|
||||
Rp {{ number_format($produk->harga, 0, ',', '.') }}
|
||||
<span class="fs-6 text-muted fw-normal">/ kg</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p class="text-secondary mb-4" style="line-height: 1.8; font-size: 1.05rem;">
|
||||
{{ $produk->deskripsi }}
|
||||
</p>
|
||||
|
||||
<div class="d-flex align-items-center bg-white border rounded-4 p-3 mb-4 shadow-sm">
|
||||
<div class="bg-light rounded-circle p-2 me-3 d-flex align-items-center justify-content-center text-primary"
|
||||
style="width: 50px; height: 50px;">
|
||||
<i class="fas fa-user-tie fs-4"></i>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-success rounded-pill px-4" data-bs-toggle="modal"
|
||||
data-bs-target="#chatModal">
|
||||
<i class="fa fa-envelope me-2"></i> Chat Petani
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-0 text-muted small">Dijual oleh:</p>
|
||||
<h6 class="mb-0 fw-bold text-dark">{{ $produk->petani->nama_lengkap ?? 'Petani Mitra' }}</h6>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-primary btn-sm rounded-pill px-3"
|
||||
data-bs-toggle="modal" data-bs-target="#chatModal">
|
||||
<i class="fas fa-comment-dots me-1"></i> Chat
|
||||
</button>
|
||||
|
||||
<div class="modal fade" id="chatModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Kirim Pesan ke {{ $produk->petani->nama_lengkap }}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<form action="{{ route('pesan.kirim') }}" method="POST">
|
||||
@csrf
|
||||
<div class="modal-body">
|
||||
{{-- Hidden Input untuk Target Penerima (Petani) --}}
|
||||
<input type="hidden" name="penerima_id" value="{{ $produk->petani_id }}">
|
||||
<input type="hidden" name="penerima_type" value="App\Models\Petani">
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Isi Pesan</label>
|
||||
<textarea name="isi_pesan" class="form-control" rows="4" required
|
||||
placeholder="Halo, apakah stok produk ini masih ada?"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary"
|
||||
data-bs-dismiss="modal">Batal</button>
|
||||
<button type="submit" class="btn btn-success">Kirim Pesan</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-12">
|
||||
<nav>
|
||||
<div class="nav nav-tabs mb-3">
|
||||
<button class="nav-link active border-white border-bottom-0" type="button"
|
||||
role="tab" id="nav-about-tab" data-bs-toggle="tab" data-bs-target="#nav-about"
|
||||
aria-controls="nav-about" aria-selected="true">Deskripsi</button>
|
||||
<button class="nav-link border-white border-bottom-0" type="button" role="tab"
|
||||
id="nav-mission-tab" data-bs-toggle="tab" data-bs-target="#nav-mission"
|
||||
aria-controls="nav-mission" aria-selected="false">Info Petani</button>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="tab-content mb-5">
|
||||
<div class="tab-pane active" id="nav-about" role="tabpanel"
|
||||
aria-labelledby="nav-about-tab">
|
||||
<p>{{ $produk->deskripsi }}</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="nav-mission" role="tabpanel"
|
||||
aria-labelledby="nav-mission-tab">
|
||||
<div class="d-flex">
|
||||
<img src="{{ asset('template/frontend/img/avatar.jpg') }}"
|
||||
class="img-fluid rounded-circle p-3" style="width: 100px; height: 100px;"
|
||||
alt="">
|
||||
<div class="">
|
||||
<p class="mb-2" style="font-size: 14px;">Petani Lokal</p>
|
||||
<div class="d-flex justify-content-between">
|
||||
<h5>{{ $produk->petani->nama_lengkap ?? 'Petani Desa' }}</h5>
|
||||
</div>
|
||||
<p>Produk ini ditanam dan dipanen langsung oleh petani lokal terverifikasi.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form action="{{ route('cart.add') }}" method="POST">
|
||||
@csrf
|
||||
<input type="hidden" name="id" value="{{ $produk->id }}">
|
||||
|
||||
<div class="d-flex align-items-center mb-4 flex-wrap gap-3">
|
||||
<div class="input-group shadow-sm" style="width: 140px;">
|
||||
<button type="button" class="btn btn-light border" onclick="updateQty(-1)">
|
||||
<i class="fa fa-minus small"></i>
|
||||
</button>
|
||||
<input type="number" name="qty" id="input-qty"
|
||||
class="form-control text-center bg-white border-top border-bottom border-0"
|
||||
value="1" min="1" max="{{ $produk->stok }}" readonly>
|
||||
<button type="button" class="btn btn-light border" onclick="updateQty(1)">
|
||||
<i class="fa fa-plus small"></i>
|
||||
</button>
|
||||
</div>
|
||||
<span class="text-muted small">
|
||||
Sisa Stok: <strong class="text-dark">{{ $produk->stok }} Kg</strong>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="d-grid gap-2 d-sm-flex">
|
||||
<button type="submit" class="btn btn-primary btn-lg rounded-pill px-5 shadow-sm flex-grow-1">
|
||||
<i class="fa fa-shopping-basket me-2"></i> + Keranjang
|
||||
</button>
|
||||
|
||||
<a href="javascript:void(0);" onclick="beliLangsung()"
|
||||
class="btn btn-outline-secondary btn-lg rounded-pill px-4 flex-grow-1">
|
||||
Beli Langsung
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (isset($produk_terkait) && count($produk_terkait) > 0)
|
||||
<div class="mt-5 pt-5 border-top">
|
||||
<div class="d-flex align-items-center justify-content-between mb-4">
|
||||
<h3 class="fw-bold m-0 text-dark">Produk Sejenis</h3>
|
||||
<a href="{{ route('shop') }}" class="text-primary text-decoration-none fw-bold small">
|
||||
Lihat Semua <i class="fas fa-arrow-right ms-1"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="col-lg-4 col-xl-3">
|
||||
<div class="row g-4 fruite">
|
||||
<div class="col-lg-12">
|
||||
<div class="mb-3">
|
||||
<h4>Produk Terkait</h4>
|
||||
@foreach ($produk_terkait ?? [] as $related)
|
||||
<div class="d-flex align-items-center justify-content-start mt-3">
|
||||
<div class="rounded me-4" style="width: 100px; height: 100px;">
|
||||
<img src="{{ $related->foto_produk ? asset('storage/' . $related->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}"
|
||||
class="img-fluid rounded" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="mb-2">{{ $related->nama_produk }}</h6>
|
||||
<div class="d-flex mb-2">
|
||||
<i class="fa fa-star text-secondary"></i>
|
||||
<i class="fa fa-star text-secondary"></i>
|
||||
<i class="fa fa-star text-secondary"></i>
|
||||
<i class="fa fa-star text-secondary"></i>
|
||||
<i class="fa fa-star"></i>
|
||||
</div>
|
||||
<div class="d-flex mb-2">
|
||||
<h5 class="fw-bold me-2">Rp
|
||||
{{ number_format($related->harga, 0, ',', '.') }}</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
@foreach ($produk_terkait as $related)
|
||||
<div class="col-6 col-md-3">
|
||||
<a href="{{ route('produk.detail', $related->id) }}" class="text-decoration-none">
|
||||
<div class="card h-100 border-0 shadow-sm overflow-hidden rounded-4">
|
||||
<div class="position-relative">
|
||||
<img src="{{ $related->foto_produk ? asset('storage/' . $related->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}"
|
||||
class="card-img-top" style="height: 200px; object-fit: cover;"
|
||||
alt="{{ $related->nama_produk }}">
|
||||
</div>
|
||||
@endforeach
|
||||
<div class="card-body p-3">
|
||||
<h6 class="fw-bold text-dark mb-1 text-truncate">{{ $related->nama_produk }}</h6>
|
||||
<p class="text-primary fw-bold mb-0">Rp
|
||||
{{ number_format($related->harga, 0, ',', '.') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="modal fade" id="chatModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content border-0 shadow-lg rounded-4">
|
||||
<div class="modal-header bg-primary text-white border-0 rounded-top-4">
|
||||
<h5 class="modal-title fw-bold">Hubungi Petani</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<form action="{{ route('pesan.kirim') }}" method="POST">
|
||||
@csrf
|
||||
<div class="modal-body p-4">
|
||||
<input type="hidden" name="penerima_id" value="{{ $produk->petani_id }}">
|
||||
<input type="hidden" name="penerima_type" value="App\Models\Petani">
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-bold small text-muted text-uppercase">Pesan Anda</label>
|
||||
<textarea name="isi_pesan" class="form-control bg-light border-0 rounded-3 p-3" rows="4" required
|
||||
placeholder="Halo, saya tertarik dengan produk ini..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer border-0 px-4 pb-4 pt-0">
|
||||
<button type="button" class="btn btn-light rounded-pill px-4"
|
||||
data-bs-dismiss="modal">Batal</button>
|
||||
<button type="submit" class="btn btn-primary rounded-pill px-4 shadow-sm">
|
||||
<i class="fas fa-paper-plane me-2"></i> Kirim Pesan
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@section('js')
|
||||
<script>
|
||||
// Fungsi untuk update input number
|
||||
function updateQty(change) {
|
||||
let input = document.getElementById('input-qty');
|
||||
let newVal = parseInt(input.value) + change;
|
||||
let max = parseInt(input.getAttribute('max'));
|
||||
|
||||
if (newVal >= 1 && newVal <= max) {
|
||||
input.value = newVal;
|
||||
}
|
||||
}
|
||||
|
||||
// Redirect dengan membawa QTY
|
||||
function beliLangsung() {
|
||||
let qty = document.getElementById('input-qty').value;
|
||||
let produkId = "{{ $produk->id }}";
|
||||
window.location.href = "{{ route('checkout') }}?produk_id=" + produkId + "&qty=" + qty;
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -3,168 +3,268 @@
|
|||
@section('title', 'Beranda')
|
||||
|
||||
@section('content')
|
||||
<!-- 1. HERO SECTION START -->
|
||||
<div class="container-fluid py-5 mb-5 hero-header">
|
||||
<div class="container py-5">
|
||||
<div class="row g-5 align-items-center">
|
||||
<div class="col-md-12 col-lg-7">
|
||||
<h4 class="mb-3 text-secondary">100% Organik & Segar</h4>
|
||||
<h1 class="mb-5 display-3 text-primary">Sayuran & Buah Desa <br>Langsung Petani</h1>
|
||||
<div class="position-relative mx-auto">
|
||||
<a href="{{ route('shop') }}" class="btn btn-primary border-2 border-secondary py-3 px-5 rounded-pill text-white" style="box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
|
||||
<i class="fa fa-shopping-bag me-2"></i> Belanja Sekarang
|
||||
</a>
|
||||
|
||||
<div class="container-fluid py-5 mb-5 hero-header bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row align-items-center g-5">
|
||||
<div class="col-lg-6 order-2 order-lg-1">
|
||||
<div class="d-inline-block border border-secondary text-secondary rounded-pill px-3 py-2 mb-3 fw-bold">
|
||||
🌾 Mitra Petani Padi Indonesia
|
||||
</div>
|
||||
<h1 class="display-4 fw-bold text-dark mb-4">
|
||||
Jual Beli Gabah & <br>
|
||||
<span class="text-primary">Beras Berkualitas.</span>
|
||||
</h1>
|
||||
<p class="lead text-muted mb-5">
|
||||
Platform langsung yang menghubungkan petani padi lokal dengan pembeli.
|
||||
Dapatkan harga gabah terbaik dan beras segar tanpa pemutih.
|
||||
</p>
|
||||
<div class="d-flex gap-2">
|
||||
<a href="{{ route('shop') }}" class="btn btn-primary border-0 rounded-pill py-3 px-5 shadow">
|
||||
<i class="fas fa-shopping-bag me-2"></i> Belanja
|
||||
</a>
|
||||
<a href="#katalog" class="btn btn-outline-secondary rounded-pill py-3 px-5">
|
||||
Lihat Stok
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-5">
|
||||
<div id="carouselId" class="carousel slide position-relative" data-bs-ride="carousel">
|
||||
<div class="carousel-inner" role="listbox">
|
||||
<div class="carousel-item active rounded">
|
||||
<img src="{{ asset('template/frontend/img/hero-img-1.png') }}" class="img-fluid w-100 h-100 bg-secondary rounded" alt="Buah">
|
||||
<a href="#" class="btn px-4 py-2 text-white rounded">Buah-buahan</a>
|
||||
</div>
|
||||
<div class="carousel-item rounded">
|
||||
<img src="{{ asset('template/frontend/img/hero-img-2.jpg') }}" class="img-fluid w-100 h-100 rounded" alt="Sayur">
|
||||
<a href="#" class="btn px-4 py-2 text-white rounded">Sayuran</a>
|
||||
<div class="col-lg-6 order-1 order-lg-2 text-center">
|
||||
<div class="position-relative d-inline-block">
|
||||
<img src="https://images.unsplash.com/photo-1586201375761-83865001e31c?q=80&w=1000&auto=format&fit=crop"
|
||||
class="img-fluid rounded-circle shadow-lg w-100" style="max-height: 450px; object-fit: cover;"
|
||||
alt="Padi Premium">
|
||||
<div class="position-absolute bg-white p-3 rounded-3 shadow d-none d-md-block"
|
||||
style="bottom: 30px; left: -30px;">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<div class="bg-primary text-white rounded-circle p-2 d-flex align-items-center justify-content-center"
|
||||
style="width: 40px; height: 40px;">
|
||||
<i class="fas fa-check"></i>
|
||||
</div>
|
||||
<div class="text-start">
|
||||
<h6 class="mb-0 fw-bold">100% Panen Baru</h6>
|
||||
<small class="text-muted">Kualitas Terjamin</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselId" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselId" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- HERO SECTION END -->
|
||||
|
||||
<!-- 2. LAYANAN / FEATURES START (Biar terlihat profesional) -->
|
||||
<div class="container-fluid featurs py-5">
|
||||
<div class="container py-5">
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="featurs-item text-center rounded bg-light p-4">
|
||||
<div class="featurs-icon btn-square rounded-circle bg-secondary mb-5 mx-auto">
|
||||
<i class="fas fa-car-side fa-3x text-white"></i>
|
||||
</div>
|
||||
<div class="featurs-content text-center">
|
||||
<h5>Gratis Ongkir</h5>
|
||||
<p class="mb-0">Gratis untuk radius desa</p>
|
||||
<div class="h-100 p-4 text-center bg-white border rounded-4 shadow-sm">
|
||||
<div class="d-inline-flex align-items-center justify-content-center bg-secondary text-white rounded-circle mb-4"
|
||||
style="width: 70px; height: 70px;">
|
||||
<i class="fas fa-truck fa-2x"></i>
|
||||
</div>
|
||||
<h5 class="fw-bold mb-3">Siap Antar</h5>
|
||||
<p class="mb-0 text-muted">Armada pickup siap kirim langsung ke lokasi Anda.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="featurs-item text-center rounded bg-light p-4">
|
||||
<div class="featurs-icon btn-square rounded-circle bg-secondary mb-5 mx-auto">
|
||||
<i class="fas fa-user-shield fa-3x text-white"></i>
|
||||
</div>
|
||||
<div class="featurs-content text-center">
|
||||
<h5>Transaksi Aman</h5>
|
||||
<p class="mb-0">Pembayaran COD Terjamin</p>
|
||||
<div class="h-100 p-4 text-center bg-white border rounded-4 shadow-sm">
|
||||
<div class="d-inline-flex align-items-center justify-content-center bg-secondary text-white rounded-circle mb-4"
|
||||
style="width: 70px; height: 70px;">
|
||||
<i class="fas fa-hand-holding-usd fa-2x"></i>
|
||||
</div>
|
||||
<h5 class="fw-bold mb-3">Harga Petani</h5>
|
||||
<p class="mb-0 text-muted">Harga tangan pertama langsung tanpa tengkulak.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="featurs-item text-center rounded bg-light p-4">
|
||||
<div class="featurs-icon btn-square rounded-circle bg-secondary mb-5 mx-auto">
|
||||
<i class="fas fa-exchange-alt fa-3x text-white"></i>
|
||||
</div>
|
||||
<div class="featurs-content text-center">
|
||||
<h5>Jaminan Kualitas</h5>
|
||||
<p class="mb-0">Garansi produk segar</p>
|
||||
<div class="h-100 p-4 text-center bg-white border rounded-4 shadow-sm">
|
||||
<div class="d-inline-flex align-items-center justify-content-center bg-secondary text-white rounded-circle mb-4"
|
||||
style="width: 70px; height: 70px;">
|
||||
<i class="fas fa-certificate fa-2x"></i>
|
||||
</div>
|
||||
<h5 class="fw-bold mb-3">Kualitas Super</h5>
|
||||
<p class="mb-0 text-muted">Jaminan beras pulen, wangi, dan bebas pemutih.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="featurs-item text-center rounded bg-light p-4">
|
||||
<div class="featurs-icon btn-square rounded-circle bg-secondary mb-5 mx-auto">
|
||||
<i class="fa fa-phone-alt fa-3x text-white"></i>
|
||||
</div>
|
||||
<div class="featurs-content text-center">
|
||||
<h5>Support 24/7</h5>
|
||||
<p class="mb-0">Hubungi kami kapan saja</p>
|
||||
<div class="h-100 p-4 text-center bg-white border rounded-4 shadow-sm">
|
||||
<div class="d-inline-flex align-items-center justify-content-center bg-secondary text-white rounded-circle mb-4"
|
||||
style="width: 70px; height: 70px;">
|
||||
<i class="fas fa-shield-alt fa-2x"></i>
|
||||
</div>
|
||||
<h5 class="fw-bold mb-3">Transaksi Aman</h5>
|
||||
<p class="mb-0 text-muted">Pembayaran fleksibel, bisa transfer atau COD.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PRODUK TERBARU -->
|
||||
<div class="container-fluid py-5">
|
||||
{{-- Produk terlaris --}}
|
||||
<div class="container py-5">
|
||||
<div class="text-center mx-auto mb-5" style="max-width: 700px;">
|
||||
<h1 class="display-4">Produk Panen Terbaru</h1>
|
||||
<p>Pilihan hasil bumi terbaik yang baru saja dipanen oleh petani lokal.</p>
|
||||
<h1 class="display-6 fw-bold">Produk Terlaris</h1>
|
||||
<p class="text-muted">Pilihan favorit pelanggan kami minggu ini.</p>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
@forelse($produks as $produk)
|
||||
<div class="col-md-6 col-lg-4 col-xl-3">
|
||||
<div class="rounded position-relative fruite-item border border-secondary">
|
||||
<div class="fruite-img">
|
||||
<img src="{{ $produk->foto_produk ? asset('storage/'.$produk->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}"
|
||||
class="img-fluid w-100 rounded-top"
|
||||
alt="{{ $produk->nama_produk }}"
|
||||
style="height: 200px; object-fit: cover;">
|
||||
</div>
|
||||
<div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">Segar</div>
|
||||
<div class="p-4 border-top-0 rounded-bottom">
|
||||
<h5>{{ $produk->nama_produk }}</h5>
|
||||
<p class="text-muted">{{ Str::limit($produk->deskripsi, 45) }}</p>
|
||||
<div class="d-flex justify-content-between flex-lg-wrap">
|
||||
<p class="text-dark fs-5 fw-bold mb-0">Rp {{ number_format($produk->harga, 0, ',', '.') }} / kg</p>
|
||||
<a href="{{ route('produk.detail', $produk->id) }}" class="btn border border-secondary rounded-pill px-3 text-primary">
|
||||
<i class="fa fa-eye me-2 text-primary"></i> Detail
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="col-12 text-center py-5">
|
||||
<div class="alert alert-warning d-inline-block">
|
||||
<i class="fas fa-exclamation-triangle me-2"></i> Belum ada produk yang dijual saat ini.
|
||||
</div>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-5">
|
||||
<a href="{{ route('shop') }}" class="btn btn-primary rounded-pill py-3 px-5 text-white">Lihat Semua Produk</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BANNER PROMO -->
|
||||
<div class="container-fluid banner bg-secondary my-5">
|
||||
<div class="container py-5">
|
||||
<div class="row g-4 align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<div class="py-4">
|
||||
<h1 class="display-3 text-white">Buah Segar Eksotis</h1>
|
||||
<p class="fw-normal display-3 text-dark mb-4">di Toko Kami</p>
|
||||
<p class="mb-4 text-dark">Dapatkan harga spesial untuk pembelian grosir langsung dari kebun petani.</p>
|
||||
<a href="{{ route('shop') }}" class="banner-btn btn border-2 border-white rounded-pill text-dark py-3 px-5">BELANJA SEKARANG</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="position-relative">
|
||||
<img src="{{ asset('template/frontend/img/baner-1.png') }}" class="img-fluid w-100 rounded" alt="">
|
||||
<div class="d-flex align-items-center justify-content-center bg-white rounded-circle position-absolute" style="width: 140px; height: 140px; top: 0; left: 0;">
|
||||
<h1 style="font-size: 50px;">%</h1>
|
||||
<div class="d-flex flex-column">
|
||||
<span class="h4 mb-0">Promo</span>
|
||||
<span class="h6 text-muted mb-0">Minggu Ini</span>
|
||||
@forelse($produkTerlaris as $item)
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="rounded position-relative border border-secondary shadow-sm overflow-hidden h-100">
|
||||
<div class="fruit-img">
|
||||
<img src="{{ $item->foto_produk ? asset('storage/' . $item->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}"
|
||||
class="img-fluid w-100" style="height: 200px; object-fit: cover;"
|
||||
alt="{{ $item->nama_produk }}">
|
||||
</div>
|
||||
|
||||
<div class="text-white bg-danger px-3 py-1 rounded position-absolute"
|
||||
style="top: 10px; left: 10px;">
|
||||
Terjual {{ $item->total_terjual ?? 0 }}
|
||||
</div>
|
||||
|
||||
<div class="p-4 border-top border-secondary bg-white d-flex flex-column"
|
||||
style="height: calc(100% - 200px);">
|
||||
<h4>{{ $item->nama_produk }}</h4>
|
||||
<p class="text-muted small mb-2 flex-grow-1">
|
||||
{{ Str::limit($item->deskripsi, 50) }}
|
||||
</p>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-end">
|
||||
<div>
|
||||
<p class="text-dark fs-5 fw-bold mb-0">Rp {{ number_format($item->harga, 0, ',', '.') }}
|
||||
</p>
|
||||
<small class="text-muted">/ kg</small>
|
||||
</div>
|
||||
<a href="{{ route('produk.detail', $item->id) }}"
|
||||
class="btn btn-outline-primary rounded-pill px-3">
|
||||
<i class="fa fa-shopping-bag"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="col-12 text-center">
|
||||
<p class="text-muted">Belum ada data penjualan.</p>
|
||||
</div>
|
||||
@endforelse
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container-fluid py-5 bg-light">
|
||||
<div class="container">
|
||||
<div class="row g-5">
|
||||
<div class="col-md-6 col-lg-3 text-center">
|
||||
<i class="fas fa-users fa-3x text-primary mb-3"></i>
|
||||
<h2 class="fw-bold mb-0 text-secondary" data-toggle="counter-up">150+</h2>
|
||||
<p class="mb-0 text-muted text-uppercase fw-bold">Petani Mitra</p>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3 text-center">
|
||||
<i class="fas fa-shopping-cart fa-3x text-primary mb-3"></i>
|
||||
<h2 class="fw-bold mb-0 text-secondary" data-toggle="counter-up">2,500+</h2>
|
||||
<p class="mb-0 text-muted text-uppercase fw-bold">Transaksi</p>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3 text-center">
|
||||
<i class="fas fa-star fa-3x text-primary mb-3"></i>
|
||||
<h2 class="fw-bold mb-0 text-secondary" data-toggle="counter-up">4.8</h2>
|
||||
<p class="mb-0 text-muted text-uppercase fw-bold">Rating Rata-rata</p>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3 text-center">
|
||||
<i class="fas fa-check-circle fa-3x text-primary mb-3"></i>
|
||||
<h2 class="fw-bold mb-0 text-secondary" data-toggle="counter-up">100%</h2>
|
||||
<p class="mb-0 text-muted text-uppercase fw-bold">Garansi Kualitas</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
{{-- Katalog --}}
|
||||
<div class="container py-5" id="katalog">
|
||||
<div class="text-center mx-auto mb-5" style="max-width: 700px;">
|
||||
<h2 class="fw-bold display-6 text-dark">Stok Gudang Kami</h2>
|
||||
<p class="text-muted">Pilih varietas padi atau beras yang Anda butuhkan hari ini.</p>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center mb-5">
|
||||
<div class="col-12 text-center">
|
||||
@php $kategoris = ['Semua', 'Pandan Wangi', 'IR 64', 'Ketan', 'Merah', 'Hitam']; @endphp
|
||||
<div class="d-flex justify-content-center flex-wrap gap-2">
|
||||
@foreach ($kategoris as $kategori)
|
||||
<button
|
||||
class="btn {{ $loop->first ? 'btn-primary' : 'btn-outline-primary' }} rounded-pill px-4 py-2 m-1 btn-category"
|
||||
data-kategori="{{ $kategori }}">
|
||||
{{ $kategori }}
|
||||
</button>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4" id="product-container">
|
||||
@include('landing.partials.product_list')
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-5">
|
||||
<a href="{{ route('shop') }}" class="btn btn-primary border-0 rounded-pill px-5 py-3 shadow">
|
||||
Lihat Semua Produk
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Banner --}}
|
||||
<div class="container-fluid bg-primary py-5 mt-5">
|
||||
<div class="container py-5">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-8 text-center text-lg-start mb-4 mb-lg-0">
|
||||
<h2 class="display-5 fw-bold text-white mb-3">Butuh Suplai Besar?</h2>
|
||||
<p class="fs-5 text-white mb-4 opacity-75">
|
||||
Kami melayani kerjasama untuk penggilingan padi, restoran, dan toko
|
||||
kelontong dengan harga grosir spesial.
|
||||
</p>
|
||||
<a href="https://wa.me/6281234567890" target="_blank"
|
||||
class="btn btn-light rounded-pill px-5 py-3 text-success fw-bold shadow">
|
||||
<i class="fab fa-whatsapp me-2"></i> Hubungi Kami
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-4 text-center">
|
||||
<i class="fas fa-warehouse text-white opacity-25" style="font-size: 10rem;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('js')
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('.btn-category').click(function(e) {
|
||||
e.preventDefault();
|
||||
let kategori = $(this).data('kategori');
|
||||
$('.btn-category').removeClass('btn-primary').addClass('btn-outline-primary');
|
||||
$(this).removeClass('btn-outline-primary').addClass('btn-primary');
|
||||
|
||||
$('#product-container').html(
|
||||
'<div class="col-12 text-center py-5">' +
|
||||
'<div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status"></div>' +
|
||||
'<p class="mt-3 text-muted">Sedang mengambil data...</p>' +
|
||||
'</div>'
|
||||
);
|
||||
|
||||
$.ajax({
|
||||
url: "{{ route('home') }}",
|
||||
type: "GET",
|
||||
data: {
|
||||
kategori: kategori
|
||||
},
|
||||
success: function(response) {
|
||||
$('#product-container').html(response);
|
||||
},
|
||||
error: function(xhr) {
|
||||
$('#product-container').html(
|
||||
'<div class="col-12 text-center text-danger">Gagal memuat data.</div>'
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
@forelse($produks as $produk)
|
||||
<div class="col-md-6 col-lg-4 col-xl-3 mb-4">
|
||||
<div class="card h-100 product-card">
|
||||
<div class="position-absolute top-0 start-0 m-3 z-1">
|
||||
<span class="badge bg-white text-success shadow-sm">
|
||||
<i class="fas fa-leaf me-1"></i> {{ $produk->kategori ?? 'Padi' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="position-absolute top-0 end-0 m-3 z-1">
|
||||
<span class="badge bg-warning text-dark shadow-sm">
|
||||
Stok: {{ $produk->stok }} Kg
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="ratio ratio-4x3 overflow-hidden bg-light">
|
||||
<img src="{{ $produk->foto_produk ? asset('storage/' . $produk->foto_produk) : 'https://images.unsplash.com/photo-1586201375761-83865001e31c?q=80&w=800&auto=format&fit=crop' }}"
|
||||
class="card-img-top object-fit-cover" alt="{{ $produk->nama_produk }}">
|
||||
</div>
|
||||
|
||||
<div class="card-body d-flex flex-column p-4">
|
||||
<small class="text-muted mb-1">
|
||||
<i class="fas fa-user-circle me-1"></i> {{ Str::limit($produk->petani->nama_lengkap ?? 'Petani Lokal', 15) }}
|
||||
</small>
|
||||
|
||||
<h5 class="fw-bold text-dark mb-2 text-truncate" title="{{ $produk->nama_produk }}">
|
||||
{{ $produk->nama_produk }}
|
||||
</h5>
|
||||
|
||||
<p class="text-secondary small mb-3 flex-grow-1" style="line-height: 1.5;">
|
||||
{{ Str::limit($produk->deskripsi, 60) }}
|
||||
</p>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-end mt-3 border-top pt-3">
|
||||
<div>
|
||||
<small class="text-muted d-block" style="font-size: 0.8rem;">Harga per Kg</small>
|
||||
<h5 class="fw-bold text-success mb-0">
|
||||
Rp {{ number_format($produk->harga, 0, ',', '.') }}
|
||||
</h5>
|
||||
</div>
|
||||
<a href="{{ route('produk.detail', $produk->id) }}"
|
||||
class="btn btn-outline-success btn-sm stretched-link">
|
||||
Lihat <i class="fa fa-arrow-right ms-1"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="col-12">
|
||||
<div class="text-center py-5">
|
||||
<div class="mb-3">
|
||||
<i class="fas fa-seedling fa-4x text-muted opacity-50"></i>
|
||||
</div>
|
||||
<h4 class="text-muted fw-bold">Belum Ada Panen</h4>
|
||||
<p class="text-secondary">Produk kategori ini sedang tidak tersedia.</p>
|
||||
<button class="btn btn-primary mt-2" onclick="location.reload()">
|
||||
Refresh Halaman
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@endforelse
|
||||
|
|
@ -1,32 +1,57 @@
|
|||
@extends('layouts.frontend')
|
||||
@section('title', 'Pesan Saya')
|
||||
|
||||
@section('content')
|
||||
<div class="container py-5">
|
||||
<h2 class="mb-4">Pesan Saya</h2>
|
||||
<div class="card shadow-sm border-0">
|
||||
<div class="list-group list-group-flush">
|
||||
@forelse($chatList as $chat)
|
||||
<a href="{{ route('pembeli.pesan.show', $chat['lawan_id']) }}" class="list-group-item list-group-item-action py-3 d-flex align-items-center">
|
||||
<img src="{{ asset('template/frontend/img/avatar.jpg') }}" class="rounded-circle me-3" width="50" height="50">
|
||||
<div class="flex-grow-1">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1 text-primary">{{ $chat['nama'] }}</h5>
|
||||
<small class="text-muted">{{ $chat['time'] }}</small>
|
||||
</div>
|
||||
<p class="mb-1 text-muted">{{ Str::limit($chat['last_message'], 50) }}</p>
|
||||
</div>
|
||||
@if($chat['unread'] > 0)
|
||||
<span class="badge bg-danger rounded-pill ms-2">{{ $chat['unread'] }}</span>
|
||||
@endif
|
||||
</a>
|
||||
@empty
|
||||
<div class="text-center py-5">
|
||||
<i class="fa fa-envelope-open fa-3x text-muted mb-3"></i>
|
||||
<p class="text-muted">Belum ada percakapan. Mulai chat dari halaman detail produk.</p>
|
||||
<a href="{{ route('shop') }}" class="btn btn-outline-primary rounded-pill">Lihat Produk</a>
|
||||
<div class="container py-5">
|
||||
<h2 class="mb-4 fw-bold text-dark">Pesan Saya</h2>
|
||||
|
||||
<div class="row g-0 chat-container">
|
||||
<div class="col-md-4 chat-sidebar">
|
||||
<div class="p-3 bg-white sticky-top border-bottom">
|
||||
<input type="text" class="form-control rounded-pill" placeholder="Cari pesan...">
|
||||
</div>
|
||||
@endforelse
|
||||
|
||||
<div class="list-group list-group-flush">
|
||||
@forelse($chatList as $chat)
|
||||
<a href="{{ route('pembeli.pesan.show', $chat['lawan_id']) }}"
|
||||
class="list-group-item list-group-item-action chat-list-item py-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="position-relative">
|
||||
<img src="{{ asset('template/frontend/img/avatar.jpg') }}" class="rounded-circle"
|
||||
width="50" height="50" style="object-fit: cover;">
|
||||
@if ($chat['unread'] > 0)
|
||||
<span
|
||||
class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
|
||||
{{ $chat['unread'] }}
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
<div class="ms-3 flex-grow-1 overflow-hidden">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<h6 class="mb-0 text-dark fw-bold text-truncate">{{ $chat['nama'] }}</h6>
|
||||
<small class="text-muted" style="font-size: 0.75rem;">{{ $chat['time'] }}</small>
|
||||
</div>
|
||||
<p class="mb-0 text-muted text-truncate small">
|
||||
{{ Str::limit($chat['last_message'], 35) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@empty
|
||||
<div class="text-center py-5 px-3">
|
||||
<p class="text-muted">Belum ada percakapan.</p>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-8 d-none d-md-flex flex-column align-items-center justify-content-center bg-white">
|
||||
<div class="text-center opacity-50">
|
||||
<i class="fa fa-comments fa-4x text-success mb-3"></i>
|
||||
<h5>Selamat Datang di Chat</h5>
|
||||
<p>Pilih salah satu percakapan di sebelah kiri<br>untuk melihat detail pesan.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -1,77 +1,104 @@
|
|||
@extends('layouts.frontend')
|
||||
|
||||
@section('title', 'Chat dengan ' . $lawan->nama_lengkap)
|
||||
|
||||
@section('content')
|
||||
<div class="container-fluid page-header py-5 mb-5">
|
||||
<h1 class="text-center text-white display-6">Percakapan</h1>
|
||||
<ol class="breadcrumb justify-content-center mb-0">
|
||||
<li class="breadcrumb-item"><a href="{{ route('pembeli.pesan.index') }}" class="text-white">Pesan Saya</a></li>
|
||||
<li class="breadcrumb-item active text-white">Detail</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="container py-5">
|
||||
<div class="row g-0 chat-container">
|
||||
|
||||
<div class="container py-3">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8 col-md-10">
|
||||
<div class="col-md-4 chat-sidebar d-none d-md-block">
|
||||
<div class="p-3 bg-white sticky-top border-bottom">
|
||||
<input type="text" class="form-control rounded-pill" placeholder="Cari pesan...">
|
||||
</div>
|
||||
|
||||
<div class="card border shadow-sm">
|
||||
<div class="card-header bg-white py-3 border-bottom d-flex align-items-center">
|
||||
<a href="{{ route('pembeli.pesan.index') }}"
|
||||
class="btn btn-sm btn-outline-secondary rounded-circle me-3">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<div>
|
||||
<h6 class="mb-0 fw-bold">{{ $lawan->nama_lengkap }}</h6>
|
||||
<small class="text-muted">Petani</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body bg-light overflow-auto" id="chatBox" style="height: 500px;">
|
||||
@foreach ($chats as $chat)
|
||||
@php
|
||||
$isMe =
|
||||
$chat->pengirim_id == Auth::guard('pembeli')->id() &&
|
||||
$chat->pengirim_type == 'App\Models\Pembeli';
|
||||
@endphp
|
||||
|
||||
<div class="d-flex mb-3 {{ $isMe ? 'justify-content-end' : 'justify-content-start' }}">
|
||||
|
||||
<div class="p-3 rounded-3"
|
||||
style="max-width: 75%;
|
||||
{{ $isMe ? 'background-color: #0d6efd; color: white;' : 'background-color: white; border: 1px solid #dee2e6;' }}">
|
||||
|
||||
<p class="mb-1">{{ $chat->isi_pesan }}</p>
|
||||
|
||||
<div class="text-end">
|
||||
<small style="font-size: 11px; {{ $isMe ? 'color: #e0e0e0;' : 'color: #6c757d;' }}">
|
||||
{{ $chat->created_at->format('H:i') }}
|
||||
@if ($isMe)
|
||||
<i
|
||||
class="fas fa-check {{ $chat->sudah_dibaca ? 'text-warning' : '' }} ms-1"></i>
|
||||
@endif
|
||||
</small>
|
||||
<div class="list-group list-group-flush">
|
||||
@foreach ($chatList as $chat)
|
||||
<a href="{{ route('pembeli.pesan.show', $chat['lawan_id']) }}"
|
||||
class="list-group-item list-group-item-action chat-list-item py-3 {{ $chat['lawan_id'] == $lawan->id ? 'active' : '' }}">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="{{ asset('template/frontend/img/avatar.jpg') }}" class="rounded-circle"
|
||||
width="50" height="50" style="object-fit: cover;">
|
||||
<div class="ms-3 flex-grow-1 overflow-hidden">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<h6
|
||||
class="mb-0 fw-bold {{ $chat['lawan_id'] == $lawan->id ? 'text-dark' : 'text-dark' }}">
|
||||
{{ $chat['nama'] }}</h6>
|
||||
<small
|
||||
class="{{ $chat['lawan_id'] == $lawan->id ? 'text-muted' : 'text-muted' }}">{{ $chat['time'] }}</small>
|
||||
</div>
|
||||
<p
|
||||
class="mb-0 small text-truncate {{ $chat['lawan_id'] == $lawan->id ? 'text-dark' : 'text-muted' }}">
|
||||
{{ Str::limit($chat['last_message'], 30) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-8 chat-content">
|
||||
|
||||
{{-- Chat Header --}}
|
||||
<div class="chat-header d-flex align-items-center bg-white shadow-sm">
|
||||
<a href="{{ route('pembeli.pesan.index') }}" class="d-md-none me-3 text-dark">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
|
||||
<div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center fw-bold me-3"
|
||||
style="width: 45px; height: 45px;">
|
||||
{{ substr($lawan->nama_lengkap, 0, 1) }}
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="mb-0 fw-bold text-dark">{{ $lawan->nama_lengkap }}</h6>
|
||||
<small class="text-success"><i class="fas fa-store me-1"></i>{{ $lawan->nama_usaha }}</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-footer bg-white p-3">
|
||||
<form action="{{ route('pesan.kirim') }}" method="POST">
|
||||
@csrf
|
||||
<input type="hidden" name="penerima_id" value="{{ $lawan->id }}">
|
||||
{{-- Chat Box --}}
|
||||
<div class="chat-box" id="chatBox">
|
||||
@forelse ($chats as $chat)
|
||||
@php
|
||||
$isMe =
|
||||
$chat->pengirim_id == Auth::guard('pembeli')->id() &&
|
||||
$chat->pengirim_type == 'App\Models\Pembeli';
|
||||
@endphp
|
||||
|
||||
<div class="input-group">
|
||||
<input type="text" name="isi_pesan" class="form-control" placeholder="Tulis pesan..."
|
||||
required autocomplete="off">
|
||||
<button type="submit" class="btn btn-primary px-4">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</button>
|
||||
<div class="d-flex {{ $isMe ? 'justify-content-end' : 'justify-content-start' }} mb-3">
|
||||
<div class="message-bubble shadow-sm {{ $isMe ? 'message-me' : 'message-other' }}">
|
||||
<div>{{ $chat->isi_pesan }}</div>
|
||||
<div class="text-end mt-1" style="font-size: 0.65rem; opacity: 0.8;">
|
||||
{{ $chat->created_at->format('H:i') }}
|
||||
@if ($isMe)
|
||||
<i class="fas fa-check-double ms-1"></i>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="text-center py-5 mt-5">
|
||||
<p class="text-muted bg-white d-inline-block px-3 py-1 rounded-pill border">Mulai percakapan
|
||||
dengan {{ $lawan->nama_lengkap }}</p>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
|
||||
{{-- Footer Chat --}}
|
||||
<div class="chat-footer">
|
||||
<form action="{{ route('pesan.kirim') }}" method="POST" class="d-flex gap-2">
|
||||
@csrf
|
||||
<input type="hidden" name="penerima_id" value="{{ $lawan->id }}">
|
||||
<input type="hidden" name="penerima_type" value="{{ get_class($lawan) }}">
|
||||
|
||||
<input type="text" name="isi_pesan" class="form-control rounded-pill border-success"
|
||||
placeholder="Ketik pesan..." required autocomplete="off">
|
||||
|
||||
<button type="submit"
|
||||
class="btn btn-success rounded-circle d-flex align-items-center justify-content-center"
|
||||
style="width: 45px; height: 45px;">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -81,8 +108,14 @@ class="fas fa-check {{ $chat->sudah_dibaca ? 'text-warning' : '' }} ms-1"></i>
|
|||
@section('js')
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
var chatBox = document.getElementById("chatBox");
|
||||
chatBox.scrollTop = chatBox.scrollHeight;
|
||||
// Auto scroll ke bawah
|
||||
const chatBox = document.getElementById("chatBox");
|
||||
if (chatBox) {
|
||||
chatBox.scrollTop = chatBox.scrollHeight;
|
||||
}
|
||||
|
||||
// Fokus ke input
|
||||
$('input[name="isi_pesan"]').focus();
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -1,135 +1,151 @@
|
|||
|
||||
@extends('layouts.frontend')
|
||||
|
||||
@section('title', 'Pesanan Saya')
|
||||
|
||||
@section('content')
|
||||
<div class="container py-5">
|
||||
<h2 class="mb-4 fw-bold text-primary">Riwayat Pesanan</h2>
|
||||
|
||||
@if(session('success'))
|
||||
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
||||
<i class="fa fa-check-circle me-2"></i> {{ session('success') }}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
<div class="container py-5 mt-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h2 class="fw-bold text-dark">Riwayat Pesanan</h2>
|
||||
<a href="{{ route('shop') }}" class="btn btn-outline-primary btn-sm rounded-pill">
|
||||
<i class="fas fa-plus me-1"></i> Pesan Lagi
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="card border-0 shadow-sm rounded">
|
||||
<div class="card-body">
|
||||
@if($transaksis->isEmpty())
|
||||
<div class="text-center py-5">
|
||||
<i class="fas fa-shopping-basket fa-4x text-muted mb-3"></i>
|
||||
<p class="text-muted">Belum ada pesanan.</p>
|
||||
<a href="{{ route('shop') }}" class="btn btn-primary rounded-pill">Mulai Belanja</a>
|
||||
</div>
|
||||
@else
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle">
|
||||
<thead class="bg-light">
|
||||
<tr>
|
||||
<th>Invoice</th>
|
||||
<th>Tanggal</th>
|
||||
<th>Produk</th>
|
||||
<th>Total</th>
|
||||
<th>Status</th>
|
||||
<th>Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($transaksis as $trx)
|
||||
<tr>
|
||||
<td class="fw-bold text-primary">#{{ $trx->kode_invoice }}</td>
|
||||
<td>{{ \Carbon\Carbon::parse($trx->tanggal_transaksi)->format('d M Y') }}</td>
|
||||
<td>
|
||||
{{-- Tampilkan 1 produk utama saja agar tabel rapi --}}
|
||||
<div class="d-flex align-items-center mb-1">
|
||||
@php $firstItem = $trx->details->first(); @endphp
|
||||
<img src="{{ $firstItem->produk->foto_produk ? asset('storage/'.$firstItem->produk->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}" width="50" class="rounded me-2">
|
||||
<div>
|
||||
<small class="d-block fw-bold">{{ $firstItem->produk->nama_produk }}</small>
|
||||
@if($trx->details->count() > 1)
|
||||
<small class="text-muted">+ {{ $trx->details->count() - 1 }} produk lainnya</small>
|
||||
@else
|
||||
<small class="text-muted">{{ $firstItem->jumlah }} x Rp {{ number_format($firstItem->harga_satuan, 0, ',', '.') }}</small>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="fw-bold">Rp {{ number_format($trx->total_harga, 0, ',', '.') }}</td>
|
||||
<td>
|
||||
@if($trx->status == 'menunggu_konfirmasi')
|
||||
<span class="badge bg-warning text-dark"><i class="fas fa-clock me-1"></i> Menunggu Konfirmasi</span>
|
||||
@elseif($trx->status == 'diproses')
|
||||
<span class="badge bg-info text-white"><i class="fas fa-cog me-1"></i> Sedang Diproses</span>
|
||||
@elseif($trx->status == 'dikirim')
|
||||
<span class="badge bg-primary"><i class="fas fa-truck me-1"></i> Sedang Dikirim</span>
|
||||
@elseif($trx->status == 'selesai')
|
||||
<span class="badge bg-success"><i class="fas fa-check-circle me-1"></i> Selesai</span>
|
||||
@else
|
||||
<span class="badge bg-danger">Dibatalkan</span>
|
||||
@endif
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex gap-2">
|
||||
{{-- Tombol Detail (Trigger Modal) --}}
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary rounded-pill" data-bs-toggle="modal" data-bs-target="#detailModal{{ $trx->id }}">
|
||||
Detail
|
||||
</button>
|
||||
@if (session('success'))
|
||||
<div class="alert alert-success alert-dismissible fade show shadow-sm border-0" role="alert">
|
||||
<i class="fa fa-check-circle me-2"></i> {{ session('success') }}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- LOGIKA TOMBOL SELESAI --}}
|
||||
@if($trx->status == 'dikirim')
|
||||
<form action="{{ route('pesanan.selesai', $trx->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin barang sudah diterima dengan baik?')">
|
||||
@csrf
|
||||
<button type="submit" class="btn btn-sm btn-success rounded-pill">
|
||||
<i class="fas fa-check me-1"></i> Diterima
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- MODAL DETAIL PESANAN --}}
|
||||
<div class="modal fade" id="detailModal{{ $trx->id }}" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Detail Pesanan #{{ $trx->kode_invoice }}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p><strong>Status:</strong> {{ strtoupper($trx->status) }}</p>
|
||||
<p><strong>Alamat Pengiriman:</strong><br>{{ $trx->alamat_pengiriman }}</p>
|
||||
<hr>
|
||||
<h6>Daftar Produk:</h6>
|
||||
<ul class="list-group">
|
||||
@foreach($trx->details as $d)
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="{{ $d->produk->foto_produk ? asset('storage/'.$d->produk->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}" width="40" class="me-2 rounded">
|
||||
@if ($transaksis->isEmpty())
|
||||
<div class="text-center py-5 bg-light rounded-3">
|
||||
<i class="fas fa-receipt fa-4x text-muted mb-3 opacity-25"></i>
|
||||
<h5 class="text-muted">Belum ada riwayat pesanan.</h5>
|
||||
<a href="{{ route('shop') }}" class="btn btn-primary rounded-pill mt-3 px-4">Mulai Belanja</a>
|
||||
</div>
|
||||
@else
|
||||
<div class="row">
|
||||
@foreach ($transaksis as $trx)
|
||||
<div class="col-12 mb-3">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body p-4">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-8">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<div class="bg-light p-2 rounded me-3 text-center" style="width: 50px;">
|
||||
<i class="fas fa-file-invoice text-primary fs-4"></i>
|
||||
</div>
|
||||
<div>
|
||||
{{ $d->produk->nama_produk }}
|
||||
<small class="d-block text-muted">{{ $d->jumlah }} x Rp {{ number_format($d->harga_satuan, 0, ',', '.') }}</small>
|
||||
<h6 class="mb-0 fw-bold">Order #{{ $trx->kode_invoice }}</h6>
|
||||
<small
|
||||
class="text-muted">{{ \Carbon\Carbon::parse($trx->tanggal_transaksi)->format('d F Y') }}</small>
|
||||
</div>
|
||||
<div class="ms-3">
|
||||
@if ($trx->status == 'menunggu_konfirmasi')
|
||||
<span
|
||||
class="badge bg-warning text-dark bg-opacity-25 border border-warning">Menunggu</span>
|
||||
@elseif($trx->status == 'diproses')
|
||||
<span
|
||||
class="badge bg-info text-dark bg-opacity-25 border border-info">Diproses</span>
|
||||
@elseif($trx->status == 'dikirim')
|
||||
<span
|
||||
class="badge bg-primary text-primary bg-opacity-10 border border-primary">Dikirim</span>
|
||||
@elseif($trx->status == 'selesai')
|
||||
<span
|
||||
class="badge bg-success text-success bg-opacity-10 border border-success">Selesai</span>
|
||||
@else
|
||||
<span
|
||||
class="badge bg-danger text-danger bg-opacity-10 border border-danger">Batal</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<span class="fw-bold">Rp {{ number_format($d->subtotal, 0, ',', '.') }}</span>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
<div class="modal-footer justify-content-between">
|
||||
<span class="fw-bold fs-5">Total: Rp {{ number_format($trx->total_harga, 0, ',', '.') }}</span>
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
|
||||
|
||||
@php $firstItem = $trx->details->first(); @endphp
|
||||
<div class="d-flex align-items-center bg-light rounded p-2 mt-2">
|
||||
<img src="{{ $firstItem->produk->foto_produk ? asset('storage/' . $firstItem->produk->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}"
|
||||
width="40" height="40" class="rounded object-fit-cover me-3">
|
||||
<div class="text-truncate">
|
||||
<span class="fw-bold text-dark">{{ $firstItem->produk->nama_produk }}</span>
|
||||
@if ($trx->details->count() > 1)
|
||||
<span class="text-muted small ms-1">+ {{ $trx->details->count() - 1 }}
|
||||
produk lainnya</span>
|
||||
@else
|
||||
<span class="text-muted small ms-1">({{ $firstItem->jumlah }} kg)</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 text-md-end mt-3 mt-md-0">
|
||||
<p class="text-muted mb-1 small">Total Belanja</p>
|
||||
<h5 class="fw-bold text-primary mb-3">Rp
|
||||
{{ number_format($trx->total_harga, 0, ',', '.') }}</h5>
|
||||
|
||||
<div class="d-flex justify-content-md-end gap-2">
|
||||
<button class="btn btn-outline-secondary btn-sm rounded-pill px-3"
|
||||
data-bs-toggle="modal" data-bs-target="#detailModal{{ $trx->id }}">
|
||||
Detail
|
||||
</button>
|
||||
@if ($trx->status == 'dikirim')
|
||||
<form action="{{ route('pesanan.selesai', $trx->id) }}" method="POST"
|
||||
onsubmit="return confirm('Konfirmasi terima barang?')">
|
||||
@csrf
|
||||
<button type="submit" class="btn btn-success btn-sm rounded-pill px-3">
|
||||
Diterima
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- MODAL DETAIL --}}
|
||||
<div class="modal fade" id="detailModal{{ $trx->id }}" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content border-0">
|
||||
<div class="modal-header bg-light">
|
||||
<h5 class="modal-title fw-bold">Detail #{{ $trx->kode_invoice }}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label class="fw-bold small text-muted">Alamat Pengiriman</label>
|
||||
<p class="mb-0 bg-light p-2 rounded">{{ $trx->alamat_pengiriman }}</p>
|
||||
</div>
|
||||
<h6 class="fw-bold mt-4 mb-3">Daftar Item</h6>
|
||||
<ul class="list-group list-group-flush">
|
||||
@foreach ($trx->details as $d)
|
||||
<li
|
||||
class="list-group-item d-flex justify-content-between align-items-center px-0">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="{{ $d->produk->foto_produk ? asset('storage/' . $d->produk->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}"
|
||||
width="40" height="40" class="rounded me-2 object-fit-cover">
|
||||
<div>
|
||||
<div class="fw-bold">{{ $d->produk->nama_produk }}</div>
|
||||
<small class="text-muted">{{ $d->jumlah }} kg x
|
||||
{{ number_format($d->harga_satuan, 0, ',', '.') }}</small>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="fw-bold text-dark">{{ number_format($d->subtotal, 0, ',', '.') }}</span>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
<div class="modal-footer justify-content-between bg-light">
|
||||
<span class="text-muted small">Total Tagihan</span>
|
||||
<span class="fw-bold fs-5 text-primary">Rp
|
||||
{{ number_format($trx->total_harga, 0, ',', '.') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -6,13 +6,16 @@
|
|||
<div class="container py-5 mt-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white py-3">
|
||||
<div class="card border-0 shadow-sm rounded-4">
|
||||
<div class="card-header bg-white py-3 border-bottom-0">
|
||||
<h4 class="mb-0 fw-bold">Edit Profil</h4>
|
||||
</div>
|
||||
<div class="card-body p-4">
|
||||
@if (session('success'))
|
||||
<div class="alert alert-success">{{ session('success') }}</div>
|
||||
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
||||
{{ session('success') }}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form action="{{ route('pembeli.profile.update') }}" method="POST" enctype="multipart/form-data">
|
||||
|
|
@ -20,56 +23,85 @@
|
|||
@method('PUT')
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4 text-center mb-4">
|
||||
<img src="{{ $user->foto ? asset('storage/' . $user->foto) : asset('template/frontend/img/avatar.jpg') }}"
|
||||
class="rounded-circle img-thumbnail mb-3"
|
||||
style="width: 150px; height: 150px; object-fit: cover;">
|
||||
<div>
|
||||
<label class="btn btn-sm btn-outline-secondary">
|
||||
<i class="fas fa-camera me-1"></i> Ubah Foto
|
||||
<input type="file" name="foto" hidden accept="image/*">
|
||||
</label>
|
||||
<div class="col-md-4 text-center mb-4 d-flex flex-column align-items-center">
|
||||
<div class="position-relative mb-3">
|
||||
<img id="avatar-preview"
|
||||
src="{{ $user->foto ? asset('storage/' . $user->foto) : asset('template/frontend/img/avatar.jpg') }}"
|
||||
class="rounded-circle shadow-sm border"
|
||||
style="width: 150px; height: 150px; object-fit: cover;">
|
||||
|
||||
<div class="position-absolute bottom-0 end-0 bg-primary rounded-circle p-2 border border-white"
|
||||
style="width: 35px; height: 35px; display: flex; align-items: center; justify-content: center;">
|
||||
<i class="fas fa-camera text-white small"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="btn btn-sm btn-outline-primary rounded-pill px-3" for="avatar-input">
|
||||
<i class="fas fa-upload me-1"></i> Pilih Foto Baru
|
||||
</label>
|
||||
<input type="file" name="foto" id="avatar-input" hidden accept="image/*"
|
||||
onchange="previewImage()">
|
||||
</div>
|
||||
<small class="text-muted mt-2" style="font-size: 11px;">Format: JPG, PNG (Max.
|
||||
2MB)</small>
|
||||
</div>
|
||||
|
||||
<div class="col-md-8">
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-bold">Nama Lengkap</label>
|
||||
<input type="text" name="nama_lengkap" class="form-control"
|
||||
<label class="form-label fw-bold small text-muted">NAMA LENGKAP</label>
|
||||
<input type="text" name="nama_lengkap" class="form-control rounded-pill px-3"
|
||||
value="{{ $user->nama_lengkap }}" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-bold">Email</label>
|
||||
<input type="email" name="email" class="form-control"
|
||||
value="{{ $user->email }}" required>
|
||||
<label class="form-label fw-bold small text-muted">EMAIL</label>
|
||||
<input type="email" name="email" class="form-control rounded-pill px-3 bg-light"
|
||||
value="{{ $user->email }}" required readonly>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-bold">Nomor HP</label>
|
||||
<input type="text" name="no_hp" class="form-control"
|
||||
<label class="form-label fw-bold small text-muted">NOMOR HP</label>
|
||||
<input type="text" name="no_hp" class="form-control rounded-pill px-3"
|
||||
value="{{ $user->no_hp }}" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-bold">Alamat Pengiriman Default</label>
|
||||
<textarea name="alamat" class="form-control" rows="3" required>{{ $user->alamat }}</textarea>
|
||||
<label class="form-label fw-bold small text-muted">ALAMAT PENGIRIMAN DEFAULT</label>
|
||||
<textarea name="alamat" class="form-control rounded-4 p-3" rows="3" required>{{ $user->alamat }}</textarea>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<p class="text-muted small">Isi kolom di bawah HANYA jika ingin mengganti password.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">Password Baru</label>
|
||||
<input type="password" name="password" class="form-control">
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">Ulangi Password</label>
|
||||
<input type="password" name="password_confirmation" class="form-control">
|
||||
<div class="accordion mt-4" id="accordionPassword">
|
||||
<div class="accordion-item border-0">
|
||||
<h2 class="accordion-header">
|
||||
<button
|
||||
class="accordion-button collapsed bg-light rounded-3 shadow-none fw-bold text-dark"
|
||||
type="button" data-bs-toggle="collapse" data-bs-target="#collapsePass">
|
||||
<i class="fas fa-lock me-2 text-primary"></i> Ganti Password (Opsional)
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapsePass" class="accordion-collapse collapse"
|
||||
data-bs-parent="#accordionPassword">
|
||||
<div class="accordion-body px-0">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label small text-muted">Password Baru</label>
|
||||
<input type="password" name="password"
|
||||
class="form-control rounded-pill px-3">
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label small text-muted">Ulangi
|
||||
Password</label>
|
||||
<input type="password" name="password_confirmation"
|
||||
class="form-control rounded-pill px-3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-grid mt-3">
|
||||
<button type="submit" class="btn btn-primary rounded-pill py-2">Simpan
|
||||
Perubahan</button>
|
||||
<div class="d-grid mt-4">
|
||||
<button type="submit" class="btn btn-primary rounded-pill py-3 fw-bold shadow-sm">
|
||||
<i class="fas fa-save me-2"></i> Simpan Perubahan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -80,3 +112,22 @@ class="rounded-circle img-thumbnail mb-3"
|
|||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('js')
|
||||
<script>
|
||||
function previewImage() {
|
||||
const input = document.getElementById('avatar-input');
|
||||
const preview = document.getElementById('avatar-preview');
|
||||
|
||||
if (input.files && input.files[0]) {
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = function(e) {
|
||||
preview.src = e.target.result;
|
||||
}
|
||||
|
||||
reader.readAsDataURL(input.files[0]);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -1,92 +1,134 @@
|
|||
@extends('layouts.frontend')
|
||||
|
||||
@section('title', 'Belanja Sayur')
|
||||
@section('title', 'Belanja Padi & Beras')
|
||||
|
||||
@section('content')
|
||||
<!-- Single Page Header -->
|
||||
<div class="container-fluid page-header py-5" style="background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('{{ asset('template/frontend/img/cart-page-header-img.jpg') }}'); background-position: center center; background-repeat: no-repeat; background-size: cover;">
|
||||
<h1 class="text-center text-white display-6">Shop</h1>
|
||||
<ol class="breadcrumb justify-content-center mb-0">
|
||||
<li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-white">Home</a></li>
|
||||
<li class="breadcrumb-item active text-white">Shop</li>
|
||||
</ol>
|
||||
</div>
|
||||
<!-- Page Header -->
|
||||
<div class="container-fluid py-5 bg-light">
|
||||
<div class="container text-center">
|
||||
<h1 class="display-5 fw-bold text-dark">Belanja Produk Kami</h1>
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb justify-content-center mb-0">
|
||||
<li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
|
||||
<li class="breadcrumb-item active">Shop</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fruits Shop-->
|
||||
<div class="container-fluid fruite py-5">
|
||||
<!-- Shop Section -->
|
||||
<div class="container py-5">
|
||||
<h1 class="mb-4">Toko Sayur & Buah Segar</h1>
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-12">
|
||||
<div class="row g-4">
|
||||
<!-- SIDEBAR PENCARIAN -->
|
||||
<div class="col-xl-3">
|
||||
<div class="input-group w-100 mx-auto d-flex mb-4">
|
||||
<form action="{{ route('shop') }}" method="GET" class="w-100 d-flex shadow-sm rounded">
|
||||
<input type="search" name="search" class="form-control p-3 border-0" placeholder="Cari produk..." value="{{ request('search') }}" aria-describedby="search-icon-1" style="border-radius: 10px 0 0 10px;">
|
||||
<button type="submit" id="search-icon-1" class="input-group-text p-3 border-0 bg-light" style="border-radius: 0 10px 10px 0;"><i class="fa fa-search"></i></button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-12">
|
||||
<div class="mb-3">
|
||||
<h4>Kategori</h4>
|
||||
<ul class="list-unstyled fruite-categorie">
|
||||
<li>
|
||||
<div class="d-flex justify-content-between fruite-name">
|
||||
<a href="{{ route('shop') }}"><i class="fas fa-apple-alt me-2"></i>Semua Produk</a>
|
||||
<span>({{ $produks->total() }})</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Sidebar -->
|
||||
<div class="col-lg-3">
|
||||
<!-- Search -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="fw-bold mb-3">Cari Produk</h5>
|
||||
<form action="{{ route('shop') }}" method="GET">
|
||||
<div class="input-group">
|
||||
<input type="search" name="search" class="form-control" placeholder="Cari..."
|
||||
value="{{ request('search') }}">
|
||||
<button class="btn btn-success" type="submit">
|
||||
<i class="fa fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- GRID PRODUK -->
|
||||
<div class="col-lg-9">
|
||||
<div class="row g-4 justify-content-center">
|
||||
@forelse($produks as $produk)
|
||||
<div class="col-md-6 col-lg-6 col-xl-4">
|
||||
<div class="rounded position-relative fruite-item border border-secondary h-100">
|
||||
<div class="fruite-img">
|
||||
<img src="{{ $produk->foto_produk ? asset('storage/'.$produk->foto_produk) : asset('template/frontend/img/fruite-item-5.jpg') }}" class="img-fluid w-100 rounded-top" alt="{{ $produk->nama_produk }}" style="height: 200px; object-fit: cover;">
|
||||
</div>
|
||||
<div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">Segar</div>
|
||||
<div class="p-4 border-top-0 rounded-bottom">
|
||||
<h4>{{ $produk->nama_produk }}</h4>
|
||||
<p>{{ Str::limit($produk->deskripsi, 50) }}</p>
|
||||
<div class="d-flex justify-content-between flex-lg-wrap">
|
||||
<p class="text-dark fs-5 fw-bold mb-0">Rp {{ number_format($produk->harga, 0, ',', '.') }} / kg</p>
|
||||
<a href="{{ route('produk.detail', $produk->id) }}" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-eye me-2 text-primary"></i> Detail</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="col-12 text-center">
|
||||
<div class="alert alert-warning py-5">
|
||||
<i class="fas fa-search fa-3x mb-3 text-warning"></i>
|
||||
<h4>Produk tidak ditemukan</h4>
|
||||
<p>Coba kata kunci lain atau kembali lagi nanti.</p>
|
||||
<a href="{{ route('shop') }}" class="btn btn-outline-primary rounded-pill mt-3">Reset Pencarian</a>
|
||||
</div>
|
||||
</div>
|
||||
@endforelse
|
||||
|
||||
<!-- PAGINATION -->
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-center mt-5">
|
||||
{{ $produks->links() }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Info -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<h5 class="fw-bold mb-3">Informasi</h5>
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<i class="fas fa-check-circle text-success me-2"></i>
|
||||
<small>Total {{ $produks->total() }} Produk</small>
|
||||
</div>
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<i class="fas fa-leaf text-success me-2"></i>
|
||||
<small>100% Organik</small>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fas fa-truck text-success me-2"></i>
|
||||
<small>Gratis Ongkir Min. 50 Kg</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product Grid -->
|
||||
<div class="col-lg-9">
|
||||
<div class="row g-4">
|
||||
@forelse($produks as $produk)
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card border-0 shadow-sm h-100 product-card">
|
||||
<!-- Stock Badge -->
|
||||
<div class="position-absolute top-0 end-0 m-2 z-1">
|
||||
<span class="badge bg-warning text-dark">
|
||||
Stok: {{ $produk->stok }} Kg
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Image -->
|
||||
<div class="overflow-hidden" style="height: 200px;">
|
||||
<img src="{{ $produk->foto_produk ? asset('storage/' . $produk->foto_produk) : 'https://images.unsplash.com/photo-1586201375761-83865001e31c?q=80&w=800&auto=format&fit=crop' }}"
|
||||
class="card-img-top w-100 h-100" alt="{{ $produk->nama_produk }}"
|
||||
style="object-fit: cover;">
|
||||
</div>
|
||||
|
||||
<div class="card-body p-3">
|
||||
<span class="badge bg-success mb-2">{{ $produk->kategori ?? 'Umum' }}</span>
|
||||
<h6 class="fw-bold mb-2">{{ $produk->nama_produk }}</h6>
|
||||
<p class="text-muted small mb-3">{{ Str::limit($produk->deskripsi, 60) }}</p>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center pt-2 border-top">
|
||||
<div>
|
||||
<small class="text-muted">Harga/Kg</small>
|
||||
<h6 class="fw-bold text-success mb-0">
|
||||
Rp {{ number_format($produk->harga, 0, ',', '.') }}
|
||||
</h6>
|
||||
</div>
|
||||
<a href="{{ route('produk.detail', $produk->id) }}"
|
||||
class="btn btn-success btn-sm rounded-pill">
|
||||
<i class="fa fa-eye"></i> Detail
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="col-12">
|
||||
<div class="text-center py-5">
|
||||
<i class="fas fa-search fa-4x text-muted mb-3"></i>
|
||||
<h4 class="text-muted">Produk Tidak Ditemukan</h4>
|
||||
<p class="text-muted">Coba kata kunci lain atau hapus filter pencarian.</p>
|
||||
<a href="{{ route('shop') }}" class="btn btn-outline-success rounded-pill mt-2">
|
||||
<i class="fas fa-sync-alt me-2"></i> Reset Pencarian
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
@if ($produks->hasPages())
|
||||
<div class="d-flex justify-content-center mt-5">
|
||||
{{ $produks->links() }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
<style>
|
||||
.product-card {
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
</style>
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -16,6 +16,73 @@
|
|||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
|
||||
@yield('css')
|
||||
|
||||
<style>
|
||||
.chat-card {
|
||||
height: 80vh;
|
||||
overflow: hidden;
|
||||
border-radius: 15px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* Sidebar List Scroll */
|
||||
.chat-sidebar {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid #e9ecef;
|
||||
background-color: #f2f7ff;
|
||||
}
|
||||
|
||||
/* Chat Scroll */
|
||||
.chat-window {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.chat-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
/* Item List di Sidebar */
|
||||
.chat-item {
|
||||
transition: all 0.3s;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chat-item:hover {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
|
||||
.chat-item.active {
|
||||
background-color: #2d46a18f;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.chat-item.active p,
|
||||
.chat-item.active small,
|
||||
.chat-item.active h6 {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #ccc;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -21,110 +21,292 @@
|
|||
<link href="{{ asset('template/frontend/css/style.css') }}" rel="stylesheet">
|
||||
|
||||
@yield('css')
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--primary-color: #81c408;
|
||||
--primary-hover: #6da705;
|
||||
--secondary-color: #ffc107;
|
||||
--light-bg: #f8f9fa;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
background-color: var(--light-bg);
|
||||
}
|
||||
|
||||
|
||||
.text-primary {
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background-color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
.border-primary {
|
||||
border-color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--primary-hover);
|
||||
border-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
color: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.btn-outline-primary:hover {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: var(--secondary-color);
|
||||
border-color: var(--secondary-color);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.navbar-light .navbar-nav .nav-link.active,
|
||||
.navbar-light .navbar-nav .nav-link:hover {
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
.rounded-pill {
|
||||
border-radius: 50rem !important;
|
||||
}
|
||||
|
||||
.rounded-4 {
|
||||
border-radius: 1rem !important;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.footer-accent {
|
||||
border-bottom: 1px solid rgba(129, 196, 8, 0.5);
|
||||
}
|
||||
|
||||
/* Chat Section */
|
||||
.chat-container {
|
||||
height: 80vh;
|
||||
background: #fff;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.chat-sidebar {
|
||||
background-color: #f8f9fa;
|
||||
border-right: 1px solid #e9ecef;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.chat-list-item {
|
||||
transition: all 0.2s;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chat-list-item:hover {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
|
||||
.chat-list-item.active {
|
||||
background-color: #e3f2fd;
|
||||
border-left: 4px solid #81c408;
|
||||
}
|
||||
|
||||
.chat-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
background: #fff;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
background-color: #fcfcfc;
|
||||
background-image: radial-gradient(#81c408 0.5px, transparent 0.5px);
|
||||
background-size: 20px 20px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Bubble Chat */
|
||||
.message-bubble {
|
||||
max-width: 70%;
|
||||
padding: 10px 15px;
|
||||
border-radius: 15px;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.message-me {
|
||||
background-color: #81c408;
|
||||
color: white;
|
||||
border-bottom-right-radius: 2px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.message-other {
|
||||
background-color: #e9ecef;
|
||||
color: #333;
|
||||
border-bottom-left-radius: 2px;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.chat-footer {
|
||||
padding: 15px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #ccc;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Spinner -->
|
||||
<div id="spinner"
|
||||
class="show w-100 vh-100 bg-white position-fixed translate-middle top-50 start-50 d-flex align-items-center justify-content-center">
|
||||
<div class="spinner-grow text-primary" role="status"></div>
|
||||
</div>
|
||||
|
||||
<!-- Navbar -->
|
||||
<div class="container-fluid fixed-top">
|
||||
<div class="container topbar bg-primary d-none d-lg-block">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div class="top-info ps-2">
|
||||
<small class="me-3"><i class="fas fa-map-marker-alt me-2 text-secondary"></i> <a href="#"
|
||||
class="text-white">Desa Sukamaju, Indonesia</a></small>
|
||||
<small class="me-3"><i class="fas fa-envelope me-2 text-secondary"></i><a href="#"
|
||||
class="text-white">info@tanidesa.com</a></small>
|
||||
</div>
|
||||
<div class="top-link pe-2">
|
||||
<a href="#" class="text-white"><small class="text-white mx-2">Kebijakan Privasi</small>/</a>
|
||||
<a href="#" class="text-white"><small class="text-white mx-2">Syarat & Ketentuan</small></a>
|
||||
<div class="container-fluid bg-primary d-none d-lg-block">
|
||||
<div class="container">
|
||||
<div class="topbar">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div class="top-info ps-2">
|
||||
<small class="me-3"><i class="fas fa-map-marker-alt me-2 text-secondary"></i> <a
|
||||
href="#" class="text-white">Desa Sukamaju, Indonesia</a></small>
|
||||
<small class="me-3"><i class="fas fa-envelope me-2 text-secondary"></i><a href="#"
|
||||
class="text-white">info@tanidesa.com</a></small>
|
||||
</div>
|
||||
<div class="top-link pe-2">
|
||||
<a href="#" class="text-white"><small class="text-white mx-2">Kebijakan
|
||||
Privasi</small>/</a>
|
||||
<a href="#" class="text-white"><small class="text-white mx-2">Syarat &
|
||||
Ketentuan</small></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container px-0">
|
||||
<nav class="navbar navbar-light bg-white navbar-expand-xl">
|
||||
<a href="{{ url('/') }}" class="navbar-brand">
|
||||
<h1 class="text-primary display-6">TaniDesa</h1>
|
||||
</a>
|
||||
<button class="navbar-toggler py-2 px-3" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarCollapse">
|
||||
<span class="fa fa-bars text-primary"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse bg-white" id="navbarCollapse">
|
||||
<div class="navbar-nav mx-auto">
|
||||
<a href="{{ url('/') }}"
|
||||
class="nav-item nav-link {{ request()->is('/') ? 'active' : '' }}">Home</a>
|
||||
<a href="{{ route('shop') }}"
|
||||
class="nav-item nav-link {{ request()->is('shop*') ? 'active' : '' }}">Belanja</a>
|
||||
<a href="#" class="nav-item nav-link">Kontak</a>
|
||||
</div>
|
||||
|
||||
<div class="d-flex m-3 me-0 align-items-center">
|
||||
<!-- Search bar -->
|
||||
<form action="{{ route('shop') }}" method="GET" class="d-flex me-4">
|
||||
<div class="input-group">
|
||||
<input type="search" name="search" class="form-control border border-secondary"
|
||||
placeholder="Cari..." aria-label="Search" value="{{ request('search') }}">
|
||||
<button class="btn btn-outline-secondary" type="submit">
|
||||
<i class="fas fa-search text-primary"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="container-fluid bg-white shadow-sm">
|
||||
<div class="container">
|
||||
<nav class="navbar navbar-light navbar-expand-xl">
|
||||
<a href="{{ url('/') }}" class="navbar-brand">
|
||||
<h1 class="text-primary display-6">TaniDesa</h1>
|
||||
</a>
|
||||
<button class="navbar-toggler py-2 px-3" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarCollapse">
|
||||
<span class="fa fa-bars text-primary"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse bg-white" id="navbarCollapse">
|
||||
<div class="navbar-nav mx-auto">
|
||||
<a href="{{ url('/') }}"
|
||||
class="nav-item nav-link {{ request()->is('/') ? 'active' : '' }}">Home</a>
|
||||
<a href="{{ route('shop') }}"
|
||||
class="nav-item nav-link {{ request()->is('shop*') ? 'active' : '' }}">Belanja</a>
|
||||
<a href="#" class="nav-item nav-link">Kontak</a>
|
||||
</div>
|
||||
|
||||
<!-- Cart -->
|
||||
<a href="{{ route('cart') }}" class="position-relative me-4 my-auto">
|
||||
<i class="fa fa-shopping-bag fa-2x"></i>
|
||||
|
||||
<span
|
||||
class="position-absolute bg-secondary rounded-circle d-flex align-items-center justify-content-center text-dark px-1"
|
||||
style="top: -5px; left: 15px; height: 20px; min-width: 20px;">
|
||||
{{ count((array) session('cart')) }}
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<!-- User Account -->
|
||||
@if (Auth::guard('pembeli')->check())
|
||||
<div class="nav-item dropdown">
|
||||
<a href="#" class="nav-link dropdown-toggle my-auto" data-bs-toggle="dropdown">
|
||||
<i class="fas fa-user fa-2x"></i>
|
||||
<span
|
||||
class="d-none d-xl-inline ms-1">{{ Auth::guard('pembeli')->user()->nama_lengkap }}</span>
|
||||
</a>
|
||||
<div class="dropdown-menu m-0 bg-secondary rounded-0">
|
||||
<a href="{{ route('pembeli.profile') }}" class="dropdown-item">Profil Saya</a>
|
||||
|
||||
<a href="{{ route('pembeli.pesan.index') }}" class="dropdown-item">Pesan Saya</a>
|
||||
|
||||
<a href="{{ route('pesanan.saya') }}" class="dropdown-item">Pesanan Saya</a>
|
||||
|
||||
<form action="{{ route('logout') }}" method="POST">
|
||||
@csrf
|
||||
<button type="submit" class="dropdown-item">Logout</button>
|
||||
</form>
|
||||
<div class="d-flex m-3 me-0 align-items-center">
|
||||
<form action="{{ route('shop') }}" method="GET" class="d-flex me-4">
|
||||
<div class="input-group">
|
||||
<input type="search" name="search" class="form-control border border-secondary"
|
||||
placeholder="Cari..." value="{{ request('search') }}"
|
||||
style="border-radius: 20px 0 0 20px;">
|
||||
<button class="btn btn-outline-secondary border border-secondary" type="submit"
|
||||
style="border-radius: 0 20px 20px 0;">
|
||||
<i class="fas fa-search text-primary"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<a href="{{ route('login') }}" class="my-auto">
|
||||
<i class="fas fa-user fa-2x"></i> Login
|
||||
</form>
|
||||
|
||||
<a href="{{ route('cart') }}" class="position-relative me-4 my-auto">
|
||||
<i class="fa fa-shopping-bag fa-2x text-dark"></i>
|
||||
<span
|
||||
class="position-absolute bg-secondary rounded-circle d-flex align-items-center justify-content-center text-dark px-1"
|
||||
style="top: -5px; left: 15px; height: 20px; min-width: 20px;">
|
||||
{{ count((array) session('cart')) }}
|
||||
</span>
|
||||
</a>
|
||||
@endif
|
||||
|
||||
@if (Auth::guard('pembeli')->check())
|
||||
<div class="nav-item dropdown">
|
||||
<a href="#" class="nav-link dropdown-toggle my-auto text-dark fw-bold"
|
||||
data-bs-toggle="dropdown">
|
||||
<i class="fas fa-user fa-2x me-1"></i>
|
||||
<span
|
||||
class="d-none d-xl-inline">{{ Auth::guard('pembeli')->user()->nama_lengkap }}</span>
|
||||
</a>
|
||||
<div class="dropdown-menu m-0 bg-secondary rounded-0">
|
||||
<a href="{{ route('pembeli.profile') }}" class="dropdown-item">Profil Saya</a>
|
||||
<a href="{{ route('pembeli.pesan.index') }}" class="dropdown-item">Pesan
|
||||
Saya</a>
|
||||
<a href="{{ route('pesanan.saya') }}" class="dropdown-item">Pesanan Saya</a>
|
||||
<form action="{{ route('logout') }}" method="POST">
|
||||
@csrf
|
||||
<button type="submit" class="dropdown-item">Logout</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<a href="{{ route('login') }}" class="my-auto btn btn-primary rounded-pill px-4">
|
||||
<i class="fas fa-user me-2"></i> Login
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div style="margin-top: 150px;">
|
||||
@if (session('success'))
|
||||
<div class="container mt-3">
|
||||
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
||||
<div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
|
||||
<i class="fa fa-check-circle me-2"></i> {{ session('success') }}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</div>
|
||||
|
|
@ -133,16 +315,14 @@ class="d-none d-xl-inline ms-1">{{ Auth::guard('pembeli')->user()->nama_lengkap
|
|||
|
||||
@yield('content')
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="container-fluid bg-dark text-white-50 footer pt-5 mt-5">
|
||||
<div class="container-fluid bg-dark text-white-50 footer">
|
||||
<div class="container py-5">
|
||||
<div class="pb-4 mb-4" style="border-bottom: 1px solid rgba(226, 175, 24, 0.5) ;">
|
||||
<div class="pb-4 mb-4 footer-accent">
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-3">
|
||||
<a href="#">
|
||||
<h1 class="text-primary mb-0">TaniDesa</h1>
|
||||
<p class="text-secondary mb-0">Segar & Organik</p>
|
||||
<p class="text-secondary mb-0">Platform Pangan Langsung Petani</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
|
|
@ -156,7 +336,7 @@ class="btn btn-primary border-0 border-secondary py-3 px-4 position-absolute rou
|
|||
</div>
|
||||
<div class="col-lg-3">
|
||||
<div class="d-flex justify-content-end pt-3">
|
||||
<a class="btn btn-outline-secondary me-2 btn-md-square rounded-circle" href=""><i
|
||||
<a class="btn btn-outline-secondary me-2 btn-md-square rounded-circle" href=""><i
|
||||
class="fab fa-twitter"></i></a>
|
||||
<a class="btn btn-outline-secondary me-2 btn-md-square rounded-circle" href=""><i
|
||||
class="fab fa-facebook-f"></i></a>
|
||||
|
|
@ -172,43 +352,37 @@ class="fab fa-linkedin-in"></i></a>
|
|||
<div class="col-lg-3 col-md-6">
|
||||
<div class="footer-item">
|
||||
<h4 class="text-light mb-3">Tentang Kami</h4>
|
||||
<p class="mb-4">TaniDesa adalah platform yang menghubungkan petani lokal langsung dengan
|
||||
Anda. Kami menjamin kesegaran dan harga yang adil bagi petani.</p>
|
||||
<p class="mb-4">TaniDesa memotong rantai pasok yang panjang, memberikan harga terbaik untuk
|
||||
petani dan kesegaran maksimal untuk pembeli.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="d-flex flex-column text-start footer-item">
|
||||
<h4 class="text-light mb-3">Informasi Toko</h4>
|
||||
<a class="btn-link" href="">Tentang Kami</a>
|
||||
<a class="btn-link" href="">Hubungi Kami</a>
|
||||
<a class="btn-link" href="">Kebijakan Privasi</a>
|
||||
<a class="btn-link" href="">Syarat & Ketentuan</a>
|
||||
<h4 class="text-light mb-3">Menu Cepat</h4>
|
||||
<a class="btn-link" href="{{ route('shop') }}">Belanja Sekarang</a>
|
||||
<a class="btn-link" href="#">Hubungi Kami</a>
|
||||
<a class="btn-link" href="#">Syarat & Ketentuan</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="d-flex flex-column text-start footer-item">
|
||||
<h4 class="text-light mb-3">Akun</h4>
|
||||
<a class="btn-link" href="#">Profil Saya</a>
|
||||
<a class="btn-link" href="#">Keranjang Belanja</a>
|
||||
<a class="btn-link" href="#">Riwayat Pesanan</a>
|
||||
<a class="btn-link" href="{{ route('pembeli.profile') }}">Profil Saya</a>
|
||||
<a class="btn-link" href="{{ route('cart') }}">Keranjang Belanja</a>
|
||||
<a class="btn-link" href="{{ route('pesanan.saya') }}">Riwayat Pesanan</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="footer-item">
|
||||
<h4 class="text-light mb-3">Kontak</h4>
|
||||
<p>Alamat: Desa Sukamaju, Indonesia</p>
|
||||
<p>Alamat: Desa Sukamaju, Nganjuk</p>
|
||||
<p>Email: info@tanidesa.com</p>
|
||||
<p>Telepon: +62 812 3456 7890</p>
|
||||
<div class="payment-methods">
|
||||
<i class="fab fa-cc-visa fa-2x text-light me-2"></i>
|
||||
<i class="fab fa-cc-mastercard fa-2x text-light me-2"></i>
|
||||
<i class="fas fa-money-bill-wave fa-2x text-light"></i>
|
||||
</div>
|
||||
<p>WA: +62 812 3456 7890</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid copyright bg-dark py-4">
|
||||
<div class="container-fluid copyright bg-dark py-4" style="border-top: 1px solid rgba(255,255,255,0.1);">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
|
||||
|
|
@ -221,13 +395,11 @@ class="fas fa-copyright text-light me-2"></i>TaniDesa</a>, All right
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Back to Top -->
|
||||
<a href="#" class="btn btn-primary border-3 border-primary rounded-circle back-to-top"><i
|
||||
class="fa fa-arrow-up"></i></a>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<script src="{{ asset('template/frontend/lib/easing/easing.min.js') }}"></script>
|
||||
<script src="{{ asset('template/frontend/lib/waypoints/waypoints.min.js') }}"></script>
|
||||
<script src="{{ asset('template/frontend/lib/lightbox/js/lightbox.min.js') }}"></script>
|
||||
|
|
|
|||
|
|
@ -1,37 +1,65 @@
|
|||
@extends('layouts.admin')
|
||||
@section('title', 'Chat')
|
||||
@section('title', 'Kotak Masuk')
|
||||
|
||||
@section('content')
|
||||
<div class="card" style="height: 75vh;">
|
||||
<section class="section">
|
||||
<div class="card chat-card shadow-sm">
|
||||
<div class="row g-0 h-100">
|
||||
<div class="col-md-4 border-end h-100 overflow-auto">
|
||||
<div class="p-3 bg-light border-bottom">
|
||||
<h6 class="mb-0">Daftar Percakapan</h6>
|
||||
|
||||
<div class="col-md-4 chat-sidebar">
|
||||
<div class="p-4 border-bottom bg-white sticky-top">
|
||||
<h5 class="mb-3 text-primary"><i class="bi bi-chat-left-text-fill"></i> Percakapan</h5>
|
||||
<div class="form-group position-relative has-icon-right mb-0">
|
||||
<input type="text" class="form-control" placeholder="Cari pembeli...">
|
||||
<div class="form-control-icon">
|
||||
<i class="bi bi-search"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-group list-group-flush">
|
||||
@forelse($chatList as $chat)
|
||||
<a href="{{ route('petani.pesan.show', $chat['lawan_id']) }}"
|
||||
class="list-group-item list-group-item-action py-3">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h6 class="mb-1 text-primary">{{ $chat['nama'] }}</h6>
|
||||
<small class="text-muted" style="font-size: 11px">{{ $chat['time'] }}</small>
|
||||
<a href="{{ route('petani.pesan.show', $chat['lawan_id']) }}" class="list-group-item list-group-item-action chat-item p-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar avatar-lg me-3">
|
||||
<img src="{{ asset('assets/compiled/jpg/1.jpg') }}" alt="Avatar"> @if($chat['unread'] > 0)
|
||||
<span class="avatar-status bg-danger"></span>
|
||||
@endif
|
||||
</div>
|
||||
<div class="flex-grow-1 text-truncate">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<h6 class="mb-0 text-dark">{{ $chat['nama'] }}</h6>
|
||||
<small class="text-muted" style="font-size: 11px">{{ $chat['time'] }}</small>
|
||||
</div>
|
||||
<p class="mb-0 small text-muted text-truncate">
|
||||
{{ Str::limit($chat['last_message'], 30) }}
|
||||
</p>
|
||||
</div>
|
||||
@if($chat['unread'] > 0)
|
||||
<span class="badge bg-danger rounded-pill ms-2">{{ $chat['unread'] }}</span>
|
||||
@endif
|
||||
</div>
|
||||
<p class="mb-1 text-truncate small text-secondary">{{ $chat['last_message'] }}</p>
|
||||
@if ($chat['unread'] > 0)
|
||||
<span class="badge bg-danger rounded-pill">{{ $chat['unread'] }}</span>
|
||||
@endif
|
||||
</a>
|
||||
@empty
|
||||
<div class="p-4 text-center text-muted">Belum ada pesan.</div>
|
||||
<div class="text-center p-5">
|
||||
<i class="bi bi-inbox x-3 text-muted"></i>
|
||||
<p class="text-muted mt-2">Belum ada pesan masuk.</p>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-8 h-100 d-flex align-items-center justify-content-center bg-white">
|
||||
<div class="text-center text-muted">
|
||||
<i class="bi bi-chat-dots display-1"></i>
|
||||
<p class="mt-3">Pilih kontak di sebelah kiri untuk mulai chatting.</p>
|
||||
<div class="col-md-8 d-none d-md-flex align-items-center justify-content-center bg-white flex-column">
|
||||
<div class="text-center opacity-50">
|
||||
<div class="mb-3">
|
||||
<i class="bi bi-chat-square-dots text-primary" style="font-size: 5rem;"></i>
|
||||
</div>
|
||||
<h4 class="text-primary">Selamat Datang, Pak Tani!</h4>
|
||||
<p class="text-secondary">Pilih percakapan di sebelah kiri untuk melihat detail pesan.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
</section>
|
||||
@endsection
|
||||
|
|
@ -1,95 +1,135 @@
|
|||
@extends('layouts.admin')
|
||||
|
||||
@section('title', 'Chat dengan ' . $lawan->nama_lengkap)
|
||||
@section('title', 'Chat: ' . $lawan->nama_lengkap)
|
||||
|
||||
@section('content')
|
||||
<section class="section">
|
||||
<div class="card" style="height: 85vh; display: flex; flex-direction: column;">
|
||||
<div class="card chat-card shadow-sm">
|
||||
<div class="row g-0 h-100">
|
||||
|
||||
{{-- HEADER CHAT --}}
|
||||
<div class="card-header bg-primary py-3 d-flex align-items-center justify-content-between">
|
||||
<div class="d-flex align-items-center text-white">
|
||||
<a href="{{ route('petani.pesan.index') }}" class="btn btn-light btn-sm me-3 rounded-circle"
|
||||
style="width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;">
|
||||
<i class="bi bi-arrow-left text-primary"></i>
|
||||
</a>
|
||||
<div>
|
||||
<h6 class="mb-0 text-white font-bold" style="font-size: 1.1rem;">{{ $lawan->nama_lengkap }}</h6>
|
||||
<small style="opacity: 0.8; font-size: 0.8rem;">
|
||||
{{ $lawan->role ?? 'Pembeli' }}
|
||||
</small>
|
||||
<div class="col-md-4 chat-sidebar d-none d-md-block">
|
||||
<div class="p-4 border-bottom bg-white sticky-top">
|
||||
<h5 class="mb-3 text-primary"><i class="bi bi-chat-left-text-fill"></i> Percakapan</h5>
|
||||
<div class="form-group position-relative has-icon-right mb-0">
|
||||
<input type="text" class="form-control" placeholder="Cari pembeli...">
|
||||
<div class="form-control-icon">
|
||||
<i class="bi bi-search"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-group list-group-flush">
|
||||
@foreach ($chatList as $chat)
|
||||
<a href="{{ route('petani.pesan.show', $chat['lawan_id']) }}"
|
||||
class="list-group-item list-group-item-action chat-item p-3 {{ $chat['lawan_id'] == $lawan->id ? 'active' : '' }}">
|
||||
<div class="d-flex align-items-center">
|
||||
|
||||
<div class="avatar avatar-lg me-3">
|
||||
<span class="avatar-content bg-primary text-white">
|
||||
{{ substr($chat['nama'], 0, 1) }}
|
||||
</span>
|
||||
@if ($chat['unread'] > 0)
|
||||
<span class="avatar-status bg-danger"></span>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="flex-grow-1 text-truncate">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<h6
|
||||
class="mb-0 {{ $chat['lawan_id'] == $lawan->id ? 'text-white' : 'text-dark' }}">
|
||||
{{ $chat['nama'] }}
|
||||
</h6>
|
||||
<small
|
||||
class="{{ $chat['lawan_id'] == $lawan->id ? 'text-white' : 'text-muted' }}"
|
||||
style="font-size: 11px">{{ $chat['time'] }}</small>
|
||||
</div>
|
||||
<p
|
||||
class="mb-0 small text-truncate {{ $chat['lawan_id'] == $lawan->id ? 'text-white' : 'text-muted' }}">
|
||||
{{ Str::limit($chat['last_message'], 30) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- INBOX SECTION (SCROLLABLE) --}}
|
||||
<div class="card-body p-4" id="chatContainer"
|
||||
style="flex-grow: 1; overflow-y: auto; background-color: #f2f7ff;">
|
||||
<div class="d-flex flex-column gap-3">
|
||||
@forelse($chats as $chat)
|
||||
@php
|
||||
$isMe =
|
||||
$chat->pengirim_id == Auth::guard('petani')->id() &&
|
||||
$chat->pengirim_type == 'App\Models\Petani';
|
||||
@endphp
|
||||
<div class="col-md-8 chat-window">
|
||||
|
||||
{{-- Logic Posisi: Kalau SAYA di Kanan (end), Kalau DIA di Kiri (start) --}}
|
||||
<div class="d-flex w-100 {{ $isMe ? 'justify-content-end' : 'justify-content-start' }}">
|
||||
<div class="p-3 border-bottom bg-white d-flex align-items-center shadow-sm z-index-1">
|
||||
<a href="{{ route('petani.pesan.index') }}"
|
||||
class="btn btn-sm btn-light me-3 d-md-none rounded-circle">
|
||||
<i class="bi bi-arrow-left"></i>
|
||||
</a>
|
||||
|
||||
<div style="max-width: 70%; min-width: 120px;">
|
||||
{{-- Bubble Chat --}}
|
||||
<div class="p-3 shadow-sm position-relative"
|
||||
style="border-radius: 15px;
|
||||
<div class="avatar avatar-md me-3">
|
||||
<div class="avatar-content bg-primary text-white font-bold">
|
||||
{{ substr($lawan->nama_lengkap, 0, 1) }}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="mb-0 text-dark">{{ $lawan->nama_lengkap }}</h6>
|
||||
<small class="text-muted">{{ $lawan->role ?? 'Pembeli' }}</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-content" id="chatContainer">
|
||||
@forelse($chats as $chat)
|
||||
@php
|
||||
$isMe =
|
||||
$chat->pengirim_id == Auth::guard('petani')->id() &&
|
||||
$chat->pengirim_type == 'App\Models\Petani';
|
||||
@endphp
|
||||
|
||||
<div class="d-flex w-100 mb-3 {{ $isMe ? 'justify-content-end' : 'justify-content-start' }}">
|
||||
<div style="max-width: 70%;">
|
||||
<div class="p-3 shadow-sm position-relative"
|
||||
style="border-radius: 15px;
|
||||
border-{{ $isMe ? 'bottom-right' : 'bottom-left' }}-radius: 0;
|
||||
background-color: {{ $isMe ? '#435ebe' : '#ffffff' }};
|
||||
color: {{ $isMe ? '#ffffff' : '#212529' }};">
|
||||
|
||||
<p class="mb-1" style="font-size: 0.95rem; line-height: 1.4;">
|
||||
{{ $chat->isi_pesan }}
|
||||
</p>
|
||||
<p class="mb-1" style="font-size: 0.95rem; line-height: 1.5;">
|
||||
{{ $chat->isi_pesan }}
|
||||
</p>
|
||||
|
||||
<div class="d-flex justify-content-end align-items-center mt-1">
|
||||
<small style="font-size: 0.7rem; opacity: 0.8; margin-right: 4px;">
|
||||
{{ $chat->created_at->format('H:i') }}
|
||||
</small>
|
||||
@if ($isMe)
|
||||
<i class="bi {{ $chat->sudah_dibaca ? 'bi-check-all text-info' : 'bi-check' }}"
|
||||
style="font-size: 0.9rem;"></i>
|
||||
@endif
|
||||
<div class="d-flex justify-content-end align-items-center mt-1">
|
||||
<small style="font-size: 0.7rem; opacity: 0.8; margin-right: 4px;">
|
||||
{{ $chat->created_at->format('H:i') }}
|
||||
</small>
|
||||
@if ($isMe)
|
||||
<i class="bi {{ $chat->sudah_dibaca ? 'bi-check-all text-info' : 'bi-check' }}"
|
||||
style="font-size: 0.9rem;"></i>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="text-center my-5">
|
||||
<span class="badge bg-light-secondary text-secondary p-3 rounded-pill">
|
||||
Belum ada percakapan. Mulailah menyapa! 👋
|
||||
</span>
|
||||
</div>
|
||||
@endforelse
|
||||
@empty
|
||||
<div class="text-center my-5">
|
||||
<span class="badge bg-light-secondary text-secondary p-3 rounded-pill">
|
||||
Belum ada percakapan. Sapa pembeli Anda! 👋
|
||||
</span>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
<div class="p-3 bg-white border-top">
|
||||
<form action="{{ route('pesan.kirim') }}" method="POST" class="d-flex gap-2 align-items-center">
|
||||
@csrf
|
||||
<input type="hidden" name="penerima_id" value="{{ $lawan->id }}">
|
||||
|
||||
<div class="input-group">
|
||||
<input type="text" name="isi_pesan" class="form-control" placeholder="Ketik pesan..."
|
||||
required autocomplete="off">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="bi bi-send-fill"></i> Kirim
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- FOOTER INPUT PESAN --}}
|
||||
<div class="card-footer bg-white py-3 border-top">
|
||||
<form action="{{ route('pesan.kirim') }}" method="POST" class="d-flex gap-2 align-items-center">
|
||||
@csrf
|
||||
{{-- Input Hidden Data Penerima --}}
|
||||
<input type="hidden" name="penerima_id" value="{{ $lawan->id }}">
|
||||
|
||||
{{-- Input Text --}}
|
||||
<div class="input-group">
|
||||
<input type="text" name="isi_pesan" class="form-control form-control-lg border-0 bg-light"
|
||||
placeholder="Ketik pesan..." required autocomplete="off" style="border-radius: 20px;">
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-lg ms-2 rounded-circle"
|
||||
style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;">
|
||||
<i class="bi bi-send-fill fs-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,44 +4,56 @@
|
|||
@section('page-title', 'Tambah Produk Baru')
|
||||
|
||||
@section('content')
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form action="{{ route('petani.produk.store') }}" method="POST" enctype="multipart/form-data">
|
||||
@csrf
|
||||
|
||||
<div class="form-group mb-3">
|
||||
<label>Nama Produk</label>
|
||||
<input type="text" name="nama_produk" class="form-control" required>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form action="{{ route('petani.produk.store') }}" method="POST" enctype="multipart/form-data">
|
||||
@csrf
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group mb-3">
|
||||
<label>Harga (Rp)</label>
|
||||
<input type="number" name="harga" class="form-control" required>
|
||||
<div class="form-group mb-3">
|
||||
<label>Nama Produk</label>
|
||||
<input type="text" name="nama_produk" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">Kategori Padi/Beras</label>
|
||||
<select name="kategori" class="form-select" required>
|
||||
<option value="Pandan Wangi">Pandan Wangi</option>
|
||||
<option value="IR 64">IR 64 (Setra Ramos)</option>
|
||||
<option value="Ketan">Ketan (Putih/Hitam)</option>
|
||||
<option value="Merah">Beras Merah</option>
|
||||
<option value="Hitam">Beras Hitam</option>
|
||||
<option value="Lainnya">Lainnya</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group mb-3">
|
||||
<label>Harga (Rp)</label>
|
||||
<input type="number" name="harga" class="form-control" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group mb-3">
|
||||
<label>Stok</label>
|
||||
<input type="number" name="stok" class="form-control" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group mb-3">
|
||||
<label>Stok</label>
|
||||
<input type="number" name="stok" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group mb-3">
|
||||
<label>Deskripsi</label>
|
||||
<textarea name="deskripsi" class="form-control" rows="4" required></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group mb-3">
|
||||
<label>Deskripsi</label>
|
||||
<textarea name="deskripsi" class="form-control" rows="4" required></textarea>
|
||||
</div>
|
||||
<div class="form-group mb-3">
|
||||
<label>Foto Produk</label>
|
||||
<input type="file" name="foto_produk" class="form-control" accept="image/*" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group mb-3">
|
||||
<label>Foto Produk</label>
|
||||
<input type="file" name="foto_produk" class="form-control" accept="image/*" required>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">Simpan Produk</button>
|
||||
<a href="{{ route('petani.produk.index') }}" class="btn btn-secondary">Batal</a>
|
||||
</form>
|
||||
<button type="submit" class="btn btn-primary">Simpan Produk</button>
|
||||
<a href="{{ route('petani.produk.index') }}" class="btn btn-secondary">Batal</a>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -4,49 +4,61 @@
|
|||
@section('page-title', 'Edit Produk')
|
||||
|
||||
@section('content')
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form action="{{ route('petani.produk.update', $produk->id) }}" method="POST" enctype="multipart/form-data">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
|
||||
<div class="form-group mb-3">
|
||||
<label>Nama Produk</label>
|
||||
<input type="text" name="nama_produk" class="form-control" value="{{ $produk->nama_produk }}" required>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form action="{{ route('petani.produk.update', $produk->id) }}" method="POST" enctype="multipart/form-data">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group mb-3">
|
||||
<label>Harga (Rp)</label>
|
||||
<input type="number" name="harga" class="form-control" value="{{ $produk->harga }}" required>
|
||||
<div class="form-group mb-3">
|
||||
<label>Nama Produk</label>
|
||||
<input type="text" name="nama_produk" class="form-control" value="{{ $produk->nama_produk }}" required>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">Kategori Padi/Beras</label>
|
||||
<select name="kategori" class="form-select" required>
|
||||
<option value="Pandan Wangi">Pandan Wangi</option>
|
||||
<option value="IR 64">IR 64 (Setra Ramos)</option>
|
||||
<option value="Ketan">Ketan (Putih/Hitam)</option>
|
||||
<option value="Merah">Beras Merah</option>
|
||||
<option value="Hitam">Beras Hitam</option>
|
||||
<option value="Lainnya">Lainnya</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group mb-3">
|
||||
<label>Harga (Rp)</label>
|
||||
<input type="number" name="harga" class="form-control" value="{{ $produk->harga }}" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group mb-3">
|
||||
<label>Stok</label>
|
||||
<input type="number" name="stok" class="form-control" value="{{ $produk->stok }}" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group mb-3">
|
||||
<label>Stok</label>
|
||||
<input type="number" name="stok" class="form-control" value="{{ $produk->stok }}" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group mb-3">
|
||||
<label>Deskripsi</label>
|
||||
<textarea name="deskripsi" class="form-control" rows="4" required>{{ $produk->deskripsi }}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group mb-3">
|
||||
<label>Deskripsi</label>
|
||||
<textarea name="deskripsi" class="form-control" rows="4" required>{{ $produk->deskripsi }}</textarea>
|
||||
</div>
|
||||
<div class="form-group mb-3">
|
||||
<label>Foto Produk (Biarkan kosong jika tidak ingin mengganti)</label>
|
||||
<input type="file" name="foto_produk" class="form-control" accept="image/*">
|
||||
@if ($produk->foto_produk)
|
||||
<small class="text-muted">Foto saat ini:</small><br>
|
||||
<img src="{{ asset('storage/' . $produk->foto_produk) }}" width="100" class="mt-2 rounded">
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="form-group mb-3">
|
||||
<label>Foto Produk (Biarkan kosong jika tidak ingin mengganti)</label>
|
||||
<input type="file" name="foto_produk" class="form-control" accept="image/*">
|
||||
@if($produk->foto_produk)
|
||||
<small class="text-muted">Foto saat ini:</small><br>
|
||||
<img src="{{ asset('storage/'.$produk->foto_produk) }}" width="100" class="mt-2 rounded">
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-success">Update Produk</button>
|
||||
<a href="{{ route('petani.produk.index') }}" class="btn btn-secondary">Batal</a>
|
||||
</form>
|
||||
<button type="submit" class="btn btn-success">Update Produk</button>
|
||||
<a href="{{ route('petani.produk.index') }}" class="btn btn-secondary">Batal</a>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
use App\Http\Controllers\AuthController;
|
||||
use App\Http\Controllers\AdminController;
|
||||
use App\Http\Controllers\CartController;
|
||||
use App\Http\Controllers\ForgotPasswordController;
|
||||
use App\Http\Controllers\LandingController;
|
||||
use App\Http\Controllers\PesanController;
|
||||
use App\Http\Controllers\Petani\DashboardController;
|
||||
|
|
@ -40,6 +41,12 @@
|
|||
|
||||
Route::get('/register', [AuthController::class, 'showRegisterForm'])->name('register');
|
||||
Route::post('/register-proses', [AuthController::class, 'registerProcess'])->name('register.proses');
|
||||
|
||||
Route::get('/forgot-password', [ForgotPasswordController::class, 'showLinkRequestForm'])->name('password.request');
|
||||
Route::post('/forgot-password', [ForgotPasswordController::class, 'sendResetLinkEmail'])->name('password.email');
|
||||
|
||||
Route::get('/reset-password/{token}', [ForgotPasswordController::class, 'showResetForm'])->name('password.reset');
|
||||
Route::post('/reset-password', [ForgotPasswordController::class, 'reset'])->name('password.update');
|
||||
});
|
||||
|
||||
// Logout
|
||||
|
|
|
|||
Loading…
Reference in New Issue