@extends('layouts.app')

@section('title', 'Task')
@section('breadcrumb', 'Task')
@section('sub-breadcrumb')
    <a href="{{route('task.list')}}" class="kt-subheader__breadcrumbs-link">
        List
    </a>
    <span class="kt-subheader__breadcrumbs-separator"></span>
    <a class="kt-subheader__breadcrumbs-link">
        Detail
    </a>
@endsection
@section('task', 'kt-menu__item--open kt-menu__item--here')
@section('list-task', 'kt-menu__item--active')
@section('custom-style')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.css">
    <style type="text/css">
        .t-task-header{
            width: 110px;
            vertical-align: top;
        }
        .t-semincolon{
            width: 10px;
            vertical-align: top;
        }
        .custom-table ul{
            padding-left: 17px;
            margin-bottom: 0;
        }
        .task-image{
            height: 50px;
            margin-right: 10px;
            border: 1px solid #ccc;
        }
        .modal-body img{
            width: auto;
            max-width: 450px;
            max-height: 500px;
        }
        .select2-container{
            min-height: 38px;
        }
        .select2-container,
        .select2-container .selection,
        .select2-container .select2-selection{
            display: flex;
            flex: 1;
        }
        .row-mar-top{
            margin-top: 15px;
        }
    </style>
@endsection

