@push('styles')
@endpush


<form method="POST" action="{{ $route }}">
@csrf
@if ($type == 'EDIT')
    @method('PUT')
@endif
    <div class="row">
        <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
                            class="input"
                            name="name"
                            label="Nama"
                            type="text"
                            placeholder="Name"
                            :value="(isset($model) && $model->name)? $model->name : ''"
                            col="col-md-6"
                            required
                            :disabled="false"
                            prepend='<i class="fa-solid fa-user"></i>'
                        />
                        <x-ui.select
                            name="kpId"
                            label="Nama KP"
                            :options="$kpList"
                            :selected="(isset($model) && is_int($model->kp->id))? $model->kp->id : ''"
                            nullable
                            col="col-md-6"
                            required
                            :select2="true"
                            :disabled="false"
                            prepend='<i class="fa-solid fa-user"></i>'
                        />
                    </div><div class="row">
                        <x-ui.select
                            name="status"
                            label="Status"
                            :options="$statuses"
                            :selected="(isset($model) && is_int($model->status))? $model->status : \App\Models\Model::STATUS_ACTIVE"
                            nullable
                            col="col-md-6"
                            required
                            :select2="true"
                            :disabled="false"
                            prepend='<i class="fa-solid fa-check"></i>'
                        />
                    </div>

                    <div class="row">
                        <x-ui.input
                            class="input"
                            name="start_on"
                            label="Tarikh Mula"
                            type="date"
                            placeholder="Date"
                            :value="(isset($model) && $model->start_on)? $model->start_on : ''"
                            col="col-md-6"
                            required
                            :disabled="false"
                            prepend='<i class="fa-solid fa-calendar"></i>'
                        />
                        <x-ui.input
                            class="input"
                            name="end_on"
                            label="Tarikh Tamat"
                            type="date"
                            placeholder="Date"
                            :value="(isset($model) && $model->end_on)? $model->end_on : ''"
                            col="col-md-6"
                            required
                            :disabled="false"
                            prepend='<i class="fa-solid fa-calendar"></i>'
                        />
                    </div>

                    <div class="row">
                        <x-ui.textarea
                            name="description"
                            label="Penerangan"
                            :value="(isset($model) && $model->description)? $model->description : ''"
                            col="col-md-12"
                            rows="5"
                            :required="false"
                            :disabled="false"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>

    <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">Tetapan Plan</h6>

                    @if ($type == 'NEW')
                        <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="#planModal" id="addModelButton">Tambah Tetapan</button>
                        </div>
                    @endif
                </div>
                <div class="card-body">
                    <table class="table table-bordered dataTable" id="selected-user-table">
                        <thead>
                            <tr>
                                <th style="width: 50px;">#</th>
                                <th>Nama</th>
                                <th>Jenis</th>
                                <th>Jenis Bayaran</th>
                                @if ($type == 'NEW')
                                    <th width="120">Actions</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody>
                            @if(isset($model))
                                @foreach($model->plans as $plan)
                                    <tr data-id="{{ $plan->id }}">
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $plan->name }}</td>
                                        <td>{{ $planType[$plan->type]?? '' }}</td>
                                        <td>{{ $planPaymentType[$plan->payment_type]?? '' }}</td>
                                    </tr>
                                @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <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.index') }}" class="btn btn-secondary">Batal</a>
    </div>
</form>

@if ($type == 'NEW')
<div class="modal fade" id="planModal" 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">Plan Config</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>

            <div class="modal-body">

                <div class="row">
                    <x-ui.input
                        class="input"
                        name="planName"
                        label="Name"
                        type="text"
                        placeholder="Name"
                        col="col-md-12"
                        required
                        :disabled="false"
                        prepend='<i class="fa-solid fa-folder"></i>'
                    />
                </div>
                <div class="row">
                    <x-ui.select
                        name="planType"
                        label="Type"
                        :options="$planType"
                        {{-- :selected="(isset($model) && $model->status)? $model->status : \App\Models\Model::STATUS_ACTIVE" --}}
                        nullable
                        col="col-md-6"
                        required
                        :select2="true"
                        :disabled="false"
                        prepend='<i class="fa-solid fa-user"></i>'
                    />
                    <x-ui.select
                        name="planPaymentType"
                        label="Payment Type"
                        :options="$planPaymentType"
                        {{-- :selected="(isset($model) && $model->status)? $model->status : \App\Models\Model::STATUS_ACTIVE" --}}
                        nullable
                        col="col-md-6"
                        required
                        :select2="true"
                        :disabled="false"
                        prepend='<i class="fa-solid fa-user"></i>'
                    />
                </div>
            </div>

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

        </div>
    </div>
</div>
@endif

@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 selectedPlansTable = $('#selected-user-table').DataTable({
                paging: false,
                scrollX: true,
                autoWidth: false,
                language: {
                    url: '{{ asset('storage/datatable/ms.json') }}',
                },
                "order": [[0, "asc"]]
            });
            let planCount = 1;


            // Plan

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

            $('#addPlanBtn').on('click', function () {
                let name = $('input[name="planName"]').val();
                let type = $('select[name="planType"]').val();
                let paymentType = $('select[name="planPaymentType"]').val();

                let typeText = $('select[name="planType"] option:selected').text();
                let paymentTypeText = $('select[name="planPaymentType"] option:selected').text();

                if (!type || !paymentType || name === '') {
                    alert("Please fill all fields");
                    return;
                }

                addPlan(name, type, typeText, paymentType, paymentTypeText);

                $('#planModal').modal('hide');
                renumberPlanRows();
            });

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

                selectedPlansTable.row($(this).closest('tr')).remove().draw();
                renumberPlanRows();

                deletePlan(id);
            });

            $('#planModal').on('hidden.bs.modal', function () {
                $('input[name="planName"]').val('');
                $('select[name="planType"]').val('').trigger('change');
                $('select[name="planPaymentType"]').val('').trigger('change');
            });

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

            function planActionButtons() {
                return `
                    <button type="button" class="btn btn-sm btn-danger removePlan"><i class="fa fa-trash"></i></button>
                `;
            }

            function addPlan(name, type, typeText, paymentType, paymentTypeText) {
                $('#hidden-fields-container').append(`
                    <input type="hidden" name="planName[]" value="${name}" id="plan-name-${planCount}">
                    <input type="hidden" name="planType[]" value="${type}" id="plan-type-${planCount}">
                    <input type="hidden" name="planPaymentType[]" value="${paymentType}" id="plan-payment-type-${planCount}">
                `);

                let rowNode = selectedPlansTable.row.add([
                    "",
                    name,
                    typeText,
                    paymentTypeText,
                    planActionButtons()
                ]).node();

                $(rowNode).attr('data-id', planCount);
                selectedPlansTable.draw(false);

                planCount++;
            }

            function deletePlan(id) {
                $(`#plan-name-${id}`).remove();
                $(`#plan-type-${id}`).remove();
                $(`#plan-payment-type-${id}`).remove();
            }
        })
    </script>
@endpush