@extends('layouts.admin')

@section('title', 'Shifts')

@section('content')
    <header class="page-header">
        <div>
            <p class="eyebrow">Scheduling</p>
            <h1>Shift Management</h1>
            <p class="muted">Create and manage employee shifts</p>
        </div>
    </header>

    @php
        $statIcons = [
            'calendar' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" /><path d="M16 2v4" /><path d="M8 2v4" /><path d="M3 10h18" /></svg>',
            'sun' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5" /><path d="M12 1v3m0 16v3m11-11h-3M4 12H1m19.07-7.07-2.12 2.12M6.05 17.95l-2.12 2.12m0-14.14 2.12 2.12m12.02 12.02 2.12 2.12" /></svg>',
            'check-circle' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m9 12 2 2 4-4" /><circle cx="12" cy="12" r="10" /></svg>',
            'clock' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" /></svg>',
        ];
    @endphp

    <section class="card-grid four-col">
        @foreach ($cards as $card)
            <article class="stat-card compact stat-card--metric"
                style="--card-accent-soft: {{ $card['accent_soft'] ?? 'var(--accent-soft)' }}; --card-accent: {{ $card['accent'] ?? 'var(--accent)' }};">
                <div class="stat-card__icon" aria-hidden="true">
                    {!! $statIcons[$card['icon']] ?? '' !!}
                </div>
                <div class="stat-card__content">
                    <p class="muted">{{ $card['label'] }}</p>
                    <h3>{{ $card['value'] }}</h3>
                    <p class="stat-meta">{{ $card['meta'] }}</p>
                </div>
            </article>
        @endforeach
    </section>

    <section class="toolbar toolbar--filters toolbar--jobs">
        <div class="toolbar__search">
            <input type="search" placeholder="Search shifts..." class="input">
        </div>
        <div class="toolbar__filters">
            <div class="input-wrapper">
                <input type="text" placeholder="dd/mm/yyyy" class="input">
                <span class="input-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                        <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                        <line x1="16" y1="2" x2="16" y2="6"/>
                        <line x1="8" y1="2" x2="8" y2="6"/>
                        <line x1="3" y1="10" x2="21" y2="10"/>
                    </svg>
                </span>
            </div>
            <div class="select-wrapper">
                <select class="select">
                    <option>All Departments</option>
                    <option>Security</option>
                    <option>Warehouse</option>
                    <option>Transport</option>
                    <option>Cleaning</option>
                </select>
                <span class="select-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                        <path d="m6 9 6 6 6-6"/>
                    </svg>
                </span>
            </div>
        </div>
        <div class="toolbar__actions">
            <button class="ghost-btn">Export</button>
            <button class="primary-btn js-open-create-shift">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16" style="margin-right: 6px; vertical-align: middle;">
                    <line x1="12" y1="5" x2="12" y2="19"/>
                    <line x1="5" y1="12" x2="19" y2="12"/>
                </svg>
                Create Shift
            </button>
        </div>
    </section>

    <section class="stack-grid">
        @foreach ($shifts as $shift)
            <article class="shift-card">
                <div class="shift-card__header">
                    <div>
                        <h3>{{ $shift['title'] }}</h3>
                        <p class="muted">{{ $shift['date'] }}</p>
                    </div>
                    <span class="job-status job-status--{{ $shift['chip']['tone'] }}">{{ $shift['chip']['label'] }}</span>
                </div>
                <div class="shift-card__meta">
                    <div>
                        <p class="muted">Time</p>
                        <p>{{ $shift['time'] }}</p>
                    </div>
                    <div>
                        <p class="muted">Location</p>
                        <p>{{ $shift['location'] }}</p>
                    </div>
                    <div>
                        <p class="muted">Department</p>
                        <p>{{ $shift['department'] }}</p>
                    </div>
                    <div>
                        <p class="muted">Staff Assignment</p>
                        <p>{{ $shift['assignment'] }}</p>
                    </div>
                </div>
                <div class="job-card__footer">
                    <p class="muted">{{ $shift['interested'] }} interested</p>
                    <div class="job-card__actions">
                        <button class="ghost-btn small">View Details</button>
                        <button class="ghost-btn small">Edit</button>
                        <button class="ghost-btn small danger">Archive</button>
                    </div>
                </div>
            </article>
        @endforeach
    </section>

    <!-- Create New Shift Modal -->
    <div class="modal" id="createShiftModal">
        <div class="modal__overlay js-close-modal"></div>
        <div class="modal__content">
            <div class="modal__header">
                <h2>Create New Shift</h2>
                <button class="modal__close js-close-modal" aria-label="Close modal">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="20" height="20">
                        <line x1="18" y1="6" x2="6" y2="18"/>
                        <line x1="6" y1="6" x2="18" y2="18"/>
                    </svg>
                </button>
            </div>
            <div class="modal__body">
                <form class="form-grid">
                    <label class="field">
                        <span>Shift Title <span style="color: #ef4444;">*</span></span>
                        <input type="text" class="input" placeholder="e.g., Morning Security Shift" required>
                    </label>
                    <label class="field">
                        <span>Date <span style="color: #ef4444;">*</span></span>
                        <div class="input-wrapper">
                            <input type="text" class="input" placeholder="dd/mm/yyyy" required>
                            <span class="input-icon">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                                    <line x1="16" y1="2" x2="16" y2="6"/>
                                    <line x1="8" y1="2" x2="8" y2="6"/>
                                    <line x1="3" y1="10" x2="21" y2="10"/>
                                </svg>
                            </span>
                        </div>
                    </label>
                    <label class="field">
                        <span>Department <span style="color: #ef4444;">*</span></span>
                        <div class="select-wrapper">
                            <select class="select" required>
                                <option value="">Select department</option>
                                <option>Security</option>
                                <option>Warehouse</option>
                                <option>Transport</option>
                                <option>Cleaning</option>
                            </select>
                            <span class="select-icon">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                                    <path d="m6 9 6 6 6-6"/>
                                </svg>
                            </span>
                        </div>
                    </label>
                    <label class="field">
                        <span>Start Time <span style="color: #ef4444;">*</span></span>
                        <div class="input-wrapper">
                            <input type="text" class="input" placeholder="--:--" required>
                            <span class="input-icon">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                                    <circle cx="12" cy="12" r="10"/>
                                    <polyline points="12 6 12 12 16 14"/>
                                </svg>
                            </span>
                        </div>
                    </label>
                    <label class="field">
                        <span>End Time <span style="color: #ef4444;">*</span></span>
                        <div class="input-wrapper">
                            <input type="text" class="input" placeholder="--:--" required>
                            <span class="input-icon">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                                    <circle cx="12" cy="12" r="10"/>
                                    <polyline points="12 6 12 12 16 14"/>
                                </svg>
                            </span>
                        </div>
                    </label>
                    <label class="field">
                        <span>Location <span style="color: #ef4444;">*</span></span>
                        <input type="text" class="input" placeholder="e.g., London Office" required>
                    </label>
                    <label class="field">
                        <span>Required Staff <span style="color: #ef4444;">*</span></span>
                        <input type="number" class="input" placeholder="5" value="5" required>
                    </label>
                    <div class="form-actions">
                        <button type="button" class="ghost-btn js-close-modal">Cancel</button>
                        <button type="submit" class="primary-btn">Create & Notify</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        // Modal functionality
        document.addEventListener('DOMContentLoaded', function() {
            const modal = document.getElementById('createShiftModal');
            const openBtn = document.querySelector('.js-open-create-shift');
            const closeBtns = document.querySelectorAll('.js-close-modal');

            if (openBtn) {
                openBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    modal.classList.add('is-visible');
                    document.body.classList.add('modal-open');
                });
            }

            closeBtns.forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    modal.classList.remove('is-visible');
                    document.body.classList.remove('modal-open');
                });
            });
        });
    </script>
@endsection


