@extends('layouts.master')

@section('pagetitle')
Manage Shop Time
@endsection
@section('title')
Manage Shop Time
@endsection

@section('content')

@php

$days = [
    ucfirst('monday'), 
    ucfirst('tuesday'),
    ucfirst('wednesday'),
    ucfirst('thursday'),
    ucfirst('friday'),
    ucfirst('saturday'),
    ucfirst('sunday'),
];

@endphp


<!-- ============================================================== -->
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<div class="row page-titles">
    <div class="col-md-5 align-self-center">
        <h4 class="text-themecolor" style="font-weight: 600;">Manage Shop Time</h4>
    </div>
    <div class="col-md-7 align-self-center text-right">
        <div class="d-flex justify-content-end align-items-center">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                <li class="breadcrumb-item active">Manage Shop Time</li>
            </ol>
        </div>
    </div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->

<div class="card">
    <div class="card-body">
        @include('layouts.alert')
        <h5 class="card-title"></h5>
        <!-- Nav tabs -->
        <form action="{{ url('shop/schedule/edit') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="row">
                <div class="col-sm-3">
                    <label class="col-form-label" for="example-color-input"> Merchant Site On/Off*</label>
                </div>
                <div class="col-sm-3">
                    <label class="col-form-label" for="example-color-input"> Days*</label>
                </div>
                <div class="col-sm-3">
                    <label class="col-form-label" for="example-color-input"> Start Time*</label>
                </div>
                <div class="col-sm-3">
                    <label class="col-form-label" for="example-color-input"> End Time*</label>
                </div>
            </div>
          
            <div class="border mb-4 p-2">

            @foreach( $days as $key => $d )
            
            <div class="row">
               
                <div class="col-sm-3">
                <select name="schedule[{{ $d }}][day_check]" value="" id="input-order-status" class="form-control">
                    <option value="1" {{ @$schedule[$key]->day_check == 1 ? "selected" : "" }} >On</option>
                    <option value="0" {{ @$schedule[$key]->day_check == 0 ? "selected" : "" }}>Off</option>
                </select>
                </div>                
          
                <div class="col-sm-3">
                    <label class="col-form-label font-20" name="days" for="example-color-input">{{ $d }}</label>
                </div>

                <div class="col-sm-3">
                    <input type="time" name="schedule[{{ $d }}][start_time]" id="timefrom" class="form-control" autocomplete="off" value="{{ @$schedule[$key]->start_time }}">
                </div>
                
                <div class="col-sm-3">
                    <input type="time" name="schedule[{{ $d }}][end_time]" id="timeto" class="form-control" autocomplete="off" value="{{ @$schedule[$key]->end_time }}" >
                </div>    
            </div>
            @endforeach

            </div>

            <div class="mt-2 text-right">
                <button class="btn btn-warning">Save</button>
            </div>
        </form>
    </div>
</div>

@endsection

@section('script')
<script>
    var timefrom = new Date();
    temp = $('#timefrom').val().split(":");
    timefrom.setHours((parseInt(temp[0]) - 1 + 24) % 24);
    timefrom.setMinutes(parseInt(temp[1]));

    var timeto = new Date();
    temp = $('#timeto').val().split(":");
    timeto.setHours((parseInt(temp[0]) - 1 + 24) % 24);
    timeto.setMinutes(parseInt(temp[1]));

    if (timeto < timefrom){
        alert('start time should be smaller than end time!');
    }
</script>
@endsection