@extends('layouts.admin')

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



    <div class="row">
        {{-- <div class="col-lg-2 order-lg-2">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Action</h6>
                </div>
                <div class="card-body">
                        <ul class="list-group">
                            @foreach($model->leaders as $leader)
                                <li class="list-group-item">{{ $leader->name }}</li>
                            @endforeach
                        </ul>
                </div>
            </div>
        </div> --}}

        <div class="col-lg-12 order-lg-1">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Maklumat Plan</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <x-ui.input
                            name="name"
                            class="input"
                            label="Nama Plan"
                            type="text"
                            :value="$model->name"
                            col="col-md-6"
                            :disabled="true"
                            prepend='<i class="fa-solid fa-user"></i>'
                        />
                        <x-ui.input
                            name="name"
                            class="input"
                            label="Status"
                            type="text"
                            :value="$statuses[$model->status]"
                            col="col-md-6"
                            :disabled="true"
                            prepend='<i class="fa-solid fa-check"></i>'
                        />
                    </div>

                    <div class="row">
                        <x-ui.textarea
                            name="desc"
                            label="Penerangan"
                            :value="$model->description"
                            col="col-md-12"
                            rows="5"
                            :disabled="true"
                        />
                    </div>
                </div>
            </div>


            <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">
                        <a href="{{ route('participant.edit', $model->id) }}" type="button" class="btn btn-info" title="Update Participant" data-bs-toggle="tooltip"><i class="fas fa-edit fa-fw"></i></a>
                    </div>
                </div>
                <div class="card-body">
                    <table class="table table-bordered dataTable" id="plan-table">
                        <thead>
                            <tr>
                                <th style="width: 50px;">#</th>
                                <th>Perserta</th>
                                <th>Status</th>
                                @foreach ($model->plans as $plan)
                                <th>{{ $plan->name }}</th>
                                @endforeach
                                <th>Jumlah</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>
                                    <td>{{ $user->remark }}</td>
                                    @php
                                        $total = 0;
                                    @endphp
                                    @foreach ($user->plans as $plan)
                                        <td>{{ empty($plan->pivot->remark)? number_format(($plan->pivot->investment / 100), 2) : $plan->pivot->remark }}</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>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </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>
    <link rel="stylesheet" href="//cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css" />

    <script>
        $(function() {
            let selectedParticipantsTable = $('#plan-table').DataTable({
                paging: false,
                scrollX: true,
                autoWidth: false,
                language: {
                    url: '{{ asset('storage/datatable/ms.json') }}',
                },
                "order": [[0, "asc"]]
            });
        });
    </script>
@endpush