@section('content')
    <div class="kt-portlet">
        <div class="kt-portlet__body">
            @include('layouts.notification')
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <div>
                            <table class="custom-table">
                                <tbody>
                                    <tr>
                                        <td class="t-task-header"><b>Title</b></td>
                                        <td class="t-semincolon">:</td>
                                        <td>{{ $result['task']['title'] }}</td>
                                    </tr>
                                    <tr>
                                        <td class="t-task-header"><b>Description</b></td>
                                        <td class="t-semincolon">:</td>
                                        <td>{{ $result['task']['description'] }}</td>
                                    </tr>
                                    <tr>
                                        <td class="t-task-header"><b>Photo Status</b></td>
                                        <td class="t-semincolon">:</td>
                                        <td>{{ $result['task']['photo'] }}</td>
                                    </tr>
                                    <tr>
                                        <td class="t-task-header"><b>Task Checklist</b></td>
                                        <td class="t-semincolon">:</td>
                                        <td>
                                            <ul>
                                            @foreach($result['task']['brand_task_checklists'] as $key => $checklist)
                                                <li>{{ $checklist['item'] }}</li>
                                            @endforeach
                                            </ul>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="t-task-header"><b>Example Photo</b></td>
                                        <td class="t-semincolon">:</td>
                                        <td>
                                            @foreach($result['task']['brand_task_images'] as $key => $image)
                                                <a href="#" onClick="javascript:openModal('{{ env('AWS_URL').$image['image'] }}')">
                                                    <img class="task-image" src="{{ env('AWS_URL').$image['image'] }}" alt="" />
                                                </a>
                                            @endforeach
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <table class="custom-table">
                            <tbody>
                                <tr>
                                    <td class="t-task-header"><b>Start Date</b></td>
                                    <td class="t-semincolon">:</td>
                                    <td>{{ $result['task']['date_start'] ? date('d F Y', strtotime($result['task']['date_start'])) : "" }}</td>
                                </tr>
                                <tr>
                                    <td class="t-task-header"><b>End Date</b></td>
                                    <td class="t-semincolon">:</td>
                                    <td>{{ $result['task']['date_end'] ? date('d F Y', strtotime($result['task']['date_end'])) : "" }}</td>
                                </tr>
                                <tr>
                                    <td class="t-task-header"><b>Answer Status</b></td>
                                    <td class="t-semincolon">:</td>
                                    <td>{{ $result['task']['status_answer']==1 ? "Required" : "Not Required" }}</td>
                                </tr>
                                <tr>
                                    <td class="t-task-header"><b>Task Time Type</b></td>
                                    <td class="t-semincolon">:</td>
                                    <td>
                                        {{ $task_time_type }} {{ $task_time_type!=="All Days" ? " (".implode(", ", $brand_task_custom).")" : "" }}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <hr>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="kt-checkbox">
                                <input type="checkbox" class="outlet-assign-all"> <b>Assign to all outlet</b>
                                <span></span>
                            </label>
                            <div class="row">
                                <div class="col-md-4">
                                    <input type="time" class="form-control time-all">
                                    <span class="form-text text-muted">Waktu completion task nya. Jika kosong maka jam berapapun</span>
                                </div>
                                <div class="col-md-4">
                                    <input type="number" class="form-control tresh-all">
                                    <span class="form-text text-muted">+- toleransi waktu (menit)</span>
                                </div>
                                <div class="col-md-4">
                                    <select name="user_task['all'][]" class="form-control user-all user_task" multiple="multiple">
                                        <option value="">-</option>
                                        <option value="all user" selected>All User</option>
                                        @foreach ($user_group as $key2 => $value2)
                                            <option value="{{$value2['id']}}" {{($value['pivot']['is_user_group'] ?? null == $value2['id']) ? 'selected' : ''}}>{{$value2['name']}}</option>
                                        @endforeach
                                    </select>
                                    <span class="form-text text-muted">User group yang ditunjuk untuk mengerjakan task <span style="color:red">*</span></span>
                                </div>
                            </div>
                            <div class="row row-mar-top">
                                <div class="col-md-4">
                                    <input type="time" class="form-control vis-time-all">
                                    <span class="form-text text-muted">Waktu mulai task tampil di aplikasi.</span>
                                </div>
                                <div class="col-md-4">
                                    <input type="time" class="form-control vis-time-end-all">
                                    <span class="form-text text-muted">Waktu akhir task tampil di aplikasi.</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <hr>
                <form id="createMasterStock" action="{{ route('task.assign.create') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @php
                        $data_column = [];
                    @endphp
                    <input type="hidden" name="id_task" value="{{ $result['task']['id'] }}">

                    {{-- assigned outlets --}}
                    @if (!empty($result['task']['brand_task_outlets']))
	                    <b>Assigned Outlet</b> <br><br>
	                    <div class="row">
                            @php
                                $data_column = array_column($result['task']['brand_task_outlets'], 'id_brand_outlet');
                            @endphp
                            @foreach($result['task']['brand_task_outlets'] as $key => $value)
                                @php
                                    $brand_outlet = $value['brand_outlet'];
                                    $selected_user_groups = $value['brand_task_outlet_user_groups'];
                                @endphp
                                <input class="outlet{{ $brand_outlet['id'] }}" type="hidden" name="id_outlet[]" value="{{ $brand_outlet['id'] }}">
                                <input class="outlet_brand{{ $brand_outlet['id'] }}" type="hidden" name="outlet_brand[]" value="{{ $value['id'] }}">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="kt-checkbox">
                                            <input type="checkbox" class="outlet-assign" data-idoutlet="{{ $brand_outlet['id'] }}" name="outlet[]" checked> {{ $brand_outlet['name'] }}
                                            <span></span>
                                        </label>
                                        <div class="row">
                                            <div class="col-md-4 kelas{{ $brand_outlet['id'] }}" style="display: none">
                                                <input name="time[]" type="time" class="form-control time{{ $brand_outlet['id'] }}" value="{{ $value['time'] }}">
                                                <span class="form-text text-muted">Waktu completion task nya. Jika kosong maka jam berapapun</span>
                                            </div>
                                            <div class="col-md-4 kelas{{ $brand_outlet['id'] }}" style="display: none">
                                                <input name="tresh[]" type="number" class="form-control tresh{{ $brand_outlet['id'] }}" value="{{ $value['threshold'] }}">
                                                <span class="form-text text-muted">+- toleransi waktu (menit)</span>
                                            </div>
                                            <div class="col-md-4 kelas{{ $brand_outlet['id'] }}" style="display: none">
                                                <select name="user_task[{{ $brand_outlet['id'] }}][]" class="form-control user{{ $brand_outlet['id'] }} user_task" multiple="multiple">
                                                    @if ($value['id_user'] !== null && $value['is_user_group'] == 0)
                                                        <option value="" selected>-</option>
                                                        <option value="all user">All User</option>
                                                        @foreach ($user_group as $key2 => $value2)
                                                            <option value="{{$value2['id']}}">{{$value2['name']}}</option>
                                                        @endforeach
                                                    @elseif($value['id_user'] == null && $value['is_user_group'] == 0)
                                                        <option value="">-</option>
                                                        <option value="all user" selected>All User</option>
                                                        @foreach ($user_group as $key2 => $value2)
                                                            <option value="{{$value2['id']}}">{{$value2['name']}}</option>
                                                        @endforeach
                                                    @elseif($value['id_user'] == null && $value['is_user_group'] == 1)
                                                        <option value="">-</option>
                                                        <option value="all user">All User</option>
                                                        @foreach ($user_group as $key2 => $value2)
                                                            <option value="{{$value2['id']}}" @foreach($selected_user_groups as $ug) {{($ug['id_user_group'] == $value2['id']) ? 'selected' : ''}} @endforeach>{{$value2['name']}}</option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                                <span class="form-text text-muted">User group yang ditunjuk untuk mengerjakan task <span style="color:red">*</span></span>
                                            </div>
                                        </div>
                                        <div class="row row-mar-top">
                                            <div class="col-md-4 kelas{{ $brand_outlet['id'] }}">
                                                <input name="visibility_time[]" type="time" class="form-control vis-time-{{ $brand_outlet['id'] }}" value="{{ $value['visibility_time'] }}">
                                                <span class="form-text text-muted">Waktu mulai task tampil di aplikasi.</span>
                                            </div>
                                            <div class="col-md-4 kelas{{ $brand_outlet['id'] }}">
                                                <input name="visibility_time_end[]" type="time" class="form-control vis-time-end-{{ $brand_outlet['id'] }}" value="{{ $value['visibility_time_end'] }}">
                                                <span class="form-text text-muted">Waktu akhir task tampil di aplikasi.</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
	                    </div>
	                    <hr>
                    @endif

                    {{-- not assigned outlets --}}
                    @if (!empty($result['outlet']))
                        List Outlet <br><br>
                        <div class="row">
                            @foreach($result['outlet'] as $key => $value)
                                @if (!in_array($value['id'], $data_column))
                                    <input class="outlet{{ $value['id'] }}" type="hidden" name="id_outlet[]" value="{{$value['id']}}">
                                    <input class="outlet_brand{{$value['id']}}" type="hidden" name="outlet_brand[]" value="{{$value['id']}}">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="kt-checkbox">
                                                <input type="checkbox" class="outlet-assign outlet-belum-assign" data-idoutlet="{{ $value['id'] }}" name="outlet[]"> {{ $value['name'] }}
                                                <span></span>
                                            </label>
                                            <div class="row">
                                                <div class="col-md-4 kelas{{ $value['id'] }}" style="display: none">
                                                    <input name="time[]" type="time" class="form-control time{{ $value['id'] }} time-outlet-belum-assign">
                                                    <span class="form-text text-muted">Waktu completion task nya. Jika kosong maka jam berapapun</span>
                                                </div>
                                                <div class="col-md-4 kelas{{ $value['id'] }}" style="display: none">
                                                    <input name="tresh[]" type="number" class="form-control tresh{{ $value['id'] }} tresh-outlet-belum-assign">
                                                    <span class="form-text text-muted">+- toleransi waktu (menit)</span>
                                                </div>
                                                <div class="col-md-4 kelas{{ $value['id'] }}" style="display: none">
                                                    <select name="user_task[{{ $value['id'] }}][]" class="form-control user{{ $value['id'] }} user-outlet-belum-assign user_task" multiple="multiple">
                                                        <option value="">-</option>
                                                        <option value="all user" selected>All User</option>
                                                        @foreach ($user_group as $key2 => $value2)
                                                            <option value="{{$value2['id']}}">{{$value2['name']}}</option>
                                                        @endforeach
                                                    </select>
                                                    <span class="form-text text-muted">User group yang ditunjuk untuk mengerjakan task <span style="color:red">*</span></span>
                                                </div>
                                            </div>
                                            <div class="row row-mar-top">
                                                <div class="col-md-4 kelas{{ $value['id'] }}">
                                                    <input name="visibility_time[]" type="time" class="form-control vis-time-{{ $value['id'] }} vis-time-outlet-belum-assign">
                                                    <span class="form-text text-muted">Waktu mulai task tampil di aplikasi.</span>
                                                </div>
                                                <div class="col-md-4 kelas{{ $value['id'] }}">
                                                    <input name="visibility_time_end[]" type="time" class="form-control vis-time-end-{{ $value['id'] }} vis-time-end-outlet-belum-assign">
                                                    <span class="form-text text-muted">Waktu akhir task tampil di aplikasi.</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                        <hr>
                    @endif
                    <div>
                        <div class="form-group">
                            <button class="btn btn-warning btn-back" type="button">Back</button>
                            <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Save</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- begin: modal --}}
    <div class="modal fade modal-preview" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body text-center">
                <img id="gambar" src="">
            </div>
        </div>
        </div>
    </div>
   {{-- end: modal --}}
