@extends('layouts.panel.app', ['title' => 'Ubah Approval Status'])

@section('content')


<section class="section">
    <div class="section-title">
        <h3>Approval Status</h3>
    </div>
    <p class="section-lead">
        Silahkan tambah, ubah atau hapus data menu approval status di sini.
    </p>
    <div class="row">
        <div class="col-md-12">
            <div class="card border-0 shadow rounded">
                <div class="card-header">
                    <h4>Ubah Approval Status</h4>
                    <div class="card-header-action">
                        <a href="{{ route('admin.applstatus') }}" class="btn btn-success">Kembali</a>
                    </div>
                </div>
                <div class="card-body">
                    <form id="fmapproval-edit" action="{{ route('admin.applstatus.update', $data->id) }}" method="POST" enctype="multipart/form-data" class="needs-validation" novalidate="">
                        @csrf
                        @method('PUT')


                        <div class="alert alert-info alert-has-icon">
                            @php
                            $label = \App\Models\Label::where(['code' => 'info-master' ])->first()
                            @endphp
                            <div class="alert-icon"><i class="far fa-lightbulb"></i></div>
                            <div class="alert-body">
                                <div class="alert-title"><strong> {!!html_entity_decode($label->title)!!}</strong></div>
                                {!!html_entity_decode($label->desc)!!}
                            </div>
                        </div>
                        <label class="font-weight-bold">Note : <span style="color: red;"> **</span> ) wajib diisi </label>
                        <hr>

                        <div class="row">
                            <div class="col-4 form-group">
                                <label class="font-weight-bold">STATUS ADMIN <span style="color: red;"> **</span></label>
                                <input type="text" class="form-control" name="status_admin" value="{{ old('status_admin', $data->status_admin) }}" placeholder="contoh : Pengajuan baru" required="">
                                <!-- error message -->
                                <div class="invalid-feedback alert alert-danger mt-2">
                                    Masukan nama
                                </div>
                            </div>

                            <div class="col-4 form-group">
                                <label class="font-weight-bold">STATUS PENGGUNA <span style="color: red;"> **</span></label>
                                <input type="text" class="form-control" name="status_user" value="{{ old('status_user', $data->status_user) }}" placeholder="contoh : Pengajuan diterima" required="">
                                <!-- error message -->
                                <div class="invalid-feedback alert alert-danger mt-2">
                                    Masukan nama
                                </div>
                            </div>

                            <div class="col-4 form-group">
                                <label class="font-weight-bold">WARNA STATUS <span style="color: red;"> **</span></label>
                                <select class="form-control" name="color" value="{{ old('color') }}" placeholder="Pilih warna" required>
                                    <option value="">Pilih Warna</option>
                                    @foreach ($color as $item)
                                    <option {{ $data->color == $item->color ? 'selected' : '' }} value="{{ $item->color }}">{{ $item->color }}</option>
                                    @endforeach
                                </select>
                                <!-- error message untuk route -->
                                <div class="invalid-feedback alert alert-danger mt-2">
                                    Pilih warna
                                </div>
                            </div>

                        </div>

                        <div class="form-group">
                            <label class="font-weight-bold">DESKRIPSI <span style="color: red;"> **</span></label>
                            <textarea class="form-control" id="description" name="description" rows="5" placeholder="contoh : Proses pengajuan baru oleh pengguna" required="">{{ old('description', $data->description) }}</textarea>
                            <!-- error message -->
                            <div class="invalid-feedback alert alert-danger mt-2">
                                Masukan deskripsi
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-4 form-group">
                                <label class="font-weight-bold">KATEGORI STATUS</label>
                                <select class="form-control" name="category" value="{{ old('category') }}" placeholder="Pilih kategori status" required disabled>
                                    <option value="">Pilih Kategori Status</option>
                                    @foreach ($catergory as $item)
                                    <option {{ $data->category == $item->category ? 'selected' : '' }} value="{{ $item->category }}">{{ $item->category }}</option>
                                    @endforeach
                                </select>
                                <!-- error message untuk route -->
                                <div class="invalid-feedback alert alert-danger mt-2">
                                    Pilih kategori status
                                </div>
                            </div>

                            <div class="col-4 form-group">
                                <label class="font-weight-bold">TIPE STATUS</label>
                                <select class="form-control" name="type" value="{{ old('type') }}" placeholder="Pilih tipe status" required disabled>
                                    <option value="">Pilih Tipe Status</option>
                                    @foreach ($type as $item)
                                    <option {{ $data->type == $item->type ? 'selected' : '' }} value="{{ $item->type }}">{{ $item->type }}</option>
                                    @endforeach
                                </select>
                                <!-- error message untuk route -->
                                <div class="invalid-feedback alert alert-danger mt-2">
                                    Pilih tipe status
                                </div>
                            </div>

                            <div class="col-4 form-group">
                                <label class="font-weight-bold">LIHAT WARNA</label>
                                <br>
                                <span class="badge">{{$data->status_admin}}</span>
                            </div>
                        </div>

                        <div class="form-group">
                            <button type="submit" style="width:100px" class="btn btn-primary btn-action" data-toggle="tooltip" title="Simpan"><i class="fas fa-save"></i></button>
                            <button type="reset" id="clear" class="btn btn-warning btn-action" data-toggle="tooltip" title="Batal"><i class="fas fa-redo-alt"></i></button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    // Membuat referensi ke elemen select
    var colorSelect = document.querySelector('select[name="color"]');
    var statusAdmin = document.querySelector('input[name="status_admin"]');

    // Membuat referensi ke elemen div
    var statusDiv = document.querySelector('.col-4.form-group .badge');


    // Menambahkan event listener untuk perubahan pada select
    colorSelect.addEventListener('change', function() {
        // Mendapatkan nilai yang dipilih
        var selectedColor = colorSelect.value;
        var selectedAdmin = statusAdmin.value;

        // Menampilkan nilai yang dipilih di div
        statusDiv.innerHTML = '<span class="badge badge-' + selectedColor + '">' + selectedAdmin + '</span>';
    });
</script>


@endsection