@extends('admin.admin')

@section('content')
<div class="page-wrapper">
    <div class="content bg-white">
        <div class="d-md-flex d-block align-items-center justify-content-between border-bottom pb-3">
            <div class="my-auto mb-2">
                <h3 class="page-title mb-1">Products </h3>
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item">
                            <a href="index.html">Dashboard</a>
                        </li>
                    
                        <li class="breadcrumb-item active" aria-current="page">Products</li>
                    </ol>
                </nav>
            </div>
            <div class="d-flex my-xl-auto right-content align-items-center flex-wrap">
                <div class="pe-1 mb-2">
                    <a href="#" class="btn btn-outline-light bg-white btn-icon" data-bs-toggle="tooltip"
                        data-bs-placement="top" aria-label="Refresh" data-bs-original-title="Refresh">
                        <i class="ti ti-refresh"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="row">
        
            <div class="col-xxl-12 col-xl-12">
                <div class="border-start ps-3">
                    <div
                        class="d-flex align-items-center justify-content-between flex-wrap border-bottom pt-3 mb-3">
                        <div class="mb-3">
                            <h5 class="mb-1">Products</h5>
                        </div>
                        <div class="mb-3">
                            <a href="http://127.0.0.1:8000/admin/addproduct" class="btn btn-primary"  ><i class="ti ti-square-rounded-plus-filled me-2"></i>Add Product</a>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-body p-0 py-3">
                            <div class="custom-datatable-filter table-responsive">
                                <table class="table" id="currency_table">
                                    <thead class="thead-light">
                                        <tr>
                                            <th>Name</th>
                                            <th>Category</th>
                                            <th>Code</th>                                                   
                                            <th>Image </th>
                                            <th>Stock Status</th>
                                            <th>Status</th>
                                            <th class="no-sort">Delete</th>
                                        </tr>
                                    </thead>
                                    <tbody class="currency_list"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="Add_product">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title currency_modal_title">Add Product</h4>
                <button type="button" class="btn-close custom-btn-close" data-bs-dismiss="modal"
                    aria-label="Close">
                    <i class="ti ti-x"></i>
                </button>
            </div>
            <form enctype="multipart/form-data" id="addproductform">
            <div class="modal-body">
                    <div class="row">
                        <input type="hidden" name="id" id="save_currency_id">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label class="form-label">Product Name</label>
                                <input type="text" id="save_currency_name" name="name" class="form-control" placeholder="Enter Product Name" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Code</label>
                                <input type="text" id="save_currency_code" name="code" class="form-control" placeholder="Enter Code" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Price</label>
                                <input type="text" id="save_currency_price" name="price" class="form-control" placeholder="Enter Price" required>
                            </div>                                                        
                            <div class="mb-3" >
                                <label class="form-label">Category</label>
                                <select id="category_fied" name="category_fied" class="form-control" onchange="loadsubcategory(this.value)"></select>
                            </div>  
                            <div class="mb-3" >
                                <label class="form-label">Sub Category</label>
                                <select id="Subcategory_fied" name="Subcategory_fied" class="form-control" ></select>
                            </div> 
                            <div class="mb-3" >
                                <label class="form-label">Variation</label>
                            </div>
                            <div class="mb-3" id="variation_fied" >
                            </div> 
                            <div class="mb-3">
                                <label class="form-label">Description</label>
                                <textarea class="form-control" name="source_desc"></textarea>
                            </div>                                                        
                            <div class="modal-satus-toggle d-flex align-items-center justify-content-between mb-3">
                                <div class="status-title">
                                    <h5>Featured</h5>
                                    <p>Change the Featured by toggle </p>
                                </div>
                                <div class="status-toggle modal-status">
                                    <input type="checkbox" id="save_currency_default" name="is_default"  class="check">
                                    <label for="save_currency_default" class="checktoggle"> </label>
                                </div>
                            </div>
                            <div class="modal-satus-toggle d-flex align-items-center justify-content-between">
                                <div class="status-title">
                                    <h5>Status</h5>
                                    <p>Change the Status by toggle </p>
                                </div>
                                <div class="status-toggle modal-status">
                                    <input type="checkbox" id="save_currency_status" name="status" class="check">
                                    <label for="save_currency_status" class="checktoggle"> </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="#" class="btn btn-light me-2" data-bs-dismiss="modal">Cancel</a>
                    <button type="submit" class="btn btn-primary">Add Product</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="delete-modal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form >
                <div class="modal-body text-center">
                    <span class="delete-icon">
                        <i class="ti ti-trash-x"></i>
                    </span>
                    <h4>Confirm Deletion</h4>
                    <p>You want to delete all the marked items, this cant be undone once you delete.</p>
                    <div class="d-flex justify-content-center">
                        <a href="javascript:void(0);" class="btn btn-light me-2"
                            data-bs-dismiss="modal">Cancel</a>
                        <button type="submit" class="btn btn-danger" id="confirmDelete">Yes, Delete</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection