
<form class="orderParameterForm needs-validation">
    <div class="form-group row">
        <label for="contactName" class="col-sm-2 col-form-label">Leadó neve</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="contactName" placeholder="Írja be a leadó nevét" name="contactName" required>
        </div>
    </div>
    <div class="form-group row">
        <label for="remark" class="col-sm-2 col-form-label">Megjegyzés</label>
        <div class="col-sm-10">
            <textarea class="form-control" id="remark" rows="3" placeholder="Ha kiván itt tud megjegyzést írni a  megrendeléshez" name="note"></textarea>
        </div>
    </div>
    <fieldset class="form-group">
        <div class="row">
            <legend class="col-form-label col-sm-2 pt-0">Megrdelés</legend>
            <div class="col-sm-10">
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="orderType" id="gridRadios1" value="daily" checked>
                    <label class="form-check-label" for="gridRadios1">
                        Napi
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="orderType" id="gridRadios2" value="weekly">
                    <label class="form-check-label" for="gridRadios2">
                        Heti
                    </label>
                </div>
            </div>
        </div>
    </fieldset>

    <div class="form-group row">
        <label for="remark" class="col-sm-2 col-form-label">Szállítási dátum</label>
        <div class="col-sm-10">
            {{-- Szín jelmagyarázat – csak szállítási korlátozás esetén jelenik meg (JS tölti be) --}}
            <div class="delivery-legend" id="deliveryDateLegend" style="display:none; margin-bottom:8px;">
                <div class="delivery-legend-item">
                    <span class="delivery-legend-color" style="background-color:#d4edda; border-color:#155724;"></span>
                    <span>Szállítási nap</span>
                </div>
                <div class="delivery-legend-item">
                    <span class="delivery-legend-color" style="background-color:#e9ecef; border-color:#999;"></span>
                    <span>Nem szállítási nap</span>
                </div>
                <div class="delivery-legend-item">
                    <span class="delivery-legend-color" style="background-color:#f8d7da; border-color:#721c24;"></span>
                    <span>Ünnepnap</span>
                </div>
                <div class="delivery-legend-item">
                    <span class="delivery-legend-color" style="background-color:#fff3cd; border-color:#856404;"></span>
                    <span>Áthelyezett munkanap</span>
                </div>
            </div>
            <div class="input-group date">
                <input type="hidden" class="form-control datePicker"
                       value="{{\Illuminate\Support\Carbon::today()->next('Day')->format('Y-m-d')}}"
                       name="deliveryDate" placeholder="Kattintson a dátum kiválasztásához"
                       data-supplier-id="{{ $supplierId ?? '' }}"
                       data-profit-center-id="{{ $profitCenterId ?? '' }}"
                       data-delivery-calendar-url="{{ $deliveryCalendarDataUrl ?? '' }}"
                       required>
                <span class="input-group-addon datePickerClick">
                    {{--<i class="glyphicon glyphicon-th"></i>--}}
                    {{--<i class="fa fa-calendar" aria-hidden="true"></i>--}}
                    <span class="selectedDateText form-control">Kattintson a dátum kiválasztásához</span>
                    <i class="pe-7s-date" style="font-size:2em; margin-left:-5px; "></i>

                </span>
            </div>
        </div>
    </div>

    <div class="form-group row">
        <label for="orderParameterDeliveryAddress" class="col-sm-2 col-form-label">Szállítási cím</label>
        <div class="col-sm-10">
            @if($oneAddress)
                {{$profitCenterAddress}}
            @else
                <select class="orderParameterDeliveryAddress" name="deliveryAddressId" data-placeholder="Válasszon szállítási címet"
                        style="display: none; width: 100%">
                    @foreach($profitCenterAddress as $address)
                        <option value="{{$address['id']}}">{{$address['address']}}</option>
                    @endforeach

                </select>
            @endif
        </div>
    </div>
    @if($hasCustomNotificationEmail)
        <div class="form-group row">
            <label for="contactName" class="col-sm-2 col-form-label">Másodlagos email cím</label>
            <div class="col-sm-10">
            <select class="orderParameterCustomNotificationEmail" name="customNotificationEmail" data-placeholder="Válasszon beszállító e-mail címet"
                    style="width: 100%"
                    required
            >
                <option value="">Nincs</option>

            @foreach($CustomNotificationEmailData as $emailData)
                    <option value="{{$emailData['email']}}">{{$emailData['name']}} {{$emailData['email']}}</option>
                @endforeach

            </select>
            </div>
        </div>
    @endif


    <div class="form-group row">
        <div class="col-sm-10">
            <button type="Order" class="btn btn-primary orderParameterNextButton">Tovább</button>
        </div>
    </div>
