@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | Weekend Setup')
@section('content')
    @php
        $weekDays = [
            ['key' => 'Sunday', 'label' => __('Sun'), 'value' => 1],
            ['key' => 'Monday', 'label' => __('Mon'), 'value' => 2],
            ['key' => 'Tuesday', 'label' => __('Tue'), 'value' => 3],
            ['key' => 'Wednesday', 'label' => __('Wed'), 'value' => 4],
            ['key' => 'Thursday', 'label' => __('Thu'), 'value' => 5],
            ['key' => 'Friday', 'label' => __('Fri'), 'value' => 7],
            ['key' => 'Saturday', 'label' => __('Sat'), 'value' => 6],
        ];
    @endphp
    <style>
        .wk-wrap .card { border-radius: 14px; border: 1px solid #edf0f6; box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.04); }
        .wk-wrap .card-header { background: #fff; border-bottom: 1px solid #edf0f6; font-weight: 700; }
        .wk-filters { background: #f8fafc; border-bottom: 1px solid #edf0f6; padding: 14px 16px; }
        .wk-filters label, .wk-wrap .wk-label { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: rgba(15,23,42,.55); margin-bottom: 6px; }
        .wk-stat { background: #fff; border: 1px solid #edf0f6; border-radius: 10px; padding: 10px 14px; text-align: center; height: 100%; }
        .wk-stat .num { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
        .wk-stat .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #64748b; }
        .wk-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(15,23,42,.65); border-top: 0; white-space: nowrap; }
        .wk-table tbody td { vertical-align: middle; }
        .wk-group-name { font-weight: 700; color: #0f172a; }
        .wk-group-meta { font-size: 12px; color: #64748b; }
        .wk-day-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; margin: 2px; }
        .wk-day-pill.on { background: rgba(34,197,94,.12); color: #166534; }
        .wk-day-pill.off { background: rgba(148,163,184,.15); color: #64748b; }
        .wk-action-btns { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
        .wk-modal .modal-content { border: none; border-radius: 12px; box-shadow: 0 0.5rem 2rem rgba(15, 23, 42, 0.15); }
        .wk-modal .modal-header, .wk-modal .modal-footer { border-color: #edf0f6; }
        .wk-modal-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(15,23,42,.55); margin-bottom: 6px; }
        .wk-day-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
        .wk-day-option { border: 1px solid #edf0f6; border-radius: 10px; padding: 10px 8px; text-align: center; background: #fff; cursor: pointer; }
        .wk-day-option input { margin-right: 4px; }
        .wk-day-option span { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #64748b; margin-top: 4px; }
    </style>

    <div class="container-fluid wk-wrap">
        <div class="row mt-3">
            <div class="col-12 d-flex flex-wrap justify-content-between align-items-center mb-3">
                <div>
                    <h4 class="page-title mb-0">Weekend Setup</h4>
                    <p class="text-muted mb-0">Configure weekend groups and assign them to staff during onboarding.</p>
                </div>
                @can('Weekend-create')
                    <button type="button" class="btn btn-primary" onclick="weakened_add();">
                        <i class="las la-plus"></i> Add New
                    </button>
                @endcan
            </div>

            @if (session()->has('message'))
                <div class="col-12"><div class="alert alert-success">{{ session('message') }}</div></div>
            @endif
            @if (session()->has('error'))
                <div class="col-12"><div class="alert alert-danger">{{ session('error') }}</div></div>
            @endif

            <div class="col-12 mb-3">
                <div class="form-row">
                    <div class="col-6 col-md-4 mb-2">
                        <div class="wk-stat"><div class="num text-primary">{{ (int) ($weekendStats->total ?? 0) }}</div><div class="lbl">{{ __('Groups') }}</div></div>
                    </div>
                    <div class="col-6 col-md-4 mb-2">
                        <div class="wk-stat"><div class="num text-success">{{ (int) ($weekendStats->assigned_staff ?? 0) }}</div><div class="lbl">{{ __('Assigned Staff') }}</div></div>
                    </div>
                    <div class="col-6 col-md-4 mb-2">
                        <div class="wk-stat"><div class="num text-info">{{ (int) ($weekendStats->configured_off_days ?? 0) }}</div><div class="lbl">{{ __('Configured Off Days') }}</div></div>
                    </div>
                </div>
            </div>

            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                        <span>{{ __('Weekend Groups') }}</span>
                        <a href="{{ route('weakened') }}" class="btn btn-sm btn-outline-secondary">{{ __('Clear Filters') }}</a>
                    </div>

                    <form action="{{ route('weakened') }}" method="GET">
                        <div class="wk-filters">
                            <div class="form-row align-items-end">
                                <div class="form-group col-md-4">
                                    <label>{{ __('Search Group') }}</label>
                                    <input type="text" name="search" class="form-control" value="{{ request('search') }}" placeholder="{{ __('Weekend group name') }}">
                                </div>
                                <div class="form-group col-md-2">
                                    <button type="submit" class="btn btn-primary btn-block"><i class="fas fa-filter"></i> {{ __('Filter') }}</button>
                                </div>
                            </div>
                        </div>
                    </form>

                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table wk-table mb-0">
                                <thead>
                                <tr>
                                    <th>{{ __('Group') }}</th>
                                    @foreach($weekDays as $day)
                                        <th class="text-center">{{ $day['label'] }}</th>
                                    @endforeach
                                    <th class="text-center">{{ __('Staff') }}</th>
                                    <th class="text-center">{{ __('Action') }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                @forelse($weekends as $weekend)
                                    <tr>
                                        <td>
                                            <div class="wk-group-name">{{ $weekend->name }}</div>
                                            <div class="wk-group-meta">{{ $weekend->offDayCount() }} {{ __('off days') }}</div>
                                        </td>
                                        @foreach($weekDays as $day)
                                            <td class="text-center">
                                                <span class="wk-day-pill {{ (int) $weekend->{$day['key']} === 1 ? 'on' : 'off' }}">
                                                    {{ (int) $weekend->{$day['key']} === 1 ? '✓' : '—' }}
                                                </span>
                                            </td>
                                        @endforeach
                                        <td class="text-center">
                                            <span class="badge badge-light border">{{ (int) ($weekend->staff_count ?? 0) }}</span>
                                        </td>
                                        <td class="text-center">
                                            <div class="wk-action-btns">
                                                @can('Weekend-edit')
                                                    <button type="button"
                                                            class="btn btn-primary btn-sm js-weekend-edit"
                                                            data-id="{{ $weekend->id }}"
                                                            data-name="{{ e($weekend->name) }}"
                                                            @foreach($weekDays as $day)
                                                                data-{{ strtolower($day['key']) }}="{{ (int) $weekend->{$day['key']} }}"
                                                            @endforeach>
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                @endcan
                                                @can('Weekend-delete')
                                                    <a class="btn btn-danger btn-sm delete_modal"
                                                       data-href="{{ route('weakened.destroy', $weekend->id) }}"
                                                       href="javascript:void(0)"><i class="fas fa-trash"></i></a>
                                                @endcan
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="{{ count($weekDays) + 3 }}" class="text-center py-5 text-muted">{{ __('No weekend groups found.') }}</td>
                                    </tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    @if($weekends->hasPages())
                        <div class="card-footer bg-white border-top">
                            {{ $weekends->links() }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    @include('modals.delete_modal')
@endsection

@section('modal')
    <div class="modal fade wk-modal" id="weakened_modal">
        <form action="{{ route('weakened.store') }}" method="POST">
            @csrf
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('Add Weekend Group') }}</h5>
                        <button type="button" class="close" data-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="wk-modal-label" for="description">{{ __('Weekend Group Name') }} <span class="text-danger">*</span></label>
                            <input class="form-control" type="text" id="description" placeholder="{{ __('Type weekend group name') }}" name="description" required>
                        </div>
                        <label class="wk-modal-label">{{ __('Off Days') }}</label>
                        <div class="wk-day-grid">
                            @foreach($weekDays as $day)
                                <label class="wk-day-option mb-0">
                                    <input type="checkbox" value="{{ $day['value'] }}" name="{{ $day['key'] }}">
                                    <span>{{ $day['label'] }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('Save') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="modal fade wk-modal" id="weakened_modal_update">
        <form action="{{ route('weakened.update') }}" method="POST">
            @csrf
            <input type="hidden" name="id" id="id" value="">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('Update Weekend Group') }}</h5>
                        <button type="button" class="close" data-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="wk-modal-label" for="descriptions">{{ __('Weekend Group Name') }} <span class="text-danger">*</span></label>
                            <input class="form-control" type="text" id="descriptions" placeholder="{{ __('Type weekend group name') }}" name="description" required>
                        </div>
                        <label class="wk-modal-label">{{ __('Off Days') }}</label>
                        <div class="wk-day-grid">
                            @foreach($weekDays as $day)
                                <label class="wk-day-option mb-0">
                                    <input type="checkbox" value="{{ $day['value'] }}" name="{{ $day['key'] }}" id="{{ $day['key'] }}">
                                    <span>{{ $day['label'] }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('Update') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('script')
    <script>
        function weakened_add() {
            $('#weakened_modal').find('input[type="checkbox"]').prop('checked', false);
            $('#description').val('');
            $('#weakened_modal').modal('show');
        }

        $(document).on('click', '.js-weekend-edit', function () {
            var btn = $(this);
            $('#descriptions').val(btn.data('name'));
            $('#id').val(btn.data('id'));

            ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'].forEach(function (day) {
                $('#' + day).prop('checked', parseInt(btn.data(day.toLowerCase()), 10) === 1);
            });

            $('#weakened_modal_update').modal('show');
        });
    </script>
@endsection