@extends('user::layouts/panel')

{{-- Style --}}
@push('module-links')
<link rel="stylesheet" href="{{ Module::asset('setting:css/setting.css') }}">
@endpush

{{-- Content --}}
@section('module-content')
<nav>
  <div class="nav nav-tabs mb-4" id="nav-tab" role="tablist">
    <button class="nav-item nav-link active" id="nav-users-order-list-tab" data-bs-toggle="tab" data-bs-target="#nav-users-order-list" type="button" role="tab" aria-controls="nav-users-order-list" aria-selected="true">使用者設定</button>
    <button class="nav-item nav-link" id="nav-mail-settings-tab" data-bs-toggle="tab" data-bs-target="#nav-mail-settings" type="button" role="tab" aria-controls="nav-mail-settings" aria-selected="false">寄信設定</button>
    <button class="nav-item nav-link" id="nav-special-work-days-tab" data-bs-toggle="tab" data-bs-target="#nav-special-work-days" type="button" role="tab" aria-controls="nav-special-work-days" aria-selected="false">特殊工作日設定</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-users-order-list" role="tabpanel" aria-labelledby="nav-users-order-list-tab">
    <div class="d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3 mb-4">
      <div class="d-flex flex-wrap gap-2">
        <button type="button" class="btn btn-primary" id="update_order">
          <i class="fas fa-save me-2"></i>儲存設定
        </button>
        <button type="button" class="btn btn-outline-primary" id="showAllUsers">
          <i class="fas fa-eye me-2"></i>全部顯示
        </button>
        <button type="button" class="btn btn-outline-secondary" id="hideAllUsers">
          <i class="fas fa-eye-slash me-2"></i>全部隱藏
        </button>
      </div>
    </div>
    <form method="post" id="order">
      <div class="user-list-body">
        <div class="card">
          <div class="card-body p-0">
            <div class="table-responsive">
              <table class="table table-hover mb-0">
                <thead class="table-light">
                  <tr class="text-center">
                    <th class="col-1 py-3"></th>
                    <th class="col-2 py-3">順序</th>
                    <th class="col-4 py-3">使用者</th>
                    <th class="col-5 py-3">是否顯示</th>
                  </tr>
                </thead>
                <tbody id="sortable">
                  @foreach($users as $key => $user)
                  <tr class="user_tr text-center" id="{{$user->id}}" data-stat="{{$user->status}}">
                    <td class="sort py-3">
                      <i class="fas fa-grip-vertical text-secondary cursor-move"></i>
                    </td>
                    <td data-th="順序" class="order_td py-3">
                      <span class="badge bg-secondary">{{$key+1}}</span>
                      <input type="hidden" name="order[]" value="{{$user->id}}">
                    </td>
                    <td data-th="使用者" class="py-3">
                      <span class="fw-medium">{{$user->name}}</span>
                    </td>
                    <td data-th="是否顯示" class="py-3">
                      <div class="d-flex justify-content-center">
                        <div class="form-check form-check-inline">
                          <input class="form-check-input" type="radio" id="visibleY{{$user->id}}" name="visible[{{$user->id}}]" value="是" {{ $user->visible=='是' ? 'checked' : '' }}>
                          <label class="form-check-label" for="visibleY{{$user->id}}">是</label>
                        </div>
                        <div class="form-check form-check-inline">
                          <input class="form-check-input" type="radio" id="visibleN{{$user->id}}" name="visible[{{$user->id}}]" value="否" {{ $user->visible=='否' ? 'checked' : '' }}>
                          <label class="form-check-label" for="visibleN{{$user->id}}">否</label>
                        </div>
                      </div>
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <input type="hidden" name="action" value="user_order">
    </form>
  </div>

  <div class="tab-pane fade" id="nav-mail-settings" role="tabpanel" aria-labelledby="nav-mail-settings-tab">
    <div class="d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3 mb-4">
      <div class="d-flex gap-2">
        <button type="button" class="btn btn-primary" id="update_mail_settings">
          <i class="fas fa-save me-2"></i>儲存設定
        </button>
      </div>
    </div>
    <form method="post" id="mail_settings_form">
      <div class="mail-settings-body">
        <div class="card">
          <div class="card-body">
            <div class="mb-3">
              <label for="mail_to" class="form-label">收件人</label>
              <input type="text" class="form-control" id="mail_to" name="mail_to" placeholder="例如：user1@example.com,user2@example.com" value="{{ isset($daily_mail['to']) ? implode(',', $daily_mail['to']) : '' }}">
              <div class="form-text">多個收件人請用逗號分隔</div>
            </div>
            <div class="mb-3">
              <label for="mail_cc" class="form-label">副本收件人</label>
              <input type="text" class="form-control" id="mail_cc" name="mail_cc" placeholder="例如：cc1@example.com,cc2@example.com" value="{{ isset($daily_mail['cc']) ? implode(',', $daily_mail['cc']) : '' }}">
              <div class="form-text">多個副本收件人請用逗號分隔</div>
            </div>
          </div>
        </div>
      </div>
      <input type="hidden" name="action" value="mail_settings">
    </form>
  </div>

  <div class="tab-pane fade" id="nav-special-work-days" role="tabpanel" aria-labelledby="nav-special-work-days-tab">
    <div class="d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3 mb-4">
      <div class="d-flex gap-2">
        <button type="button" class="btn btn-primary" id="add_special_day">
          <i class="fas fa-plus me-2"></i>新增特殊工作日
        </button>
      </div>
    </div>
    <div class="special-work-days-body">
      <div class="card">
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-hover mb-0">
              <thead class="table-light">
                <tr class="text-center">
                  <th class="col-3 py-3">日期</th>
                  <th class="col-2 py-3">工時</th>
                  <th class="col-2 py-3">類型</th>
                  <th class="col-3 py-3">描述</th>
                  <th class="col-2 py-3">操作</th>
                </tr>
              </thead>
              <tbody id="special-work-days-list">
                @foreach($specialWorkDays ?? [] as $day)
                <tr>
                  <td class="text-center">{{ $day->date->format('Y-m-d') }}</td>
                  <td class="text-center">{{ $day->work_hours }}</td>
                  <td class="text-center">{{ $day->type }}</td>
                  <td class="text-center">{{ $day->description }}</td>
                  <td class="text-center">
                    <button type="button" class="btn btn-sm btn-outline-primary edit-special-day" data-id="{{ $day->id }}">
                      <i class="fas fa-edit"></i>
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-danger delete-special-day" data-id="{{ $day->id }}">
                      <i class="fas fa-trash"></i>
                    </button>
                  </td>
                </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 新增/編輯特殊工作日 Modal -->
