{{-- resources/views/settings/policies.blade.php --}}
@extends('layouts.app')
@section('title', 'Policies')
@section('page_title', 'Policies')
@section('page_subtitle', 'Define cancellation, deposit and other policies')

@section('content')

@include('settings.partials.nav')

<div class="row g-3">

    <div class="col-xl-8">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-file-text me-2"
                       style="color:var(--clay)"></i>
                    Policies
                </span>
            </div>

            @if($policies->isEmpty())
                <div class="card-body text-center py-4">
                    <p class="text-muted mb-0" style="font-size:.8rem;">
                        No policies created yet
                    </p>
                </div>
            @else
                @foreach($policies->groupBy('type') as $type => $group)
                    <div style="padding:10px 18px 6px;
                                font-size:.68rem;font-weight:700;
                                text-transform:uppercase;
                                letter-spacing:.1em;
                                color:var(--muted);
                                border-bottom:1px solid var(--border);">
                        {{ str_replace('_', ' ', $type) }}
                    </div>
                    @foreach($group as $policy)
                        <div style="padding:14px 18px;
                                    border-bottom:1px solid var(--border);">
                            <div style="display:flex;justify-content:space-between;
                                        align-items:flex-start;gap:12px;">
                                <div style="flex:1;">
                                    <div style="display:flex;align-items:center;
                                                gap:8px;margin-bottom:4px;">
                                        <span class="fw-semibold"
                                              style="font-size:.84rem;">
                                            {{ $policy->name }}
                                        </span>
                                        @if($policy->is_default)
                                            <span style="font-size:.65rem;
                                                         background:#d1fae5;
                                                         color:#065f46;
                                                         padding:1px 6px;
                                                         border-radius:4px;
                                                         font-weight:600;">
                                                Default
                                            </span>
                                        @endif
                                    </div>
                                    <div style="font-size:.78rem;color:var(--muted);
                                                line-height:1.5;">
                                        {{ Str::limit($policy->description, 120) }}
                                    </div>
                                </div>
                                <div style="display:flex;gap:6px;flex-shrink:0;">
                                    <button class="btn btn-xs btn-outline-secondary"
                                            onclick="editPolicy({{ $policy->id }}, '{{ $policy->type }}', '{{ addslashes($policy->name) }}', '{{ addslashes($policy->description) }}', {{ $policy->is_default ? 1 : 0 }})">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    <form method="POST"
                                          action="{{ tenant_route('settings.policies.destroy', ['policy' => $policy->id]) }}"
                                          onsubmit="return confirm('Delete this policy?')">
                                        @csrf @method('DELETE')
                                        <button class="btn btn-xs btn-outline-danger"
                                                type="submit">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @endforeach
            @endif
        </div>
    </div>

    <div class="col-xl-4">
        <div class="card" id="policyFormCard">
            <div class="card-header">
                <span class="card-title" id="policyFormTitle">
                    Add Policy
                </span>
            </div>
            <div class="card-body">
                <form method="POST"
                      id="policyForm"
                      action="{{ tenant_route('settings.policies.store') }}">
                    @csrf
                    <input type="hidden" name="_method"
                           id="policyMethod" value="POST">

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Type</label>
                        <select name="type" id="policyType"
                                class="form-select">
                            <option value="cancellation">Cancellation</option>
                            <option value="deposit">Deposit</option>
                            <option value="no_show">No Show</option>
                            <option value="check_in">Check In</option>
                            <option value="check_out">Check Out</option>
                            <option value="children">Children</option>
                            <option value="pets">Pets</option>
                            <option value="general">General</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            Policy Name <span class="text-danger">*</span>
                        </label>
                        <input type="text" name="name" id="policyName"
                               class="form-control"
                               placeholder="e.g. Free cancellation 48hrs"
                               required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            Description <span class="text-danger">*</span>
                        </label>
                        <textarea name="description" id="policyDescription"
                                  rows="4" class="form-control"
                                  placeholder="Full policy text shown to guests..."
                                  required></textarea>
                    </div>

                    <div class="mb-3">
                        <div class="form-check">
                            <input type="checkbox" name="is_default"
                                   value="1" id="policyDefault"
                                   class="form-check-input">
                            <label class="form-check-label"
                                   for="policyDefault"
                                   style="font-size:.8rem;">
                                Set as default for this type
                            </label>
                        </div>
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit"
                                class="btn btn-primary btn-sm">
                            Save Policy
                        </button>
                        <button type="button"
                                onclick="resetPolicyForm()"
                                class="btn btn-outline-secondary btn-sm">
                            Reset
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>

@endsection

@push('scripts')
<script>
function editPolicy(id, type, name, desc, isDefault) {
    document.getElementById('policyFormTitle').textContent = 'Edit Policy';
    document.getElementById('policyType').value = type;
    document.getElementById('policyName').value = name;
    document.getElementById('policyDescription').value = desc;
    document.getElementById('policyDefault').checked = isDefault;
    document.getElementById('policyMethod').value = 'PUT';

    const form = document.getElementById('policyForm');
    form.action = form.action.replace(/\/policies\/\d+$/, '')
        + '/policies/' + id;
    form.querySelector('[name="_method"]').value = 'PUT';

    document.getElementById('policyFormCard').scrollIntoView({ behavior: 'smooth' });
}

function resetPolicyForm() {
    document.getElementById('policyFormTitle').textContent = 'Add Policy';
    document.getElementById('policyForm').reset();
    document.getElementById('policyMethod').value = 'POST';
    document.getElementById('policyForm').action =
        '{{ tenant_route('settings.policies.store') }}';
}
</script>
@endpush