@extends('layouts.admin')

@push('styles')
<link href="//cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush

@section('main-content')
    <!-- Page Heading -->
    <h1 class="h3 mb-2 text-gray-800">{{  __('Perserta Plan ') . $model->name }}</h1>


    <form method="POST" action="{{ route('participant.update', $model->id) }}">
        @csrf
        @method('PUT')

        <div class="row">
            <div class="col-lg-12 order-lg-1">
                <div class="card shadow mb-4">
                    <div class="card-header py-3 d-flex justify-content-between ">
                        <h6 class="m-0 font-weight-bold text-primary">Senarai Perserta</h6>

                        <div class="btn-group" role="group" aria-label="Basic example">
                            <button type="button" class="btn btn-success" title="Add" data-bs-toggle="tooltip" data-toggle="modal" data-target="#participantModal" id="addModelButton">Add Participant</button>
                        </div>
                    </div>
                    <div class="card-body">
                        <table class="table table-bordered dataTable" id="selected-user-table">
                            <thead>
                                <tr>
                                    <th style="width: 30px;">#</th>
                                    <th>Nama</th>
                                    @foreach ($model->plans as $plan)
                                        <th>{{ $plan->name }}</th>
                                    @endforeach
                                    <th>Jumlah</th>
                                    <th width="120">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($usersWithPlan as $user)
                                    <tr data-id="{{ $user->id }}" data-name="{{ $user->name }}">
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $user->name }}</td>
                                        @php
                                            $total = 0;
                                        @endphp
                                        @foreach ($user->plans as $plan)
                                            <td>{{ number_format(($plan->pivot->investment / 100), 2) }}</td>
                                            @php
                                                if($plan->payment_type == App\Models\Plan::PAYMENT_TYPE_CREDIT)
                                                    $total += $plan->pivot->investment;
                                            @endphp
                                        @endforeach
                                        <td>{{ number_format(($total / 100), 2) }}</td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-info editParticipant"><i class="fa fa-edit"></i></button>
                                            <button type="button" class="btn btn-sm btn-danger removeParticipant"><i class="fa fa-trash"></i></button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                    </div>
                    <div class="card-footer">
                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            <button type="submit" class="btn btn-primary">Simpan</button>
                            <a href="{{ route('plan.show', $model->id) }}" class="btn btn-secondary">Batal</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Hidden container for leaders & participants -->
        <div id="hidden-fields-container" class="d-none">
            @foreach($usersWithPlan as $user)
                @foreach ($user->plans as $plan)
                    <input type="hidden" name="plan[{{ $plan->id }}][{{ $user->id }}]" value="{{ $plan->pivot->investment }}" id="plan-{{ $plan->id }}-{{ $user->id }}">
                @endforeach
            @endforeach
        </div>
    </form>

    {{-- Modal section --}}

    <div class="modal fade" id="participantModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">Maklumat Penyertaan Perserta</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>

                <div class="modal-body">

                    <div class="row">
                        <x-ui.select
                            name="user"
                            label="Perserta"
                            :options="$users"
                            nullable
                            col="col-md-12"
                            required
                            :select2="false"
                            :disabled="false"
                        />
                        <x-ui.input
                            class="input d-none"
                            name="userName"
                            type="text"
                            col="col-md-12"
                            :disabled="true"
                        />
                    </div>
                    <div class="row">
                        <div class="table-responsive">
                            <table class="table table-bordered m-3">
                                <thead>
                                    <tr>
                                        <th scope="col" style="width: 30px;">#</th>
                                        <th scope="col">Plan</th>
                                        <th scope="col">Kos</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($model->plans as $plan)
                                        <tr>
                                            <th scope="row">{{ $loop->iteration }}</th>
                                            <td>{{ $plan->name }}</td>
                                            <td>
                                                <x-ui.input
                                                    class="input investment"
                                                    name="plan-investment-{{ $plan->id }}"
                                                    type="number"
                                                    placeholder="0.00"
                                                    col="col-md-12"
                                                    value="0.00"
                                                    required
                                                    :disabled="false"
                                                />
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button id="addUserBtn" class="btn btn-primary">Add</button>
                    <button class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>

            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="//cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="//cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <link rel="stylesheet" href="//cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css" />

    <script>
        $(function() {

            let select2Data = null;

            $('#user').select2({
                // theme: 'bootstrap-5',
                dropdownParent: $('#participantModal'),
                placeholder: 'Search user...',
                allowClear: true,
                ajax: {
                    url: '{{ route("users.ajax.search") }}',
                    dataType: 'json',
                    delay: 300,
                    data: function (params) {
                        return { search: params.term };
                    },
                    processResults: function (data) {
                        select2Data = data;
                        return {
                            results: data
                        };
                    },
                },
                width: '100%'
            });


            let selectedParticipantsTable = $('#selected-user-table').DataTable({
                paging: false,
                scrollX: true,
                autoWidth: false,
                language: {
                    url: '{{ asset('storage/datatable/ms.json') }}',
                },
                "order": [[0, "asc"]]
            });
            let editingRow = null;
            let editingUserId = null;

            //

            $('#addModelButton').on('click', function() {
                $('#addUserBtn').text('Add');
            });

            $("input").on("focus", function() {
                $(this).select();
            });

            $('#addUserBtn').on('click', function () {
                let userId = $('select[name="user"]').val();

                @foreach ($model->plans as $plan)
                let plan_{{ $plan->id }}_investment = $('input[name="plan-investment-{{ $plan->id }}"]').val();
                @endforeach


                if (!userId && editingRow == null) {
                    alert("Please fill all fields");
                    return;
                }

                // CHECK DUPLICATE (ignore if editing same row)

                if ($(`#selected-user-table tr[data-id="${userId}"]`).length) {
                    alert("Duplicate", "This participant is already added.", "warning");
                    return;
                }

                @foreach ($model->plans as $plan)
                    let plan_{{ $plan->id }}_invest_cents = Math.round(parseFloat(plan_{{ $plan->id }}_investment) * 100);
                @endforeach

                let total = (@foreach ($model->plans as $plan) @if($plan->payment_type == App\Models\Plan::PAYMENT_TYPE_CREDIT) parseFloat(plan_{{ $plan->id }}_investment) @endif + @endforeach 0).toFixed(2);
                // --------------------------
                // UPDATE MODE
                // --------------------------
                if (editingRow !== null) {

                    // update hidden input
                    @foreach ($model->plans as $plan)
                        $(`#plan-{{ $plan->id }}-${editingUserId}`).val(plan_{{ $plan->id }}_invest_cents);
                    @endforeach

                    // update table
                    let row = $(`#selected-user-table tr[data-id="${editingUserId}"]`);
                    @foreach ($model->plans as $plan)
                        selectedParticipantsTable.cell(row.find('td:eq({{ $loop->iteration + 1 }})')).data(plan_{{ $plan->id }}_investment).draw();
                    @endforeach
                    selectedParticipantsTable.cell(row.find('td:eq({{ count($model->plans) + 2 }})')).data(total).draw();

                    $('#participantModal').modal('hide');
                    renumberParticipantRows();

                    editingRow = null; // clear editing mode
                    editingUserId = null;

                    $('#user').next(".select2-container").show();
                    $('#userName').addClass('d-none').val('');
                    return;
                }

                let userName = select2Data.find(user => user.id == userId).text;

                // --------------------------
                // ADD MODE
                // --------------------------

                $('#hidden-fields-container').append(`
                    @foreach ($model->plans as $plan)
                    <input type="hidden" name="plan[{{ $plan->id }}][${userId}]" value="${plan_{{ $plan->id }}_invest_cents}" id="plan-{{ $plan->id }}-${userId}">
                    @endforeach
                `);

                let rowNode = selectedParticipantsTable.row.add([
                    "",
                    userName,
                    @foreach ($model->plans as $plan)
                    plan_{{ $plan->id }}_investment,
                    @endforeach
                    total,
                    participantActionButtons()
                ]).node();

                $(rowNode).attr('data-id', userId);
                selectedParticipantsTable.draw(false);

                $('#participantModal').modal('hide');
                renumberParticipantRows();
            });

            function participantActionButtons() {
                return `
                    <button type="button" class="btn btn-sm btn-info editParticipant"><i class="fa fa-edit"></i></button>
                    <button type="button" class="btn btn-sm btn-danger removeParticipant"><i class="fa fa-trash"></i></button>
                `;
            }

            $(document).on('click', '.editParticipant', function () {
                editingRow = selectedParticipantsTable.row($(this).parents('tr')); // store row

                let userId = $(this).parents('tr').attr('data-id');
                let userName = $(this).parents('tr').attr('data-name');
                @foreach ($model->plans as $plan)
                    let invest_plan_{{ $plan->id }}_cents = $('#hidden-fields-container')
                        .find(`#plan-{{ $plan->id }}-${userId}`)
                        .attr('value');
                    let investment_plan_{{ $plan->id }} = Math.round(parseFloat(invest_plan_{{ $plan->id }}_cents) / 100).toFixed(2);
                @endforeach

                $('#user').next(".select2-container").hide();
                $('#userName').removeClass('d-none').val(userName);

                @foreach ($model->plans as $plan)
                $('input[name="plan-investment-{{ $plan->id }}"]').val(investment_plan_{{ $plan->id }});
                @endforeach

                editingUserId = userId;

                $('#addUserBtn').text('Update');

                $('#participantModal').modal('show');
            });

            $(document).on('click', '.removeParticipant', function () {
                let id = $(this).closest('tr').attr('data-id');

                selectedParticipantsTable.row($(this).closest('tr')).remove().draw();
                renumberParticipantRows();

                deleteParticipant(id);
            });

            function renumberParticipantRows() {
                selectedParticipantsTable.rows().every(function (i) {
                    let data = this.data();
                    data[0] = i + 1; // update numbering
                    this.data(data);
                });
            }

            $('#participantModal').on('hidden.bs.modal', function () {
                editingRow = null; // clear editing mode
                $('select[name="user"]').val('').trigger('change');
                @foreach ($model->plans as $plan)
                $('input[name="plan-investment-{{ $plan->id }}"]').val('0.00');
                @endforeach
                $('#user').next(".select2-container").show();
                $('#userName').addClass('d-none').val('');
            });

            function addParticipant(userId, userName, investment) {

            }

            function editParticipant(userId, newInvestment) {
            }

            function deleteParticipant(userId) {
                $(`#participant-user-${userId}`).remove();
                $(`#participant-invest-${userId}`).remove();
            }

            // Format input to 2 decimals on blur
            $('.investment').on('blur', function () {
                let val = parseFloat($(this).val());
                if (!isNaN(val)) {
                    $(this).val(val.toFixed(2));
                } else {
                    $(this).val('0.00');
                }
            });

        })
    </script>
@endpush