@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('/createVoucher') }}" method="POST" enctype="multipart/form-data">
                                    @if(session('success'))
                                        <div class="position-relative alert alert-success alert-icon alert-dismissible  border border-success fade show" role="alert">
                                            {{ session('success') }}
                                        </div>
                                        {{ session()->forget('success') }}
                                    @endif
                                    @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') }}" class="form-control" oninput="this.value = this.value.toUpperCase();">
                                            @error('code')
                                                <div class="text-danger small">{{ $message }}</div>
                                            @enderror
                                        </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"
                                                style="width: 30%">
                                                <option value="percentage" {{ old('discount_type') == 'percentage' ? 'selected' : '' }}>Percentage</option>
                                                <option value="fixed" {{ old('discount_type') == 'fixed' ? 'selected' : '' }}>Fixed</option>
                                            </select>
                                            @error('discount_type')
                                                <div class="text-danger small">{{ $message }}</div>
                                            @enderror
                                        </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') }}">
                                                <span class="input-group-text">%</span>
                                            </div>
                                            @error('discount_value')
                                                <div class="text-danger small">{{ $message }}</div>
                                            @enderror
                                        </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') }}">
                                                <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') }}">
                                            </div>
                                            @error('start_date')
                                                <div class="text-danger small">{{ $message }}</div>
                                            @enderror
                                            @error('end_date')
                                                <div class="text-danger small">{{ $message }}</div>
                                            @enderror
                                        </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') == '1' ? 'selected' : '' }}>Aktif</option>
                                                <option value="0" {{ old('is_active') == '0' ? 'selected' : '' }}>Tidak Aktif</option>
                                            </select>
                                            @error('is_active')
                                                <div class="text-danger small">{{ $message }}</div>
                                            @enderror
                                        </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 }}" {{ 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 }}" {{ collect(old('status_personil'))->contains($s->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 }}" {{ 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 }}" {{ collect(old('client'))->contains($c->id_client) ? 'selected' : '' }}>{{ $c->client }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <p class="text-sm fs-12 mt-3 text-danger">Anda bisa memilih salah satu opsi untuk mengatur peserta</p>
                                    <div class="row mt-3">
                                        <div class="col-lg-3">
                                            <label for="status_personil">Upload User :</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <a href="{{ url('template/TEMPLATE_IMPORT_USER_VOUCHER_SETUP.xlsx') }}" class="small text-decoration-underline">Download Template</a>
                                            <input type="file" name="file_peserta" id="file_peserta"
                                                class="form-control">
                                        </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 () {
        $('#file_peserta').on('change', function () {
            if (this.files && this.files.length > 0) {
                // If a file is selected, disable and hide #user
                $('#user').prop('disabled', true).hide();
            } else {
                // If no file is selected, enable and show #user
                $('#user').prop('disabled', false).show();
            }
        });

        $('#user').on('select2:select', function () {
            // Disable file input when a user is selected in Select2
            if ($('#user').val()) {
                $('#file_peserta').val(null); // Clear file input
                $('#file_peserta').prop('disabled', true);
            }
        });
        $('#user').on('select2:unselect', function () {
            // Disable file input when a user is selected in Select2
            if ($('#user').val().length === 0) {
                // Enable file input when no user is selected
                $('#file_peserta').prop('disabled', false);
            }
        });

        //! Disable file input if already using user on load
        if($('#user').val().length > 0){
            $('#file_peserta').prop('disabled', true);
        }
        
        $('.select2').select2({
            placeholder: "Pilih Opsi",
            allowClear: true,
            width: '100%'  // Pastikan select menyesuaikan lebar kolom
        });

        $('#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 selectedValue = $(this).val();
            $('.input-group.discount_value input').val("");
            if (selectedValue === '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 (selectedValue === '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>