File: /home/posscale/public_html/printmanager/resources/views/tenant/printer/list.blade.php
<x-app-layout>
<x-slot name="header">
<h1 class="mb-0 uppercase text-3xl">
{{ __('Manage Printers') }}
</h1>
</x-slot>
<div class="py-12">
<div class="">
@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 flex">
<h3 class="card-title w-80">
<i class="fas fa-print"></i>
ASSIGNED PRINTERS
</h3>
<div class="flex w-full items-center justify-end gap-2">
<form action="{{ route('printers.index') }}" method="GET">
<div class="flex flex-1 items-center justify-end">
<label class="group relative flex items-center">
<input placeholder="Search" value="{{$search}}" name="search" type="search" autocomplete="off" class="form-input mr-2">
<button type="submit" class="btn-primary inline-flex items-center px-4 py-3 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">Search</button>
</label>
</div>
</form>
<a href="{{ route('printers.create') }}" class="btn-primary inline-flex items-center px-4 py-3 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">Add New</a>
</div>
</div>
<div class="card-body ">
<table class="table">
<thead>
<tr class="uppercase text-sm font-medium text-gray-900 text-slate-700 font-semibold">
<th>Equipment ID</th>
<th>Name</th>
<th>Serial Number</th>
<th>Toner Level</th>
<th>Toner Stock</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
@forelse($printers as $printer)
<tr class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8">
<td class="py-4">{{ $printer->equipment_id }}</td>
<td class="py-4">{{ $printer->model_name }}</td>
<td class="py-4">{{ $printer->serial_number }}</td>
<td class="py-4">{{ $printer->toner_pr != ''?$printer->toner_pr."%":'-'}}</td>
<td class="py-4">{{ $printer->toner_stock != ''?$printer->toner_stock:'-'}}</td>
<td class="py-4 w-80 text-white">
<a href="{{ route('printers.edit', $printer->id)}}" class="text-[#ffffff] border rounded border-[#ffffff] inline-block mr-2 font-medium p-2 hover:bg-[#3b82f6] hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 inline-block mr-1">
<path d="M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32L19.513 8.2Z" />
</svg>
EDIT
</a>
<a href="{{ route('printers.show', $printer->id)}}" class="text-[#ffffff] border rounded border-[#ffffff] inline-block mr-2 font-medium p-2 hover:bg-[#3b82f6] hover:text-white">
<svg class="w-4 h-4 inline-block mr-1 " fill="currentColor" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 442.04 442.04" xml:space="preserve">
<g>
<g>
<path d="M221.02,341.304c-49.708,0-103.206-19.44-154.71-56.22C27.808,257.59,4.044,230.351,3.051,229.203 c-4.068-4.697-4.068-11.669,0-16.367c0.993-1.146,24.756-28.387,63.259-55.881c51.505-36.777,105.003-56.219,154.71-56.219 c49.708,0,103.207,19.441,154.71,56.219c38.502,27.494,62.266,54.734,63.259,55.881c4.068,4.697,4.068,11.669,0,16.367 c-0.993,1.146-24.756,28.387-63.259,55.881C324.227,321.863,270.729,341.304,221.02,341.304z M29.638,221.021c9.61,9.799,27.747,27.03,51.694,44.071c32.83,23.361,83.714,51.212,139.688,51.212s106.859-27.851,139.688-51.212 c23.944-17.038,42.082-34.271,51.694-44.071c-9.609-9.799-27.747-27.03-51.694-44.071 c-32.829-23.362-83.714-51.212-139.688-51.212s-106.858,27.85-139.688,51.212C57.388,193.988,39.25,211.219,29.638,221.021z" />
</g>
<g>
<path d="M221.02,298.521c-42.734,0-77.5-34.767-77.5-77.5c0-42.733,34.766-77.5,77.5-77.5c18.794,0,36.924,6.814,51.048,19.188 c5.193,4.549,5.715,12.446,1.166,17.639c-4.549,5.193-12.447,5.714-17.639,1.166c-9.564-8.379-21.844-12.993-34.576-12.993 c-28.949,0-52.5,23.552-52.5,52.5s23.551,52.5,52.5,52.5c28.95,0,52.5-23.552,52.5-52.5c0-6.903,5.597-12.5,12.5-12.5 s12.5,5.597,12.5,12.5C298.521,263.754,263.754,298.521,221.02,298.521z" />
</g>
<g>
<path d="M221.02,246.021c-13.785,0-25-11.215-25-25s11.215-25,25-25c13.786,0,25,11.215,25,25S234.806,246.021,221.02,246.021z" />
</g>
</g>
</svg>
VIEW
</a>
<a x-data href="javascript:void(0);" class="text-[#ffffff] border rounded border-[#ffffff] inline-block mr-2 font-medium p-2 hover:bg-[#3b82f6] hover:text-white" @click="$dispatch('open-delete', { url: '{{route('printers.destroy', $printer->id)}}' })">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-4 h-4 inline-block">
<path fill-rule="evenodd" d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z" clip-rule="evenodd" />
</svg>
DELETE
</a>
</td>
</tr>
@empty
<tr>
<td class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8 text-slate-500" colspan="4">No printer found</td>
</tr>
@endforelse
</tbody>
</table>
{{ $printers->links() }}
</div>
</div>
<div class="card mb-lg ">
<div class="card-header flex">
<h3 class="card-title w-80">
<i class="fas fa-print"></i>
UN-ASSIGNED PRINTERS
</h3>
<div class="flex w-full items-center justify-end gap-2">
<form action="{{ route('printers.index') }}" method="GET">
<div class="flex flex-1 items-center justify-end">
<label class="group relative flex items-center">
<input placeholder="Search" value="{{$search}}" name="search" type="search" autocomplete="off" class="form-input mr-2">
<button type="submit" class="btn-primary inline-flex items-center px-4 py-3 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">Search</button>
</label>
</div>
</form>
</div>
</div>
<div class="card-body ">
<table class="table">
<thead>
<tr class="uppercase text-sm font-medium text-gray-900 text-slate-700 font-semibold">
<th>Equipment ID</th>
<th>Name</th>
<th>Serial Number</th>
<!-- <th >Toner Type</th> -->
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
@forelse($unassined_printers as $printer)
<tr class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8">
<td class="py-4">{{ $printer->equipment_id }}</td>
<td class="py-4">{{ $printer->model_name }}</td>
<td class="py-4">{{ $printer->serial_number }}</td>
<!-- <td class="py-4">{{ $printer->toner_type }}</td> -->
<td class="py-4 w-80 text-white">
<a x-data href="javascript:void(0);" class="text-[#ffffff] border rounded uppercase border-[#ffffff] inline-block mr-2 font-medium p-2 hover:bg-[#3b82f6] hover:text-white" @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??'')}}'})">
<i class="fas fa-user-edit mr-2"></i>Assign
</a>
<a href="{{ route('printers.edit', $printer->id)}}" class="text-[#ffffff] border rounded border-[#ffffff] inline-block mr-2 font-medium p-2 hover:bg-[#3b82f6] hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 inline-block mr-1">
<path d="M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32L19.513 8.2Z" />
</svg>
EDIT
</a>
<a x-data href="javascript:void(0);" class="text-[#ffffff] border rounded border-[#ffffff] inline-block mr-2 font-medium p-2 hover:bg-[#3b82f6] hover:text-white" @click="$dispatch('open-delete', { url: '{{route('printers.destroy', $printer->id)}}' })">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-4 h-4 inline-block">
<path fill-rule="evenodd" d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z" clip-rule="evenodd" />
</svg>
DELETE
</a>
</td>
</tr>
@empty
<tr>
<td class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8 text-slate-500" colspan="4">No printer found</td>
</tr>
@endforelse
</tbody>
</table>
{{ $unassined_printers->links() }}
</div>
</div>
<div x-data="{ open: false, url:'' }">
<div @open-delete.window="url=$event.detail.url;open=true;" @keydown.escape.window="open = false" 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" @click.away="open = 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 -->
<div class="flex items-start justify-between">
<div class="text-left">
<h3 class="text-lg leading-6 font-medium text-black">Are you sure, Want to delete the printer?</h3>
</div>
<span class="cursor-pointer text-black text-xl" @click="open = false">✕</span>
</div>
<div class="mt-0 mb-10">
<p class="text-sm text-red-700">
After deleting printer, You will not able to restore it.
</p>
</div>
<!-- Modal footer -->
<div class="flex items-center justify-start gap-2 mt-10">
<button type="button" class="w-full btn btn-primary uppercase sm:w-auto" @click="open = false">
CANCEL
</button>
<form x-bind:action="url" method="POST">
@csrf
@method('DELETE')
<button type="submit" class="w-full btn btn-error uppercase">
Delete
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</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 required name="address_id" x-model="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 uppercase">
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>