@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: 90vh;">
    <div class="card">
        <div class="card-body">
            <div class="page-header">
                <h3 class="page-title">Customer Details</h3>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{route('home')}}">Dashboard</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Orders</li>
                    </ol>
                </nav>
            </div>
            <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="{{$customers->name}}" required></div>
                    </div>
                    <div class="form-group row">
                        <label  class="col-md-3" for="phone_number">Phone Number:</label>
                        <div class="col-md-9">
                            <input type="text" name="phone_number" class="form-control" value="{{$customers->phone_number}}" required>
                        </div>
                    </div>
                    <!-- <div class="form-group row">
                        <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="email">Email:</label>
                        <div class="col-md-9">
                            <input type="text" name="email" class="form-control" value="{{$customers->email}}" required>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 text-black pt-5">
                    <h4>Addresses</h4>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="accordion" id="accordionAddresses">
                        @foreach($customers->addresses as $address)
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="acco-{{$address->id}}">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{$address->id}}" aria-expanded="true" aria-controls="collapse-{{$address->id}}">
                                    {{$address->full_address}}
                                </button>
                            </h2>
                            <div id="collapse-{{$address->id}}" class="accordion-collapse collapse" aria-labelledby="acco-{{$address->id}}" data-bs-parent="#accordionAddresses">
                                <div class="accordion-body">

                                    <form class="forms-sample" id="customer-form" enctype="multipart/form-data">
                                        @csrf
                                        <div class="modal-body">
                                            <input type="hidden" id="id" />
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="company_name">Company</label>
                                                        <input type="text" class="form-control" name="company_name" id="company_name" value="{{$address->company_name}}">
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="street1">Street1</label>
                                                        <input type="text" class="form-control" name="street1" id="street1" value="{{$address->street1}}">
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="street2">Street1</label>
                                                        <input type="text" class="form-control" name="street2" id="street2" value="{{$address->street2}}">
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="city">City</label>
                                                        <input type="text" class="form-control" name="city" id="city" value="{{$address->city}}">
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="country">Country</label>
                                                        <input type="text" class="form-control" name="country" id="country" value="{{$address->country}}">
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="postcode">Postcode</label>
                                                        <input type="text" class="form-control" name="postcode" id="postcode" value="{{$address->postcode}}">
                                                    </div>
                                                </div>
                                            </div>
                                            <button type="submit" id="save" class="btn btn-primary">Save changes</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>

                </div>
            </div>
            <div class="row">
                <div class="col-md-12 text-black pt-5">
                    <h4>Orders</h4>
                    <button id="add_new_payment" class="pull-right btn btn-success">Pay Balance £{{number_format($totalDue, 2)}}</button>
                </div>
            </div>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th> Order # </th>
                        <th> Order Date </th>
                        <th> Customer Name </th>
                        <th> Order Status </th>
                        <th> Source </th>
                        <th> Address </th>
                        <th> Amount </th>
                        <th> Amount Due </th>
                        <th>  </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($orders as $order)
                    <tr>
                        <td> {{$order->order_no}} </td>
                        <td> {{date("d M, Y h:i a", strtotime($order->created_at))}} </td>
                        <td> {{$order->customer_name}} </td>
                        <td style="color: blue;font-weight: 700;">
                            @switch($order->status)
                                @case('pending payment')
                                    <span class="badge badge-pill badge-danger">{{strtoupper($order->status)}}</span>
                                    @break
                                @case('pending')
                                    <span class="badge badge-pill badge-success">{{strtoupper('Order Placed')}}</span>
                                    @break
                                @case('collected')
                                    <span class="badge badge-pill badge-warning">{{strtoupper($order->status)}}</span>
                                    @break
                                @case('invoiced')
                                    <span class="badge badge-pill badge-info">{{strtoupper($order->status)}}</span>
                                    @break
                                @case('paid')
                                    <span class="badge badge-pill" style="border: 1px solid #34d8eb;color: #34d8eb;">{{strtoupper($order->status)}}</span>
                                    @break
                                @case('delivered')
                                    <span class="badge badge-pill badge-primary">{{strtoupper($order->status)}}</span>
                                    @break
                                @case('cancelled')
                                    <span class="badge badge-pill badge-secondary">{{strtoupper($order->status)}}</span>
                                    @break
                            @endswitch
                        </td>
                        <td><b> {!! strtolower($order->source) == 'web' ? '<span title="Web" role="button" class="mdi mdi-web mdi-24px"></span>' : '<span role="button" title="App" class="mdi mdi-cellphone mdi-24px"></span>' !!} </b></td>
                        <td> {!! nl2br(e($order->shipping_address))!!} </td>
                        <td> £{{number_format($order->total, 2)}} </td>
                        <td> <span style="color: red;"><strong>£{{number_format($order->amount_due, 2)}}</strong></span> </td>
                        <td align="right">
                            <a href="{{route('orders.pdf', $order->id)}}" class="icon-bg"><i role="button" class="mdi mdi-24px mdi-magnify"></i></a>
                            <a class="icon-bg manage-category" href="{{ route('orders.edit', $order->id) }}"><i role="button" class="mdi mdi-24px mdi-pencil-box"></i></a>
                            <span class="icon-bg delete-category" data-url="{{ route('service_categories.destroy', $order->id) }}"><i role="button" class="mdi mdi-24px mdi-delete"></i></span>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="pagination justify-content-end pt-2">
                {{ $orders->links('pagination::bootstrap-4') }}
            </div>

            <div class="row">
                <div class="col-md-12 text-black pt-5">
                    <h4>Receipts</h4>
                </div>
            </div>

            <table class="table table-striped">
                <thead>
                    <tr>
                        <th> Receipt # </th>
                        <th> Receipt Date </th>
                        <th> Payment Status </th>
                        <th> Amount </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($receipts as $receipt)
                    <tr>
                        <td> {{$receipt->receipt_no}} </td>
                        <td> {{date("d M, Y h:i a", strtotime($receipt->created_at))}} </td>
                        <td> <span class="badge badge-pill badge-primary">{{strtoupper($receipt->payment_status)}}</span> </td>
                        <td> £{{number_format($receipt->amount, 2)}} </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            <div class="pagination justify-content-end pt-2">
                {{ $receipts->links('pagination::bootstrap-4') }}
            </div>
        </div>
    </div>
