@php
    // $policy is null on create, an existing Policy (with ->roles loaded) on edit.
    $isEdit = isset($policy) && $policy->exists;
    $selectedRoleIds = old('role_ids', $isEdit ? $policy->roles->pluck('id')->all() : []);
    $sourceMode = old('source_mode', $isEdit && $policy->filepath ? 'document' : 'content');
@endphp

<style>
    .multi-select-dropdown { position: relative; }
    .multi-select-dropdown .dropdown-menu.show { display: block; }
</style>

<div class="form-group">
    <label for="policy-title">@lang('Title')</label>
    <input
        type="text"
        name="title"
        id="policy-title"
        class="form-control @error('title') is-invalid @enderror"
        value="{{ old('title', $policy->title ?? '') }}"
        maxlength="255"
        required
    >
    @error('title')
        <div class="invalid-feedback">{{ $message }}</div>
    @enderror
</div>

<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <label for="policy-type">@lang('Type')</label>
            <select name="type" id="policy-type" class="form-control @error('type') is-invalid @enderror" required>
                <option value="general" @selected(old('type', $policy->type ?? 'general') === 'general')>
                    @lang('General - everyone must accept')
                </option>
                <option value="group" @selected(old('type', $policy->type ?? '') === 'group')>
                    @lang('Group - tied to specific role(s)')
                </option>
            </select>
            @error('type')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label for="policy-status">@lang('Status')</label>
            <select name="status" id="policy-status" class="form-control @error('status') is-invalid @enderror" required>
                @foreach(['draft' => __('Draft'), 'active' => __('Active'), 'archived' => __('Archived')] as $value => $label)
                    <option value="{{ $value }}" @selected(old('status', $policy->status ?? 'draft') === $value)>
                        {{ $label }}
                    </option>
                @endforeach
            </select>
            @error('status')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
    </div>
</div>

<div class="form-group" id="policy-roles-group" style="display:none">
    <label>@lang('Roles')</label>
    <div class="dropdown multi-select-dropdown">
        <button type="button" class="btn btn-outline-secondary form-control text-start dropdown-toggle @error('role_ids') is-invalid @enderror">
            <span class="ms-summary">@lang('Select Roles')</span>
        </button>
        <div class="dropdown-menu w-100 p-2" style="max-height:260px;overflow-y:auto">
            @foreach($roles as $role)
                <div class="form-check">
                    <input
                        class="form-check-input ms-checkbox"
                        type="checkbox"
                        name="role_ids[]"
                        value="{{ $role->id }}"
                        id="policy-role-{{ $role->id }}"
                        @checked(in_array($role->id, $selectedRoleIds))
                    >
                    <label class="form-check-label" for="policy-role-{{ $role->id }}">
                        {{ $role->display_name ?? $role->name }}
                    </label>
                </div>
            @endforeach
        </div>
    </div>
    <small class="form-text text-muted">
        @lang('Users with any of these roles will be required to accept this policy.')
    </small>
    @error('role_ids')
        <div class="text-danger small mt-1">{{ $message }}</div>
    @enderror
</div>

<hr>

<div class="form-group">
    <label>@lang('How is this policy provided?')</label>
    <div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="source_mode" id="source-content" value="content" @checked($sourceMode === 'content')>
            <label class="form-check-label" for="source-content">@lang('Type content')</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="source_mode" id="source-document" value="document" accept=".pdf" @checked($sourceMode === 'document')>
            <label class="form-check-label" for="source-document">@lang('Upload document')</label>
        </div>
    </div>
</div>

<div class="form-group" id="policy-content-group">
    <label for="policy-content">@lang('Content')</label>
    <textarea
        name="content"
        id="policy-content"
        class="form-control @error('content') is-invalid @enderror"
        rows="8"
    >{{ old('content', $policy->content ?? '') }}</textarea>
    @error('content')
        <div class="invalid-feedback d-block">{{ $message }}</div>
    @enderror
</div>

<div class="form-group d-none" id="policy-document-group">
    <label for="policy-document">@lang('Document')</label>
    <input
        type="file"
        name="document"
        id="policy-document"
        class="form-control-file @error('document') is-invalid @enderror"
        accept=".pdf,.doc,.docx"
    >
    @error('document')
        <div class="invalid-feedback d-block">{{ $message }}</div>
    @enderror

    @if($isEdit && $policy->filepath)
        <div class="mt-2">
            <a href="{{ $policy->file_url }}" target="_blank">
                <i class="fa fa-file-alt mr-1"></i>@lang('Current document')
            </a>
        </div>
        <div class="form-check mt-1">
            <input class="form-check-input" type="checkbox" name="remove_document" id="policy-remove-document" value="1">
            <label class="form-check-label" for="policy-remove-document">
                @lang('Remove current document and switch to typed content')
            </label>
        </div>
    @endif
</div>

<div class="form-group">
    <label for="policy-order-number">@lang('Order')</label>
    <input
        type="number"
        name="order_number"
        id="policy-order-number"
        class="form-control @error('order_number') is-invalid @enderror"
        min="0"
        value="{{ old('order_number', $policy->order_number ?? '') }}"
    >
    <small class="form-text text-muted">
        @lang('Lower numbers are shown first when a user is asked to accept policies. Leave blank to add to the end.')
    </small>
    @error('order_number')
        <div class="invalid-feedback">{{ $message }}</div>
    @enderror
</div>

<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
<script src="{{ asset('js/multi-select-dropdown.js') }}"></script>
<script>
$(document).ready(function () {
    function applyModeVisibility() {
        const mode = $('input[name="source_mode"]:checked').val();
        $('#policy-content-group').toggleClass('d-none', mode !== 'content');
        $('#policy-document-group').toggleClass('d-none', mode !== 'document');
    }

    function applyTypeVisibility() {
        $('#policy-roles-group').toggle($('#policy-type').val() === 'group');
    }

    $('input[name="source_mode"]').on('change', applyModeVisibility);
    $('#policy-type').on('change', applyTypeVisibility);

    applyModeVisibility();
    applyTypeVisibility();

    if (typeof $.fn.summernote !== 'undefined') {
        $('#policy-content').summernote({
            height: 260,
            toolbar: [
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough', 'superscript', 'subscript']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['insert', ['link']],
                ['view', ['fullscreen', 'codeview']],
            ],
        });
    }


    $('#policy-form').on('submit', function () {
        const mode = $('input[name="source_mode"]:checked').val();
        if (mode === 'document') {
            if (typeof $.fn.summernote !== 'undefined') {
                $('#policy-content').summernote('code', '');
            } else {
                $('#policy-content').val('');
            }
        } else {
            $('#policy-document').val('');
        }
    });
});
</script>
@endpush