<div class="modal fade" id="specialDayModal" tabindex="-1" aria-labelledby="specialDayModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="specialDayModalLabel">新增特殊工作日</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form method="post" id="specialDayForm">
          <input type="hidden" name="action" value="special_work_day">
          <input type="hidden" name="id" id="special_day_id">
          <div class="mb-3">
            <label for="date" class="form-label">日期</label>
            <input type="text" class="form-control" id="date" name="date" placeholder="選擇日期" required readonly>
          </div>
          <div class="mb-3">
            <label for="work_hours" class="form-label">工時</label>
            <input type="number" class="form-control" id="work_hours" name="work_hours" step="0.5" min="0" max="24" required>
          </div>
          <div class="mb-3">
            <label for="type" class="form-label">類型</label>
            <select class="form-select" id="type" name="type" required>
              <option value="補班">補班</option>
            </select>
          </div>
          <div class="mb-3">
            <label for="description" class="form-label">描述</label>
            <input type="text" class="form-control" id="description" name="description">
          </div>
          <div class="text-end">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="submit" class="btn btn-primary">儲存</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- 刪除特殊工作日 Modal -->
<div class="modal fade" id="deleteSpecialDayModal" tabindex="-1" aria-labelledby="deleteSpecialDayModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deleteSpecialDayModalLabel">刪除特殊工作日</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>確定要刪除此特殊工作日嗎？</p>
        <form method="post" id="deleteSpecialDayForm">
          <input type="hidden" name="action" value="delete_special_work_day">
          <input type="hidden" name="id" id="delete_special_day_id">
          <div class="text-end">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="submit" class="btn btn-danger">刪除</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
@endsection

{{-- META --}}
@push('meta')
<meta name="setting-update-url" content="{{ route('panel.setting.update') }}">
<meta name="special-work-day-api-url" content="{{ route('api.special-work-days.show', ':id') }}">
@endpush

{{-- JS --}}
@push('module-scripts')
@vite('resources/js/flatpickr.js')
@vite('resources/js/sortable.js')
<script src="{{ Module::asset('setting:js/setting.js') }}"></script>
@endpush