<x-admin.header />
<x-admin.sidebar />
<style>
.input-field .img-upload-btn
{
margin: 10px;
}
td.col-img
{
display: flex;
}
td.col-img h6
{
position: relative;
margin: 10px 0px 0px 10px !important;
}
</style>
<main>
<div class="main-content">
<div class="row">
<div class="col-lg-12 col-12">
<form id="AddColorForm">
@csrf
<div class="login-form form-content">
<h4>Add Color</h4>
<div class="input-field">
<label for="">Color Name</label>
<div class="input-field">
<input class="custom-input" type="text" name="colorName" id="colorName">
</div>
</div>
<div class="input-field">
<label for="">Color Code</label>
<div class="input-field">
<input class="custom-input" type="text" name="colorCode" id="colorCode">
</div>
</div>
<div class="input-field">
<label for="">Color Price</label>
<div class="input-field">
<input class="custom-input" type="text" name="colorPrice" id="colorPrice">
</div>
</div>
<div class="input-field">
<label for="">Status</label>
<select name="colorStatus" class="form-control custom-input" id="colorStatus">
<option value="1">Active</option>
<option value="0">Un-Active</option>
</select>
</div>
<!-- <h6>* Required Fields</h6> -->
<div class="form-footer">
<button type="submit" id="add_btn">Add Color</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="main-content">
<div class="graph-card card-table" id="ColorList">
<div class="card-head">
<div class="text-content">
<h5>Color List</h5>
</div>
<div class="card-drp">
<div class="btn-content btn-group" role="group" aria-label="Basic example">
<!-- <a href="cms_form" target="blank"><button type="button" class="btn active">Add New</button></a> -->
</div>
</div>
</div>
<div class="card-body">
<div class="table-responsive table-scroll">
<table class="table-management">
<thead>
<tr>
<th>#</th>
<th>Color Name</th>
<th>Color Code</th>
<th>Color Price</th>
<th>Color Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@foreach($colors as $key => $color)
<tr>
<td>{{ $key+1 }}</td>
<td>{{$color->color_name}}</td>
<td>{{$color->color_code}}</td>
<td>{{$color->color_price}}</td>
@if($color->status == 1)
<td>Active</td>
@else
<td>Un-Active</td>
@endif
<td>
<a href="javascript:;" ><button class="refresh-btn edit-btnn" data-tooltip="Edit"
data-id="{{$color->color_id}}"
data-name="{{$color->color_name}}"
data-code="{{$color->color_code}}"
data-price="{{$color->color_price}}"
data-status="{{$color->status}}"
>
<i class="fa-regular fa-pencil"></i>
</button></a>
<button class="delete-btn btn_del" value="{{$color->color_id}}" data-tooltip="Delete">
<i class="fa-regular fa-xmark"></i>
</button>
<button></button>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<div class="pagination">
</div>
</div>
</div>
</div>
<!-- Model Start Here -->
<div class="modal fade" id="edit_color" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="edit-dialogLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<form id="UpdateColorForm">
@csrf
<div class="modal-header">
<h5 class="modal-title" id="edit-dialogLabel">Update Color</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="login-form form-content">
<div class="input-field">
<!-- <label for="">Color Id</label> -->
<div class="input-field">
<input class="custom-input" type="hidden" name="updtcolorId" id="updtcolorId">
</div>
</div>
<div class="input-field">
<label for="">Color Name</label>
<div class="input-field">
<input class="custom-input" type="text" name="updtcolorName" id="updtcolorName">
</div>
</div>
<div class="input-field">
<label for="">Color Code</label>
<div class="input-field">
<input class="custom-input" type="text" name="updtcolorCode" id="updtcolorCode">
</div>
</div>
<div class="input-field">
<label for="">Color Price</label>
<div class="input-field">
<input class="custom-input" type="text" step="5" name="updtcolorPrice" id="updtcolorPrice">
</div>
</div>
<div class="input-field">
<label for="">Status</label>
<select name="updtcolorStatus" class="form-control custom-input" id="updtcolorStatus">
<option value="1">Active</option>
<option value="0">Un-Active</option>
</select>
</div>
<!-- <h6>* Required Fields</h6> -->
<div class="form-footer">
<button type="submit" id="add_btn">Update Color</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Model End Here -->
<script>
$(".edit-btnn").click(function(){
$("#edit_color").modal('show');
var id = $(this).data('id');
var name = $(this).data('name');
var code = $(this).data('code');
var price = $(this).data('price');
var status = $(this).data('status');
$("#updtcolorId").val(id);
$("#updtcolorName").val(name);
$("#updtcolorCode").val(code);
$("#updtcolorPrice").val(price);
$("#updtcolorStatus").val(status);
});
</script>
<!-- Insert Colors -->
<script>
$(document).ready(function(){
$("#AddColorForm").on('submit', function(e){
e.preventDefault();
var data = new FormData(this);
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: "insert_color",
method: "POST",
data: data,
datatype: "json",
cache: false,
contentType: false,
processData: false,
success:function(data)
{
if($.isEmptyObject(data.error))
{
toastr.success(data.success,"Added",{timeOut: 1500});
document.getElementById('AddColorForm').reset();
$("#ColorList").load(location.href+" #ColorList>*","");
}
else if(data.error.colorName)
{
toastr.error(data.error.colorName,"Error",{timeOut: 1500});
return false;
}
else if(data.error.colorCode)
{
toastr.error(data.error.colorCode,"Error",{timeOut: 1500});
return false;
}
else if(data.error.colorPrice)
{
toastr.error(data.error.colorPrice,"Error",{timeOut: 1500});
return false;
}
},
error:function()
{
toastr.error("SomeThing Went Wrong...","Error");
return false;
},
});
});
});
</script>
<!-- Insert Colors Ends Here -->
<!-- Update Colors -->
<script>
$(document).ready(function(){
$("#UpdateColorForm").on('submit', function(e){
e.preventDefault();
var data = new FormData(this);
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: "update_color",
method: "POST",
data: data,
datatype: "json",
cache: false,
contentType: false,
processData: false,
success:function(data)
{
if($.isEmptyObject(data.error))
{
toastr.success(data.success,"Updated",{timeOut: 1500});
document.getElementById('UpdateColorForm').reset();
$("#edit_color").modal('hide');
$("#ColorList").load(location.href+" #ColorList>*","");
}
else if(data.error.updtcolorName)
{
toastr.error(data.error.updtcolorName,"Error",{timeOut: 1500});
return false;
}
else if(data.error.updtcolorCode)
{
toastr.error(data.error.updtcolorCode,"Error",{timeOut: 1500});
return false;
}
else if(data.error.updtcolorPrice)
{
toastr.error(data.error.updtcolorPrice,"Error",{timeOut: 1500});
return false;
}
},
error:function()
{
toastr.error("SomeThing Went Wrong...","Error");
return false;
},
});
});
});
</script>
<!-- Update Colors End Here -->
<!-- Delete Work Start Here -->
<script>
$(document).ready(function(){
$('body').on('click', '.btn_del', function(e){
e.preventDefault();
var id = $(this).val();
$.ajax({
url: "delete_color",
method: "GET",
data: {'id': id},
cache: false,
success:function()
{
toastr.success("Color Deleted Successfuly","Deleted",{timeOut: 1500});
$("#ColorList").load(location.href+" #ColorList>*","");
},
error:function()
{
toastr.error("SomeThing Went Wrong...","Error");
return false;
},
});
});
});
</script>
<!-- Delete Work End Here -->
<x-admin.footer />