@endsection

@section('custom-script')
    <script type="text/javascript">
        function openModal(data) {
            $('#gambar').attr("src", data);
            $('#exampleModal').modal('show');
        }

        $(".btn-back").on("click", function(){
            window.history.back();
        });

        $( document ).ready(function() {
            $('.user_task').select2();

            // prevent multiple select if "all user"/ "-" is selected
            $('.user_task').on('select2:select', function (e) {
                var data = $(this).val();

                if(jQuery.inArray("all user", data) !== -1)
                {
                    $(this).val(["all user"]);
                    $(this).trigger('change');
                }

                if(jQuery.inArray("", data) !== -1)
                {
                    $(this).val([""]);
                    $(this).trigger('change');
                }
            });

            $('.outlet-assign').each(function() {
                var outlet = $(this).data('idoutlet');
                if ($(this).is(':checked')) {
                    $('.kelas'+outlet).show();
                    $(".time"+outlet).prop('disabled', false);
                    $(".tresh"+outlet).prop('disabled', false);
                    $(".vis-time-"+outlet).prop('disabled', false);
                    $(".vis-time-end-"+outlet).prop('disabled', false);
                    $(".outlet"+outlet).prop('disabled', false);
                    $(".outlet_brand"+outlet).prop('disabled', false);
                } else {
                    $('.kelas'+outlet).hide();
                    $(".time"+outlet).prop('disabled', true);
                    $(".tresh"+outlet).prop('disabled', true);
                    $(".vis-time-"+outlet).prop('disabled', true);
                    $(".vis-time-end-"+outlet).prop('disabled', true);
                    $(".outlet"+outlet).prop('disabled', true);
                    $(".outlet_brand"+outlet).prop('disabled', true);
                }
            });
        });

        $(document).on('click', '.outlet-assign-all', function() {
        	$('.outlet-belum-assign').trigger('click');
        });

        $(document).on('keyup change', '.time-all', function() {
        	if ($('.outlet-assign-all').is(':checked')) {
        		var time = $('.time-all').val();
        		$('.time-outlet-belum-assign').val(time);
        	}
        });

        $(document).on('keyup change', '.tresh-all', function() {
        	if ($('.outlet-assign-all').is(':checked')) {
        		var tresh = $('.tresh-all').val();
        		$('.tresh-outlet-belum-assign').val(tresh);
        	}
        });
        $(document).on('change', '.user-all', function() {
        	if ($('.outlet-assign-all').is(':checked')) {
        		var user = $('.user-all').val();
        		$('.user-outlet-belum-assign').val(user);
                $('.user-outlet-belum-assign').trigger('change');
        	}
        });

        $(document).on('keyup change', '.vis-time-all', function() {
            if ($('.outlet-assign-all').is(':checked')) {
                var vis_time = $('.vis-time-all').val();
                $('.vis-time-outlet-belum-assign').val(vis_time);
            }
        });
        $(document).on('keyup change', '.vis-time-end-all', function() {
            if ($('.outlet-assign-all').is(':checked')) {
                var vis_time_end = $('.vis-time-end-all').val();
                $('.vis-time-end-outlet-belum-assign').val(vis_time_end);
            }
        });

        $(document).on('click', '.outlet-assign', function() {
            var outlet = $(this).data('idoutlet');
            if ($(this).is(':checked')) {
                $('.kelas'+outlet).show();
                $(".time"+outlet).prop('disabled', false);
                $(".tresh"+outlet).prop('disabled', false);
                $(".vis-time-"+outlet).prop('disabled', false);
                $(".vis-time-end-"+outlet).prop('disabled', false);
                $(".outlet"+outlet).prop('disabled', false);
                $(".outlet_brand"+outlet).prop('disabled', false);
            } else {
                $('.kelas'+outlet).hide();
                $(".time"+outlet).prop('disabled', true);
                $(".tresh"+outlet).prop('disabled', true);
                $(".vis-time-"+outlet).prop('disabled', true);
                $(".vis-time-end-"+outlet).prop('disabled', true);
                $(".outlet"+outlet).prop('disabled', true);
                $(".outlet_brand"+outlet).prop('disabled', true);
            }
        });

    </script>
@endsection