@extends("admin.layouts.layout")

@php
    $pageTitle = ($isEdit ? "编辑" : "新增") . $modelName;
@endphp

@section("content")
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            @foreach ($errors->all() as $error)
                                <div>{{ $error }}</div>
                            @endforeach
                        </div>
                    @endif

                    <form method="POST" action="{{ $isEdit ? url($urlPrefix . '/update/' . $holiday->id) : url($urlPrefix . '/store') }}">
                        @csrf
                        <div class="form-group">
                            <label for="project_id">所属项目/医院</label>
                            <select class="form-control" id="project_id" name="project_id" required>
                                <option value="">请选择</option>
                                @foreach($projects as $project)
                                    <option value="{{ $project->id }}" {{ (string) old('project_id', $holiday->project_id) === (string) $project->id ? 'selected' : '' }}>
                                        {{ $project->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        @if($isEdit)
                            <div class="form-group">
                                <label for="date">日期</label>
                                <input
                                    class="form-control"
                                    id="date"
                                    name="date"
                                    type="text"
                                    data-plugin="date-picker"
                                    value="{{ old('date', $holiday->date) }}"
                                    required
                                >
                            </div>
                        @else
                            <div class="form-group">
                                <label for="date-picker-input">日期</label>
                                <div class="input-group">
                                    <input
                                        class="form-control"
                                        id="date-picker-input"
                                        type="text"
                                        data-plugin="date-picker"
                                        placeholder="点击日历选择日期"
                                    >
                                    <div class="input-group-append">
                                        <button class="btn btn-info" id="add-date-btn" type="button">加入</button>
                                    </div>
                                </div>
                                <small class="form-text text-muted">可连续选择多个日期，加入后会在下方列表展示。</small>
                            </div>

                            <div class="form-group">
                                <label>已选日期</label>
                                <div id="selected-dates" class="border rounded p-2" style="min-height: 48px;"></div>
                                <div id="selected-date-inputs"></div>
                            </div>
                        @endif

                        <div class="form-group">
                            <label for="price_ratio">节假日倍率</label>
                            <input
                                class="form-control"
                                id="price_ratio"
                                name="price_ratio"
                                type="number"
                                step="0.1"
                                min="0"
                                value="{{ old('price_ratio', $holiday->price_ratio ?: 1) }}"
                                required
                            >
                        </div>

                        <div class="form-group">
                            <label for="remark">备注</label>
                            <input
                                class="form-control"
                                id="remark"
                                name="remark"
                                type="text"
                                value="{{ old('remark', $holiday->remark) }}"
                            >
                        </div>

                        <button class="btn btn-primary mr-1" type="submit">保存</button>
                        <a class="btn btn-light" href="{{ url($urlPrefix . (request()->project_id ? '?project_id=' . request()->project_id : ($holiday->project_id ? '?project_id=' . $holiday->project_id : ''))) }}">返回</a>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push("footer")
    <script>
        $(function () {
            if (!{{ $isEdit ? 'true' : 'false' }}) {
                var selectedDates = [];

                function renderSelectedDates() {
                    var $list = $("#selected-dates");
                    var $inputs = $("#selected-date-inputs");
                    $list.empty();
                    $inputs.empty();

                    if (!selectedDates.length) {
                        $list.append('<span class="text-muted">尚未选择日期</span>');
                        return;
                    }

                    selectedDates.sort();
                    selectedDates.forEach(function (date) {
                        $list.append(
                            '<span class="badge badge-primary mr-2 mb-2 p-2">' +
                            date +
                            ' <a href="javascript:;" class="text-white remove-date" data-date="' + date + '">x</a></span>'
                        );
                        $inputs.append('<input type="hidden" name="dates[]" value="' + date + '">');
                    });
                }

                function addDate(date) {
                    if (!date) return;
                    if (selectedDates.indexOf(date) !== -1) return;
                    selectedDates.push(date);
                    renderSelectedDates();
                }

                $("#add-date-btn").on("click", function () {
                    addDate($("#date-picker-input").val());
                    $("#date-picker-input").val("");
                });

                $("#date-picker-input").on("dp.change", function (e) {
                    if (e.date) {
                        addDate(e.date.format("YYYY-MM-DD"));
                        $(this).val("");
                    }
                });

                $(document).on("click", ".remove-date", function () {
                    var date = $(this).data("date");
                    selectedDates = selectedDates.filter(function (item) {
                        return item !== date;
                    });
                    renderSelectedDates();
                });

                $("form").on("submit", function (e) {
                    if (!selectedDates.length) {
                        e.preventDefault();
                        alert("请至少选择一个日期");
                    }
                });

                renderSelectedDates();
            }
        });
    </script>
@endpush