@include('layout.header')

<section id="content" style="background-color: #eee;">
  <div class="container pt-4 pb-4">
    <div class="row">
      <div class="col-12 col-lg-12 p-3">
        <a href="{{url('/')}}" class="btn btn-danger">
          <i class="fa fa-chevron-left" style="font-size: 14px;"></i> 
          Kembali
        </a>
      </div>
    </div>
    
    <table class="table table-striped table-custom mydatatable_export" data-excel-title="improvement Order">
        <thead>
            <tr>
                <th>No</th>
                <th>Date Order</th>
                <th>No. Pengajuan</th>
                <th>Name</th>
                <th>Branch</th>
                <th>Nik</th>
                <th>Position</th>
                <th>Category</th>
                <th>Title</th>
                <th>Poin Perbaikan</th>
                <th>Jadwal Klinik</th>
                <th>Status</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
                        @foreach ($improvement as $item)
                        <tr>
                <td>{{$no}}</td>
                <td style="width: 12%;">{{date_format($item->created_at, 'd M Y')}}</td>
                <td>{{$item->number}}</td>
                <td>
                    @if ($item->name == '-')
                        @if ($item->name_1)
                            {{ $item->name_1 }} </br>
                        @endif
                        @if ($item->name_2)
                            {{ $item->name_2 }} </br>
                        @endif
                        @if ($item->name_3)
                            {{ $item->name_3 }} </br>
                        @endif
                        @if ($item->name_4)
                            {{ $item->name_4 }} </br>
                        @endif
                        @if ($item->name_5)
                            {{ $item->name_5 }} </br>
                        @endif
                        @if ($item->name_6)
                            {{ $item->name_6 }} </br>
                        @endif
                        @if ($item->name_7)
                            {{ $item->name_7 }} </br>
                        @endif
                        @if ($item->name_8)
                            {{ $item->name_8 }} </br>
                        @endif
                        @if ($item->name_9)
                            {{ $item->name_9 }} </br>
                        @endif
                        @if ($item->name_10)
                            {{ $item->name_10 }} </br>
                        @endif
                    @else
                        {{ $item->name }}
                    @endif
                </td>
                <td>{{$item->branch->name}}</td>
                <td>{{$item->nik}}</td>
                <td>{{$item->position}}</td>
                <td>{{$item->category_improvement}}</td>
                <td>{{$item->title}}</td>
                <td>{{$item->poin_perbaikan}}</td>
                <td>{{$item->jadwal_klinik}}</td>
                <td>
                    {{ ucwords(str_replace("_", " ", $item->status_action)) }}
                </td>
                <td>
                    <a href="{{ route('improvement.show', [$item->id]) }}" class="btn btn-sm btn-primary mb-2 text-light">
                        <i class="fa fa-eye"></i> Detail
                    </a>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
    
    <div class="container mt-3 p-3" style="background-color: #fff;border-radius: 10px;">
        <div class="w-100 text-center mb-4" style="font-size: 18px;font-weight: bold;">Pengajuan Improvement</div>
        @if (\Session::has('success'))
          <div class="alert alert-success">
            <ul class="m-0 pl-3">
              <li>{!! \Session::get('success') !!}</li>
            </ul>
          </div>
        @endif
        @if($errors->any())
          <div class="alert alert-danger">
            <ul class="m-0 pl-3">
              <li>{{$errors->first()}}</li>
            </ul>
          </div>
        @endif
        <form id="form-claim" method="POST" enctype="multipart/form-data" action="/human/pengajuan_improvement">
            {{ csrf_field() }}
            <input type="hidden" id="user_id" name="user_id" value="{{Auth::User()->id}}">
            <div class="row">
                <div class="col-6">
                    <div class="form-group">
                        <label for="form_cabang">Kategori Improvement</label>
                        <select required class="form-control" id="form_kategori_improvement" name="form_kategori_improvement">
                            <option value="">Pilih Kategori Improvement</option>
                            <option value="SS">SS</option>
                            <option value="QCP">QCP</option>
                            <option value="QCC">QCC</option>
                            <option value="PPS">PPS</option>
                        </select>
                    </div>
                    <div class="form-group" id="form_name_wrapper">
                        <label for="form_name">Nama Lengkap</label>
                        <input type="text" class="form-control" id="form_name" name="form_name" placeholder="Isikan Nama Lengkap">
                    </div>
                    <div id="additional-name"></div>
                    <div class="form-group" id="btn-more-name" style="display:none">
                        <button onclick="appendAdditionalName()" class="btn btn-info btn-sm" type="button">Add More Name</button>
                    </div>
                    <div class="form-group">
                        <label for="form_lelang_date">NIK</label>
                        <input type="text" required class="form-control" id="form_nik" name="form_nik" placeholder="Isikan NIK">
                    </div>
                    <div class="form-group">
                        <label for="form_name_lelang">Posisi</label>
                        <input type="text" required class="form-control" id="form_position" name="form_position" placeholder="Isikan Posisi">
                    </div>
                    <div class="form-group">
                        <label for="form_cabang">Department</label>
                        <select required class="form-control" id="form_department" name="form_department">
                            <option value="">Pilih Department</option>
                            @foreach ($departements as $item)
                                <option value="{{$item->id}}">{{$item->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="form_cabang">Cabang</label>
                        <select required class="form-control" id="form_cabang" name="form_cabang">
                            <option value="">Pilih Cabang</option>
                            @foreach ($branch as $item)
                                <option value="{{$item->id}}">{{$item->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="after-add-more">
                        <div class="row">
                            <div class="col-lg-8">
                                <div class="form-group">
                                    <label for="form_file">Upload File</label>
                                    <input type="file" required class="form-control" name="form_file[]">
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for="form_file"></label>
                                    <button class="btn btn-success add-more" type="button" style="margin-top:20%;">
                                        <i class="glyphicon glyphicon-plus"></i> Add
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="form-group">
                        <label for="form_harga_dasar">Judul Improvement</label>
                        <input type="text" required class="form-control" id="form_title_improvement" name="form_title_improvement" placeholder="Isikan Judul Improvement">
                    </div>
                    <div class="form-group">
                        <label for="form_cabang">Kategori Pengajuan</label>
                        <select required class="form-control" id="form_kategori_pengajuan" name="form_kategori_pengajuan">
                            <option value="">Pilih Kategori Pengajuan</option>
                            <option value="Baru">Baru</option>
                            <option value="Revisi">Revisi</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="form_cabang">Poin Perbaikan</label>
                        <select required class="form-control select2" id="form_poin_perbaikan" name="form_poin_perbaikan[]" multiple>
                            {{-- <option value="">Pilih Poin Perbaikan</option> --}}
                            <option value="Safety/5R">Safety/5R</option>
                            <option value="Quality">Quality</option>
                            <option value="Cost">Cost</option>
                            <option value="Delivery">Delivery</option>
                            <option value="Productivity">Productivity</option>
                            <option value="Morale">Morale</option>
                            <option value="Environment">Environment</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="form_harga_lelang">Jadwal Klinik</label>
                        <input type="text" class="form-control" id="form_jadwal_klinik" name="form_jadwal_klinik" placeholder="Isikan Jadwal Klinik" readonly>
                    </div>
                    <div class="form-group">
                        <label for="form_no_polisi">Nomor Handphone Terdaftar Di OVO</label>
                        <input type="text" required class="form-control" id="form_no_hp" name="form_no_hp" placeholder="Isikan No HP">
                    </div>
                </div>
            </div>
            <div class="row mt-2 mb-2">
                <div class="col-12">
                    <div class="w-100 text-center">
                        <a class="btn btn-secondary w-25 mr-4" href="{{url('human')}}">Kembali</a>
                        <button type="submit" class="btn btn-danger w-25">Ajukan</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
  </div>
</section>

@include('layout.footer')

<script>
$('#form_jadwal_klinik').datepicker({
    format: 'yyyy-mm-dd',
    minDate: new Date(),
    beforeShowDay:
     function(dt)
     {
        return [dt.getDay() == 5, ""];
     }
});

let totalAdditionalName = 0;
let maxAdditionalName = 10;
function toggleImprovementCategory(category = '') {
    if(category != 'SS') {
        clearAdditionalName()
        initAdditionalName()
        $("#btn-more-name").show()
        $("#form_name_wrapper").hide()
    } else if(category == 'SS') {
        clearAdditionalName()
        $("#btn-more-name").hide()
        $("#form_name_wrapper").show()
    }
}

function elAdditionalname(index = 1) {
    return `
        <div class="form-group">
            <label for="form_names">Nama Lengkap ${index}</label>
            <input type="text" required class="form-control" name="form_names_${index}" placeholder="Isikan Nama Lengkap ${index}">
        </div>
    `
}

function initAdditionalName() {
    for(var i = 1; i <= 3; i++) {
        totalAdditionalName++;
        $("#additional-name").append(elAdditionalname(i))
    }
}

function appendAdditionalName() {
    if(totalAdditionalName < maxAdditionalName) {
        $("#additional-name").append(elAdditionalname(totalAdditionalName + 1))
        totalAdditionalName++;
    } else {
        alert("Reach maximum field")
    }
}

function clearAdditionalName() {
    totalAdditionalName = 0;
    $("#additional-name").html("");
}

$(document).ready(function() {
    $(".select2").select2({
        placeholder: "Pilih Poin Perbaikan"
    });

    $("#form_kategori_improvement").on("change", function() {
        toggleImprovementCategory($(this).val())
    })

    $(".add-more").click(function(){ 
        var length = $('.after-add-more .control-group').length;
        if (length + 1 == 5) {
            return;
        }
        var html = '<div class="row control-group">';
            html += '<div class="col-lg-8">';
                html += '<div class="form-group">';
                    html += '<input type="file" required class="form-control file-dinamis" name="form_file[]">';
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="col-lg-4">';
                        html += '<div class="form-group">';
                            html += '<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>';
                            html += '</div>';
                            html += '</div>';
                            html += '</div>';
        $(".after-add-more").append(html);
    });

    // saat tombol remove dklik control group akan dihapus 
    $("body").on("click",".remove",function(){ 
        $(this).parents(".control-group").remove();
    });
});
</script>