@extends('app-new')
@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/vendors.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/new-style.css">

    <style>
        .filter-box.filter-box-compact {
            padding: 16px !important;
        }

        .filter-box-compact label {
            display: block;
            margin-bottom: 4px;
        }

        .filter-box-compact .select2-container {
            width: 100% !important;
        }

        .filter-box-compact .btn {
            height: 38px;
        }

        .month-nav {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .month-nav .month-label {
            min-width: 140px;
            text-align: center;
            font-weight: 600;
        }

        .howo-table td.remark-cell {
            color: #6b7280;
            font-size: 12px;
        }

        .badge-holiday {
            background-color: #fee2e2;
            color: #b91c1c;
        }

        .badge-week-off {
            background-color: #dbeafe;
            color: #1d4ed8;
        }

        .badge-extra-week-off {
            background-color: #cffafe;
            color: #0e7490;
        }

        .badge-shut-down {
            background-color: #ede9fe;
            color: #6d28d9;
        }

        .badge-national-holiday {
            background-color: #ffedd5;
            color: #c2410c;
        }

        .badge-restricted-holiday {
            background-color: #fef3c7;
            color: #92400e;
        }

        .badge-working {
            background-color: #f1f5f9;
            color: #64748b;
        }

        .source-tag {
            font-size: 11px;
            color: #94a3b8;
        }
    </style>
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Employee Holiday/Weekoff</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/home">{{ trans('common/common.home') }}</a>
                    </li>
                    <li class="breadcrumb-item active">Employee Holiday/Weekoff</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <section id="dashboard-ecommerce" class="py-2">
        <div class="filter-box filter-box-compact mb-2">
            <form id="filter-form" method="GET">
                <input type="hidden" name="month" id="month" value="{{ $month }}">
                <input type="hidden" name="year" id="year" value="{{ $year }}">
                <div class="d-flex flex-wrap align-items-end gap-3">
                    <div class="flex-fill" style="min-width: 260px;">
                        <label for="employee_id">Employee</label>
                        <select class="form-control select2" name="employee_id" id="employee_id">
                            <option value=""></option>
                            @if ($employee)
                                <option value="{{ $employee->id }}" selected>
                                    {{ ucwords($employee->name) }} ({{ $employee->employee_code }})
                                </option>
                            @endif
                        </select>
                    </div>

                    <div>
                        <label>Month</label>
                        <div class="month-nav">
                            <button type="button" id="prev-month" class="btn btn-outline-primary d-inline-flex align-items-center justify-content-center"
                                style="width: 38px; height: 38px; padding: 0;" data-month="{{ $prevMonth }}" data-year="{{ $prevYear }}"
                                title="Previous Month">
                                <i data-feather="chevron-left"></i>
                            </button>
                            <span class="month-label">{{ $monthLabel }}</span>
                            <button type="button" id="next-month" class="btn btn-outline-primary d-inline-flex align-items-center justify-content-center"
                                style="width: 38px; height: 38px; padding: 0;" data-month="{{ $nextMonth }}" data-year="{{ $nextYear }}"
                                title="Next Month">
                                <i data-feather="chevron-right"></i>
                            </button>
                        </div>
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary-main d-inline-flex align-items-center justify-content-center"
                            style="width: 38px; height: 38px; padding: 0;" title="{{ trans('common/common.search') }}">
                            <i data-feather="search"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <div class="card new-card">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table modern-table table-bordered howo-table mb-0">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Day</th>
                                <th>Status</th>
                                <th>Remark</th>
                                <th>Source</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($days as $day)
                                @php
                                    $badgeClass = [
                                        'Holiday' => 'badge-holiday',
                                        'National Holiday' => 'badge-national-holiday',
                                        'Restricted Holiday' => 'badge-restricted-holiday',
                                        'Week Off' => 'badge-week-off',
                                        'Extra Week Off' => 'badge-extra-week-off',
                                        'Shut Down' => 'badge-shut-down',
                                    ][$day['label']] ?? 'badge-working';
                                @endphp
                                <tr>
                                    <td>{{ $day['date']->format('d-m-Y') }}</td>
                                    <td>{{ $day['date']->format('l') }}</td>
                                    <td><span class="badge {{ $badgeClass }}">{{ $day['label'] }}</span></td>
                                    <td class="remark-cell">{{ $day['remark'] ?: '-' }}</td>
                                    <td class="source-tag">{{ $day['source'] }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center py-4">Select an employee to view the calendar</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('footer-script')
    <script src="/app-assets/js/scripts/ui/ui-feather.js"></script>
    <script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
    <script src="{{ asset('js/common-script.js') }}"></script>
    <script>
        $(window).on('load', function() {
            $('#employee_id').select2({
                width: '100%',
                ajax: {
                    url: '/ajax/hod-list',
                    dataType: 'json',
                    data: function(params) {
                        return {
                            alias: '{!! $alias !!}',
                            search: params.term,
                            only_current_organization: true
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: $.map(data.data, function(item) {
                                return {
                                    id: item.id,
                                    text: item.name + (item.employee_code ? ' (' + item
                                            .employee_code + ')' : ''),
                                };
                            })
                        };
                    },
                    cache: true
                },
                placeholder: 'Search by name or code',
                minimumInputLength: 1,
                allowClear: true
            });

            $('#prev-month, #next-month').on('click', function() {
                $('#month').val($(this).data('month'));
                $('#year').val($(this).data('year'));
                $('#filter-form').trigger('submit');
            });

            if (feather) {
                feather.replace({
                    width: 14,
                    height: 14
                });
            }
        });
    </script>
@endpush