@extends('layouts.app')

@section('content')
<div class="container py-5">
    <h1 class="mb-5 text-center fw-bold" style="font-family: 'Poppins', sans-serif; color: #0033cc;">User Mail Pillars</h1>

    <div class="table-responsive">
        <table class="table align-middle" style="border-collapse: separate; border-spacing: 0 15px;">
            <thead style="background: linear-gradient(to right, #2a2a2a, #0033cc); color: #fff;">
                <tr>
                    <th class="p-3 text-center" style="border: none;">User</th>
                    <th class="p-3 text-center" style="border: none;">Past Clients</th>
                    <th class="p-3 text-center" style="border: none;">Buyers of My Listings</th>
                    <th class="p-3 text-center" style="border: none;">Neighbors of My Listings</th>
                    <th class="p-3 text-center" style="border: none;">Neighbors of Other Agents Listings</th>
                    <th class="p-3 text-center" style="border: none;">Expired Listings</th>
                    <th class="p-3 text-center" style="border: none;">FSBOs</th>
                    <th class="p-3 text-center" style="border: none;">My Farm</th>
                    <th class="p-3 text-center" style="border: none;">Inbox Access</th>
                    <th class="p-3 text-center" style="border: none;">Outbox Access</th>
                    <th class="p-3 text-center" style="border: none;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($users as $user)
                    <tr style="box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); background: #1c1c1c; color: #fff; border-radius: 8px;">
                        <form method="POST" action="{{ route('admin.mail-pillars.update', $user->id) }}">
                            @csrf
                            <td class="text-center p-3">
                                <div style="font-family: 'Roboto', sans-serif;">
                                    <strong style="font-size: 1.1em;">{{ $user->name }}</strong>
                                    <br>
                                    <span style="font-size: 0.9em; color: #0033cc;">Role: {{ $user->role->name ?? 'N/A' }}</span>
                                </div>
                            </td>
                            <!-- Existing toggles for mail pillars -->
                            @foreach (['past_clients', 'buyers_of_my_listings', 'neighbors_of_my_listings', 'neighbors_of_other_agents_listings', 'expired_listings', 'fsbos', 'my_farm'] as $pillar)
                                <td class="text-center">
                                    <label class="switch">
                                        <input type="hidden" name="{{ $pillar }}" value="0">
                                        <input type="checkbox" name="{{ $pillar }}" value="1" {{ $user->mailPillars?->$pillar ? 'checked' : '' }}>
                                        <span class="slider"></span>
                                    </label>
                                </td>
                            @endforeach
                            
                            <!-- New toggles for inbox and outbox -->
                            <td class="text-center">
                                <label class="switch">
                                    <input type="hidden" name="inbox_access" value="0">
                                    <input type="checkbox" name="inbox_access" value="1" {{ $user->mailPillars?->inbox_access ? 'checked' : '' }}>
                                    <span class="slider"></span>
                                </label>
                            </td>
                            <td class="text-center">
                                <label class="switch">
                                    <input type="hidden" name="outbox_access" value="0">
                                    <input type="checkbox" name="outbox_access" value="1" {{ $user->mailPillars?->outbox_access ? 'checked' : '' }}>
                                    <span class="slider"></span>
                                </label>
                            </td>

                            <td class="text-center">
                                <button type="submit" class="btn btn-sm" style="background: #0033cc; color: #fff; border: none; font-family: 'Roboto', sans-serif;">Save</button>
                            </td>
                        </form>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection

<style>
    .switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 24px;
    }
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #555;
        transition: 0.4s;
        border-radius: 24px;
    }
    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 4px;
        bottom: 3px;
        background-color: white;
        transition: 0.4s;
        border-radius: 50%;
    }
    input:checked + .slider {
        background-color: #0033cc;
    }
    input:checked + .slider:before {
        transform: translateX(26px);
    }
    .table {
        border-spacing: 0 15px;
    }
    .table tbody tr {
        background: #1c1c1c;
        color: #fff;
        border-radius: 8px;
    }
    .table tbody tr td {
        vertical-align: middle;
    }
</style>