@extends('layout.mainlayout')
@section('content')
@component('components.breadcrumb')                
    @slot('title') Create Invoice @endslot
    @slot('li_1') Dashboard @endslot
    @slot('li_2') Create Invoice @endslot
@endcomponent 
                 
    <div class="row">
        <div class="col-sm-12">
            <form>
                <div class="row">
                    <div class="col-sm-6 col-md-4">
                        <div class="input-block mb-3">
                            <label class="col-form-label">Client <span class="text-danger">*</span></label>
                            <select class="select">
                                <option>Please Select</option>
                                <option selected>Barry Cuda</option>
                                <option>Tressa Wexler</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-4">
                        <div class="input-block mb-3">
                            <label class="col-form-label">Project <span class="text-danger">*</span></label>
                            <select class="select">
                                <option>Select Project</option>
                                <option selected>Office Management</option>
                                <option>Project Management</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="col-sm-6 col-md-4">
                        <div class="input-block mb-3">
                            <label class="col-form-label">Email</label>
                            <input class="form-control" type="email">
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-4">
                        <div class="input-block mb-3">
                            <label class="col-form-label">Tax</label>
                            <select class="select">
                                <option>Select Tax</option>
                                <option>VAT</option>
                                <option>GST</option>
                                <option>No Tax</option>
                            </select>
                        </div>
                    </div>                                  
                    <div class="col-sm-6 col-md-4">
                        <div class="input-block mb-3">
                            <label class="col-form-label">Invoice date <span class="text-danger">*</span></label>
                            <div class="cal-icon">
                                <input class="form-control datetimepicker" type="text">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-4">
                        <div class="input-block mb-3">
                            <label class="col-form-label">Due Date <span class="text-danger">*</span></label>
                            <div class="cal-icon">
                                <input class="form-control datetimepicker" type="text">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6">
                        <div class="input-block mb-3">
                            <label class="col-form-label">Client Address</label>
                            <textarea class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6">
                        <div class="input-block mb-3">
                            <label class="col-form-label">Billing Address</label>
                            <textarea class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 col-sm-12">
                        <div class="table-responsive">
                            <table class="table table-hover table-white" id="table-count">
                                <thead>
                                    <tr>
                                        <th class="table-tr-th1">#</th>
                                        <th class="col-sm-2">Item</th>
                                        <th class="col-md-6">Description</th>
                                        <th class="table-tr-th2">Unit Cost</th>
                                        <th class="table-tr-th3">Qty</th>
                                        <th>Amount</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody class="tbodyone">
                                <tr>
                                    <td>1</td>
                                    <td>
                                        <input class="form-control table-tbody1" type="text">
                                    </td>
                                    <td>
                                        <input class="form-control table-tbody1" type="text">
                                    </td>
                                    <td>
                                        <input class="form-control table-tbody2"  type="text">
                                    </td>
                                    <td>
                                        <input class="form-control table-tbody3" type="text">
                                    </td>
                                    <td>
                                        <input class="form-control table-tbody4" readonly type="text">
                                    </td>
                                    <td><a href="javascript:void(0)" class="text-success tbody-text" title="Add" id="addProduct"><i class="fa fa-plus"></i></a></td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>
                                        <input class="form-control table-tbody1" type="text">
                                    </td>
                                    <td>
                                        <input class="form-control table-tbody1" type="text">
                                    </td>
                                    <td>
                                        <input class="form-control table-tbody2" type="text">
                                    </td>
                                    <td>
                                        <input class="form-control table-tbody3" type="text">
                                    </td>
                                    <td>
                                        <input class="form-control table-tbody4" readonly type="text">
                                    </td>
                                    <td><a href="javascript:void(0)" class="text-danger tbody-text remove" title="Remove"><i class="far fa-trash-alt"></i></a></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover table-white">
                                <tbody>
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td class="text-end">Total</td>
                                        <td class="text-end table-tbody-total">0</td>
                                    </tr>
                                    <tr>
                                        <td colspan="5" class="text-end">Tax</td>
                                        <td class="text-end table-tbody-total">
                                            <input class="form-control text-end" value="0" readonly type="text">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="5" class="text-end">
                                            Discount %
                                        </td>
                                        <td class="text-end table-tbody-total">
                                            <input class="form-control text-end" value="0" type="text">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="5" class="text-end table-grand-total">
                                            Grand Total
                                        </td>
                                        <td class="text-end table-grand-total2">
                                            $ 0
                                        </td>
                                    </tr>
                                </tbody>
                            </table>                               
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="input-block mb-3">
                                    <label class="col-form-label">Other Information</label>
                                    <textarea class="form-control" rows="4"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="submit-section">
                    <button class="btn btn-primary submit-btn m-r-10">Save & Send</button>
                    <button class="btn btn-primary submit-btn">Save</button>
                </div>
            </form>
        </div>
    </div>

@endsection