@extends('layouts.master', ['title' => 'List - Prospects - Pages'])

@section('workspace')

    <!-- Breadcrumb -->
    <section class="breadcrumb lg:flex items-start">
        <div>
            <h1>Prospects</h1>
            <ul>
                <li><a href="#no-link">Pages</a></li>
                <li class="divider la la-arrow-right"></li>
                <li><a href="#no-link">Prospect</a></li>
                <li class="divider la la-arrow-right"></li>
                <li>List</li>
            </ul>
        </div>

        <div class="flex flex-wrap gap-2 items-center ltr:ml-auto rtl:mr-auto mt-5 lg:mt-0">

            <!-- Search -->
            <form class="flex flex-auto">
                <label class="form-control-addon-within rounded-full">
                    <input class="form-control border-none" placeholder="Search">
                    <button
                        class="text-gray-300 dark:text-gray-700 text-xl leading-none la la-search ltr:mr-4 rtl:ml-4"></button>
                </label>
            </form>

            <div class="flex gap-x-2">

                <!-- Sort By -->
                <div class="dropdown">
                    <button class="btn btn_outlined btn_secondary uppercase" data-toggle="dropdown-menu">
                        Sort By
                        <span class="ltr:ml-3 rtl:mr-3 la la-caret-down text-xl leading-none"></span>
                    </button>
                    <div class="dropdown-menu">
                        <a href="#no-link">Ascending</a>
                        <a href="#no-link">Descending</a>
                    </div>
                </div>

                <!-- Add New -->
                {{--<a href="{{ url('pages/blog/add') }}" class="btn btn_primary uppercase">Add New</a>--}}
            </div>
        </div>
    </section>

    <!-- List -->
    <div class="card p-5">
        <div class="overflow-x-auto">
            <table class="table table-auto table_hoverable w-full">
                <thead>
                <tr>
                    <th class="w-px">
                        <label class="custom-checkbox">
                            <input type="checkbox">
                            <span></span>
                        </label>
                    </th>
                    <th class="ltr:text-left rtl:text-right uppercase">Company Name</th>
                    <th class="text-center uppercase">Contact Person</th>
                    <th class="text-center uppercase">Contact Number</th>
                    <th class="text-center uppercase">Email</th>
                    <th class="text-center uppercase">State</th>
                    <th class="uppercase"></th>
                </tr>
                </thead>
                <tbody>

                @if($customers->count() > 0)
                    @foreach($customers as $customer)
                        <tr>
                            <td>
                                <label class="custom-checkbox">
                                    <input type="checkbox" data-toggle="rowSelection">
                                    <span></span>
                                </label>
                            </td>
                            <td>{{$customer->trialCompany->company_name}}</td>
                            <td class="text-center">{{$customer->trialCompany->contact_name}}</td>
                            <td class="text-center">{{$customer->trialCompany->contact_number}}</td>
                            <td class="text-center">{{$customer->trialCompany->email}}</td>
                            <td class="text-center">{{$customer->trialCompany->state}}</td>
                            <td class="ltr:text-right rtl:text-left whitespace-nowrap">
                                <div class="inline-flex ltr:ml-auto rtl:mr-auto">
                                    {{--                                    <button class="btn btn-icon btn_outlined btn_primary" data-toggle="modal"--}}
                                    {{--                                            data-target="#exampleModalStaticBackdrop">--}}
                                    {{--                                        <span class="la la-handshake"></span>--}}
                                    {{--                                    </button>--}}
                                    <button class="btn btn-icon btn_outlined btn_primary"
                                            onclick="openModalFunction('{{$customer->trialCompany->company_id}}')">
                                        <span class="la la-handshake"></span>
                                    </button>

                                </div>
                            </td>
                        </tr>
                    @endforeach

                @else
                    <tr>
                        <td colspan="7" class="text-center">No data available</td>
                    </tr>
                @endif

                </tbody>
            </table>
        </div>
    </div>

