@extends('layout.default')

@section('content')
    <form class="form" id="form"
        action="{{ route('projects.setting_access.save', ['project' => $project->id]) }}" method="POST">
        <x-card>
            <x-slot name="title">
                <h3 class="card-label">
                    {{ $page_title }}
                </h3>
            </x-slot>
            <x-slot name="toolbar">
                @include('project._navigation', ['project' => $project])
            </x-slot>

            <div class="mb-3">
                <div class="font-weight-bolder font-size-lg mb-2">{{ $project->name }}</div>
                <div href="#" class="font-size-sm text-dark-50">Bidang: {{ $project->field->name }} -
                    {{ $project->field->branch->name }}</div>
            </div>
            <table class="table table-borderless table-hover">
                @foreach ($branches as $branch)
                    <tr>
                        <td>
                            <div class="checkbox-inline">
                                <label class="checkbox checkbox-lg">
                                    <input type="checkbox" onclick="toggleAllField($(this))" data-id="{{ $branch->id }}"
                                        id="branch-{{ $branch->id }}" name="branches[]" value="{{ $branch->id }}">
                                    <span></span>{{ $branch->name }}</label>
                            </div>
                        </td>
                        <td></td>
                    </tr>
                    @foreach ($branch->fields as $field)
                        @if ($field->id != $project->field_id)
                            <tr>
                                <td class="pl-10">
                                    <div class="checkbox-inline">
                                        <label class="checkbox checkbox-lg">
                                            <input type="checkbox" class="field_cb" onclick="toggleField($(this))"
                                                data-branch_id="{{ $branch->id }}" data-id="{{ $field->id }}"
                                                id="field-{{ $field->id }}" name="fields[{{ $field->id }}]"
                                                value="{{ $field->id }}" @checked(isset($selectedFields[$field->id]))>
                                            <span></span>{{ $field->name }}</label>
                                    </div>
                                </td>
                                <td>
                                    <div class="checkbox-inline">
                                        <label class="checkbox checkbox-lg">
                                            <input type="checkbox" class="field_contributor_cb"
                                                data-branch_id="{{ $branch->id }}" data-field_id="{{ $field->id }}"
                                                id="field-iscontributor-{{ $field->id }}"
                                                name="fields[{{ $field->id }}][is_contributor]" value="1"
                                                @disabled(!isset($selectedFields[$field->id])) @checked(isset($selectedFields[$field->id]) && $selectedFields[$field->id]['is_contributor'])>
                                            <span></span>KONTRIBUTOR</label>
                                    </div>
                                </td>
                            </tr>
                        @endif
                    @endforeach
                @endforeach
            </table>

            <x-slot name="footerLeft">
                <button id="btn-submit" type="button"
                    class="btn btn-primary font-weight-bolder">{{ __('Simpan') }}</button>
            </x-slot>
        </x-card>

    </form>
@endsection

@push('page_script')
    {!! JsValidator::formRequest('App\Http\Requests\Project\StoreProjectAccessRequest', '#form') !!}

    <script>
        $(document).ready(function() {
            $('#btn-submit').on('click', () => store());

            setSelectedCheckboxField();
        });

        function setSelectedCheckboxField() {
            $('input[type=checkbox][name="branches[]"]').each(function() {
                const {
                    id
                } = $(this).data();

                const fieldCheckboxCount = $('input.field_cb[data-branch_id=' + id + ']').length;
                const fieldCheckboxCheckedCount = $('input.field_cb[data-branch_id=' + id +
                    ']:checked').length;

                $(this).prop('checked', fieldCheckboxCount === fieldCheckboxCheckedCount)
            });
        }

        function toggleAllField(checkbox) {
            const {
                id
            } = checkbox.data();

            const checked = checkbox.is(':checked');
            $('input.field_cb[data-branch_id=' + id + ']').prop('checked', checked).each(function() {
                const isFieldChecked = $(this).is(':checked');
                const fieldID = $(this).data('id');

                const checkboxFieldContributor = $('#field-iscontributor-' + fieldID);
                checkboxFieldContributor.prop('disabled', !isFieldChecked);
                if (!isFieldChecked) {
                    checkboxFieldContributor.prop('checked', false);
                }
            });
        }

        function toggleField(checkbox) {
            const {
                branch_id,
                id
            } = checkbox.data();

            const fieldCheckboxCount = $('input.field_cb[data-branch_id=' + branch_id + ']').length;
            const fieldCheckboxCheckedCount = $('input.field_cb[data-branch_id=' + branch_id + ']:checked').length;
            const checked = checkbox.is(':checked');

            $('#branch-' + branch_id).prop('checked', fieldCheckboxCount === fieldCheckboxCheckedCount)

            $('#field-iscontributor-' + id).prop('disabled', !checked);
            if (!checked) {
                $('#field-iscontributor-' + id).prop('checked', false);
            }
        }

        function store() {
            if (!$('#form').validate().form()) {
                return false;
            }

            let fields = {};

            $('input.field_cb').each(function() {
                const {
                    id
                } = $(this).data();

                const isContributorChecked = $('#field-iscontributor-' + id).is(':checked');

                if ($(this).is(':checked')) {
                    fields = {
                        ...fields,
                        [id]: {
                            is_contributor: isContributorChecked ? 1 : 0
                        }
                    };
                }
            });

            MyApp.ajaxPost("{{ route('projects.setting_access.save', ['project' => $project]) }}", {
                fields
            }, function(
                response) {
                MyApp.alert("{{ __('Save') }}", "{{ __('Data saved successfully') }}", "success");
            });
        }
    </script>
@endpush