@extends('layouts.master')
@section('title', 'User')
@push('css')

@endpush

@section('content')
    <form method="POST" action="{{ route('user.supplierPayment.add') }}" enctype="multipart/form-data">
        @csrf
        <div class="row">
            <div class="col-xl-12">
                <div class="form-horizontal">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="txtFirstName"> Transaction ID </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <input type="text" name="transaction_id" id="txtFirstName" placeholder="ID" value=""
                                    class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="Brunch"> Transaction Type </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-7">
                                <select data-placeholder="Choose a Country..." name="transaction_type"
                                    class="chosen-select" id="demo-chosen-select" tabindex="2">
                                    <option value="receive">Receive</option>
                                    <option value="payment">Payment</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="Brunch"> Payment Type </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-7">
                                <select data-placeholder="Choose a Country..." name="payment_type" class="chosen-select"
                                    id="payment_type_click" tabindex="2">
                                    <option value="cash">Cash </option>
                                    <option value="bank">Bank </option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group" id="payment_type_bank_form" style="display: none;">
                            <label class="col-sm-4 control-label" for="Brunch"> Account </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-7">
                                <select data-placeholder="Choose a Country..." name="account_name" class="chosen-select"
                                    id="demo-chosen-select" tabindex="2">
                                    @foreach ($bankAccounts as $bankAccount)
                                        <option
                                            value="{{ $bankAccount->account_type }}-{{ $bankAccount->account_number }}-{{ $bankAccount->bank_name }}-{{ $bankAccount->id }}">
                                            {{ $bankAccount->account_type }}-{{ $bankAccount->account_number }}-{{ $bankAccount->bank_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="Brunch"> Supplier </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <select data-placeholder="Choose a Country..." name="supplier_id"
                                    class="chosen-select supplier" id="demo-chosen-select" tabindex="2">
                                    <option value=" ">Select Supplier</option>
                                    @foreach ($suppliers as $supplier)
                                        <option value="{{ $supplier->id }}">{{ $supplier->supplier_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-sm-1">
                                <a href="/administration/customer" target="_blank" title="Add New Customer" class="btn btn-xs btn-danger" style="height: 31px; border: 0px; width: 27px; margin-left: -20px;"><i aria-hidden="true" class="fa fa-plus" style="margin-top: 10px;"></i></a>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="username"> Due </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <input type="number" id="supplier_due" name="due" readonly placeholder="Supplier Due"
                                    class="form-control">
                                {{-- <div id="usermes" class="col-sm-12"><span style="color:red;">This user name already --}}
                                {{-- exist</span></div> --}}
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="username"> Payment Date </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <input type="Date" id="username" name="date" placeholder="Permanent Address"
                                    class="form-control" value="2025-12-11">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="username"> Amount </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <input type="number" id="username" name="amount" placeholder="Amount"
                                    class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="username"> description </label>
                            <label class="col-sm-1 control-label">:</label>
                            <div class="col-sm-6">
                                <textarea name="description" class="form-control"></textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-4 control-label" for=""> </label>
                            <label class="col-sm-1 control-label"></label>
                            <div class="col-sm-6">
                                <button type="button" onclick="submit()" name="btnSubmit" title="Save"
                                    class="btn btn-sm btn-success pull-left">
                                    Save
                                    <i class="ace-icon fa fa-arrow-right icon-on-right bigger-110"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <div class="">
        <h3 class="panel-title">Supplier Transaction</h3>
    </div>
    <div class="col-xl-12">

        <div class="panel">

            <div class="panel-body">
                <table id="demo-dt-basic" class="table table-striped table-bordered" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Transaction Id </th>
                            <th>Date </th>
                            <th class="min-tablet">Customer </th>
                            <th class="min-tablet">Transaction Type </th>
                            <th class="min-tablet">Payment by </th>
                            <th class="min-tablet">Amount </th>
                            <th class="min-tablet">Description </th>

                            <th class="min-tablet">Saved By </th>
                            <th class="min-tablet">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($supplierPayments as $supplierPayment)
                            <tr>
                                <td>{{ $supplierPayment->transaction_id }}</td>
                                <td>{{ $supplierPayment->date }}</td>
                                <td>{{ $supplierPayment->customer_id }}</td>
                                <td>{{ $supplierPayment->transaction_type }}</td>
                                <td></td>
                                <td>{{ $supplierPayment->amount }}</td>
                                <td>{{ $supplierPayment->description }}</td>

                                <td>{{ $supplierPayment->userName->name }}</td>
                                <td>
                                    <a style="font-size: 7px"
                                        href="{{ route('user.supplierPayment.edit', $supplierPayment->id) }}"
                                        class="btn btn-mint btn-icon"><i class="demo-psi-pen-5 icon-lg"></i></a>
                                    <a style="font-size: 7px" onclick="return confirm('Are you sure?')"
                                        href="{{ route('user.supplierPayment.delete', $supplierPayment->id) }}"
                                        class="btn btn-success btn-icon"><i class="demo-psi-recycling icon-lg"></i></a>


                                </td>
                            </tr>
                        @endforeach

                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            var table = $('#example').DataTable({
                lengthChange: false,
                buttons: ['copy', 'excel', 'pdf', 'colvis']
            });

            table.buttons().container()
                .appendTo('#example_wrapper .col-md-6:eq(0)');
        });
    </script>
    <script>
        $("#payment_type_click").change(function() {
            var end = this.value;
            if (end == 'bank') {
                $("#payment_type_bank_form").css('display', 'block');
            } else {
                $("#payment_type_bank_form").css('display', 'none');
            }

        });
    </script>
    <script>
        $(".supplier").change(function() {
            var supplier_id = this.value;
            $.ajax({
                url: '/accounts/supplierPayment/due/' + supplier_id,
                type: 'GET',
                success: (function(response) {
                    var totalDue = (response.totalDue).toFixed(2)
                    $('#supplier_due').val(totalDue);
                })
            })
        });
    </script>
@endpush