@extends('Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<style>
    .dt-search {
        display: none;
    }

    .is-invalid {
        border: 2px solid red !important;
    }
</style>
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <div class="row align-items-center justify-content-between mb-3 mt-3">
        <div class="col-auto">
            <h5>
                <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="{{ route('product_sale') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="icon icon-tabler">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M15 6l-6 6l6 6" />
                        </svg>
                    </a>
                </button>
                Edit Invoice
            </h5>
        </div>
        {{-- <div class="col-auto">
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#holdBillView">Hold Bill</button>
        </div> --}}
    </div>

    <div class="card p-3">

        <div class="card p-3">
            <div class="row">
                <div class="col-lg-12">
                    <label class="form-label">Customer Details</label>
                    <input type="text" class="form-control" value="987654322">
                </div>
                {{-- <div class="col-2 mt-auto">
                    <button class="btn btn-primary" type="button" data-bs-toggle="modal"
                        data-bs-target="#view">Search</button>
                </div> --}}
            </div>
        </div>




        <div class="row ">
            <div class="col-lg-8">
                <div class="card mt-3 p-3">
                    <input type="text" class="form-control" placeholder="Search item / code">
                    <div class="table-responsive mt-3">
                        <table class="table">
                            <thead>
                                <th>Sno</th>
                                <th>item</th>
                                <th>code</th>
                                <th>mrp</th>
                                <th>qty</th>
                                <th>gst</th>
                                <th>price</th>
                                <th>remark</th>
                                <th>action</th>
                            </thead>

                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Mixture</td>
                                    <td>10001</td>
                                    <td>500</td>
                                    <td>500 gm</td>
                                    <td>5%</td>
                                    <td>510</td>
                                    <td><input type="text" placeholder="Remark"></td>
                                    <td>
                                        <i class="ti tabler-trash text-danger menu-icon" data-bs-toggle="modal"
                                            data-bs-target="#delete" style="cursor:pointer;"></i>
                                    </td>
                                </tr>



                                <tr>
                                    <td>2</td>
                                    <td>Mixture</td>
                                    <td>10001</td>
                                    <td>500</td>
                                    <td>500 gm</td>
                                    <td>5%</td>
                                    <td>510</td>
                                    <td>
                                        <input type="text"  placeholder="Remark">
                                    </td>
                                    <td>
                                        <i class="ti tabler-trash text-danger menu-icon" data-bs-toggle="modal"
                                            data-bs-target="#delete" style="cursor:pointer;"></i>
                                    </td>
                                </tr>


                            </tbody>

                        </table>
                    </div>
                </div>


            </div>
            <div class="col-lg-4 mt-4">
                <div class="row gap-2 d-flex">
                    <div class="col-auto">
                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addDiscountview">Add
                            Discount</button>
                    </div>
                    <div class="col-auto">
                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addChargeview">Add
                            Charge</button>
                    </div>
                </div>

                <div class="card p-3 mt-3">
                    <h6>Bill Details</h6>
                    <div class="d-flex flex-col justify-content-between">
                        <div>
                            <h6>Sub Total</h6>
                            <h6>GST</h6>
                        </div>
                        <div>
                            <h6>$0.00</h6>
                            <h6>$0.00</h6>
                        </div>
                    </div>


                    <hr class="m-0" style="height: 3px; background-color: #e0e0e0; border: none;">
                    <div class="d-flex flex-col justify-content-between mt-1">
                        <div>
                            <h6 class="text-success"> Total</h6>
                        </div>
                        <div>
                            <h6 class="text-success">$0.00</h6>
                        </div>
                    </div>
                </div>

                <div class="card p-3 mt-3">
                    <h6>Payment Mode</h6>
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="mb-0">Cash</h6>
                        <input type="checkbox">
                    </div>

                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="mb-0">UPI</h6>
                        <input type="checkbox">
                    </div>

                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="mb-0">Card</h6>
                        <input type="checkbox" checked>
                    </div>


                    <hr class="m-0" style="height: 3px; background-color: #e0e0e0; border: none;">
                    <div class="d-flex flex-col justify-content-between mt-1">
                        <div>
                            <h6 class="text-success"> Payable</h6>
                        </div>
                        <div>
                            <h6 class="text-success">$0.00</h6>
                        </div>
                    </div>
                </div>

                <div class="row p-3">
                    <button class="btn btn-primary " data-bs-toggle="modal" data-bs-target="#holdBillView">Update & Print
                    </button>
                </div>




            </div>
        </div>

    </div>
    <div class="modal fade" id="delete" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Delete Bill</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this bill?
                    <input type="hidden" id="delete_id">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="button" class="btn btn-danger" id="confirmDelete">
                        Delete
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="view" tabindex="-1" data-bs-keyboard="true">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content rounded-4 text-center p-4 py-5">
                <form action="#">
                    <h6>Register New Number</h3>

                        <div class="mb-3 text-start">
                            <label class="form-label">Phone Number</label>
                            <input type="text" class="form-control">
                        </div>

                        <div class="mb-3 text-start">
                            <label class="form-label">Name (optional)</label>
                            <input type="text" class="form-control">
                        </div>

                        <div class="mb-3 text-start">
                            <label class="form-label">Email (optional)</label>
                            <input type="text" class="form-control">
                        </div>

                        <div class="d-flex justify-content-center">
                            <button class="btn btn-label-secondary me-2" type="button" data-bs-dismiss="modal">
                                Cancel
                            </button>
                            <button class="btn btn-primary">Register</button>
                        </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="addDiscountView" tabindex="-1" data-bs-keyboard="true">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content rounded-4 text-center p-4 py-5">
                <form action="#">
                    <h6>Add Discount</h6>

                    <div class="mb-3 text-start">
                        <label class="form-label">Amount</label>
                        <input type="text" class="form-control" placeholder="0.00">
                    </div>

                    <div class="mb-3 text-start">
                        <label class="form-label">Reason</label>
                        <input type="text" class="form-control" placeholder="Enter">
                    </div>

                    <div class="d-flex justify-content-center">
                        <button class="btn btn-label-secondary me-2" type="button" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button class="btn btn-primary">Apply</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="addChargeview" tabindex="-1" data-bs-keyboard="true">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content rounded-4 text-center p-4 py-5">
                <form action="#">
                    <h6>Add Charge</h6>

                    <div class="mb-3 text-start">
                        <label class="form-label">Amount</label>
                        <input type="text" class="form-control" placeholder="0.00">
                    </div>

                    <div class="mb-3 text-start">
                        <label class="form-label">Reason</label>
                        <input type="text" class="form-control" placeholder="Enter">
                    </div>

                    <div class="d-flex justify-content-center">
                        <button class="btn btn-label-secondary me-2" type="button" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button class="btn btn-primary">Apply</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <div class="modal fade" id="holdBillView" tabindex="-1" data-bs-keyboard="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content rounded-4 text-center p-4 py-5">
                <form action="#">
                    <h6>Hold Bills</h6>

                    <div class="table-responsive">
                        <table class="table text-center align-middle">
                            <thead>
                                <tr>
                                    <th>Sno</th>
                                    <th>Date</th>
                                    <th>Name</th>
                                    <th>Amount</th>
                                    <th>Action</th>
                                </tr>
                            </thead>

                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>20/09/2003</td>
                                    <td>ajay</td>
                                    <td>50</td>

                                    <td class="d-flex justify-content-center align-items-center gap-2">
                                        <a href="#" class="btn btn-sm btn-label-info">Resume</a>
                                        <i class="ti tabler-trash text-danger menu-icon" data-bs-toggle="modal"
                                            data-bs-target="#delete" style="cursor:pointer;"></i>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>


                </form>
            </div>
        </div>
    </div>

@endsection