File: /home/posscale/public_html/printmanager/resources/views/tenant/dashboard.blade.php
<?php
use Illuminate\Support\Facades\DB;
?>
<x-app-layout>
<x-slot name="header">
<h1 class="mb-0 uppercase text-3xl">
{{ __('Dashboard') }}
</h1>
</x-slot>
<div class="grid grid-cols-4 mb-lg">
<div class="card animate-fadeIn">
<div class="card-body">
<a href="{{route('printers.index')}}">
<div class="d-flex justify-between align-center">
<div>
<h3 class="text-primary mb-sm">{{$totalPrinters}}</h3>
<p class="text-muted mb-0">Total Printers</p>
</div>
<i class="fas fa-print fa-2x text-primary"></i>
</div>
</a>
</div>
</div>
<div class="card animate-fadeIn">
<div class="card-body">
<a href="{{route('printers.index')}}?low_toner=1">
<div class="d-flex justify-between align-center">
<div>
<h3 class="text-warning mb-sm">{{ $totalLowTonner }}</h3>
<p class="text-muted mb-0">Low Toner</p>
</div>
<i class="fas fa-fill-drip fa-2x text-warning"></i>
</div>
</a>
</div>
</div>
<div class="card animate-fadeIn">
<div class="card-body">
<div class="d-flex justify-between align-center">
<div>
<h3 class="text-error mb-sm">{{$printerErrorCount}}</h3>
<p class="text-muted mb-0">Errors</p>
</div>
<i class="fas fa-exclamation-triangle fa-2x text-error"></i>
</div>
</div>
</div>
<div class="card animate-fadeIn">
<div class="card-body">
<div class="d-flex justify-between align-center">
<div>
<h3 class="text-success mb-sm">{{ $ordersThisMonth }}</h3>
<p class="text-muted mb-0">Orders This Month</p>
</div>
<i class="fas fa-shopping-cart fa-2x text-success"></i>
</div>
</div>
</div>
</div>
@if(session()->has('message'))
<div class="alert alert-success text-white p-4 bg-green-900 font-semibold text-l mb-8">
{{ session()->get('message') }}
</div>
@endif
<div class="card mb-lg">
<div class="card-header">
<h3 class="card-title">
<i class="fas fa-print"></i>
ASSIGNED PRINTERS
</h3>
</div>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th class="border-b dark:border-slate-600 font-medium p-4 pl-8 pt-0 pb-3 text-center">Status</th>
<th class="border-b dark:border-slate-600 font-medium p-4 pl-8 pt-0 pb-3 text-left">Printer</th>
<th class="border-b dark:border-slate-600 font-medium p-4 pl-8 pt-0 pb-3 text-left">Name</th>
<th class="border-b dark:border-slate-600 font-medium p-4 pl-8 pt-0 pb-3 text-left"> Make</th>
<th class="border-b dark:border-slate-600 font-medium p-4 pl-8 pt-0 pb-3 text-left"> Model</th>
<th class="border-b dark:border-slate-600 font-medium p-4 pl-8 pt-0 pb-3 text-left">Meter Date</th>
<th class="border-b dark:border-slate-600 font-medium p-4 pl-8 pt-0 pb-3 text-left">Toner Level</th>
<th class="border-b dark:border-slate-600 font-medium p-4 pl-8 pt-0 pb-3 text-left">Toner Stock</th>
<th class="border-b dark:border-slate-600 font-medium p-4 pl-8 pt-0 pb-3 text-left">Printed Pages</th>
<th class="border-b dark:border-slate-600 font-medium p-4 pl-8 pt-0 pb-3 text-left">Scanned Pages</th>
</tr>
</thead>
<tbody>
@foreach($printers as $printer)
@php
$job = $printer->jobs()->latest()->first();
@endphp
<tr>
<td class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8 text-blue-500 text-center">
<span class="rounded w-2 h-2 inline-block bg-{{$printer->smtp_status?'green':($printer->smtp_active?'red':'blue')}}-600"></span>
</td>
<td class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8 text-blue-500 "><a href="{{route('printers.show', $printer->id)}}"> {{ $printer->equipment_id }}</a></td>
<td class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8 ">{{ $printer->model_name }}</td>
<td class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8 ">{{ $printer->make }}</td>
<td class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8 ">{{ $printer->model }}</td>
<td class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8 ">{{ isset($job)?$job->mail_date:'-'}}</td>
<td class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8 ">{{ $printer->toner_pr != ''?$printer->toner_pr."%":'-'}}</td>
<td class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8 ">{{ $printer->toner_stock != ''?$printer->toner_stock:'-'}}</td>
<td class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8 ">{{ isset($job)?$job->printed_total:'-'}}</td>
<td class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8 ">{{ isset($job)?$job->scanned_total:'-'}}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
<div class="card mb-lg">
<div class="card-header">
<h3 class="card-title">
<i class="fas fa-print"></i>
UN-ASSIGNED PRINTERS
</h3>
</div>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th class="border-b dark:border-slate-600 font-medium p-4 pl-8 pt-0 pb-3 text-left">Printer</th>
<th class="border-b dark:border-slate-600 font-medium p-4 pl-8 pt-0 pb-3 text-left">Name</th>
<!-- <th class="border-b dark:border-slate-600 font-medium p-4 pl-8 pt-0 pb-3 text-left">Make</th> -->
<th class="border-b dark:border-slate-600 font-medium p-4 pl-8 pt-0 pb-3 text-left">Model</th>
<!-- <th class="border-b dark:border-slate-600 font-medium p-4 pl-8 pt-0 pb-3 text-left">Toner Type</th> -->
<!-- <th class="border-b dark:border-slate-600 font-medium p-4 pl-8 pt-0 pb-3 text-left">Paper Feed Rollers</th> -->
<th class="border-b dark:border-slate-600 font-medium p-4 pl-8 pt-0 pb-3 text-left">Action</th>
</tr>
</thead>
<tbody>
@foreach($unassined_printers as $printer)
<tr>
<td class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8 ">{{ $printer->equipment_id }}</td>
<td class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8 ">{{ $printer->model_name }}</td>
<td class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8 ">{{ $printer->model }}</td>
<td class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8 ">
<a x-data href="javascript:void(0);" class="btn btn-primary" @click="$dispatch('open-assign', { printer_id:'{{$printer->id}}',serial_number:'{{$printer->serial_number}}',model:'{{$printer->model}}',equipment_id:'{{$printer->equipment_id}}',email:'{{($printer->reception->email??'')}}',name:'{{($printer->reception->name??'')}}'})">
ASSIGN
</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
<div x-data="{ open: false, url:'', printer_id:'0', serial_number:'',model:'',equipment_id:'',email:'',name:'' ,customer_id:'',address_id:''}">
<div @open-assign.window="customer_id='';address_id='';printer_id=$event.detail.printer_id;serial_number=$event.detail.serial_number;model=$event.detail.model;equipment_id=$event.detail.equipment_id;email=$event.detail.email;name=$event.detail.name;open=true;" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" x-show="open" style="display: none" x-cloak>
<!-- Modal -->
<div class="flex items-center justify-center min-h-screen">
<div class="bg-white p-6 rounded-lg overflow-hidden shadow-xl transform transition-all sm:max-w-lg sm:w-full" x-transition:enter="ease-out duration-100" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0">
<!-- Modal header -->
<form action="{{route('dashboard.assign')}}" method="POST">
@csrf
@method('POST')
<input type="hidden" name="printer_id" x-bind:value="printer_id">
<h2 class="block mb-2 font-medium text-slate-700 text-xl"> PRINTER CUSTOMER</h2>
<hr class="block mb-5">
<div class="grid grid-cols-2 gap-4">
<label class="block">
<span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">Select Customer & location</span>
<select name="customer_id" x-model="customer_id" required id="customer_id" class="mt-1 px-3 py-2 bg-white border text-slate-700 shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1">
<option value="">Select</option>
@if($customers_list)
@foreach($customers_list as $customer)
<option {{ ( $customer->id == ($printer['customer_id']??old('customer_id'))) ? 'selected' : '' }} value="{{$customer->id}}">{{$customer->name}}({{$customer->email}})</option>
@endforeach
@endif
</select>
<a x-data href="javascript:void(0);" @click="$dispatch('open-assign-customer', { printer_id:5})" class="mt-2 block text-blue-500">
Add new
</a>
</label>
<label class="block">
<span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">Select address</span>
<select x-model="address_id" required name="address_id" id="address_id" class="mt-1 px-3 py-2 bg-white border shadow-sm text-slate-700 border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1">
<option value="">Select</option>
</select>
<a x-show="customer_id" href="javascript:void(0);" @click="$dispatch('open-assign-address', { customer_id: customer_id })" class=" mt-2 block text-blue-500">
Add new
</a>
</label>
<label class="block">
<span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">Model</span>
<input type="text" x-bind:value="model" required name="model" id="model" class="mt-1 px-3 py-2 text-slate-700 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" />
</label>
<label class="block">
<span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">Serial</span>
<input type="text" x-bind:value="serial_number" required name="serial_number" id="serial_number" class="mt-1 px-3 py-2 text-slate-700 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" />
</label>
<label class="block">
<span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">Equipment ID</span>
<input type="text" x-bind:value="equipment_id" required name="equipment_id" id="equipment_id" class="mt-1 px-3 py-2 text-slate-700 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" />
</label>
<label class="block">
<span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">Email</span>
<input type="email" x-bind:value="email" required name="rec_email" id="rec_email" class="mt-1 px-3 py-2 bg-white border text-slate-700 shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" />
</label>
<label class="block">
<span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">Name</span>
<input type="text" x-bind:value="name" required name="rec_name" id="rec_name" class="mt-1 px-3 py-2 bg-white border text-slate-700 shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" />
</label>
</div>
<!-- Modal footer -->
<div class="flex items-center justify-start gap-2 mt-10">
<button type="submit" class="w-full inline-flex justify-center rounded-md border border-[#3b82f6] px-4 py-2 bg-[#3b82f6] hover:bg-transparent text-base font-medium text-white hover:text-[#28166f] sm:w-auto sm:text-sm">
ASSIGN
</button>
<button type="button" class="w-full inline-flex justify-center rounded-md border border-gray-500 px-4 py-2 font-medium text-black focus:outline-none focus:ring-2 focus:ring-offset-2 bg-gray-800 focus:ring-gray-500 sm:w-auto sm:text-sm" @click="open = false">
CANCEL
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div x-data="{ open_customer: false, url:'', printer_id:'0' }" x-ref="parent">
<div @open-assign-customer.window="printer_id=$event.detail.printer_id;open_customer=true;" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" x-show="open_customer" style="display: none" x-cloak>
<!-- Modal -->
<div class="flex items-center justify-center min-h-screen">
<div class="bg-white p-6 rounded-lg overflow-hidden shadow-xl transform transition-all sm:max-w-lg sm:w-full" @click.away="open_customer = false" x-transition:enter="ease-out duration-100" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0">
<!-- Modal header -->
<form x-data="customerForm()"
@submit.prevent="validateAndSubmit"
id="add_customer_and_address" action="{{route('dashboard.add_customer_address')}}" method="POST">
@csrf
@method('POST')
<h2 class="block mb-2 font-medium text-slate-700 text-xl"> ADD CUSTOMER</h2>
<hr class="block mb-5">
<div class="grid grid-cols-2 gap-4">
<label class="block">
<span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">Business</span>
<input value="" type="text" name="name" x-model="form.name" class="mt-1 px-3 py-2 text-slate-700 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="Please enter name">
<span class="text-red-700" :class="{ 'hidden': errors.name == undefined || errors.name == '' }" x-text="errors.name"></span>
</label>
<label class="block">
<span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">Email</span>
<input value="" type="email" name="email" x-model="form.email" :class="{ 'red': errors.email != undefined && errors.email != '' }" class="mt-1 px-3 py-2 text-slate-700 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="Please enter email">
<span class="text-red-700" :class="{ 'hidden': errors.email == undefined || errors.email == '' }" x-text="errors.email"></span>
</label>
<label class="block">
<span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">Phone</span>
<input value="" type="text" name="phone" x-model="form.phone" class="mt-1 px-3 py-2 text-slate-700 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="Please enter phone no.">
<span class="text-red-700" :class="{ 'hidden': errors.phone == undefined || errors.phone == '' }" x-text="errors.phone"></span>
</label>
</div>
<h2 class="block mb-2 mt-5 font-medium text-slate-700 text-xl"> ADD CUSTOMER ADDRESS</h2>
<hr class="block mb-5">
<div class="grid grid-cols-2 gap-4">
<label class="block">
<span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">Address</span>
<textarea name="address" id="address" x-model="form.address" class="mt-1 px-3 py-2 text-slate-700 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" spellcheck="false"></textarea>
<span class="text-red-700" :class="{ 'hidden': errors.address == undefined || errors.address == '' }" x-text="errors.address"></span>
</label>
<label class="block">
<span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">City</span>
<input value="" type="text" name="city" x-model="form.city" class="mt-1 px-3 py-2 text-slate-700 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="Please enter city">
<span class="text-red-700" :class="{ 'hidden': errors.city == undefined || errors.city == '' }" x-text="errors.city"></span>
</label>
<label class="block">
<span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">State</span>
<input value="" type="text" name="state" x-model="form.state" class="mt-1 px-3 py-2 text-slate-700 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="Please enter state">
<span class="text-red-700" :class="{ 'hidden': errors.state == undefined || errors.state == '' }" x-text="errors.state"></span>
</label>
<label class="block">
<span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">ZIP</span>
<input value="" type="text" name="zip" x-model="form.zip" class="mt-1 px-3 py-2 text-slate-700 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="Please enter zip">
<span class="text-red-700" :class="{ 'hidden': errors.zip == undefined || errors.zip == '' }" x-text="errors.zip"></span>
</label>
</div>
<!-- Modal footer -->
<div class="flex items-center justify-start gap-2 mt-10">
<button type="submit" class="w-full inline-flex justify-center rounded-md border border-[#3b82f6] px-4 py-2 bg-[#3b82f6] hover:bg-transparent text-base font-medium text-white hover:text-[#28166f] sm:w-auto sm:text-sm">
SAVE
</button>
<button type="button" class="w-full inline-flex justify-center rounded-md border border-gray-500 px-4 py-2 font-medium text-black focus:outline-none focus:ring-2 focus:ring-offset-2 bg-gray-800 focus:ring-gray-500 sm:w-auto sm:text-sm" @click="open_customer = false">
CANCEL
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div x-data="{ open_address: false, url:'', customer_id:'0' }">
<div @open-assign-address.window="customer_id=$event.detail.customer_id;open_address=true;" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" x-show="open_address" style="display: none" x-cloak>
<!-- Modal -->
<div class="flex items-center justify-center min-h-screen">
<div class="bg-white p-6 rounded-lg overflow-hidden shadow-xl transform transition-all sm:max-w-lg sm:w-full" @click.away="open_address = false" x-transition:enter="ease-out duration-100" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0">
<!-- Modal header -->
<form action="{{route('dashboard.add_customer_new_address')}}" x-data="customerAdderessForm(customer_id)" @submit.prevent="validateAndSubmitAddress(customer_id)" method="POST">
@csrf
@method('POST')
<input type="hidden" name="customer_id" x-model="form.customer_id" x-bind:value="customer_id">
<h2 class="block mb-2 font-medium text-slate-700 text-xl"> ADD CUSTOMER ADDRESS</h2>
<hr class="block mb-5">
<div class="grid grid-cols-2 gap-4">
<label class="block">
<span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">Address</span>
<textarea x-model="form.address" name="address" id="address" class="mt-1 px-3 py-2 text-slate-700 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" spellcheck="false"></textarea>
<span class="text-red-700" :class="{ 'hidden': errors.address == undefined || errors.address == '' }" x-text="errors.address"></span>
</label>
<label class="block">
<span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">City</span>
<input x-model="form.city" value="" type="text" name="city" class="mt-1 px-3 py-2 text-slate-700 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="Please enter city">
<span class="text-red-700" :class="{ 'hidden': errors.city == undefined || errors.city == '' }" x-text="errors.city"></span>
</label>
<label class="block">
<span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">State</span>
<input x-model="form.state" value="" type="text" name="state" class="mt-1 px-3 py-2 text-slate-700 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="Please enter state">
<span class="text-red-700" :class="{ 'hidden': errors.state == undefined || errors.state == '' }" x-text="errors.state"></span>
</label>
<label class="block">
<span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">ZIP</span>
<input x-model="form.zip" value="" type="text" name="zip" class="mt-1 px-3 py-2 text-slate-700 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="Please enter phone no.">
<span class="text-red-700" :class="{ 'hidden': errors.zip == undefined || errors.zip == '' }" x-text="errors.zip"></span>
</label>
</div>
<!-- Modal footer -->
<div class="flex items-center justify-start gap-2 mt-10">
<button type="submit" class="w-full inline-flex justify-center rounded-md border border-[#3b82f6] px-4 py-2 bg-[#3b82f6] hover:bg-transparent text-base font-medium text-white hover:text-[#28166f] sm:w-auto sm:text-sm">
SAVE
</button>
<button type="button" class="w-full inline-flex justify-center rounded-md border border-gray-500 px-4 py-2 font-medium text-black focus:outline-none focus:ring-2 focus:ring-offset-2 bg-gray-800 focus:ring-gray-500 sm:w-auto sm:text-sm" @click="open_address = false">
CANCEL
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
document.getElementById('customer_id').addEventListener('change', function() {
let categoryId = this.value;
fetch(`/printers/get-address/${categoryId}`)
.then(response => response.json())
.then(data => {
let subcategory = document.getElementById('address_id');
subcategory.innerHTML = '<option value="">Select</option>';
data.forEach(item => {
let option = document.createElement('option');
option.value = item.id;
option.textContent = item.address + ', ' + item.city + ', ' + item.state + ', ' + item.zip;
subcategory.appendChild(option);
});
});
});
function customerForm() {
return {
form: {
name: '',
email: '',
phone: '',
address: '',
state: '',
city: '',
zip: ''
// Add more fields here
},
errors: {},
validateAndSubmit() {
this.errors = {};
// First: validation AJAX call
fetch("{{ route('dashboard.add_customer_address.validate') }}", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(this.form),
})
.then(async response => {
if (!response.ok) {
const res = await response.json();
this.errors = res.errors || {};
if (this.errors.length > 0) {
}
throw new Error('Validation failed');
}
// Second: actual submission
return fetch("{{ route('dashboard.add_customer_address') }}", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
},
body: JSON.stringify(this.form),
});
})
.then(response => response.json())
.then(data => {
const select = document.getElementById('customer_id');
const option = document.createElement('option');
option.value = data.customer.id;
option.text = data.customer.email;
option.selected = true; // Optional: pre-select the new one
select.appendChild(option);
// alert('Form submitted successfully!');
this.open_customer = false;
this.form = {
name: '',
email: '',
phone: '',
address: '',
state: '',
city: '',
zip: ''
// Add more fields here
}
var event = new Event('change');
select.dispatchEvent(event);
}).catch(error => {
if (error.message !== 'Validation failed') {
alert('Something went wrong.');
}
});
}
}
}
function customerAdderessForm(customer_id) {
console.log(customer_id);
return {
form: {
address: '',
state: '',
city: '',
zip: '',
customer_id: 0,
},
errors: {},
validateAndSubmitAddress(customer_id) {
this.errors = {};
this.form.customer_id = customer_id;
// First: validation AJAX call
fetch("{{ route('dashboard.address.validate') }}", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(this.form),
})
.then(async response => {
if (!response.ok) {
const res = await response.json();
this.errors = res.errors || {};
if (this.errors.length > 0) {
}
throw new Error('Validation failed');
}
// Second: actual submission
return fetch("{{ route('dashboard.add_customer_new_address') }}", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
},
body: JSON.stringify(this.form),
});
})
.then(response => response.json())
.then(data => {
const select = document.getElementById('address_id');
const option = document.createElement('option');
option.value = data.address.id;
option.text = data.address.address + ', ' + data.address.city + ', ' + data.address.state + ', ' + data.address.zip;
option.selected = true;
select.appendChild(option);
this.open_address = false;
this.form = {
address: '',
state: '',
city: '',
zip: '',
customer_id: 0,
}
// Reset form or redirect, etc.
}).catch(error => {
if (error.message !== 'Validation failed') {
alert('Something went wrong.');
}
});
}
}
}
</script>
</x-app-layout>