@extends('layouts.app-admin')

@section('content')
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <h2 class="page-title">
                        Tambahkan Pengaturan Lisensi
                    </h2>
                    <div class="text-muted mt-1">Buat pengaturan lisensi baru di sistem</div>
                </div>
                <div class="col-auto ms-auto d-print-none">
                    <div class="btn-list">
                        <a href="{{ route('admin.licenses.index') }}" class="btn btn-primary d-none d-sm-inline-block">
                            <i class="ti ti-arrow-left me-2"></i>
                            Kembali
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body">
        <div class="container-xl">

            <form class="card" id="formInput" action="{{ route('admin.licenses.store') }}" method="post"enctype="multipart/form-data">
                @csrf

                <div class="card-header">
                    <h3 class="card-title">Informasi Pengaturan Lisensi</h3>
                </div>
                <div class="card-body">
                    <div class="row">

                        <div class="col-md-3 col-xl-3">

                            <div class="mb-3">
                                <div class="form-label required">Nama Konfirguasi Lisensi</div>
                                <input type="text" class="form-control @error('name') is-invalid @enderror"
                                    name="name" placeholder="masukkan nama lisensi" required
                                    value="{{ old('name') }}">
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                        </div>
                        <div class="col-md-3 col-xl-3">

                            <div class="mb-3">
                                <div class="form-label ">Deskripsi</div>
                                <input type="text" class="form-control @error('description') is-invalid @enderror"
                                    name="description" placeholder="keterangan lisensi"
                                    value="{{ old('description') }}">
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                        </div>


                        <div class="col-md-2 col-xl-2">

                            <input type="hidden" name="is_active" value="1">

                            {{-- <div class="d-flex align-items-center" style="">

                                <div class="mb-3">
                                    <div class="form-label ">&nbsp;</div>
                                    <input type="hidden" name="is_active" value="0">
                                    <label class="form-check pt-2">
                                        <input class="form-check-input border-danger" type="checkbox" name="is_active"
                                            value="1" checked>
                                        <span class="form-check-label">Aktif</span>
                                    </label>
                                </div>

                            </div> --}}


                        </div>

                        <div class="col-md-4 col-xl-4">

                            <div class="my-3 w-100 d-flex justify-content-end">
                                <div>
                                    <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal"
                                        data-bs-target="#contentModal">
                                        <span class="me-2">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
                                                <path fill-rule="evenodd"
                                                    d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2" />
                                            </svg>
                                        </span>
                                        Detil</button>
                                </div>
                            </div>

                        </div>



                    </div>

                    <div class="row">
                        <div class="col">

                            <div class="table-responsive mb-3">

                                <table id="contentTable" class="table">
                                    <thead>
                                        <tr>
                                            <th scope="col">Urutan</th>
                                            <th scope="col">Lisensi</th>
                                            <th scope="col">Zona</th>
                                            <th scope="col">Metode Bayar</th>
                                            <th scope="col">Jumlah</th>
                                            <th scope="col">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody class="licenseBody" data-lastno="0">


                                    </tbody>
                                </table>


                            </div>


                        </div>
                    </div>

                    <div class="row">
                        <div class="col">
                            <div class="d-flex justify-content-end">

                                <button type="button" onclick="saveData(event)" class="btn btn-primary btn-lg" value="simpan">
                                    <span class="me-2 mb-1">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                            fill="currentColor" class="bi bi-floppy" viewBox="0 0 16 16">
                                            <path d="M11 2H9v3h2z" />
                                            <path
                                                d="M1.5 0h11.586a1.5 1.5 0 0 1 1.06.44l1.415 1.414A1.5 1.5 0 0 1 16 2.914V14.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5v-13A1.5 1.5 0 0 1 1.5 0M1 1.5v13a.5.5 0 0 0 .5.5H2v-4.5A1.5 1.5 0 0 1 3.5 9h9a1.5 1.5 0 0 1 1.5 1.5V15h.5a.5.5 0 0 0 .5-.5V2.914a.5.5 0 0 0-.146-.353l-1.415-1.415A.5.5 0 0 0 13.086 1H13v4.5A1.5 1.5 0 0 1 11.5 7h-7A1.5 1.5 0 0 1 3 5.5V1H1.5a.5.5 0 0 0-.5.5m3 4a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5V1H4zM3 15h10v-4.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5z" />
                                        </svg>
                                    </span>
                                    Simpan
                                </button>

                            </div>

                        </div>
                    </div>


                </div>

            </form>

        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" data-mode="add" id="contentModal" tabindex="-1" aria-labelledby="contentModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-3" id="contentModalLabel">Detil Lisensi</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div class="container">

                        <div class="row">
                            <div class="col">
                                <div class="mb-3">
                                    <label class="form-label">Urutan</label>
                                    <input type="number" class="form-control" id="sort_order" name="sort_order"
                                        placeholder="urutan konten">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">Jenis Lisensi</label>
                                    <select class="form-select" name="license_type" id="license_type">
                                        <option value="" selected>-- Pilih Tipe Lisensi --</option>
                                        <option value="Cover">Cover</option>
                                        <option value="Remake">Remake</option>
                                        <option value="Official">Official</option>
                                        <option value="Official Exclusive">Official Exclusive</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4 ctime_type d-none">
                                <div class="mb-3">
                                    <label class="form-label">Tipe Waktu</label>
                                    <select class="form-select" name="time_type" id="time_type">
                                        <option value="" selected>-- Pilih Tipe Waktu --</option>
                                        <option value="Hari">Hari</option>
                                        <option value="Bulan">Bulan</option>
                                        <option value="Tahun">Tahun</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4 ctime_amount d-none">
                                <div class="mb-3">
                                    <label class="form-label">Jumlah Waktu</label>
                                    <input type="number" class="form-control" placeholder="nilai lisensi"
                                        name="time_amount" id="time_amount" value="0">
                                </div>
                            </div>

                        </div>

                        <div class="row">

                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Metode Pembayaran</label>
                                    <select class="form-select" name="payment_type" id="payment_type">
                                        <option value="" selected>-- Pilih Metode Pembayaran --</option>
                                        <option value="Beli Harga">Beli Harga Lisensi</option>
                                        <option value="Profit Sharing">Persentase Profit Sharing</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Zona</label>
                                    <select class="form-select" name="license_zone" id="license_zone">
                                        <option value="" selected>-- Pilih Zona --</option>
                                        <option value="Local">Lokal</option>
                                        <option value="Global">Global</option>
                                    </select>
                                </div>
                            </div>

                        </div>

                        <div class="row">
                            <div class="col">
                                <div class="mb-3">
                                    <label class="form-label">Nilai % / Harga Rp.</label>
                                    <input type="number" class="form-control" placeholder="nilai lisensi"
                                        name="license_amount" id="license_amount">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col">
                                <div class="mb-3">
                                    <label class="form-label">Deskripsi</label>
                                    <textarea name="license_description" id="license_description" class="form-control" rows="5">

                                    </textarea>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary btnContentSave" data-row=""
                        onclick="saveContent($(this))">Submit</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <style>
        .note-editor .note-editable.is-invalid {
            border: 1px solid #dc3545 !important;
            border-radius: 0.375rem;
            /* matches Bootstrap's default */
        }
    </style>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-number@2.1.6/jquery.number.min.js"></script>
    <script src="{{ asset('js/custom.js') }}"></script>

    <script>
        $(document).ready(function() {

            const modalElement = document.getElementById('contentModal');

            modalElement.addEventListener('shown.bs.modal', event => {
                let rowCount = parseInt($('.licenseBody').attr('data-lastno'));

                let dataMode = $('#contentModal').attr('data-mode');
                if(dataMode!='edit'){
                    $('#sort_order').val(rowCount + 1);
                    $('.btnContentSave').attr('data-row','');
                    $('#license_type').val('');
                    $('#time_type').val('');
                    $('#time_amount').val('0');
                    $('#payment_type').val('');
                    $('#license_zone').val('');
                    $('#license_amount').val('0');
                    $('#license_description').val('');
                }
                $('#license_type').focus();
            });

            modalElement.addEventListener('hide.bs.modal', event => {
                $('#contentModal').attr('data-mode', 'add');
                $('.btnContentSave').attr('data-row', '');
            });

            $('#license_type').on('change', function() {
                let license_type = $(this).val();
                if (license_type == 'Official Exclusive') {
                    $('.ctime_type').removeClass('d-none');
                    $('.ctime_amount').removeClass('d-none');
                    let mode = $('#modalLicense').attr('data-mode');
                    if (mode == 'add') {
                        $('#time_type').val('');
                        $('#time_amount').val('0');
                    }
                } else {
                    $('.ctime_type').addClass('d-none');
                    $('.ctime_amount').addClass('d-none');
                }
            });



        });

        function hideModal() {

            let modalContent = bootstrap.Modal.getInstance(document.getElementById('contentModal'));
            modalContent.hide();
        }



        function saveContent(e) {

            let sort_order = $('#sort_order').val();
            $('.licenseBody').attr('data-lastno',sort_order);

            let dataMode = $('#contentModal').attr('data-mode');
            let dataRow = e.attr('data-row');
            let rowCount = generateUniqueCode();

            let license_type = $('#license_type').val();
            let time_type = $('#time_type').val();
            let time_amount = $('#time_amount').val();
            let payment_type = $('#payment_type').val();
            let license_zone = $('#license_zone').val();
            let license_amount = $('#license_amount').val();
            let license_description = $('#license_description').val();

            if(dataMode=='edit'){
                rowCount = dataRow;
            }

            if (sort_order == '') {
                $('#sort_order').addClass('is-invalid');
                return;
            } else {
                $('#sort_order').removeClass('is-invalid');
            }

            if (license_type == '') {
                $('#license_type').addClass('is-invalid');
                return;
            } else {
                $('#license_type').removeClass('is-invalid');
            }

            if (payment_type == '') {
                $('#payment_type').addClass('is-invalid');
                return;
            } else {
                $('#payment_type').removeClass('is-invalid');
            }

            if (license_zone == '') {
                $('#license_zone').addClass('is-invalid');
                return;
            } else {
                $('#license_zone').removeClass('is-invalid');
            }

            if (license_amount == '') {
                $('#license_amount').addClass('is-invalid');
                return;
            } else {
                $('#license_amount').removeClass('is-invalid');
            }

            if (license_description == '') {
                $('#license_description').addClass('is-invalid');
                return;
            } else {
                $('#license_description').removeClass('is-invalid');
            }

            let slicenseType=license_type;
            if(license_type=='Official Exclusive'){
                slicenseType=license_type+' '+time_amount+' '+capitalizeFirst(time_type);
            }

            let spay = ``;
            if (payment_type == 'Beli Harga') {
                spay = `Rp. ${$.number(license_amount,2)}`;
            } else {
                spay = `${$.number(license_amount,2)}%`;
            }

            var htmlContent = `

            <tr id="row-license-${rowCount}" data-row="${rowCount}">
                <td data-value="${sort_order}" scope="row" style="width:20px;">
                    ${sort_order}
                    <input type="hidden" class="row-sort-order-${rowCount}" name="row_sort_order[]" value="${sort_order}" />
                </td>
                <td >
                    <div>${slicenseType} </div>

                    <input type="hidden" class="row-license-type-${rowCount}" name="row_license_type[]" value="${license_type}" />
                    <input type="hidden" class="row-time-type-${rowCount}" name="row_time_type[]" value="${time_type}" />
                    <input type="hidden" class="row-time-amount-${rowCount}" name="row_time_amount[]" value="${time_amount}" />
                    <input type="hidden" class="row-payment-type-${rowCount}" name="row_payment_type[]" value="${payment_type}" />
                    <input type="hidden" class="row-zone-${rowCount}" name="row_zone[]" value="${license_zone}" />
                    <input type="hidden" class="row-amount-${rowCount}" name="row_amount[]" value="${license_amount}" />
                    <input type="hidden" class="row-description-${rowCount}" name="row_description[]" value="${license_description}" />

                </td>
                <td>
                    ${license_zone}
                </td>
                <td>
                    ${payment_type}
                </td>
                <td>
                    <div class="d-flex justfy-content-end">
                        ${spay}
                    </div>
                </td>
                <td>
                    <div class="btn-list flex-nowrap">
                        <a href="#" class="btn btn-sm btn-outline-primary" data-row="${rowCount}" onclick="editContent($(this))" >
                            <i class="ti ti-edit"></i>
                        </a>
                        <button type="button" class="btn btn-sm btn-outline-danger"
                            data-row="${rowCount}" onclick="confirmDeleteRow($(this))">
                            <i class="ti ti-trash"></i>
                        </button>
                    </div>
                </td>

            </tr>

            `;




            if(dataMode=='edit'){
                $('.licenseBody').find('tr[data-row="' + dataRow + '"]').replaceWith(htmlContent);
            }else{
                $('.licenseBody').append(htmlContent);
            }

            hideModal();
        }
    </script>

    <script>

        function editContent(e){

            let dataRow = e.attr('data-row');
            $('.btnContentSave').attr('data-row',dataRow);
            $('#contentModal').attr('data-mode','edit');
            let modalContent = bootstrap.Modal.getInstance(document.getElementById('contentModal'));
            modalContent.show();

            let sort_order =  $('.row-sort-order-'+dataRow).val();
            let license_type =  $('.row-license-type-'+dataRow).val();
            let time_type =  $('.row-time-type-'+dataRow).val();
            let time_amount =  $('.row-time-amount-'+dataRow).val();
            let payment_type =  $('.row-payment-type-'+dataRow).val();
            let zone =  $('.row-zone-'+dataRow).val();
            let license_amount =  $('.row-amount-'+dataRow).val();
            let license_description =  $('.row-description-'+dataRow).val();

            $('#sort_order').val(sort_order);
            $('#license_type').val(license_type);
            $('#license_type').trigger('change');
            $('#time_type').val(time_type);
            $('#time_amount').val(time_amount);
            $('#payment_type').val(payment_type);
            $('#license_zone').val(zone);

            if (!isNaN(license_amount)) {
                let amount = parseFloat(license_amount);
                if (amount % 1 === 0) {
                    $('#license_amount').val(parseInt(amount));
                } else {
                    $('#license_amount').val(amount);
                }
            }
            $('#license_description').val(license_description);

        }

        function confirmDeleteRow(e) {
            let dataRow = e.attr('data-row');

            Swal.fire({
                title: 'Yakin ingin menghapus?',
                text: "Data ini akan dihapus dari list",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    $('#row-license-'+dataRow).remove();
                }
            });

        }

        function saveData(event){
            event.preventDefault();
            Swal.fire({
                title: 'Simpan Data',
                text: "Yakin akan menyimpan data ini??",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, Simpan!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    $('#formInput').submit();
                }
            });
        }

    </script>
@endsection
@push('styles')
@endpush
@push('script')
@endpush