@php
use App\Models\Organization;
@endphp

@extends('layouts.main_layout')
@section('title', $label)
@section('icon-breadcrumbs',$icon)

@section('content')
{{ Breadcrumbs::render('info.organization') }}

<div class="card">
	<div class="card-body">
		<button type="button" class="btn btn-info btn-sm btn-add-member" data-parent="">Tambah Anggota</button>
		<a href="{{ route('organization.generate') }}" class="btn btn-warning btn-sm">Generate</a>
		<hr class="mb-0">

		<div class="table-responsive">
			<table class="table" id="table-org">
				<thead>
					<tr>
						<th>#</th>
						<th colspan="{{ $colspan }}">Nomor / Nama</th>
						<th>Bidang</th>
						<th>Posisi</th>
						<th style="width: 100px;">Periode</th>
						<th>Kantor</th>
						<th>Foto</th>
					</tr>
				</thead>
				<tbody>
					@foreach ($org as $parent)
						@php
						$number = explode('.', $parent->number);
						$count = count($number);
						$colspan_body = $colspan - $count;
						@endphp

						<tr>
							<td class="align-top">
								<div class="dropdown">
									<button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
									  	<i class="fas fa-cog"></i>
									</button>
									<div class="dropdown-menu">
										<a href="javascript:void(0)" class="dropdown-item btn-add-member" data-parent="{{ $parent->id }}">
											<i class="fas fa-plus-square"></i> &nbsp;Tambah
										</a>
										<a href="javascript:void(0)" class="dropdown-item btn-edit-member" data-id="{{ Crypt::encrypt($parent->id) }}">
											<i class="fas fa-pen-square"></i> &nbsp;Ubah
										</a>
										<a href="javascript:void(0)" class="dropdown-item text-danger btn-delete-member" data-id="{{ Crypt::encrypt($parent->id) }}">
											<i class="fas fa-trash-alt"></i> &nbsp;Hapus
										</a>
									</div>
								</div>
							</td>

							@foreach ($number as $key => $c)
								@php
								$color = (($key + 1) == $count)? '' : ' text-muted';
								@endphp

								<td style="width: 60px;" class="align-top{{ $color }}">{{ $c }}</td>
							@endforeach

							<td class="align-top" colspan="{{ $colspan_body }}">{{ $parent->name }}</td>
							<td class="align-top">{{ $parent->structure->name }}</td>
							<td class="align-top">{{ $parent->position->name }}</td>
							<td class="align-top">{{ $parent->startyear . ' - ' . $parent->endyear }}</td>
							<td class="align-top">{{ $parent->office }}</td>
							<td class="align-top">
								<x-initiate-avatar :attachment="$parent->attachment" class=".avatar-small" />
							</td>
						</tr>

						@php
						$orgchild = Organization::select('id', 'id_parent', 'id_structure', 'id_position', 'number',
								'name', 'office', 'startyear', 'endyear', 'photo')
							->with([
								'structure' => function($query) {
									$query->select('id', 'name');
								},
								'position' => function($query) {
									$query->select('id', 'name');
								},
								'attachment'
							])
							->whereNotNull('id_parent')
							->where('number', 'like', $parent->number . '.%')
							->orderBy('number')
							->get();
						@endphp

						@foreach ($orgchild as $child)
							@php
							$number = explode('.', $child->number);
							$count = count($number);
							$colspan_body = $colspan - $count;
							@endphp

							<tr>
								<td class="align-top">
									<div class="dropdown">
										<button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
											<i class="fas fa-cog"></i>
										</button>
										<div class="dropdown-menu">
											<a href="javascript:void(0)" class="dropdown-item btn-add-member" data-parent="{{ $child->id }}">
												<i class="fas fa-plus-square"></i> &nbsp;Tambah
											</a>
											<a href="javascript:void(0)" class="dropdown-item btn-edit-member" data-id="{{ Crypt::encrypt($child->id) }}">
												<i class="fas fa-pen-square"></i> &nbsp;Ubah
											</a>
											<a href="javascript:void(0)" class="dropdown-item text-danger btn-delete-member" data-id="{{ Crypt::encrypt($child->id) }}">
												<i class="fas fa-trash-alt"></i> &nbsp;Hapus
											</a>
										</div>
									</div>
								</td>

								@foreach ($number as $key => $c)
									@php
									$color = (($key + 1) == $count)? '' : ' text-muted';
									@endphp

									<td style="width: 60px;" class="align-top{{ $color }}">{{ $c }}</td>
								@endforeach

								<td class="align-top" colspan="{{ $colspan_body }}">{{ $child->name }}</td>
								<td class="align-top">{{ $child->structure->name }}</td>
								<td class="align-top">{{ $child->position->name }}</td>
								<td class="align-top">{{ $child->startyear . ' - ' . $child->endyear }}</td>
								<td class="align-top">{{ $child->office }}</td>
								<td class="align-top">
									<x-initiate-avatar :attachment="$child->attachment" class=".avatar-small" />
								</td>
							</tr>
						@endforeach
					@endforeach
				</tbody>
			</table>
		</div>
	</div>
