@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 # {{$order->order_no}}</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 # {{$order->order_no}}</li>
                    </ol>
                </nav>
            </div>
            <div class="" style="min-height: 100vh;">
                <form action="{{route('orders.update', $order->id)}}" 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="{{$order->customer_name}}" 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="7">{{$order->shipping_address}}</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="7">{{$order->billing_address}}</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="{{$order->order_no}}" 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="{{$order->order_date}}" 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 {{$order->status == "" ? "selected" : ""}} value="">Select Status</option>
                                        <option {{$order->status == "pending payment" ? "selected" : ""}} value="pending payment">Pending Payment</option>
                                        <option {{$order->status == "pending" ? "selected" : ""}} value="pending">Order Placed</option>
                                        <option {{$order->status == "pickup ready" ? "selected" : ""}} value="pickup ready">Pickup Ready</option>
                                        <option {{$order->status == "collected" ? "selected" : ""}} value="collected">Collected</option>
                                        <option {{$order->status == "inprogress" ? "selected" : ""}} value="inprogress">In Progress</option>
                                        <option {{$order->status == "invoiced" ? "selected" : ""}} value="invoiced">Invoiced</option>
                                        <option {{$order->status == "paid" ? "selected" : ""}} value="paid">Paid</option>
                                        <option {{$order->status == "shipped" ? "selected" : ""}} value="shipped">Shipped</option>
                                        <option {{$order->status == "delivered" ? "selected" : ""}} value="delivered">Delivered</option>
                                        <option {{$order->status == "cancelled" ? "selected" : ""}} value="cancelled">Cancelled</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-md-3" for="ticket_no">Ticket No:</label>
                                <div class="col-md-9"><input type="text" name="ticket_no" class="form-control" value="{{$order->ticket_no}}"></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">
                                @php $total = $subTotal = $discount = $taxAmount = 0; @endphp
                                @foreach($order->items as $item)
                                @php $total += ($item->price * $item->quantity); $subTotal = $total; @endphp
                                <tr>
                                    <td>
                                        <input type="hidden" name="item_id[]" value="{{$item->id}}" />
                                        <input type="hidden" name="service_id[]" value="{{$item->service_id}}" />
                                        <input type="text" name="service_name[]" required class="form-control" value="{{$item->item_name}}">
                                    </td>
                                    <td>
                                        <input type="number" required name="product_quantity[]" class="form-control" onchange="updateProductTotal(this)" value="{{$item->quantity}}">
                                    </td>
                                    <td>
                                        <input type="number" required step="0.01" name="product_price[]" class="form-control" onchange="updateProductTotal(this)" value="{{$item->price}}">
                                    </td>
                                    <td>
                                        <input type="number" name="product_total[]" class="form-control" readonly value="{{$item->price * $item->quantity}}">
                                    </td>
                                    <td class="action">
                                        <button type="button" class="btn btn-danger" onclick="removeProductRow(this)"><i role="button" class="mdi mdi-18px mdi-delete"></i></button>
                                    </td>
                                </tr>
                                @endforeach
                            </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">
                                    Sub Total:
                                </div>
                                <div class="col-md-4 text-end fs-5" style="padding-right: 50px;" id="sub_total">
                                £{{number_format($order->subtotal, 2)}}
                                </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">
                                £{{number_format($order->discount, 2)}}
                                </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">
                                £{{$taxAmount}}
                                </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">
                                £{{number_format($order->total, 2)}}
                                </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">
                                    Amount Received:
                                    <input type="hidden" id="h_amount_received" value="{{$order->payments->sum(function($payment){
                                        return $payment->status == 'paid' ? $payment->amount : 0;
                                    })/100}}" />
                                </div>
                                <div class="col-md-4 text-end fs-5" style="padding-right: 50px;" id="tax_amount">
                                £{{number_format($order->payments->sum(function($payment){
                                    return $payment->status == 'paid' ? $payment->amount : 0;
                                })/100, 2)}}
                                </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">
                                    Amount Due:
                                </div>
                                <div class="col-md-4 text-end fs-5" style="padding-right: 50px;" id="due_amount">
                                £{{$order->amount_due > 0 ? number_format($order->amount_due, 2) : '0.00'}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row col-md-12" style="margin-top:30px; display: flex; justify-content: right; gap: 6px;">
                        <button type="button" class="btn btn-success pull-right m-6 mark-as-paid" style="width: 130px;">Mark As Paid</button>&nbsp;
                        <button type="submit" class="btn btn-primary pull-right m-6" style="width: 100px;">Save Invoice</button>
                    </div>

                    <div class="row" style="margin-top: 30px;">
                        <label for="products">Payments:</label>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Payment Date</th>
                                    <th>Amount</th>
                                    <th>Method</th>
                                    <th>Mode Of Payment</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody id="productRows">
                                @foreach($order->payments as $payment)
                                <tr>
                                    <td>{{date("d M, Y h:i a", strtotime($payment->created_at))}}</td>
                                    <td>£{{number_format($payment->amount/100, 2)}}</td>
                                    <td>{{ucfirst($payment->payment_method)}}</td>
                                    <td>{{"Card"}}</td>
                                    <td>{{ucfirst($payment->status)}}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="row" style="margin-top: 30px;">
                        <label for="products">Order History:</label>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Status</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody id="productRows">
                                @foreach($order->history as $history)
                                <tr>
                                    <td>{{date("d M, Y h:i a", strtotime($history->created_at))}}</td>
                                    <td>{{ucwords($history->status)}}</td>
                                    <td>{{$history->description}}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        addProductRow('add'); // Add a row when the page loads
        $('.select2').select2();
    });
    var services = JSON.parse(String.raw`null`);
    function addProductRow(action) {
        if(!checkEmptyRows()) return;
        if(action === 'add') {
            serviceHtml = '<select class="select2 form-control service-select" style="width:100%;height: 48px;"><option value="">--- Select Service ---</option><option value="misc">Miscellaneous</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" step="0.01" 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" step="0.01" 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();
        $('.select2').select2();
    }

    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 amount_received = $('#h_amount_received').val();
        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);
            }
        });

        var due_amount = total - amount_received;
        due_amount = due_amount > 0 ? due_amount : 0;
        // 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);
        document.getElementById("due_amount").innerText = "£" + (due_amount).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() == "misc") {
                $(this).closest('td').html('<input type="hidden" name="item_id[]" value="0" /><input name="service_id[]" type="text" class="form-control">');
            } else 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);
        });

        $('.mark-as-paid').on('click', function(e) {
            Swal.fire({
                title: 'Confirm Payment?',
                text: "Are you sure you want to confirm payment?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, confirm!',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('orders.mark-as-paid', $order->id) }}",
                        type: 'POST',
                        dataType: 'json',
                        success: function(response) {
                            alert("Successfully marked as paid");
                            window.location.reload(true);
                        },
                        error: function(response) {
                            alert("Failed to mark as paid");
                        }
                    });
                }
            });
        });
    })(jQuery);
</script>
@stop