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

@section('content')

<div class="d-flex gap-2 mb-3">
    <a href="{{ tenant_route('conference.index') }}"
       class="btn btn-sm btn-outline-secondary">← Conference</a>
</div>

<div class="row g-3">

    <div class="col-xl-8">

        @if($policies->isEmpty())
            <div class="card">
                <div class="card-body text-center py-5">
                    <i class="bi bi-file-text"
                       style="font-size:2.5rem;color:var(--muted)"></i>
                    <p class="fw-semibold mt-3 mb-1">No conference policies yet</p>
                    <p class="text-muted" style="font-size:.82rem;">
                        Define cancellation, deposit and damage policies for venues
                    </p>
                </div>
            </div>
        @else
            @foreach($policies as $type => $group)
                <div class="card mb-3">
                    <div class="card-header">
                        <span class="card-title">
                            {{ ucfirst($type) }} Policies
                        </span>
                    </div>
                    <div class="card-body" style="padding:0;">
                        @foreach($group as $policy)
                            <div style="padding:16px 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:5px;">
                                            <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:2px 7px;
                                                             border-radius:4px;
                                                             font-weight:600;">
                                                    Default
                                                </span>
                                            @endif
                                        </div>
                                        <div style="font-size:.78rem;color:var(--muted);
                                                    line-height:1.5;margin-bottom:6px;">
                                            {{ Str::limit($policy->description, 150) }}
                                        </div>
                                        <div style="display:flex;gap:10px;
                                                    font-size:.72rem;flex-wrap:wrap;">
                                            @if($policy->notice_hours)
                                                <span style="color:var(--muted);">
                                                    <i class="bi bi-clock me-1"></i>
                                                    {{ $policy->notice_hours }}h notice
                                                </span>
                                            @endif
                                            @if($policy->penalty_type && $policy->penalty_type !== 'none')
                                                <span style="color:var(--danger);font-weight:600;">
                                                    <i class="bi bi-exclamation-triangle me-1"></i>
                                                    Penalty:
                                                    @if($policy->penalty_type === 'percentage')
                                                        {{ $policy->penalty_value }}%
                                                    @else
                                                        ${{ number_format($policy->penalty_value, 2) }}
                                                    @endif
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                    <div style="display:flex;gap:6px;flex-shrink:0;">
                                        <button class="btn btn-xs btn-outline-secondary"
                                                data-bs-toggle="modal"
                                                data-bs-target="#editPolicyModal"
                                                data-policy="{{ $policy->toJson() }}">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        <form method="POST"
                                              action="{{ tenant_route('conferences.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
                    </div>
                </div>
            @endforeach
        @endif
    </div>

    {{-- Add Policy Form --}}
    <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"
                      action="{{ tenant_route('conferences.policies.store') }}"
                      id="policyForm">
                    @csrf
                    <input type="hidden" name="_method"
                           id="policyMethod" value="POST">

                    <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">
                            Type <span class="text-danger">*</span>
                        </label>
                        <select name="type" id="policyType"
                                class="form-select">
                            <option value="cancellation">Cancellation</option>
                            <option value="deposit">Deposit</option>
                            <option value="damage">Damage</option>
                            <option value="noise">Noise & Conduct</option>
                            <option value="catering">Catering</option>
                            <option value="general">General</option>
                        </select>
                    </div>

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

                    <div class="row g-2 mb-3">
                        <div class="col-6">
                            <label class="form-label fw-semibold"
                                   style="font-size:.75rem;">
                                Notice Required
                            </label>
                            <div class="input-group input-group-sm">
                                <input type="number" name="notice_hours"
                                       id="policyNotice"
                                       class="form-control"
                                       min="0"
                                       placeholder="0">
                                <span class="input-group-text"
                                      style="font-size:.72rem;">hrs</span>
                            </div>
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-semibold"
                                   style="font-size:.75rem;">
                                Penalty Type
                            </label>
                            <select name="penalty_type" id="policyPenaltyType"
                                    class="form-select form-select-sm">
                                <option value="none">No penalty</option>
                                <option value="percentage">Percentage</option>
                                <option value="fixed">Fixed Amount</option>
                            </select>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold"
                               style="font-size:.75rem;">
                            Penalty Value
                        </label>
                        <input type="number" name="penalty_value"
                               id="policyPenaltyValue"
                               class="form-control form-control-sm"
                               min="0" step="0.01" placeholder="0">
                    </div>

                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <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>

{{-- Edit Modal --}}
<div class="modal fade" id="editPolicyModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form method="POST" id="editPolicyForm">
                @csrf @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title"
                        style="font-size:.9rem;font-weight:700;">
                        Edit Policy
                    </h5>
                    <button type="button" class="btn-close"
                            data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label fw-semibold">Name</label>
                            <input type="text" name="name"
                                   id="editPolName"
                                   class="form-control" required>
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-semibold">Description</label>
                            <textarea name="description" rows="4"
                                      id="editPolDesc"
                                      class="form-control" required></textarea>
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-semibold">Notice (hours)</label>
                            <input type="number" name="notice_hours"
                                   id="editPolNotice"
                                   class="form-control" min="0">
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-semibold">Penalty Type</label>
                            <select name="penalty_type"
                                    id="editPolPenaltyType"
                                    class="form-select">
                                <option value="none">No penalty</option>
                                <option value="percentage">Percentage</option>
                                <option value="fixed">Fixed Amount</option>
                            </select>
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-semibold">Penalty Value</label>
                            <input type="number" name="penalty_value"
                                   id="editPolPenaltyValue"
                                   class="form-control" min="0" step="0.01">
                        </div>
                        <div class="col-12">
                            <div class="form-check form-switch">
                                <input type="checkbox" name="is_default"
                                       value="1" id="editPolDefault"
                                       class="form-check-input">
                                <label class="form-check-label"
                                       for="editPolDefault"
                                       style="font-size:.8rem;">
                                    Default for this type
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary btn-sm"
                            data-bs-dismiss="modal">Cancel</button>
                    <button type="submit"
                            class="btn btn-primary btn-sm">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
document.getElementById('editPolicyModal')
    .addEventListener('show.bs.modal', function(e) {
        const b = e.relatedTarget;
        const d = JSON.parse(b.dataset.policy);
        document.getElementById('editPolName').value          = d.name;
        document.getElementById('editPolDesc').value          = d.description;
        document.getElementById('editPolNotice').value        = d.notice_hours || '';
        document.getElementById('editPolPenaltyType').value   = d.penalty_type || 'none';
        document.getElementById('editPolPenaltyValue').value  = d.penalty_value || '';
        document.getElementById('editPolDefault').checked     = !!d.is_default;
        document.getElementById('editPolicyForm').action =
            '{{ tenant_route('conferences.policies.store') }}'
                .replace('/policies', '/policies/' + d.id);
        document.getElementById('editPolicyForm')
            .querySelector('[name="_method"]').value = 'PUT';
    });

function resetPolicyForm() {
    document.getElementById('policyForm').reset();
}
</script>
@endpush