@extends('voyager::master')

@section('page_title', 'All Policies')

@section('css')
    <link rel="stylesheet" href="{{ voyager_asset('lib/css/responsive.dataTables.min.css') }}">
    <style>
        /* Sidebar offset & left padding fix */
        .app-container .side-body {
            margin-left: 35px !important;
            padding-left: 15px !important;
            padding-right: 25px !important;
        }
        .app-container.expanded .side-body {
            margin-left: 225px !important;
            padding-left: 15px !important;
            padding-right: 25px !important;
        }
        @media (max-width: 768px) {
            .app-container .side-body,
            .app-container.expanded .side-body {
                margin-left: 0 !important;
                padding-left: 15px !important;
                padding-right: 15px !important;
            }
        }

        /* Policy Admin Header */
        .policy-admin-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 10px;
            margin-bottom: 20px;
            padding-bottom: 14px;
            border-bottom: 1px solid #e2e8f0;
        }
        .policy-admin-header .page-title {
            float: none !important;
            padding: 0 !important;
            margin: 0 0 6px 0 !important;
            font-size: 24px;
            font-weight: 700;
            color: #0f172a;
            line-height: 1.2;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            height: auto !important;
            position: static !important;
        }
        .policy-admin-header .page-title > i {
            position: static !important;
            font-size: 24px !important;
            color: #166534;
            margin: 0 !important;
        }
        .policy-admin-header p.text-muted {
            margin: 0 !important;
            font-size: 13.5px;
            color: #64748b;
        }
        .policy-admin-header .header-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .policy-admin-header .header-actions .btn {
            float: none !important;
            margin: 0 !important;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-weight: 600;
        }

        /* Modern Table Action Buttons */
        .bread-actions {
            white-space: nowrap !important;
            text-align: right;
        }
        .bread-actions .btn {
            margin-left: 5px;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        .bread-actions .action-btn-group {
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 6px;
        }
        .bread-actions .btn-action {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 5px 12px;
            font-size: 12px;
            font-weight: 600;
            border-radius: 5px;
            border: 1px solid transparent;
            transition: all 0.15s ease-in-out;
            text-decoration: none !important;
            box-shadow: 0 1px 2px rgba(0,0,0,0.06);
            line-height: 1.4;
            cursor: pointer;
        }
        .bread-actions .btn-action i {
            font-size: 12px;
            line-height: 1;
        }
        .bread-actions .btn-action-view {
            background-color: #f59e0b;
            border-color: #d97706;
            color: #ffffff !important;
        }
        .bread-actions .btn-action-view:hover {
            background-color: #d97706;
            border-color: #b45309;
            transform: translateY(-1px);
            box-shadow: 0 3px 8px rgba(217, 119, 6, 0.3);
        }
        .bread-actions .btn-action-edit {
            background-color: #2563eb;
            border-color: #1d4ed8;
            color: #ffffff !important;
        }
        .bread-actions .btn-action-edit:hover {
            background-color: #1d4ed8;
            border-color: #1e40af;
            transform: translateY(-1px);
            box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3);
        }
        .bread-actions .btn-action-delete {
            background-color: #ef4444;
            border-color: #dc2626;
            color: #ffffff !important;
        }
        .bread-actions .btn-action-delete:hover {
            background-color: #dc2626;
            border-color: #b91c1c;
            transform: translateY(-1px);
            box-shadow: 0 3px 8px rgba(220, 38, 38, 0.3);
        }

        /* DataTables Custom Controls Integration */
        .dataTables_wrapper .dataTables_filter {
            margin-bottom: 12px;
        }
        .dataTables_wrapper .dataTables_filter input {
            border: 1px solid #cbd5e1;
            border-radius: 4px;
            padding: 5px 10px;
            margin-left: 8px;
            font-size: 13px;
        }
        .dataTables_wrapper .dataTables_length select {
            border: 1px solid #cbd5e1;
            border-radius: 4px;
            padding: 4px 8px;
            margin: 0 4px;
        }
    </style>
