270 lines
10 KiB
PHP
270 lines
10 KiB
PHP
|
||
<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 megrendelés
|
||
</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 keretrendelés
|
||
</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>
|