</form>
@if ($supplierNote)
    <div class="form-group row">
        <label for="remark" class="col-sm-2 col-form-label">Beszállító megjegyzés</label>
        <div class="col-sm-10">
            <textarea class="form-control" id="supplierNote" rows="3" placeholder="Ha kiván itt tud megjegyzést írni a  megrendeléshez" name="supplierNote" readonly>{{$supplierNote}}</textarea>
        </div>
    </div>

@endif

<style>
    /* Szállítási nap – zöld kiemelés */
    .ui-datepicker .delivery-day-available a {
        background-color: #d4edda !important;
        color: #155724 !important;
        font-weight: bold;
        border-radius: 3px;
    }

    /* Nem szállítási nap – szürke, áthúzott */
    .ui-datepicker .delivery-day-unavailable {
        opacity: 0.4;
    }
    .ui-datepicker .delivery-day-unavailable a {
        text-decoration: line-through;
        cursor: not-allowed !important;
        color: #999 !important;
    }

    /* Ünnepnap – piros háttér (td-re is, mert disabled napon nincs <a>) */
    .ui-datepicker td.work-calendar-holiday,
    .ui-datepicker td.work-calendar-holiday a,
    .ui-datepicker td.work-calendar-holiday span {
        background-color: #f8d7da !important;
        color: #721c24 !important;
        border-radius: 3px;
    }

    /* Áthelyezett munkanap – sárga/narancs háttér */
    .ui-datepicker td.work-calendar-working-day,
    .ui-datepicker td.work-calendar-working-day a,
    .ui-datepicker td.work-calendar-working-day span {
        background-color: #fff3cd !important;
        color: #856404 !important;
        font-style: italic;
        border-radius: 3px;
    }

    /* Kombinált: szállítási nap + ünnepnap */
    .ui-datepicker td.work-calendar-holiday.delivery-day-available a {
        background-color: #f8d7da !important;
        border: 2px solid #155724 !important;
    }

    /* Ünnepnap + nem szállítási nap → áthúzott */
    .ui-datepicker td.work-calendar-holiday.delivery-day-unavailable a,
    .ui-datepicker td.work-calendar-holiday.delivery-day-unavailable span {
        text-decoration: line-through;
        opacity: 0.6;
    }

    /* Szín jelmagyarázat */
    .delivery-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 8px;
        font-size: 0.85em;
    }
    .delivery-legend-item {
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .delivery-legend-color {
        display: inline-block;
        width: 16px;
        height: 16px;
        border-radius: 3px;
        border: 1px solid #ccc;
    }

    .orderParameterForm .selectedDateText{
        vertical-align: super;
        padding: 5px;
        display: inline;

    }

</style>
<script>


    /*    $('.input-group.date').datepicker({
        format: "yyyy-mm-dd",
        language: "hu",
        multidate: false,
        daysOfWeekDisabled: "2",
        daysOfWeekHighlighted: "1,5",
        autoclose: true,
        beforeShowDay: function(date){
            if (date.getMonth() == (new Date()).getMonth())
                switch (date.getDate()){
                    case 4:
                        return {
                            tooltip: 'Example tooltip',
                            classes: 'active'
                        };
                    case 8:
                        return false;
                    case 12:
                        return "green";
                }
        },
        datesDisabled: ['05/06/2021', '05/21/2021'],
        toggleActive: true,
        defaultViewDate: { year: 2021, month: 5, day: 10 },
        changeDate:function(data){
            console.log('helloka');
            console.log(data);
        }
    });

*/
/*
    $('.input-group.date').datepicker({
        language: "hu",
            multidate: false,
            daysOfWeekDisabled: "2",
            daysOfWeekHighlighted: "1,5",
            autoclose: true,
            beforeShowDay: function(date){
            if (date.getMonth() == (new Date()).getMonth())
                switch (date.getDate()){
                    case 4:
                        return {
                            tooltip: 'Example tooltip',
                            classes: 'active'
                        };
                    case 8:
                        return false;
                    case 12:
                        return "green";
                }
        },
        datesDisabled: ['05/06/2021', '05/21/2021'],
            toggleActive: true,
            defaultViewDate: { year: 2021, month: 5, day: 10 }
    });
*/

</script>
