@extends('layouts.app')

@section('title', 'Persyaratan')

@section('breadcrumb')
    <ul class="breadcrumb">
        <li>
            <p>DASHBOARD</p>
        </li>
        <li><a href="#" class="active">Tambah Persyartan</a> </li>
    </ul>
@endsection


@section('title-section', 'Tambah Persyaratan')

@section('content')
    <div class="row">
        <div class="col-md-12">
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <div class="grid simple form-grid">
                <div class="grid-title no-border">
                </div>
                <div class="grid-body no-border">
                    <form action="{{ route('persyaratan.store', $layanan->id) }}" method="POST" autocomplete="off"
                        class="validate" id="roles-form">
                        @csrf
                        <div class="form-group">
                            <label class="form-label">Nama Layanan</label>
                            <input class="form-control" id="role" placeholder="Nama Persyaratan"
                                value="{{ $layanan->nama_layanan }}" disabled type="text">
                        </div>
                        <div class="persyaratan add-persyaratan">
                            <div class="form-group">
                                <label class="form-label">Nama Persyaratan</label>
                                <input class="form-control" id="role" placeholder="Nama Persyaratan"
                                    name="nama_persyaratan[]" type="text">
                            </div>
                            <button type="button" class="btn btn-primary" id="add-persyaratan"> Add more
                                Persyaratan</button>
                        </div>
                        <div class="form-actions">
                            <div class="pull-right">
                                <button class="btn btn-success btn-cons" type="submit"><i
                                        class="icon-ok"></i>Simpan</button>
                                <button type="reset" class="btn btn-warning btn-cons">Reset</button>
                                <a href="{{ route('persyaratan.show', $layanan->id) }}"
                                    class="btn btn-danger btn-cons">Kembali</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Untuk Add More Persyaratan --}}
    <div class="d-none new-persyaratan ">
        <div class="persyaratan mt-3">
            <div class="form-group">
                <label class="form-label">Nama Persyaratan</label>
                <input class="form-control input-syarat" id="role" disabled placeholder="Nama Persyaratan"
                    name="nama_persyaratan[]" type="text">
            </div>
            <button type="button" class="btn btn-danger" id="remove-persyaratan"> Hapus
                Paket</button>
        </div>
    </div>
@endsection

@push('addon-script')
    <script>
        $("#add-persyaratan").on('click', function() {
            $(".input-syarat").each(function() {
                $(this).removeAttr('disabled');
            })

            var html = $(".new-persyaratan").html();
            $(".add-persyaratan").after(html);
        })

        $("body").on("click", "#remove-persyaratan", function() {
            $(this).parents(".persyaratan").remove();
        });
    </script>
@endpush