</div>
<div class="modal" id="payment" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <form class="forms-sample" id="payment-form" action="{{ route('receipts.store') }}" method="POST">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Create Receipt</h5>
                    <a type="button" id="close-c" class="" data-bs-dismiss="modal" aria-label="Close">
                        <i class="mdi mdi-close"></i>
                    </a>
                </div>
                <div class="modal-body">
                    <!-- <div id="error" class="alert alert-warning" role="alert" style="color: #ff0000;"></div> -->
                    <input type="hidden" name="customer_id" value="{{ $customers->id }}" />
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Order #</th>
                                <th>Invoice Date</th>
                                <th>Total Amount</th>
                                <th>Due Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $totalDue = 0;
                            @endphp
                            @foreach ($dueOrders as $dueOrder)
                                @php
                                    $totalDue += $dueOrder->amount_due;
                                @endphp
                                <tr>
                                    <td><input type="checkbox" class="amount_due" value="{{ $dueOrder->id }}" data-value="{{ $dueOrder->amount_due }}" name="reference[]" checked="checked"></td>
                                    <td>{{ $dueOrder->order_no }}</td>
                                    <td>{{ date("d/m/Y", strtotime($dueOrder->created_at)) }}</td>
                                    <td align="right">{{ $dueOrder->total }}</td>
                                    <td align="right">{{ $dueOrder->amount_due }}</td>
                                </tr>
                            @endforeach
                            <tr>
                                <td colspan="4"></td>
                                <td align="right">{{ $totalDue }}</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="form-group mt-5">
                        <label for="amount">Amount</label>
                        <input type="text" class="form-control" name="amount" id="amount" value="{{ $totalDue > 0 ? $totalDue : 0 }}" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Submit</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
</div>
@stop

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

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

        $('#add_new_payment').on('click', function(e) {
            // Show the modal
            $('#payment').modal('show');
        });

        $('.amount_due').on('change', function() {
            let amountField = $("#amount");
            let currentAmount = parseFloat(amountField.val()) || 0;
            let checkboxValue = parseFloat($(this).data('value')) || 0;

            if ($(this).is(':checked')) {
                amountField.val(currentAmount + checkboxValue);
            } else {
                amountField.val(currentAmount - checkboxValue);
            }
        });
    })(jQuery);
</script>
@stop