@extends('layouts/contentLayoutMaster')

@section('title', 'Payment Details')

@section('vendor-style')
    {{-- vendor css files --}}
    <link rel="stylesheet" href="{{ asset('vendors/css/forms/select/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/tables/datatable/dataTables.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/tables/datatable/buttons.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/extensions/sweetalert2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('/css/custom.css') }}">
@endsection
@section('content')

    <!-- Column Search -->
    <section id="column-search-datatable">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    @if ($message = Session::get('success'))
                        <div class="demo-spacing-0 my-2">
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <div class="alert-body">{{ $message }}</div>
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        </div>
                    @endif
                    <div class="card-header border-bottom">
                        <h4 class="card-title">
                            Payment Calculation Details
                        </h4>
                    </div>
                    <div class="card-datatable table-responsive">
                        <table class="table" id="payments">
                            <thead>
                                {{-- <tr>
                                    <td colspan="1">
                                        <select class="select2 search-input" id="area_office">
                                            <option value="">Area Office</option>
                                            @foreach ($areaOffices as $areaOffice)
                                                <option value="{{ $areaOffice->name }}">{{ $areaOffice->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td colspan="2">
                                        <select class="select2 search-input" id="supplier">
                                            <option value="">Supplier</option>
                                            @foreach ($payments as $payment)
                                                <option value="{{ $payment['supplier_id'] }}">{{ $payment['supplier_id'] }}
                                                    {{ $payment['supplier_code'] }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td colspan="1">
                                        <select class="select2 search-input" id="source">
                                            <option value="">Supplier Type</option>
                                            @foreach ($sources as $source)
                                                <option value="{{ $source->name }}">{{ $source->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </td>
                                </tr> --}}
                                <tr>
                                    <th>Supplier Code</th>
                                    <th>Supplier</th>
                                    <th>Supplier Type</th>
                                    <th>Area Office</th>
                                    <th>Collection Point</th>
                                    <th>CNIC</th>
                                    <th>Total Ts Volume</th>
                                    <th>AFM Volume</th>
                                    <th>AFM Incentive</th>
                                    <th>Total AFM Incentive</th>
                                    <th>TPC Volume</th>
                                    <th>TPC Incentive</th>
                                    <th>Total TPC Incentive</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--/ Column Search -->
@endsection


@section('vendor-script')
    {{-- vendor files table data --}}
    <script src="{{ asset('vendors/js/tables/datatable/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendors/js/forms/select/select2.full.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/datatables.buttons.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/buttons.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendors/js/extensions/sweetalert2.all.min.js') }}"></script>
@endsection

@section('page-script')
    <script src="{{ asset('/js/custom.js') }}"></script>
    <script>
        $(".select2").select2({});
        var payments = 'null';
        baseUrl = '