@extends('layouts.master')
@section('meta')
<meta name="csrf-token" content="{{ csrf_token() }}">
@stop
@section('content')

<div class="col-lg-12 grid-margin stretch-card" style="min-height: 80vh;">
    <div class="card">
        <div class="card-body">
            <div class="page-header">
                <h3 class="page-title">Order # {{$invoiceNo}}</h3>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{route('home')}}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{route('orders.index')}}">Orders</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Order # {{$invoiceNo}}</li>
                    </ol>
                </nav>
            </div>
            <div class="" style="height: 100vh;">
                <form action="{{route('orders.store')}}" method="POST">
                    @csrf
                    
                    <div class="row">
                        <div class="col-md-6"></div>
                        <div class="col-md-6">
                            <div class="form-group row">
                                <!-- Company Address -->
                                <div class="col-md-12" style="text-align: right;">
                                    6 Langtry Walk,<br/>London<br/>NW8 0DU, UK<br/>Main: 020 7328 5621<br/>Mobile: 07950 455241<br/>email: cs@masterdrycleaner.co.uk
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Invoice Details -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label class="col-md-3" for="invoice_number">Customer Name:</label>
                                <div class="col-md-9"><input type="text" name="customer_name" class="form-control" value="" required></div>
                            </div>
                            <div class="form-group row">
                                <!-- Shipping Address -->
                                <label  class="col-md-3" for="shipping_address">Billing Address:</label>
                                <div class="col-md-9">
                                    <textarea name="billing_address" class="form-control" rows="4"></textarea>
                                </div>
                            </div>
                            <div class="form-group row">
                                <!-- Shipping Address -->
                                <label  class="col-md-3" for="shipping_address">Shipping Address:</label>
                                <div class="col-md-9">
                                    <textarea name="shipping_address" class="form-control" rows="4"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label class="col-md-3" for="invoice_number">Invoice Number:</label>
                                <div class="col-md-9"><input type="text" name="invoice_number" class="form-control" value="" required></div>
                            </div>
                            <div class="form-group row">
                                <label class="col-md-3" for="invoice_date">Invoice Date:</label>
                                <div class="col-md-9"><input type="text" name="invoice_date" class="form-control" value="" required></div>
                            </div>
                            <div class="form-group row">
                                <label class="col-md-3" for="invoice_date">Invoice Status:</label>
                                <div class="col-md-9">
                                    <select class="select2 form-control" name="status" id="status" style="height: 48px;">
                                        <option value="">Select Status</option>
                                        <option value="pending">Pending</option>
                                        <option value="pickup">Pickup</option>
                                        <option value="collected">Collected</option>
                                        <option value="inprogress">In Progress</option>
                                        <option value="invoiced">Invoiced</option>
                                        <option value="paid">Paid</option>
                                        <option value="shipped">Shipped</option>
                                        <option value="delivered">Delivered</option>
                                        <option value="cancelled">Cancelled</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Add more fields as needed: date, customer details, etc. -->

                    <div class="form-group">
                        <label for="products">Products:</label>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Quantity</th>
                                    <th>Unit Price</th>
                                    <th>Total</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody id="productRows">
                                
                            </tbody>
                        </table>
                    </div>
                    <div class="row my-xl-3 text-dark">
                        <div class="col-md-6">

                        </div>
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-8 text-end fs-5">
                                    Total:
                                </div>
                                <div class="col-md-4 text-end fs-5" style="padding-right: 50px;" id="sub_total">
                                £0.00
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="row my-xl-3 text-dark">
                        <div class="col-md-6">

                        </div>
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-8 text-end fs-5">
                                    Discount:
                                </div>
                                <div class="col-md-4 text-end fs-5" style="padding-right: 50px;" id="discount">
                                £0.00
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row my-xl-3 text-dark">
                        <div class="col-md-6">

                        </div>
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-8 text-end fs-5">
                                    Tax:
                                </div>
                                <div class="col-md-4 text-end fs-5" style="padding-right: 50px;" id="tax_amount">
                                £0.00
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row my-xl-3 text-dark">
                        <div class="col-md-6">

                        </div>
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-8 text-end fs-5">
                                    Total:
                                </div>
                                <div class="col-md-4 text-end fs-5" style="padding-right: 50px;" id="invoice_total">
                                £0.00
                                </div>
                            </div>
                        </div>
                    </div> -->
                    <div style="height: 52px;"></div>
                    <button type="submit" class="btn btn-success pull-right m-6">Save Invoice</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        addProductRow('add'); // Add a row when the page loads
    });
    var services = JSON.parse('null');
    function addProductRow(action) {
        if(!checkEmptyRows()) return;
        if(action === 'add') {
            serviceHtml = '<select class="select2 form-control service-select" style="height: 48px;"><option value="">--- Select Service ---</option>';
            services.forEach(function(item) {
                serviceHtml += "<option value='"+JSON.stringify(item)+"'>"+item.service_name+"</option>";
            });
            serviceHtml += '</select>';
            var row = ''+
                '<tr>'+
                    '<td>'+
                        '<input type="hidden" name="item_id[]" value="0" />'+
                        '<input class="service_id" type="hidden" name="service_id[]" value="" />'+
                        serviceHtml+
                    '</td>'+
                    '<td><input type="number" name="product_quantity[]" class="form-control qty" onchange="updateProductTotal(this)"></td>'+
                    '<td><input type="number" name="product_price[]" class="form-control price" onchange="updateProductTotal(this)"></td>'+
                    '<td><input type="number" name="product_total[]" class="form-control" readonly></td>'+
                    '<td class="action"><button type="button" class="btn btn-success" onclick="submitProductRow(this)"><i role="button" class="mdi mdi-18px mdi-content-save"></i></button></td>'+
                '</tr>';
        } else {
            var row = `
                <tr>
                    <td><input type="text" name="product_name[]" class="form-control"></td>
                    <td><input type="number" name="product_quantity[]" class="form-control" onchange="updateProductTotal(this)"></td>
                    <td><input type="number" name="product_price[]" class="form-control" onchange="updateProductTotal(this)"></td>
                    <td><input type="number" name="product_total[]" class="form-control" readonly></td>
                    <td class="action"><button type="button" class="btn btn-danger" onclick="removeProductRow(this)">Remove</button></td>
                </tr>
            `;
        }
        document.getElementById("productRows").insertAdjacentHTML('beforeend', row);
    }

    function checkEmptyRows() {
        // var totalInputs = document.querySelectorAll("input[name='product_name[]']");
        // if(!totalInputs.length) return true;
        // totalInputs.forEach(function (input) {
        //     if(input.value == "") {   
        //         return false;
        //     } 
        // });
        return true;
    }

    function removeProductRow(btn) {
        btn.closest("tr").remove();
        updateTotal();
    }

    function submitProductRow(btn) {
        $(btn).replaceWith('<button type="button" class="btn btn-danger" onclick="removeProductRow(this)"><i role="button" class="mdi mdi-18px mdi-delete"></i></button>');
        addProductRow('add'); // Add a row when the page loads
        updateTotal();
    }

    function updateProductTotal(input) {
        var row = input.closest("tr");
        console.log(row);
        if(row) {
            var quantity = parseFloat(row.querySelector("input[name='product_quantity[]']").value);
            var price = parseFloat(row.querySelector("input[name='product_price[]']").value);
            var total = quantity * price || 0;
            row.querySelector("input[name='product_total[]']").value = total.toFixed(2);
            updateTotal();
        }
    }

    function updateTotal() {
        var total = 0;
        var discount = 0;
        var tax = 0;
        var totalInputs = document.querySelectorAll("input[name='product_total[]']"); 
        totalInputs.forEach(function (input) {
            if(input.value != "") {
                total += parseFloat(input.value);
            } 
        });
        document.getElementById("sub_total").innerText = "£" + total.toFixed(2);
        // document.getElementById("discount").innerText = "£" + discount.toFixed(2);
        // document.getElementById("tax_amount").innerText = "£" + tax.toFixed(2);
        // document.getElementById("invoice_total").innerText = "£" + total.toFixed(2);
    }
</script>

@stop

@section('scripts')
<script>
    (function($) {
        'use strict';

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('.manage-category').on('click', function(e) {
            var mode = $(this).data('mode');
            var action = $(this).data('url');
            var idval = $(this).data('id');
            var method = "";

            $('#id').val(idval);
            if(mode == 'add') {
                $('#manageCategory').find('.modal-title').text("Create Category");
                method = 'POST';
            } else {
                $('#manageCategory').find('.modal-title').text("Edit Category");
                method = 'POST';
            }

            $('#manageCategory').find('form').attr('action', action);
            $('#manageCategory').find('form').attr('method', method);

            // Show the modal
            $('#manageCategory').modal('show');
        });

        $('body').on('change', '.service-select', function(e) {
            if($(this).val() != "") {
                var service = JSON.parse($(this).val());
                $(this).closest('tr').find('input.price').val(service.price);
                $(this).closest('tr').find('input.qty').val(1);
                $(this).closest('tr').find('input.service_id').val(service.id);
            } else {
                $(this).closest('tr').find('input.price').val(0);
                $(this).closest('tr').find('input.qty').val(0);
                $(this).closest('tr').find('input.service_id').val(0);
            }
            updateProductTotal(this);
        });

        
    })(jQuery);
</script>
@stop