@extends('layouts.app')

@section('title', 'Role Settings')

@section('css')
@include('vetClinic::partials._mobile_responsive')
@endsection

@section('content')
<section class="content-header">
    <h1><i class="fas fa-sign-in-alt"></i> Role Settings <small>Landing &amp; scopes</small></h1>
    <ol class="breadcrumb">
        <li><a href="{{ route('vc.departments.index') }}">@lang('vetClinic::lang.settings')</a></li>
        <li class="active">Role Settings</li>
    </ol>
</section>

<section class="content">

    <div class="alert alert-info" style="font-size:12.5px;line-height:1.6;">
        <p style="margin:0 0 6px;">
            <i class="fa fa-sign-in-alt"></i> <strong>Landing page</strong> &mdash;
            the page the user is sent to right after logging in. It only fires
            <strong>once per session</strong>; clicking <em>Home</em> later still opens the main ERP dashboard.
        </p>
        <p style="margin:0;">
            <i class="fa fa-calendar"></i> <strong>Appointments scope</strong> &mdash;
            how many appointments this role can see on the <em>calendar</em> and the <em>appointments list</em>.
        </p>
        <ul style="margin:4px 0 6px 22px;padding:0;">
            <li><strong>All doctors' appointments</strong> &mdash; sees every appointment in the clinic (default).</li>
            <li><strong>Only the user's own appointments</strong> &mdash; sees only the appointments where this user is the attending doctor.
                Typical for doctor roles so each doctor's calendar shows just their own day.</li>
        </ul>
        <p style="margin:0;color:#475569;">
            ✓ <strong>The pet profile is never restricted by this setting.</strong>
            A doctor opening any pet always sees the full visit history (including visits done by other doctors).<br>
            ⚠ A user must be set as a doctor under <strong>Vet Clinic → ⚙ Doctors</strong> (the doctor record's
            <em>Linked user</em> field). If a user holds the &ldquo;Only own&rdquo; role but isn't linked to a doctor,
            their calendar will be empty &mdash; they won't see other doctors' work.
        </p>
    </div>

    <form method="POST" action="{{ route('vc.role-landing.save') }}">
        @csrf

        @component('components.widget', ['class' => 'box-primary'])
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th style="width:24%;">Role</th>
                        <th>Landing page</th>
                        <th style="width:22%;">Custom URL (optional)</th>
                        <th style="width:22%;">Appointments scope</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($roles as $role)
                        @php
                            $current = $existing[$role->id] ?? '';
                            $isPreset = $current === '' || array_key_exists($current, $presets);
                            $scope = $scopes[$role->id] ?? '';
                        @endphp
                        <tr>
                            <td>
                                <strong>{{ preg_replace('/#\d+$/', '', $role->name) }}</strong>
                                <span class="text-muted" style="font-size:11px;">#{{ $role->id }}</span>
                            </td>
                            <td>
                                <select name="landing[{{ $role->id }}]" class="form-control rl-preset" data-role="{{ $role->id }}">
                                    <option value="">— Use default (/home) —</option>
                                    @foreach($presets as $url => $label)
                                        <option value="{{ $url }}" {{ $current === $url ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                    <option value="__custom__" {{ !$isPreset ? 'selected' : '' }}>Custom URL…</option>
                                </select>
                            </td>
                            <td>
                                <input type="text" name="landing_custom[{{ $role->id }}]" class="form-control rl-custom"
                                       data-role="{{ $role->id }}"
                                       placeholder="/some/path"
                                       value="{{ $isPreset ? '' : $current }}"
                                       {{ $isPreset ? 'disabled' : '' }}>
                            </td>
                            <td>
                                <select name="scope[{{ $role->id }}]" class="form-control">
                                    <option value="">All doctors' appointments</option>
                                    <option value="own" {{ $scope === 'own' ? 'selected' : '' }}>
                                        Only the user's own appointments
                                    </option>
                                </select>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="4" class="text-center text-muted">No roles defined for this business yet.</td></tr>
                    @endforelse
                </tbody>
            </table>

            <div style="text-align:right;">
                <button type="submit" class="btn btn-primary">
                    <i class="fa fa-save"></i> @lang('vetClinic::lang.save')
                </button>
            </div>
        @endcomponent
    </form>
</section>
@endsection

@section('javascript')
<script>
$(function () {
    // Toggle the custom-URL input on/off when the preset dropdown changes.
    // On save we copy the custom value into the same landing[role] field so
    // the controller only has to read one input per role.
    $('.rl-preset').on('change', function () {
        var roleId = $(this).data('role');
        var $cust  = $('input.rl-custom[data-role="' + roleId + '"]');
        if ($(this).val() === '__custom__') {
            $cust.prop('disabled', false).focus();
        } else {
            $cust.prop('disabled', true).val('');
        }
    });

    $('form').on('submit', function () {
        $('.rl-preset').each(function () {
            var roleId = $(this).data('role');
            if ($(this).val() === '__custom__') {
                var url = $('input.rl-custom[data-role="' + roleId + '"]').val();
                $(this).val(url || '');
            }
        });
    });
});
</script>
@endsection
