@extends('layouts.master')

@section('title', 'Periode')

@section('breadcrumb')
    <div class="row mb-2">
        <div class="col-sm-6">
            <h1 class="m-0">Periode</h1>
        </div>
        <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item">Periode</li>
                <li class="breadcrumb-item active">Ubah</li>
            </ol>
        </div>
    </div>
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header text-left">
                        <h5>Ubah Periode</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('kendali.periode.store') }}" method="post" autocomplete="off">
                            @csrf
                            @method('POST')
                            <div class="row">
                                <div class="col-md-4">
                                    <input type="hidden" name="id_periode" value="{{$periode->id}}">
                                        <div class="form-group">
                                            <label>Tahun</label>
                                            <div class="input-group date" id="tahun" data-target-input="nearest" >
                                                <input type="text" value="{{$periode->tahun}}"  name="tahun" class="form-control datetimepicker-input" data-target="#tahun"  data-toggle="datetimepicker">
                                                <div class="input-group-append" data-target="#tahun" data-toggle="datetimepicker">
                                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                                    </div>    
                                            </div>
                                        </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>Tanggal Awal</label>
                                        <div class="input-group date"  id="tgl_awal" data-target-input="nearest" >
                                            <input type="text" value="{{ Carbon\Carbon::parse($periode->tgl_awal)->format('d-m-Y'); }}"  name="tgl_awal" class="form-control datetimepicker-input" data-target="#tgl_awal"  data-toggle="datetimepicker">
                                            <div class="input-group-append" data-target="#tgl_awal" data-toggle="datetimepicker">
                                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                                </div>    
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label>Tanggal Akhir</label>
                                        <div class="input-group date" id="tgl_akhir" data-target-input="nearest" >
                                            <input type="text" value="{{ Carbon\Carbon::parse($periode->tgl_akhir)->format('d-m-Y'); }}"  name="tgl_akhir"  class="form-control datetimepicker-input" data-target="#tgl_akhir"  data-toggle="datetimepicker">
                                            <div class="input-group-append" data-target="#tgl_akhir" data-toggle="datetimepicker">
                                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                                </div>    
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <label>Dokumen Wajib</label>
                                    <select name="dokumen[]" id="dokumen" class="form-control nilaiHuruf" style="width: 100%;" multiple>
                                        @foreach ($dokumen as $dok)
                                            <option value="{{ $dok->id }}" {{!empty($periode->dokumen->where('dokumen_id',$dok->id)->first())?'selected':''}}>{{ $dok->dokumen }} - {{$dok->status==1?'(Harus Ada)':'(Tidak Harus Ada)'}} </option> 
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            
                            


                            

                            <div class="form-group text-center">
                                <hr>
                                <a href="{{ route('kendali.periode.home') }}" class="btn btn-danger" style="width: 100px;">
                                    <i class="fa fa-times-circle"></i> Batal
                                </a>
                                <button type="submit" class="btn btn-success" style="width: 100px;">
                                    <i class="fa fa-check-circle"></i> Simpan
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection



@section('js')
   
     <script>
        $('#tahun').datetimepicker({
        theme: 'bootstrap',
        viewMode: 'years',
        format: 'YYYY'
    });
        $("#tgl_awal").datetimepicker({
            theme: 'bootstrap',
            format: 'DD-MM-yyyy'
        });
        $("#tgl_akhir").datetimepicker({
            theme: 'bootstrap',
            format: 'DD-MM-yyyy'
        });
        $('#dokumen').select2({
        theme: 'bootstrap4',
        placeholder: 'Pilih Dokumen'
    });
    </script>
@endsection