{{--    <div class="mt-5">--}}
{{--        @include('partials._pagination')--}}
{{--    </div>--}}

    {{--    <example-component></example-component>--}}

    <!-- Footer Bar -->
    {{--    <div class="footer-bar">--}}
    {{--        <div class="flex items-center uppercase">--}}
    {{--            <span class="badge badge_primary ltr:mr-2 rtl:ml-2">1</span>--}}
    {{--            Post Selected--}}
    {{--        </div>--}}
    {{--        <div class="ltr:ml-auto rtl:mr-auto">--}}
    {{--            <button class="btn btn_danger uppercase">--}}
    {{--                <span class="la la-trash-alt text-xl leading-none ltr:mr-2 rtl:ml-2"></span>--}}
    {{--                Remove--}}
    {{--            </button>--}}
    {{--        </div>--}}
    {{--    </div>--}}


    <!-- Modal -->
    <div id="exampleModalStaticBackdrop" class="modal" data-animations="fadeInDown, fadeOutUp" data-static-backdrop>
        <div class="modal-dialog modal-dialog_centered max-w-4xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title">Pass to Sub Dealer</h2>
                    {{--                    <button class="close la la-times" data-dismiss="modal"></button>--}}
                    <button class="close la la-times" onclick="closeModalFunction()"></button>
                </div>
                <div class="modal-body">
                    <!-- Breadcrumb -->
                    <section class="breadcrumb lg:flex items-start">


                        <div class="flex flex-wrap gap-2 items-center ltr:ml-auto rtl:mr-auto mt-5 lg:mt-0">

                            <!-- Search -->
                            <form class="flex flex-auto">
                                <label class="form-control-addon-within rounded-full">
                                    <input class="form-control border-none" placeholder="Search">
                                    <button
                                        class="text-gray-300 dark:text-gray-700 text-xl leading-none la la-search ltr:mr-4 rtl:ml-4"></button>
                                </label>
                            </form>

                            <div class="flex gap-x-2">

                                <!-- Sort By -->
                                <div class="dropdown">
                                    <button class="btn btn_outlined btn_secondary uppercase"
                                            data-toggle="dropdown-menu">
                                        Sort By
                                        <span class="ltr:ml-3 rtl:mr-3 la la-caret-down text-xl leading-none"></span>
                                    </button>
                                    <div class="dropdown-menu">
                                        <a href="#no-link">Ascending</a>
                                        <a href="#no-link">Descending</a>
                                    </div>
                                </div>

                                <!-- Add New -->
                                {{--<a href="{{ url('pages/blog/add') }}" class="btn btn_primary uppercase">Add New</a>--}}
                            </div>
                        </div>
                    </section>
                    <div class="card p-5">
                        <div class="overflow-x-auto">
                            <table class="table table-auto table_hoverable w-full">
                                <thead>
                                <tr>

                                    <th class="ltr:text-left rtl:text-right uppercase">Company Name</th>
                                    <th class="text-center uppercase">State</th>
                                    <th class="text-center uppercase">Customer Handled</th>
                                    <th class="text-center uppercase">Total License</th>
                                    <th class="text-center uppercase">Used License</th>
                                    <th class="w-px">

                                    </th>
                                </tr>
                                </thead>
                                <tbody>

                                @if($activeSubDealers->count() > 0)
                                    @foreach($activeSubDealers as $subDealer)
                                        <tr data-id="{{$subDealer->sub_dealer_id}}">
                                            <td>{{$subDealer->company_name}}</td>
                                            <td class="text-center">{{$subDealer->state}}</td>
                                            <td class="text-center">0</td>
                                            <td class="text-center">{{$subDealer->total_license}}</td>
                                            <td class="text-center">{{$subDealer->used_license}}</td>
                                            <td>
                                                <label class="custom-checkbox">
                                                    <input type="checkbox" class="row-checkbox"
                                                           data-toggle="rowSelection">
                                                    <span></span>
                                                </label>
                                            </td>
                                        </tr>
                                    @endforeach

                                @else
                                    <tr>
                                        <td colspan="7" class="text-center">No data available</td>
                                    </tr>
                                @endif

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="flex ltr:ml-auto rtl:mr-auto">
                        {{--                        <button class="btn btn_secondary uppercase" data-dismiss="modal">Close</button>--}}
                        <button class="btn btn_secondary uppercase" onclick="closeModalFunction()">Close</button>
                        <button class="btn btn_primary ltr:ml-2 rtl:mr-2 uppercase" onclick="confirmFunction()">
                            Confirm
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection


@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>

        let selectedCustomerId = '';
        let selectedSubDealerId = '';

        const checkboxes = document.getElementsByClassName("row-checkbox");

        // // 为每个复选框元素添加事件监听器
        // for (let i = 0; i < checkboxes.length; i++) {
        //     checkboxes[i].addEventListener("change", function() {
        //         if (this.checked) {
        //             // 取消其他复选框的选中状态
        //             for (let j = 0; j < checkboxes.length; j++) {
        //                 if (checkboxes[j] !== this) {
        //                     checkboxes[j].checked = false;
        //                 }
        //             }
        //         }
        //     });
        // }

        // 为每个复选框元素添加事件监听器
        for (let i = 0; i < checkboxes.length; i++) {
            checkboxes[i].addEventListener("change", function () {
                if (this.checked) {
                    let row = this.parentNode.parentNode.parentNode; // 获取当前行
                    selectedSubDealerId = row.getAttribute("data-id"); // 获取行的data-id属性值
                    // let rowData = {
                    //     company_id: row.getAttribute("data-id"), // 获取行的data-id属性值
                    //     name: row.cells[1].textContent, // 获取第二列单元格的文本内容
                    //     age: row.cells[2].textContent // 获取第三列单元格的文本内容
                    //     // 获取其他列的数据...
                    // };
                    //
                    // console.log(rowData); // 在控制台打印行数据
                }
            });
        }

        function confirmFunction() {

            console.log(''+',selectedSubDealerId: ' + selectedSubDealerId);

            axios.defaults.headers.common['X-CSRF-TOKEN'] = document.head.querySelector('meta[name="csrf-token"]').content;

            //Use axios to send request to server
            axios.post('{{route('master-dealer.prospects.transfer')}}', {
                _token: '{{ csrf_token() }}',
                trial_customer_id: selectedCustomerId,
                sub_dealer_id: selectedSubDealerId
            })
                .then(function (response) {
                    console.log(response);
                    if (response.data.status === 'success') {
                        //Show success message
                        //Redirect to sub-dealer list page
                        window.location.href = '/master-dealer/customers';
                    } else {
                        //Show error message
                    }x``
                })
                .catch(function (error) {
                    console.log(error.request);
                });

        }

        function getRow(n) {
            let row = n.parentNode.parentNode;
            let cols = row.getElementsByTagName("td");
            let i = 0;

            while (i < cols.length) {
                let val = cols[i].childNodes[0].nodeValue;
                if (val != null) {
                    alert(val);
                }

                i++;
            }
        }

        function closeModalFunction() {
            selectedCustomerId = '';
            const modal = document.getElementById('exampleModalStaticBackdrop');
            modal.style.display = "none";
        }

        function openModalFunction(id) {

            // const modal = document.getElementById('exampleModalStaticBackdrop');
            //
            // // modal.classList.add('show'); // 添加 'show' 类来显示模态框
            // // modal.style.display = 'block'; // 设置模态框的 display 属性为 'block'
            // // document.body.classList.add('modal-open'); // 添加

            selectedCustomerId = id;
            const modal = document.getElementById('exampleModalStaticBackdrop');
            modal.style.display = "block";

            console.log('openModalFunction:' + id);
        }
    </script>
@endsection