@extends('main-admin')

@section('content')
<!-- start page title -->
<Style>
#summernote .note-editable {
  background-color: white !important;
}

</Style>
      <!-- start page title -->
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="col-lg-12 mb-4 order-0">
    </div>

    @if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
    @endif

    @if(session('info'))
    <div class="alert alert-info">
        {{ session('info') }}
    </div>
    @endif
    <!-- end page title -->

<div class="card ">
    <div class="card-body">
        <h4 class="mb-3 header-title mt-0">Tambah Kategori</h4>
        <form action="{{ route('kategori.post') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="mb-3 row">
                <label class="col-lg-2 col-form-label" for="example-fileinput">Nama</label>
                <div class="col-lg-10">
                    <input type="text" class="form-control @error('nama') is-invalid @enderror" value="{{ old('nama') }}" name="nama">
                    @error('nama')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                    @enderror
                </div>
            </div>
            <div class="mb-3 row">
                <label class="col-lg-2 col-form-label" for="example-fileinput">Sub Nama (brand)</label>
                <div class="col-lg-10">
                    <input type="text" class="form-control @error('sub_nama') is-invalid @enderror" value="{{ old('sub_nama') }}" name="sub_nama">
                    @error('sub_nama')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                    @enderror
                </div>
            </div>
            <div class="mb-3 row">
                <label class="col-lg-2 col-form-label" for="example-fileinput">Url</label>
                <div class="col-lg-10">
                    <input type="text" class="form-control @error('kode') is-invalid @enderror" value="{{ old('kode') }}" name="kode">
                    @error('kode')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                    @enderror
                </div>
            </div>
            <!--<div class="mb-3 row">-->
            <!--    <label class="col-lg-2 col-form-label" for="example-fileinput">Brand</label>-->
            <!--    <div class="col-lg-10">-->
            <!--        <input type="text" class="form-control @error('brand') is-invalid @enderror" value="{{ old('brand') }}" name="brand">-->
            <!--        @error('brand')-->
            <!--        <div class="invalid-feedback">-->
            <!--            {{ $message }}-->
            <!--        </div>-->
            <!--        @enderror-->
            <!--    </div>-->
            <!--</div>-->
            <div class="mb-3 row">
                <label class="col-lg-2 col-form-label" for="example-fileinput">Deskripsi Game</label>
                <div class="col-lg-10">
                    <textarea id="summernote" class="form-control @error('deskripsi_game') is-invalid @enderror" name="deskripsi_game">{{ old('deskripsi_game') }}</textarea>
                    @error('deskripsi_game')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                    @enderror
                </div>
            </div>
            <div class="mb-3 row">
                <label class="col-lg-2 col-form-label" for="example-fileinput">Deskripsi field</label>
                <div class="col-lg-10">
                    <textarea class="form-control @error('deskripsi_field') is-invalid @enderror" name="deskripsi_field">{{ old('deskripsi_field') }}</textarea>
                    @error('deskripsi_field')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                    @enderror
                </div>
            </div>
            <div id="fieldsContainer" class="flex flex-col gap-2 p-4 border border-secondary-400 rounded-lg rounded">
                <div class="field-group">
                    <div class="flex justify-between">
                        <div class="">Field 1</div>
                    </div>
                    <div class="mt-4">
                        <input class="form-control" placeholder="Title" name="inputs_1_title">
                    </div>
                    <div class="mt-4">
                        <input class="form-control" placeholder="Name" name="inputs_1_name">
                    </div>
                    <div class="mt-4 mb-4">
                        <select class="form-control" name="inputs_1_type">
                            <option>Select Input Type</option>
                            <option value="text">Text</option>
                            <option value="number">Number</option>
                            <option value="password">Password</option>
                            <option value="select">Select</option>
                        </select>
                    </div>
                </div>
            </div>
            <button id="addMoreBtn" class="btn btn-info mt-2" type="button">Add More</button>
            
            <div class="mb-3 row">
                <label class="col-lg-2 col-form-label" for="example-fileinput">Thumbnail</label>
                <div class="col-lg-10">
                    <input type="file" class="form-control" name="thumbnail">
                    @error('thumbnail')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                    @enderror
                </div>
            </div>
            <div class="mb-3 row">
                <label class="col-lg-2 col-form-label" for="example-fileinput">Banner</label>
                <div class="col-lg-10">
                    <input type="file" class="form-control" name="banner">
                    @error('banner')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                    @enderror
                </div>
            </div>
            <div class="mb-3 row">
                <label class="col-lg-2 col-form-label" for="example-fileinput">Tipe</label>
                <div class="col-lg-10">
                    <select class="form-select" name="tipe">                
                        <option value='populer'>Populer</option>
                        <option value='game'>Topup Game</option>
                        <option value='e-money'>E-Money</option>-->
                        <option value='app'>App Premium</option>
                        <option value='voucher'>Voucher</option>
                        <option value='joki'>JOKI MLBB</option>
                        <option value='jokigendong'>JOKI Gendong</option>
                        <option value='giftskin'>Gift Skins</option>
                        <option value='vilogml'>ML Vilog</option>
                        <option value='streamingapp'>Streaming APP</option>
                        <!--<option value="gift_skin">Gift Skin MLBB</option>-->

                    </select>
                    @error('tipe')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                    @enderror
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <h4 class="header-title mt-0 mb-1">Semua Kategori</h4>
                <div id="loadingSpinnerKategori" class="text-center">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
                <div class="table-responsive d-none" id="kategoriTableContainer">
                    <table class="table table-dark table-bordered table-striped m-0" id="kategori-table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Thumbnail</th>
                                <th>Nama</th>
                                <th>Sub Nama</th>
                                <th>Kode</th>
                                <!--<th>Brand</th>-->
                                <!--<th>Deskripsi Game</th>-->
                                <!--<th>Deskripsi Field User ID & Zone ID</th>-->
                                <th>Status</th>
                                <!--<th>Banner</th>-->
                                <th>Aksi</th>
                                <th>Tanggal</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach( $data as $datas )
                            @php
                            $label_pesanan = '';
                            if($datas->status == "active"){
                            $label_pesanan = 'info';
                            }else if($datas->status == "unactive"){
                            $label_pesanan = 'warning';
                            }
                            @endphp
                            <tr>
                                <th scope="row">{{ $datas->id }}</th>
                                <td>
                                    <img src="{{ asset($datas->thumbnail) }}" width="50" height="50" style="border-radius: 10px;">
                                </td>
                                <td>{{ $datas->nama }}</td>
                                <td>{{ $datas->sub_nama }}</td>
                                <td>{{ $datas->kode }}</td>
                                <!--<td>{{ $datas->brand }}</td>-->
                                <!--<td>{{ $datas->deskripsi_game }}</td>-->
                                <!--<td>{{ $datas->deskripsi_field }}</td>-->
                                <td>
                                    <div class="btn-group-vertical">
                                        <button id="btnGroupDrop1" type="button" class="btn btn-{{$label_pesanan}} dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> {{ $datas->status }} <i class="mdi mdi-chevron-down"></i> </button>
                                        <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                            <li><a class="dropdown-item" href="/kategori-status/{{ $datas->id }}/unactive">unactive</a></li>
                                            <li><a class="dropdown-item" href="/kategori-status/{{ $datas->id }}/active">active</a></li>
                                    </div>
                                </td>
                                <!--<td>-->
                                <!--    <img src="{{ asset($datas->banner ) }}"  width="100" height="50" style="border-radius: 10px;">-->
                                <!--</td>-->
                                <td>
                                    <a href="javascript:;" onclick="modal('{{ $datas->nama }}', '{{ route('kategori.detail', [$datas->id]) }}')" class="btn-sm btn-info mb-3">Edit</a>
                                    <br>
                                    <br>
                                    <a class="btn-sm btn-danger mt-2" href="/kategori/hapus/{{ $datas->id }}">Hapus</a>
                                </td>
                                <td>{{ $datas->created_at }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
<script>
    var table = document.getElementById('kategori-table').getElementsByTagName('tbody')[0];
    new Sortable(table, {
        animation: 150,
        ghostClass: 'bg-light',
        handle: 'th',
        onEnd: function (evt) {
            // Callback ketika pengurutan selesai
            var item = evt.item; // Item yang diurutkan (baris tabel)
            // Lakukan pembaruan atau operasi lain setelah pengurutan selesai
        }
    });
</script>

<script>
$(document).ready(function() {
    setTimeout(function() {
        $('#loadingSpinnerKategori').addClass('d-none');
        $('#kategoriTableContainer').removeClass('d-none');
        $('#kategori-table').DataTable();
    }, 500); // Adjust the delay as needed
});
</script>

<script type="text/javascript">
    $(document).ready(function(){
        $('.table').DataTable({
        });
    });
    
    function modal(name, link) {
        var myModal = new bootstrap.Modal($('#modal-detail'))
        $.ajax({
            type: "GET",
            url: link,
            beforeSend: function() {
                $('#modal-detail-title').html(name);
                $('#modal-detail-body').html('Loading...');
            },
            success: function(result) {
                $('#modal-detail-title').html(name);
                $('#modal-detail-body').html(result);
                 $('#summernotee').summernote({
                    height: 200,
                    minHeight: null,
                    maxHeight: null,
                    focus: true
                });
            },
            error: function() {
                $('#modal-detail-title').html(name);
                $('#modal-detail-body').html('There is an error...');
            }
        });
        myModal.show();
    }
</script>

<script>
    let fieldCount = 1;
    const addMoreBtn = document.getElementById('addMoreBtn');
    const fieldsContainer = document.getElementById('fieldsContainer');

    addMoreBtn.addEventListener('click', () => {
        fieldCount++;

        const newFieldGroup = document.createElement('div');
        newFieldGroup.classList.add('field-group');

        newFieldGroup.innerHTML = `
            <div class="flex justify-between">
                <div class="">Field ${fieldCount}</div>
            </div>
            <div class="mt-4">
                <input class="form-control" placeholder="Title" name="inputs_${fieldCount}_title">
            </div>
            <div class="mt-4">
                <input class="form-control" placeholder="Name" name="inputs_${fieldCount}_name">
            </div>
            <div class="mt-4 mb-4">
                <select class="form-control" name="inputs_${fieldCount}_type">
                    <option>Select Input Type</option>
                    <option value="text">Text</option>
                    <option value="number">Number</option>
                    <option value="password">Password</option>
                    <option value="select">Select</option>
                </select>
            </div>
        `;

        fieldsContainer.appendChild(newFieldGroup);

        const newSelect = newFieldGroup.querySelector(`select[name="inputs_${fieldCount}_type"]`);
        newSelect.addEventListener('change', (event) => {
            if (event.target.value === 'select') {
                const labelInput = document.createElement('input');
                labelInput.classList.add('form-control');
                labelInput.placeholder = 'Label';
                labelInput.name = `inputs_${fieldCount}_label`;

                const valueInput = document.createElement('input');
                valueInput.classList.add('form-control');
                valueInput.classList.add('mt-4');
                valueInput.placeholder = 'Value';
                valueInput.name = `inputs_${fieldCount}_value`;

                newFieldGroup.appendChild(labelInput);
                newFieldGroup.appendChild(valueInput);
            } else {
                const labelInput = newFieldGroup.querySelector(`input[name="inputs_${fieldCount}_label"]`);
                const valueInput = newFieldGroup.querySelector(`input[name="inputs_${fieldCount}_value"]`);

                if (labelInput) {
                    labelInput.remove();
                }
                if (valueInput) {
                    valueInput.remove();
                }
            }
        });
    });
</script>

    

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="modal-detail" style="border-radius:7%">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modal-detail-title"></h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="modal-detail-body"></div>
        </div>
    </div>
</div>
</div>

@endsection