@extends('layouts.index')
@section('title')
    Ubah Layanan
@endsection
@section('content')
    <div class="page-titles">
        <div class="row">
            <div class="col-lg-8 col-md-6 col-12 align-self-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 d-flex align-items-center">
                        <li class="breadcrumb-item">
                            <a href="{{ url('dashboard') }}" class="link"><i class="ri-home-3-line fs-5"></i></a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ url('layanan') }}" class="link">Layanan</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            Ubah
                        </li>
                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Ubah Layanan</h1>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <!-- ============================================================= -->
        <!-- Start Page Content -->
        <!-- ============================================================= -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <form action="{{ route('layanan.update', $detail->slug) }}" enctype="multipart/form-data" class="form-horizontal"
                        method="POST">
                        @csrf
                        @method('PUT')
                        <div class="card-body">
                            <div class="mb-3 row">
                                <label for="" class="col-sm-3 text-end control-label col-form-label">Nama<sup title="Wajib Diisi" class="text-danger">*</sup></label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control @error('nama') is-invalid @enderror" id="nama"
                                        name="nama" placeholder="Nama" value="{{ old('nama') ?? $detail->nama }}" />
                                    @error('nama')
                                        <div class="invalid-feedback">
                                            {{$message}}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="" class="col-sm-3 text-end control-label col-form-label">Icon<sup title="Wajib Diisi" class="text-danger">*</sup></label>
                                <div class="col-sm-9">
                                    <input type="file" class="form-control @error('icon_logo') is-invalid @enderror"
                                        id="icon_logo" name="icon_logo" />
                                        @if ($detail->icon_logo)
                                            <div id="preview">
                                                <br>
                                                <img id="imgshow" src="{{Storage::url($detail->icon_logo)}}" width="200" height="110"
                                                    style="object-fit: contain;border-radius: 20px;">
                                            </div>
                                        @endif
                                    @error('icon_logo')
                                        <div class="invalid-feedback">
                                            {{$message}}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="" class="col-sm-3 text-end control-label col-form-label">Foto<sup title="Wajib Diisi" class="text-danger">*</sup></label>
                                <div class="col-sm-9">
                                    <input type="file" class="form-control @error('foto') is-invalid @enderror"
                                        id="foto" name="foto" />
                                        @if ($detail->foto)
                                            <div id="preview">
                                                <br>
                                                <img id="imgshow" src="{{Storage::url($detail->foto)}}" width="400" height="220"
                                                    style="object-fit: cover;border-radius: 20px;">
                                            </div>
                                        @endif
                                    @error('foto')
                                        <div class="invalid-feedback">
                                            {{$message}}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="" class="col-sm-3 text-end control-label col-form-label">Deskripsi Singkat<sup title="Wajib Diisi" class="text-danger">*</sup></label>
                                <div class="col-sm-9">
                                    <textarea cols="80" class="form-control @error('intermeso') is-invalid @enderror" id="intermeso" name="intermeso" rows="5">
                                      {!! old('intermeso') ?? $detail->intermeso !!}              
                                    </textarea>
                                    @error('intermeso')
                                        <div class="invalid-feedback">
                                            {{$message}}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="" class="col-sm-3 text-end control-label col-form-label">Deskripsi<sup title="Wajib Diisi" class="text-danger">*</sup></label>
                                <div class="col-sm-9">
                                    <textarea cols="80" id="deskripsi" name="deskripsi" rows="10" class="@error('deskripsi') is-invalid @enderror">
                                      {!! old('deskripsi') ?? $detail->deskripsi !!}              
                                    </textarea>
                                    @error('deskripsi')
                                        <div class="invalid-feedback">
                                            {{$message}}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="" class="col-sm-3 text-end control-label col-form-label">Deskripsi Sub Layanan</label>
                                <div class="col-sm-9">
                                    <textarea cols="80"  class="form-control @error('sub_layanan') is-invalid @enderror" id="sub_layanan" name="sub_layanan" rows="5">
                                      {!! old('sub_layanan') ?? $detail->sub_layanan !!}              
                                    </textarea>
                                    @error('sub_layanan')
                                        <div class="invalid-feedback">
                                            {{$message}}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            @if ($layanan)
                                <div class="mb-3 row">
                                    <label for="" class="col-sm-3 text-end control-label col-form-label">Induk Layanan</label>
                                    <div class="col-sm-9">
                                        <select name="induk_id" id="" class="form-control">
                                            <option value="">-- Pilih --</option>
                                            @foreach ($layanan as $item)
                                            @php
                                                $induk = $detail->induk_id;
                                                if(old('induk_id')) {
                                                    $induk = old('induk_id');
                                                }
                                            @endphp
                                                <option value="{{$item->id}}" {{($item->id == $induk) ? 'selected' : null}} >{{$item->nama}}</option>
                                            @endforeach
                                        </select>
                                        @error('induk_id')
                                            <div class="invalid-feedback">
                                                {{$message}}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            @endif
                            <div class="mb-3 row">
                                <label for="" class="col-sm-3 text-end control-label col-form-label">Unggulan</label>
                                <div class="col-sm-9">
                                    <select name="flag" class="form-control @error('flag') is-invalid @enderror @error('flag') is-invalid @enderror" id="">
                                        <option value="0" {{($detail->flag == 0) ? 'selected' : null}}>Tidak</option>
                                        <option value="1" {{($detail->flag == 1) ? 'selected' : null}}>Ya</option>
                                    </select>
                                    @error('flag')
                                        <div class="invalid-feedback">
                                            {{$message}}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="" class="col-sm-3 text-end control-label col-form-label">Status</label>
                                <div class="col-sm-9">
                                    <select name="status" class="form-control" id="">
                                        <option value="Y" {{($detail->status == 'Y') ? 'selected' : null}}>Aktif</option>
                                        <option value="T" {{($detail->status == 'T') ? 'selected' : null}}>Tidak Aktif</option>
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback">
                                            {{$message}}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="p-3 ">
                            <div class="text-end">
                                <button type="submit"
                                    class="
                          btn btn-info
                          rounded-pill
                          px-4
                          waves-effect waves-light
                        ">
                                    Ubah
                                </button>
                                <button type="submit"
                                    class="
                          btn btn-dark
                          rounded-pill
                          px-4
                          waves-effect waves-light
                        ">
                                    Cancel
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('js')
    <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>
    <script src="{{asset('back/libs/bi-iconpicker.js')}}"></script>
    <script>
        new Iconpicker(document.querySelector('.iconpicker'), {
            //icons: ['fa-times', 'fa-check'],
            showSelectedIn: document.querySelector('.selected-icon'), // default: none
            searchable: true, // default: true
            selectedClass: 'selected', // default: true
            containerClass: 'my-picker', // default:
            hideOnSelect: true,
            fade: true, // default: false
            defaultValue: '{{old("icon") ?? $detail->icon}}',
            valueFormat: val => `bi ${val}` // default: bi ${val}
        })
    </script>
    <script>
        $('document').ready(function() {
            $("#foto").change(function() {
                $('#preview').show();
                if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#imgshow').attr('src', e.target.result);
                    }
                    reader.readAsDataURL(this.files[0]);
                }
            });
        });


        var options = {
            filebrowserImageBrowseUrl: '/l4raFM?type=Images',
            filebrowserImageUploadUrl: '/l4raFM/upload?type=Images&_token=',
            filebrowserBrowseUrl: '/l4raFM?type=Files',
            filebrowserUploadUrl: '/l4raFM/upload?type=Files&_token='
        };

        CKEDITOR.replace('deskripsi', options);

        $('.icp').on('iconpickerSelected', function (e) {
            $('.lead .picker-target').get(0).className = 'picker-target fa-3x ' +
                e.iconpickerInstance.options.iconBaseClass + ' ' +
                e.iconpickerInstance.options.fullClassFormatter(e.iconpickerValue);
        });
        
    </script>
@endsection