@extends('Layouts_admin.index')
@section('content')
<!-- widget -->
<div class="container pt-6 px-7">
    <div class="row">
        <div class="col-lg-12">
            <div class="col-lg-12">
                <div class="card rounded pt-0 pb-0">
                    <div class="card-body px-4 pt-2 pb-4">
                        <div class="tab-content mt-0" id="nav-tabContent">
                            <div class="tab-pane fade show active p-6 pt-6" id="nav-home" role="tabpanel"
                                aria-labelledby="nav-home-tab">
                                <form action="{{ url('/updateVoucher/' . $voucher->id) }}" method="POST">
                                    @if(session('error'))
                                        <div class="position-relative alert alert-danger alert-icon alert-dismissible  border border-danger fade show" role="alert"">
                                            {{ session('error') }}
                                        </div>
                                        {{ session()->forget('error') }}
                                    @endif
                                    <input type="hidden" value="" name="id_course">
                                    @csrf
                                    <input type="hidden" name="category_id" value="" class="form-control">

                                    <!-- Setup Voucher Section -->
                                    <h5 class="text-primary">-- Setup Voucher</h5>
                                    <div class="row mt-3">
                                        <div class="col-lg-3">
                                            <label for="">Kode Voucher :</label>
                                        </div>
                                        <div class="col-lg-6">
                                            <input type="text" name="code" value="{{ old('code', $voucher->code) }}" class="form-control" oninput="this.value = this.value.toUpperCase();">
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-lg-3">
                                            <label for="">Tipe Diskon :</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <select id="discount_type" class="form-select" name="discount_type" first-trigger="1" style="width: 30%">
                                                <option value="percentage" {{ old('discount_type', $voucher->discount_type) == 'percentage' ? 'selected' : '' }}>Percentage</option>
                                                <option value="fixed" {{ old('discount_type', $voucher->discount_type) == 'fixed' ? 'selected' : '' }}>Fixed</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-lg-3">
                                            <label for="">Jumlah Diskon :</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <div class="input-group discount_value" style="width: 40%">
                                                <input type="number" name="discount_value" class="form-control" value="{{ old('discount_value', $voucher->discount_value) }}">
                                                <span class="input-group-text">%</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-lg-3">
                                            <label for="start_date">Durasi Voucher :</label>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="input-group">
                                                <input type="datetime-local" name="start_date" class="form-control" style="max-width: 45%;" placeholder="Pilih Tanggal Mulai" value="{{ old('start_date', $voucher->start_date) }}">
                                                <span class="mx-2 align-self-center text-muted">s/d</span>
                                                <input type="datetime-local" name="end_date" class="form-control" style="max-width: 45%;" placeholder="Pilih Tanggal Akhir" value="{{ old('end_date', $voucher->end_date) }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-lg-3">
                                            <label for="">Status :</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <select class="form-select" name="is_active" style="width: 30%">
                                                <option value="1" {{ old('is_active', $voucher->is_active) == '1' ? 'selected' : '' }}>Aktif</option>
                                                <option value="0" {{ old('is_active', $voucher->is_active) == '0' ? 'selected' : '' }}>Tidak Aktif</option>
                                            </select>
                                        </div>
                                    </div>

                                    <!-- Peruntukan Section -->
                                    <h5 class="mt-5 text-primary">-- Peruntukan</h5>
                                    <p class="text-sm fs-12 mt-2 text-danger">Anda tidak perlu mengatur opsi jika ingin memilih semua kategori</p>
                                    <div class="row mt-3">
                                        <div class="col-lg-3">
                                            <label for="course">Course :</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <select class="form-select select2 select-all-enabled" id="course"
                                                name="course[]" style="width: 100%;" multiple>
                                                @foreach ($course as $c)
                                                    <option value="{{ $c->id_course }}" {{ in_array($c->id_course, $selectedCourseIds) || collect(old('course'))->contains($c->id_course) ? 'selected' : '' }}>{{ $c->fullname }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-lg-3">
                                            <label for="status_personil">Status Personil :</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <select class="form-select select2 select-all-enabled" id="status_personil"
                                                name="status_personil[]" style="width: 100%;" multiple>
                                                @foreach ($status as $s)
                                                    <option value="{{ $s->id_status }}" {{ in_array($s->id_status, $selectedStatusPIds) || collect(old('status_personil'))->contains($c->id_status) ? 'selected' : '' }}>{{ $s->status }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-lg-3">
                                            <label for="job">Job :</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <select class="form-select select2 select-all-enabled" id="job" name="job[]"
                                                style="width: 100%;" multiple>
                                                @foreach ($job as $j)
                                                    <option value="{{ $j->id_job }}" {{ in_array($j->id_job, $selectedJobIds) || collect(old('job'))->contains($j->id_job) ? 'selected' : '' }}>{{ $j->job }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-lg-3">
                                            <label for="client">Client :</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <select class="form-select select2 select-all-enabled" id="client"
                                                name="client[]" style="width: 100%;" multiple>
                                                @foreach ($client as $c)
                                                    <option value="{{ $c->id_client }}" {{ in_array($c->id_client, $selectedClientIds) || collect(old('client'))->contains($c->id_client) ? 'selected' : '' }}>{{ $c->client }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="row mt-3">
                                        <div class="col-lg-3">
                                            <label for="client">User :</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <select class="form-select " id="user" name="user[]" style="width: 100%;" multiple>
                                                @if(old('user'))
                                                    @foreach(old('user') as $oldUserId)
                                                        <option value="{{ $oldUserId }}" selected>{{ $oldUserId }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>

                                    <!-- Submit Button -->
                                    <div class="row mt-4">
                                        <div class="col-lg-11 text-end">
                                            <button type="submit" class="btn btn-primary btn-sm">Simpan</button>
                                            <a href="{{ url('/ManageVoucher') }}" class="btn btn-danger btn-sm">Batal</a>
                                        </div>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- widgetend -->
@endsection

<script src="{{ asset('assets/js/jquery-3.6.0.min.js') }}"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script>
    $(document).ready(function () {
        const select2s = document.querySelectorAll('.select2')

        $('.select2').select2({
            placeholder: "Pilih Opsi",
            allowClear: true,
            width: '100%'  // Pastikan select menyesuaikan lebar kolom
        });

        const selectedUserIds = {{count($selectedUserIds)}};
        
        if (selectedUserIds > 0) {
            // Fetch the user data for the default value
            $.ajax({
                url: '{{ url("getPesertaSelect") }}',
                data: { user_id: {{ json_encode($selectedUserIds) }} },
                dataType: 'json',
                success: function(data) {
                    data.forEach(d => {
                        const id = d.id_lms;
                        const text = d.nama + ' || ' + d.email + ' || ' + d.nik;

                        const userOption = new Option(text, id, true, true);
                        $('#user').append(userOption).trigger('change');
                    });
                }
            });
        }
        $('#user').select2({
            placeholder: 'Cari user...',
            minimumInputLength: 2, // jumlah karakter sebelum memulai pencarian
            ajax: {
                url: '{{url("getPesertaSelect")}}', // URL endpoint untuk pencarian user
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        q: params.term, // kirimkan pencarian dengan query `q`
                        status_personil: $('#status_personil').val(), // mengambil nilai status personil
                        client: $('#client').val(), // mengambil nilai client
                        job: $('#job').val() // mengambil nilai job
                    };
                },
                processResults: function (data) {
                    return {
                        results: data.map(user => ({
                            id: user.id_lms,
                            text: user.nama + ' || ' + user.email + ' || ' + user.nik // sesuaikan dengan nama field user Anda
                        }))
                    };
                },
                cache: true
            }
        });

        // Event handler untuk opsi "All"
        // $('.select-all-enabled').on('select2:select', function(e) {
        //     if (e.params.data.id === 'all') {
        //         // Pilih semua opsi jika "All" dipilih
        //         $(this).find('option').prop('selected', true);
        //         $(this).trigger('change');
        //     } else {
        //         // Jika opsi lain dipilih, hilangkan seleksi "All"
        //         $(this).find('option[value="all"]').prop('selected', false);
        //     }
        // });

        // $('.select-all-enabled').on('select2:unselect', function(e) {
        //     if (e.params.data.id === 'all') {
        //         // Hapus semua pilihan jika "All" dibatalkan
        //         $(this).find('option').prop('selected', false);
        //         $(this).trigger('change');
        //     } else {
        //         // Jika opsi lain dibatalkan, juga hilangkan seleksi "All"
        //         const allSelected = $(this).find('option:selected').length === $(this).find('option').length - 2;
        //         if (!allSelected) {
        //             $(this).find('option[value="all"]').prop('selected', false);
        //             $(this).trigger('change');
        //         }
        //     }
        // });

        $('#durasi-type').on('change', function () {
            var selectedValue = $(this).val();
            $('.desk-type').val(selectedValue);
        });

        $('#discount_type').change(function () {
            const selectedType = $(this).val();
            const firstTrigger = $(this).attr('first-trigger')

            if (firstTrigger == 0) {
                $('.input-group.discount_value input').val("");
            }
            $(this).attr('first-trigger', '0');

            if (selectedType === 'percentage') {
                $('.input-group.discount_value').width("20%");
                $('.input-group.discount_value input').attr({ min:0, max:100 });
                $('.input-group.discount_value .input-group-text').html("%");
            } else if (selectedType === 'fixed') {
                $('.input-group.discount_value').width("40%");
                $('.input-group.discount_value input').attr({ min: 0 }).removeAttr('max'); // Remove max for fixed
                $('.input-group.discount_value .input-group-text').html("Rp");
            }
        });

        // Trigger change event on page load to set initial visibility
        $('#discount_type').trigger('change');
    });
</script>