</div>

{{ Form::open(array('url' => route('organization.store'), 'method' => 'post')) }}
<div class="modal" id="structure-member-modal">
    <div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">Form Anggota</h4>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-md-12 col-12">
						{{ Form::defAvatar('photo',"Upload Foto", null)}}
					</div>
					<div class="col-md-6 col-12">
						{{ Form::defName('number', "No. Urut", null, ['required','id="member-number"']) }}
					</div>
					<div class="col-md-6 col-12">
						{{ Form::defName('name', "Nama Anggota", null, ['required','id="member-name"']) }}
					</div>
					<div class="col-md-6 col-12">
						{{ Form::defDropdown('id_structure', "Bidang", $option->structure, null, ['required','id="member-structure"']) }}
					</div>
					<div class="col-md-6 col-12">
						{{ Form::defDropdown('id_position', "Posisi Jabatan", $option->position, null, ['required','id="member-position"']) }}
					</div>
					<div class="col-md-6 col-12">
						{{ Form::defName('office', "Kantor", null, ['required','id="office-name"']) }}
					</div>
					<div class="col-md-6 col-12">
						{{ Form::defyearBetween('startyear', 'endyear',"Periode", $option->year[0], $option->year[1],date("Y"), date("Y"), ['required']) }}
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<input type="hidden" name="id" id="id-structure">
				<input type="hidden" name="id_parent" id="id-parent">
				<button type="button" class="btn btn-light" data-dismiss="modal">Keluar</button>
				{{ Form::defSubmitDefault('TAMBAH') }}
			</div>
		</div>
	</div>
</div>
{{ Form::close() }}
@endsection

@push('scripts')
<script>
$(document).ready(function(){
	$(".btn-add-member").click(function(){
		$("#form-structure-member").trigger("reset");
		$("#id-structure").val(null);
		$("#id-parent").val($(this).data("parent"));
		$("#palace-avatar-review-image img").attr('src',"{{ asset('images/no-image-avatar.png') }}");
		$("#structure-member-modal input[type='submit']").val("TAMBAH")
		$("#structure-member-modal").modal('show');
    })

	$(".btn-edit-member").click(function(){
		var formdata = { _token: token, id: $(this).data("id") }

		$.ajax({
			type: "POST",
			url: "{{ route('organization.get') }}",
			data: formdata,
			dataType: "json",
			success: function (response) {
				$("#id-structure").val(response.data.id);
				$("#member-number").val(response.data.number);
				$("#member-name").val(response.data.name);
				$("#member-structure").val(response.data.id_structure);
				$("#member-position").val(response.data.id_position);
				$("#office-name").val(response.data.office);
				$("#startyear").val(response.data.startyear);
				$("#endyear").val(response.data.endyear);
				$("#palace-avatar-review-image img").attr('src', response.data.photo)
				$("#structure-member-modal input[type='submit']").val("UBAH")

				$("#structure-member-modal").modal('show');
			},
			error: function (xhr, ajaxOptions, thrownError) {
				ajaxError(xhr.status)
			}
		})
	})

	$("#table-org").on('click','.btn-delete-member',function(){
        var id = $(this).data('id')

         swal({
            title: "Peringatan",
            text: "Hapus data ini?",
            showCancelButton: true,
            closeOnConfirm: true,
            dangerMode: true,
            confirmButtonText: 'HAPUS',
            cancelButtonText: "TIDAK",
        },function(confirm){
          if(confirm){
			var formdata = { _token: token, id: id }

            $.ajax({
            type: "POST",
            url: "{{ route('organization.delete') }}",
			data: formdata,
            dataType: "json",
            success: function(res){
				toastr.success(res.message)
				window.location.reload()
            },
            error: function (xhr, ajaxOptions, thrownError) {
              ajaxError(xhr.status, xhr.statusText)
            }
          })
          }
        })
	});
})
</script>
@endpush