@extends('Admin.layouts.master')
@section('title', 'Manage Commission')
@section('style')
<style>
    .dataTables_filter {
        display: none;
    }

    .dt-buttons {
        display: none;
    }
</style>
@endsection
@section('content')
<!--begin::Main-->
<div class="app-main flex-column flex-row-fluid" id="kt_app_main">
    <!--begin::Content wrapper-->
    <div class="d-flex flex-column flex-column-fluid">
        <div id="kt_app_content_container" class="app-container container-xxl">
            <div class="row max-w-100 mt-10 index_table">
                <div class="top_header d-flex justify-content-between">
                    <p class='fs-2 fw-bold'>User Commission</p>
                    <div class="row">
                        <div class="col-6">
                            <label for="">From</label>
                            <input type="date" name="fromDate" id="fromDate" placeholder="" class="form-control">
                        </div>
                        <div class="col-6">
                            <label for="">To</label>
                            <input type="date" name="toDate" id="toDate" class="form-control">
                        </div>
                    </div>
                    <button class="btn btn-light-primary me-2" id="filterBtn">Filter</button>
                    <div class="table_right_options d-flex">
                        <button type="button" class="btn btn-light-primary me-3" id="ExportReporttoExcel">
                            <!-- begin::Svg Icon | path: icons/duotune/arrows/arr078.svg -->
                            <span class="svg-icon svg-icon-2">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect opacity="0.3" x="12.75" y="4.25" width="12" height="2" rx="1" transform="rotate(90 12.75 4.25)" fill="currentColor"></rect>
                                    <path d="M12.0573 6.11875L13.5203 7.87435C13.9121 8.34457 14.6232 8.37683 15.056 7.94401C15.4457 7.5543 15.4641 6.92836 15.0979 6.51643L12.4974 3.59084C12.0996 3.14332 11.4004 3.14332 11.0026 3.59084L8.40206 6.51643C8.0359 6.92836 8.0543 7.5543 8.44401 7.94401C8.87683 8.37683 9.58785 8.34458 9.9797 7.87435L11.4427 6.11875C11.6026 5.92684 11.8974 5.92684 12.0573 6.11875Z" fill="currentColor"></path>
                                    <path opacity="0.3" d="M18.75 8.25H17.75C17.1977 8.25 16.75 8.69772 16.75 9.25C16.75 9.80228 17.1977 10.25 17.75 10.25C18.3023 10.25 18.75 10.6977 18.75 11.25V18.25C18.75 18.8023 18.3023 19.25 17.75 19.25H5.75C5.19772 19.25 4.75 18.8023 4.75 18.25V11.25C4.75 10.6977 5.19771 10.25 5.75 10.25C6.30229 10.25 6.75 9.80228 6.75 9.25C6.75 8.69772 6.30229 8.25 5.75 8.25H4.75C3.64543 8.25 2.75 9.14543 2.75 10.25V19.25C2.75 20.3546 3.64543 21.25 4.75 21.25H18.75C19.8546 21.25 20.75 20.3546 20.75 19.25V10.25C20.75 9.14543 19.8546 8.25 18.75 8.25Z" fill="currentColor"></path>
                                </svg>
                            </span>
                            <!-- end::Svg Icon -->Export
                        </button>

                        <div class="d-flex align-items-center position-relative">
                            <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
                            <span class="svg-icon svg-icon-1 position-absolute ms-6">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="currentColor" />
                                    <path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="currentColor" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                            <!-- <div id="newSearchPlace"></div> -->
                            <input type="text" data-kt-user-table-filter="search" class="form-control bg-white form-control-solid w-250px ps-14" placeholder="Search Commissions" id="searchbox" />
                        </div>
                    </div>
                </div>

                <div class="dataTable_area my-5 mb-0">
                    <!--begin::Card-->
                    <div class="card">
                        <div class="card-header border-0 pt-0 h-0">
                            <!--begin::Card toolbar-->
                            <div class="card-toolbar">
                                <!--begin::Toolbar-->
                                <div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
                                    <!--begin::Group actions-->
                                    <div class="d-flex justify-content-end align-items-center d-none" data-kt-user-table-toolbar="selected">
                                        <button type="button" class="btn btn-danger" data-kt-user-table-select="delete_selected">Delete Selected</button>
                                    </div>
                                </div>
                                <!--end::Group actions-->
                            </div>
                            <!--end::Card toolbar-->
                        </div>
                        <!--begin::Card body-->
                        <div class="card-body py-4 pt-0">
                            <!--begin::Table-->
                            <table class="table align-middle table-row-dashed fs-6 gy-5 commissions-table" id="manageCommissionTable">
                                <!--begin::Table head-->
                                <thead>
                                    <!--begin::Table row-->
                                    <tr class="text-start align-top text-muted fw-bold fs-7 text-uppercase gs-0">
                                        <!-- <th class="w-10px pe-2">
                                            <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                                                <input class="form-check-input" type="checkbox" data-kt-check="true" data-kt-check-target="#manageCommission .form-check-input" value="1" />
                                            </div>
                                        </th> -->
                                        <th class="w-60px pe-2 align-top">Sr no</th>
                                        <th class="min-w-125px  w-150px align-top">Investor Name</th>
                                        <th class="min-w-100px w-75px align-top">Product Sold</th>
                                        <th class="min-w-50px w-100px align-top">Transaction Date</th>
                                        <th class="min-w-50px  w-100px align-top ">Month</th>
                                        <th class="min-w-50px  w-150px align-top">Total Investment</th>
                                        <th class="min-w-50px  w-100px align-top">Applicable Rate</th>
                                        <th class="min-w-50px  w-125px align-top">Commission Type</th>
                                        <th class="text-center min-w-100px align-top notexport">Actions</th>
                                    </tr>
                                    <!--end::Table row-->
                                </thead>
                                <!--end::Table head-->
                                <!--begin::Table body-->
                                <tbody class="text-gray-600 fw-semibold">
                                    {{--@foreach($commissions as $commission)
                                    <tr>
                                        <td>{{$loop->iteration}}</td>
                                        <td>{{$commission->monthlyUpdate->investor_name}}</td>
                                        <td></td>
                                        <td>{{$commission->created_at->format('d/m/Y')}}</td>
                                        <td>{{$commission->created_at->format('M')}}</td>
                                        <td>{{$commission->total_investment_or_commitment_amount}}</td>
                                        <td>{{$commission->applicable_rate}}</td>
                                        <td>{{$commission->type_of_commission}}</td>
                                        <td>
                                            <a href="{{route('get-user-commission',$commission->id)}}">
                                                <i class="fa-regular fa-eye"></i>
                                            </a>
                                            <a href="{{route('edit-user-commission',$commission->id)}}" style="float:right">
                                                <i class="fa-solid fa-pen-to-square"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    @endforeach--}}
                                </tbody>
                                <!--end::Table body-->
                            </table>
                            <!--end::Table-->
                        </div>
                        <!--end::Card body-->
                    </div>
                    <!--end::Card-->

                    <!-- view user details-start -->
                    <div class="modal fade" id="manage_commission_view" tabindex="-1" aria-hidden="true">
                        <!--begin::Modal dialog-->
                        <div class="modal-dialog modal-dialog-centered mw-900px">
                            <!--begin::Modal content-->
                            <div class="modal-content">
                                <!--begin::Modal header-->
                                <div class="modal-header p-3">
                                    <!-- <div class="d"></div> -->
                                    <h2>View Detail</h2>
                                    <!--begin::Close-->
                                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                                        <span class="svg-icon svg-icon-1">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
                                                <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
                                            </svg>
                                        </span>
                                        <!--end::Svg Icon-->
                                    </div>
                                    <!--end::Close-->
                                </div>
                                <!--end::Modal header-->
                                <!--begin::Modal body-->
                                <div class="modal-body px-lg-10 p-5">
                                    <!--begin::Tables widget 14-->
                                    <div class="card card-flush h-md-100">
                                        <!--begin::Body-->
                                        <div class="card-body p-0">
                                            <!--begin::Table container-->
                                            <div class="table-responsive">
                                                <!--begin::Table-->
                                                <table class="table table-row-dashed align-middle gs-0 gy-3 my-0">
                                                    <!--begin::Table head-->
                                                    <thead>
                                                        <tr class="fs-4 fw-bold text-black-400 border-bottom-0">
                                                            {{--<th class="p-0 pb-3 min-w-175px text-start">
                                                                <img src="../../assets/media/logo.jpg" alt="Company logo" class="w-75px pb-3" />
                                                            </th>--}}
                                                            <th class="p-0 pb-3 min-w-100px text-center">Product Name</th>
                                                            <th class="p-0 pb-3 min-w-100px text-center">Category</th>
                                                            <th class="p-0 pb-3 min-w-100px text-center">Rate</th>
                                                            <th class="p-0 pb-3 min-w-175px text-start pe-12">Commission Type</th>
                                                        </tr>
                                                    </thead>
                                                    <!--end::Table head-->
                                                    <!--begin::Table body-->
                                                    <tbody>
                                                        <tr>
                                                            <td>
                                                                <div class="d-flex align-items-start">
                                                                    <div class="me-3">
                                                                        <!-- <img src="../../assets/media/logo.jpg" alt="Company logo" class="w-75px pb-3" /> -->
                                                                        <p class='text-black-400 fw-semibold d-block fs-4 m-0' id="view-productname">Embassy Business Hub</p>
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <td class="text-center pe-0">
                                                                <span class="text-gray-600 fw-bold fs-6" id="view-category-name"></span>
                                                            </td>
                                                            <td class="text-center pe-0">
                                                                <!--begin::Label-->
                                                                <span class="text-gray-600 fw-bold fs-6" id="view-rate"></span>
                                                                <!--end::Label-->
                                                            </td>
                                                            <td class="text-center   pe-12">
                                                                <div class="d-flex align-items-center justify-content-between">
                                                                    <span class="text-gray-600 fw-bold fs-6" id="view-commission-type">One time</span>
                                                                    {{--<a class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#manage_commission_edit">Edit</a>--}}
                                                                    <!-- <a class='py-3 px-4 fs-7 badge-light'>Edit</a> -->
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                    <!--end::Table body-->
                                                </table>
                                            </div>
                                            <!--end::Table-->
                                            <div class="row max-w-100 mt-6">
                                                <div class="col-md-6 index-box">
                                                    <div class="card card-flush mb-5 mb-xl-10">
                                                        <!--begin::Header-->
                                                        <div class="card-header pt-5">
                                                            <!--begin::Title-->
                                                            <div class="card-title d-flex flex-column">
                                                                <!--begin::Amount-->
                                                                <span class="fs-6 fw-bold text-white me-2">Total Invest</span>
                                                                <!--end::Amount-->
                                                            </div>
                                                            <!--end::Title-->
                                                        </div>
                                                        <!--end::Header-->
                                                        <!--begin::Card body-->
                                                        <div class="card-body d-flex align-items-end pt-0">
                                                            <!--begin::Progress-->
                                                            <div class="d-flex align-items-start flex-column w-100">
                                                                <!-- <div class="d-flex justify-content-between fw-bold fs-6 text-white opacity-75 w-100 mt-auto mb-2">
                                                                        <span>43 Pending</span>
                                                                        <span>72%</span>
                                                                </div> -->
                                                                <span class="text-white opacity-75 fw-semibold fs-3x" id="view-mininvestment">₹500,000</span>
                                                                <!-- <div class="h-8px mx-3 w-100 bg-white bg-opacity-50 rounded">
                                                                        <div class="bg-white rounded h-8px" role="progressbar" style="width: 72%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                                                </div> -->
                                                            </div>
                                                            <!--end::Progress-->
                                                        </div>
                                                        <!--end::Card body-->
                                                    </div>
                                                </div>
                                                <div class="col-md-6 index-box">
                                                    <div class="card card-flush mb-5 mb-xl-10">
                                                        <!--begin::Header-->
                                                        <div class="card-header pt-5">
                                                            <!--begin::Title-->
                                                            <div class="card-title d-flex flex-column">
                                                                <!--begin::Amount-->
                                                                <span class="fs-6 fw-bold text-white me-2">Commission</span>
                                                                <!--end::Amount-->
                                                            </div>
                                                            <!--end::Title-->
                                                        </div>
                                                        <!--end::Header-->
                                                        <!--begin::Card body-->
                                                        <div class="card-body d-flex align-items-end pt-0">
                                                            <!--begin::Progress-->
                                                            <div class="d-flex align-items-start flex-column w-100">
                                                                <!-- <div class="d-flex justify-content-between fw-bold fs-6 text-white opacity-75 w-100 mt-auto mb-2">
                                                                        <span>43 Pending</span>
                                                                        <span>72%</span>
                                                                </div> -->
                                                                <span class="text-white opacity-75 fw-semibold fs-3x" id="view-commission"></span>
                                                                <!-- <div class="h-8px mx-3 w-100 bg-white bg-opacity-50 rounded">
                                                                        <div class="bg-white rounded h-8px" role="progressbar" style="width: 72%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                                                </div> -->
                                                            </div>
                                                            <!--end::Progress-->
                                                        </div>
                                                        <!--end::Card body-->
                                                    </div>
                                                </div>
                                                <div class="col-md-12 mt-0">
                                                    <label class="required fs-6 fw-semibold mb-2">Description</label>
                                                    <div class="adescription_aare card">
                                                        <p class='m-0 fs-6 text-gray-400' id="view-description">The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content. The passage experienced a surge in popularity during the 1960s when Letraset used it on their dry-transfer sheets, and again during the 90s as desktop publishers bundled the text with their software. Today it's seen all around the web; on templates, websites, and stock designs. Use our generator to get your own, or read on for the authoritative history of lorem ipsum.</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end: Card Body-->
                                    </div>
                                    <!--end::Tables widget 14-->
                                </div>
                                <!--end::Modal body-->
                            </div>
                            <!--end::Modal content-->
                        </div>
                        <!--end::Modal dialog-->
                    </div>
                    <!-- view user details-end -->


                    <!-- edit user details-start -->
                    <div class="modal fade" id="manage_commission_edit" tabindex="-1" aria-hidden="true">
                        <!--begin::Modal dialog-->
                        <div class="modal-dialog modal-dialog-centered mw-900px">
                            <!--begin::Modal content-->
                            <div class="modal-content">
                                <!--begin::Modal header-->
                                <div class="modal-header">
                                    <!--begin::Modal title-->
                                    <h2>Edit Details</h2>
                                    <!--end::Modal title-->
                                    <!--begin::Close-->
                                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                                        <span class="svg-icon svg-icon-1">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
                                                <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
                                            </svg>
                                        </span>
                                        <!--end::Svg Icon-->
                                    </div>
                                    <!--end::Close-->
                                </div>
                                <!--end::Modal header-->
                                <!--begin::Modal body-->
                                <div class="modal-body px-lg-10">
                                    <!--begin::Stepper-->
                                    <div class="stepper stepper-pills stepper-column d-flex flex-column flex-xl-row flex-row-fluid" id="kt_modal_create_app_stepper">
                                        <!--begin::Content-->
                                        <form id="editCommission" class="form pb-0">
                                            @csrf
                                            @method('PATCH')
                                            <input type="hidden" name="id" id="product_id">
                                            <div class="row">
                                                <div class="col-md-6 fv-row mb-7">
                                                    <label class="required fs-6 fw-semibold mb-2">Commission</label>
                                                    <input type="text" class="form-control form-control-solid" placeholder="Enter Commission" name="commission" id="edit-commission" />
                                                </div>
                                                <div class="col-md-6 fv-row mb-7">
                                                    <label class="required fs-6 fw-semibold mb-2">Commission Rate(%)</label>
                                                    <input type="number" class="form-control form-control-solid" placeholder="Enter Commission Rate" name="rate" id="edit-rate" />
                                                </div>
                                                <!--begin::Col-->
                                                <div class="col-md-12 d-flex" id="commissionRadioBtn">
                                                    <label class="required fs-6 fw-semibold mb-2 me-3">Commission Type</label>
                                                    <select name="commission_type" id="commission_type" class="form-select">
                                                        <option value="">Please Select Commission Type</option>
                                                        <option value="One-Time Commission">One-Time Commission</option>
                                                        <option value="Trail Commission">Trail Commission</option>
                                                        <option value="Hybrid Structure">Hybrid Structure</option>
                                                        <option value="Profit-sharing">Profit-sharing</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-12 mt-8">
                                                    <label class="required fs-6 fw-semibold mb-2">Description</label>
                                                    <textarea class="form-control form-control form-control-solid min-h-100px" data-kt-autosize="true" name="description" placeholder="Enter Description" id="edit-description"></textarea>
                                                </div>
                                                <!--end::Col-->
                                            </div>
                                            <div class="submit_btn d-flex justify-content-center mt-15">
                                                <button type="submit" class="btn btn-light-dark">Submit</button>
                                            </div>
                                        </form>
                                        <!--end::Content-->
                                    </div>
                                    <!--end::Stepper-->
                                </div>
                                <!--end::Modal body-->
                            </div>
                            <!--end::Modal content-->
                        </div>
                        <!--end::Modal dialog-->
                    </div>
                    <!-- edit user details-end -->
                </div>
            </div>
        </div>

    </div>
    <!--end::Content wrapper-->

</div>
<!--end:::Main-->

@endsection

@section('scripts')
<script>
    $(function() {
        var table = $('#manageCommissionTable').DataTable({
            dom: 'Bfrtip',
            ordering: false,
            buttons: [{
                extend: 'excel',
                title: 'Product Commission',
                text: 'Export Search Results',
                className: 'btn btn-default',
                exportOptions: {
                    columns: ':not(.notexport)'
                }
            }]
        });
        $('.dropdown-submenu a.test').on("click", function(e) {
            $(this).next('ul').toggle();
            e.stopPropagation();
            e.preventDefault();
        });
        $("#ExportReporttoExcel").on("click", function() {
            table.button('.buttons-excel').trigger();
        });
        $("#searchbox").keyup(function() {
            table.search($(this).val()).draw();
        });
    })

    $('.get-product-detail').click(function(e) {
        $('#view-rate').html($(this).data("rate"));
        $('#view-mininvestment').html($(this).data("mininvestment"));
        $('#view-productname').html($(this).data("productname"));
        $('#view-description').html($(this).data("description"));
        $('#view-category-name').html($(this).data("category"));
        $('#view-commission').html($(this).data("commission"));
        $('#view-commission-type').html($(this).data("commissiontype"));
        $('#manage_commission_view').modal('show');
    })

    $('.edit-product-detail').click(function(e) {
        $('#product_id').val($(this).data("id"));
        $('#edit-rate').val($(this).data("rate"));
        $('#edit-mininvestment').val($(this).data("mininvestment"));
        $('#edit-productname').val($(this).data("productname"));
        $('#edit-description').val($(this).data("description"));
        $('#edit-category-name').val($(this).data("category"));
        $('#edit-commission').val($(this).data("commission"));
        $('#commission_type').val($(this).data("commissiontype"));
        // let commissionType = $(this).data('commissiontype');
        // if (commissionType) {
        //     $(`input[name=commission_type][value=${commissionType}]`).attr('checked', true);
        // } else {
        //     $(`input[name=commission_type]`).attr('checked', false);
        // }
        $('#manage_commission_edit').modal('show');
    })

    function editProduct(id) {
        $('#product_id').val(id);
        $('#manage_commission_edit').modal('show');
    }

    $(function() {
        $('#filterBtn').click(function() {
            let from = $('#fromDate').val();
            let to = $('#toDate').val();
            dataTableCompanies(from,to);
        });
        dataTableCompanies();

        function dataTableCompanies(from = '', to = '') {
            var table = $('.commissions-table').DataTable({
                processing: true,
                serverSide: true,
                "lengthMenu": [10, 25, 50, 75, 100],
                // ordering: true,
                // paging :true,
                ajax: {
                    url: "{{ route('commission-datatable') }}",
                    type: "POST",
                    data: {
                        // "user_id": $('#filterDropdown').val(),
                        // dropdownValue: dropdownValue,
                        from:from,
                        to:to,
                        "_token": "{{ csrf_token() }}"
                    },
                    error: function(response) {
                        console.log(response);
                    }
                },
                "bDestroy": true,
                // headers: {
                //     "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                // },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'investor_name',
                        name: 'investor_name'
                    },
                    {
                        data: 'product_sold',
                        name: 'product_sold'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'month',
                        name: 'month',
                    },
                    {
                        data: 'total_investment',
                        name: 'total_investment',
                    },
                    {
                        data: 'applicable_rate',
                        name: 'applicable_rate',
                    },
                    {
                        data: 'commission_type',
                        name: 'commission_type',
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ],
                dom: "Blfrtip",
                buttons: [{
                    extend: "excel",
                    title: "Company List",
                    text: "Export Search Results",
                    className: "btn btn-default",
                    exportOptions: {
                        columns: ":not(.notexport)",
                    },
                }, ],
            });
            $("#ExportReporttoExcel").on("click", function() {
                table.button(".buttons-excel").trigger();
            });
            $("#searchbox").keyup(function() {
                table.search($(this).val()).draw();
            });
        };

    });
</script>
@endsection