@stop

@section('page_header')
    <div class="container-fluid">
        <div class="policy-admin-header">
            <div>
                <h1 class="page-title">
                    <i class="voyager-file-text"></i> Policies
                </h1>
                <p class="text-muted">
                    Manage organizational policies, governance documents, dynamic multi-block sections, and compliance settings.
                </p>
            </div>
            <div class="header-actions">
                <a href="{{ route('voyager.policy_settings.edit') }}" class="btn btn-default">
                    <i class="voyager-settings"></i> Top Bar & Sidebar Settings
                </a>
                <a href="{{ route('voyager.policies.create') }}" class="btn btn-success">
                    <i class="voyager-plus"></i> Add New Policy
                </a>
            </div>
        </div>
    </div>
@stop

@section('content')
<div class="page-content browse container-fluid">
    @include('voyager::alerts')

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-bordered">
                <div class="panel-body">
                    <!-- Policies Table -->
                    <div class="table-responsive">
                        <table id="dataTable" class="table table-hover" style="vertical-align: middle;">
                            <thead>
                                <tr>
                                    <th style="width: 50px; text-align: center;">#</th>
                                    <th>Title & Slug</th>
                                    <th>Category Badge</th>
                                    <th>Effective Date</th>
                                    <th style="text-align: center;">Sections & Blocks</th>
                                    <th style="text-align: center;">Status</th>
                                    <th class="actions text-right dt-not-orderable" style="text-align: right; width: 230px;">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($policies as $index => $policy)
                                    <tr>
                                        <td style="text-align: center; color: #94a3b8; font-weight: 600;">
                                            {{ $policy->sort_order ?? ($index + 1) }}
                                        </td>
                                        <td>
                                            <div style="font-size: 15px; font-weight: 600; color: #1e293b;">
                                                <a href="{{ route('voyager.policies.edit', $policy->id) }}" style="color: inherit; text-decoration: none;">
                                                    {{ $policy->title }}
                                                </a>
                                            </div>
                                            <div style="font-size: 12px; color: #64748b; font-family: monospace; margin-top: 2px;">
                                                /{{ $policy->slug }}
                                            </div>
                                        </td>
                                        <td>
                                            @if($policy->badge_text)
                                                <span class="label label-info" style="font-size: 11px; padding: 4px 8px; border-radius: 4px; font-weight: 500;">
                                                    {{ $policy->badge_text }}
                                                </span>
                                            @else
                                                <span class="text-muted" style="font-size: 12px;">—</span>
                                            @endif
                                        </td>
                                        <td>
                                            <span style="font-size: 13px; color: #475569;">
                                                {{ $policy->effective_date ?: '—' }}
                                            </span>
                                        </td>
                                        <td style="text-align: center;">
                                            @php
                                                $secCount = is_array($policy->sections) ? count($policy->sections) : 0;
                                                $blockCount = $policy->total_blocks_count ?? 0;
                                            @endphp
                                            <span class="badge" style="background: #e0f2fe; color: #0369a1; font-weight: 600; font-size: 11px; padding: 5px 8px;">
                                                {{ $secCount }} {{ Str::plural('section', $secCount) }} / {{ $blockCount }} {{ Str::plural('block', $blockCount) }}
                                            </span>
                                        </td>
                                        <td style="text-align: center;">
                                            <button type="button" 
                                                    class="btn btn-xs toggle-status-btn {{ $policy->status === 'ACTIVE' ? 'btn-success' : 'btn-default' }}"
                                                    data-id="{{ $policy->id }}"
                                                    data-status="{{ $policy->status }}"
                                                    style="border-radius: 12px; padding: 2px 10px; font-weight: 600; font-size: 11px; text-transform: uppercase;">
                                                <i class="fa {{ $policy->status === 'ACTIVE' ? 'fa-check' : 'fa-pause' }}" style="font-size: 10px; margin-right: 3px;"></i>
                                                <span class="status-label">{{ $policy->status }}</span>
                                            </button>
                                        </td>
                                        <td class="no-sort no-click bread-actions">
                                            <a href="javascript:;" title="Delete" class="btn btn-sm btn-danger pull-right delete" data-id="{{ $policy->id }}" data-title="{{ $policy->title }}" id="delete-{{ $policy->id }}">
                                                <i class="voyager-trash"></i> <span class="hidden-xs hidden-sm">Delete</span>
                                            </a>
                                            <a href="{{ route('voyager.policies.edit', $policy->id) }}" title="Edit" class="btn btn-sm btn-primary pull-right edit">
                                                <i class="voyager-edit"></i> <span class="hidden-xs hidden-sm">Edit</span>
                                            </a>
                                            <a href="{{ url($policy->slug) }}" target="_blank" title="View" class="btn btn-sm btn-warning pull-right view">
                                                <i class="voyager-eye"></i> <span class="hidden-xs hidden-sm">View</span>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Single Delete Modal --}}
