@extends('layouts.index')
@section('title')
    Tambah 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">
                            Tambah
                        </li>
                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Tambah 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.store') }}" enctype="multipart/form-data" class="form-horizontal"
                        method="POST">
                        @csrf
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="">Nama<sup title="Wajib Diisi" class="text-danger">*</sup></label>
                                
                                    <input type="text" class="form-control @error('nama') is-invalid @enderror" id="nama"
                                        name="nama" placeholder="Nama" value="{{ old('nama') }}" />
                                    @error('nama')
                                        <div class="invalid-feedback">
                                            {{$message}}
                                        </div>
                                    @enderror
                                
                            </div>
                            <div class="mb-3 ">
                                <label for="" >Icon<sup title="Wajib Diisi" class="text-danger">*</sup></label>
                                
                                    <input type="file" class="form-control @error('icon_logo') is-invalid @enderror"
                                        id="icon_logo" name="icon_logo" />
                                    <div id="preview_icon" style="display: none">
                                        <br>
                                        <img id="imgshow_icon" src="#" width="200" height="110"
                                            style="object-fit: contain;border-radius: 20px;">
                                    </div>
                                    @error('icon_logo')
                                        <div class="invalid-feedback">
                                            {{$message}}
                                        </div>
                                    @enderror
                                
                            </div>
                            <div class="mb-3 ">
                                <label for="" >Foto<sup title="Wajib Diisi" class="text-danger">*</sup></label>
                                
                                    <input type="file" class="form-control @error('foto') is-invalid @enderror"
                                        id="foto" name="foto" />
                                    <div id="preview_foto" style="display: none">
                                        <br>
                                        <img id="imgshow_foto" src="#" width="400" height="220"
                                            style="object-fit: cover;border-radius: 20px;">
                                    </div>
                                    @error('foto')
                                        <div class="invalid-feedback">
                                            {{$message}}
                                        </div>
                                    @enderror
                                
                            </div>
                            <div class="mb-3 ">
                                <label for="">Deskripsi Singkat<sup title="Wajib Diisi" class="text-danger">*</sup></label>
                                
                                    <textarea cols="80" class="form-control" id="intermeso" name="intermeso" rows="5">
                                      {!! old('intermeso') !!}              
                                    </textarea>
                                    @error('intermeso')
                                        <div class="invalid-feedback">
                                            {{$message}}
                                        </div>
                                    @enderror
                               
                            </div>
                            <div class="mb-3">
                                <label for="">Deskripsi<sup title="Wajib Diisi" class="text-danger">*</sup></label>
                               
                                    <textarea cols="80" id="deskripsi" name="deskripsi" rows="10">
                                      {!! old('deskripsi') !!}              
                                    </textarea>
                                    @error('deskripsi')
                                        <div class="invalid-feedback">
                                            {{$message}}
                                        </div>
                                    @enderror
                                
                            </div>
                            <div class="mb-3 ">
                                <label for="">Deskripsi Sub Layanan</label>
                               
                                    <textarea cols="80"  class="form-control" id="sub_layanan" name="sub_layanan" rows="5">
                                      {!! old('sub_layanan') !!}              
                                    </textarea>
                                    @error('sub_layanan')
                                        <div class="invalid-feedback">
                                            {{$message}}
                                        </div>
                                    @enderror
                                
                            </div>
                            @if ($layanan)
                                <div class="mb-3 ">
                                    <label for="">Induk Layanan</label>
                                    <select name="induk_id" id="" class="form-control">
                                        <option value="">-- Pilih --</option>
                                        @foreach ($layanan as $item)
                                        @php
                                            $induk = '';
                                            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>
                            @endif
                        </div>
                        <div class="p-3 ">
                            <div class="text-end">
                            <button type="submit"
                                    class="
                          btn btn-light-secondary
                          rounded-pill
                          px-4
                          waves-effect waves-light
                        ">
                                    Batal
                                </button>

                                <button type="submit"
                                    class="
                          btn btn-info
                          rounded-pill
                          px-4
                          waves-effect waves-light
                        ">
                                    Simpan
                                </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: 'bi-alarm',
            valueFormat: val => `bi ${val}` // default: bi ${val}
        })
    </script> --}}
    <script>
        $('document').ready(function() {
            $("#icon_logo").change(function() {
                $('#preview_icon').show();
                if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#imgshow_icon').attr('src', e.target.result);
                    }
                    reader.readAsDataURL(this.files[0]);
                }
            });
            $("#foto").change(function() {
                $('#preview_foto').show();
                if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#imgshow_foto').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