<div class="modal modal-danger fade" tabindex="-1" id="delete_modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"><i class="voyager-trash"></i> Are you sure you want to delete this Policy?</h4>
            </div>
            <div class="modal-body">
                <p>You are about to delete policy: <strong id="delete_policy_title"></strong>. This action cannot be undone.</p>
            </div>
            <div class="modal-footer">
                <form action="#" id="delete_form" method="POST">
                    {{ method_field('DELETE') }}
                    {{ csrf_field() }}
                    <input type="submit" class="btn btn-danger pull-right delete-confirm" value="Yes, Delete This Policy">
                </form>
                <button type="button" class="btn btn-default pull-right" data-dismiss="modal" style="margin-right: 10px;">Cancel</button>
            </div>
        </div>
    </div>
</div>
@stop

@section('javascript')
<script src="{{ voyager_asset('lib/js/dataTables.responsive.min.js') }}"></script>
<script>
$(document).ready(function() {
    // Dynamic DataTables search and sorting (matching /admin/pages)
    $('#dataTable').DataTable({
        "order": [],
        "language": {!! json_encode(__('voyager::datatable'), JSON_UNESCAPED_SLASHES) !!},
        "columnDefs": [
            { "targets": "dt-not-orderable", "searchable": false, "orderable": false }
        ]
    });

    // Delete policy modal handler (delegated on document for DataTables compatibility)
    $(document).on('click', '#dataTable .delete, .delete-policy-btn', function(e) {
        e.preventDefault();
        var id = $(this).data('id');
        var title = $(this).data('title') || 'this policy';
        $('#delete_policy_title').text(title);
        $('#delete_form').attr('action', '{{ url("admin/policies") }}/' + id);
        $('#delete_modal').modal('show');
    });

    // AJAX Toggle Status (delegated on document for DataTables compatibility)
    $(document).on('click', '.toggle-status-btn', function(e) {
        e.preventDefault();
        var $btn = $(this);
        var id = $btn.data('id');
        $btn.prop('disabled', true);

        $.ajax({
            url: '{{ url("admin/policies") }}/' + id + '/toggle-status',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(res) {
                $btn.prop('disabled', false);
                if (res.success) {
                    $btn.data('status', res.status);
                    $btn.find('.status-label').text(res.status);
                    if (res.status === 'ACTIVE') {
                        $btn.removeClass('btn-default').addClass('btn-success');
                        $btn.find('i').removeClass('fa-pause').addClass('fa-check');
                    } else {
                        $btn.removeClass('btn-success').addClass('btn-default');
                        $btn.find('i').removeClass('fa-check').addClass('fa-pause');
                    }
                    toastr.success(res.message);
                } else {
                    toastr.error('Failed to update status.');
                }
            },
            error: function() {
                $btn.prop('disabled', false);
                toastr.error('Server error updating policy status.');
            }
        });
    });
});
</script>
@stop