@extends('layouts.app')
@section('content')

@php
    $time = data_get($settings, 'delivery_time');
    $delivery_time= explode("-",$time);
    $pickup_date = json_decode(data_get($settings,'pickup_dates'));
    $missed_time = data_get($settings, 'missed_delivery_time');
    $missed_delivery_time = explode("-",$missed_time);
@endphp
<div class="table-responsive custom-table-s1">
    @if(session()->has('message'))
    <div class="alert alert-success">{{ session()->get('message') }}</div>
    @endif

    @if(session()->has('error'))
    <div class="alert alert-danger">{{ session()->get('error') }}</div>
    @endif
<table class="participant_table" width="100%">
    <thead>
        <tr>
            <th>Settings</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="row">
                    <div class="col-xl-12">
                        <div class="card forms-card">
                            <div class="card-body">
                                <div class="basic-form">
                                    <form class="m-form m-form--state" name="frm-create" id="frm-create" method="post" action="{{ route('backend.settings.save')}}">
                                        @csrf
                                        <div class="outer-div">
                                            <div class="inner-div">
                                                <div class="form-group row">
                                                    <div class="col-sm-12">
                                                        <div class="form-group">
                                                            <label class="text-label" for="application">
                                                                Show Application
                                                                <div class="switch-field">
                                                                    <input type="radio" id="radio-one" name="show_application" value="yes" {{ ($settings->show_application) =="yes" ? 'checked=' .'"'.'checked'.'"' : '' }}/>
                                                                    <label for="radio-one">Yes</label>
                                                                    <input type="radio" id="radio-two" name="show_application" value="no" {{ ($settings->show_application) =="no" ? 'checked=' .'"'.'checked'.'"' : '' }} />
                                                                    <label for="radio-two">No</label>
                                                                </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <label class="text-label" for="current_year">
                                                                Current Blue Santa Year
                                                            </label>
                                                            <input type="text" name="current_year" value="{{ date('Y') }}" class="form-control" readonly>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <label class="text-label" for="max_no_applicants">
                                                                Maximum number of applicants
                                                            </label>

                                                            <input type="number" name="max_no_applicants" class="form-control" value={{data_get($settings,'max_no_applicants')}}>
                                                            @error('max_no_applicants')
                                                            <div class="error" style="color:red;">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
<div class="col-sm-12">
    <div class="form-group">
        <div class="pickup-delivery-input-box">
            <h4>Delivery date</h4>

            <div class="row">
                <div class="col-sm-4 col-12">
                    <div class="form-group">
                        <label for="datepicker">Select Date:</label>
                        <input type="date" name="delivery_date" class="date-input form-control" value="{{ data_get($settings, 'delivery_date')}}">
                    </div>
                </div>
                <div class="col-sm-4 col-12">
                    <div class="form-group">
                        <label for="timepicker-start">Start Time:</label>
                        <div class="input-with-right-prefixTime">
                            <div class="left-input">
                                @php
                                    $delivery_start_time = $delivery_time[0]??"";
                                    if(isset($delivery_start_time) && Str::contains($delivery_start_time, 'PM')){
                                        $delivery_formatted_start_time = Str::replaceLast('PM', '',$delivery_start_time);
                                    }else if(isset($delivery_start_time) && Str::contains($delivery_start_time, 'AM')){
                                        $delivery_formatted_start_time = Str::replaceLast('AM', '',$delivery_start_time);
                                    }
                                @endphp
                                <input type="time" name="delivery_starttime" class="time-input form-control" value="{{ $delivery_formatted_start_time }}">
                            </div>
                            <div class="right-prefixTime">
                                <select class="ampm-input form-control" name="stime_type">
                                    <option value="am" @if(Str::contains($delivery_start_time, 'AM')) {{"selected"}} @endif >AM</option>
                                    <option value="pm" @if(Str::contains($delivery_start_time, 'PM')) {{"selected"}} @endif>PM</option>
                                </select>
                            </div>
                        </div>
                        @error('delivery_starttime')
                        <div class="error" style="color:red;">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="col-sm-4 col-12">
                    <div class="form-group">
                        <label for="timepicker-end">End Time:</label>
                        <div class="input-with-right-prefixTime">
                            <div class="left-input">
                                @php
                                $delivery_end_time = $delivery_time[1]??"";
                                if(isset($delivery_end_time) && Str::contains($delivery_end_time, 'PM')){
                                    $delivery_formatted_end_time = Str::replaceLast('PM', '',$delivery_end_time);
                                }else if(isset($delivery_end_time) && Str::contains($delivery_end_time, 'AM')){
                                    $delivery_formatted_end_time = Str::replaceLast('AM', '',$delivery_end_time);
                                }
                                @endphp
                                <input type="time" name="delivery_endtime" class="time-input form-control" value="{{ $delivery_formatted_end_time}}">
                            </div>
                            <div class="right-prefixTime">
                                <select class="ampm-input form-control" name="etime_type">
                                    <option value="am" @if(Str::contains($delivery_end_time, 'AM')) {{"selected"}} @endif>AM</option>
                                    <option value="pm" @if(Str::contains($delivery_end_time, 'PM')) {{"selected"}} @endif>PM</option>
                                </select>
                            </div>
                        </div>
                        @error('delivery_endtime')
                        <div class="error" style="color:red;">{{ $message }}</div>
                        @enderror

                        @error('delivery_date')
                        <div class="error" style="color:red;">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>
<div class="col-sm-12">
    <div class="form-group">
        <div class="pickup-delivery-input-box">
            <h4>Pickup dates</h4>
            <div class="row" id="dateContainer">
                <div class="col-12 col-sm-12 date-row">
                    <div class="row">
                        @php $count = 1; @endphp
                        @if($pickup_date)
                        @php $count = count($pickup_date); @endphp
                        @foreach($pickup_date as $key => $dateValue)
                        @php
                            $pickdate =explode(",",$dateValue);
                            $picklimit = $pickdate[2];

                            if(isset($pickdate[1])){
                            $picktime = explode("-",$pickdate[1]);
                            $pickup_start_time =  $picktime[0]??"";


                            $pickup_end_time =  $picktime[1]??"";

                            if(isset($pickup_start_time) && Str::contains($pickup_start_time, 'PM')){
                                $pickup_formatted_start_time = Str::replaceLast('PM', '',$pickup_start_time);
                            }else if(isset($pickup_start_time) && Str::contains($pickup_start_time, 'AM')){
                                $pickup_formatted_start_time = Str::replaceLast('AM', '',$pickup_start_time);
                            }

                            if(isset($pickup_end_time) && Str::contains($pickup_end_time, 'PM')){
                                $pickup_formated_end_time = Str::replaceLast('PM', '',$pickup_end_time);
                            }else if(isset($pickup_end_time) && Str::contains($pickup_end_time, 'AM')){
                                $pickup_formated_end_time = Str::replaceLast('AM', '',$pickup_end_time);
                            }
                            }
                            @endphp
                        <div class="col-sm-4 col-12">
                            <div class="form-group">
                                <label>Select Date:</label>
                                <input type="date" class="date-input form-control" name="pickup_dates[{{$key}}][date]" value="{{$pickdate[0]}}">
                            </div>
                        </div>
                        <div class="col-sm-3 col-12">
                            <div class="form-group">
                                <label for="timepicker-start">Start Time:</label>
                                <div class="input-with-right-prefixTime">
                                    <div class="left-input">
                                        <input type="time" class="time-input form-control timecls" name="pickup_dates[{{$key}}][start_time]" value="{{ date('H:i', strtotime($pickup_formatted_start_time)) }}">
                                    </div>
                                    <div class="right-prefixTime">
                                        <select class="ampm-input form-control" name="pickup_dates[{{$key}}][start_time_type]">
                                            <option value="am" @if(isset($pickup_start_time) && Str::contains($pickup_start_time, 'AM')) {{"selected"}} @endif >AM</option>
                                            <option value="pm" @if(isset($pickup_start_time) && Str::contains($pickup_start_time, 'PM')) {{"selected"}} @endif>PM</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3 col-12">
                            <div class="form-group">
                                <label for="timepicker-start">End Time: </label>
                                <div class="input-with-right-prefixTime">
                                    <div class="left-input">
                                        <input type="time" class="time-input form-control timecls" name="pickup_dates[{{$key}}][end_time]"  value="{{ date('H:i', strtotime($pickup_formated_end_time)) }}">
                                    </div>
                                    <div class="right-prefixTime">
                                        <select class="ampm-input form-control" name="pickup_dates[{{$key}}][end_time_type]">
                                            <option value="am" @if(isset($pickup_end_time) && Str::contains($pickup_end_time, 'AM')) {{"selected"}} @endif >AM</option>
                                            <option value="pm" @if(isset($pickup_end_time) && Str::contains($pickup_end_time, 'PM')) {{"selected"}} @endif>PM</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-2 col-12">
                            <div class="form-group">
                                <label for="timepicker-start">Limit: </label>
                                <div class="left-input">
                                    <input type="text" id="" class="form-control" name="pickup_dates[{{$key}}][max_limit]"  value="{{$picklimit}}">
                                </div>
                            </div>
                        </div>
                        @endforeach
                        @endif

                        <div class="col-sm-12 col-12">
                            <div class="form-group">
                                <button id="addDateBtn" type="button" class="btn btn-primary">Add Date</button>
                                @error('pickup_dates')
                                <div class="error" style="color:red;">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

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

<div class="col-sm-12">
    <div class="form-group">
        <div class="pickup-delivery-input-box">
            <h4>Missed Delivery Pickup Date</h4>

            <div class="row">
                <div class="col-sm-4 col-12">
                    <div class="form-group">
                        <label for="datepicker">Select Date:</label>
                        <input type="date" name="missed_delivery_date" class="date-input form-control" value="{{ data_get($settings, 'missed_delivery_date')}}">
                    </div>
                </div>
                <div class="col-sm-4 col-12">
                    <div class="form-group">
                        <label for="timepicker-start">Start Time:</label>
                        <div class="input-with-right-prefixTime">
                            <div class="left-input">
                                @php
                                    $missed_delivery_start_time = $missed_delivery_time[0]??"";
                                    if(isset($missed_delivery_start_time) && Str::contains($missed_delivery_start_time, 'PM')){
                                        $missed_delivery_formatted_start_time = Str::replaceLast('PM', '',$missed_delivery_start_time);
                                    }else if(isset($missed_delivery_start_time) && Str::contains($missed_delivery_start_time, 'AM')){
                                        $missed_delivery_formatted_start_time = Str::replaceLast('AM', '',$missed_delivery_start_time);
                                    }
                                @endphp
                                <input type="time" name="missed_delivery_starttime" class="time-input form-control" value="{{ $missed_delivery_formatted_start_time }}">
                            </div>
                            <div class="right-prefixTime">
                                <select class="ampm-input form-control" name="missedstime_type">
                                    <option value="am" @if(Str::contains($missed_delivery_start_time, 'AM')) {{"selected"}} @endif >AM</option>
                                    <option value="pm" @if(Str::contains($missed_delivery_start_time, 'PM')) {{"selected"}} @endif>PM</option>
                                </select>
                            </div>
                        </div>
                        @error('delivery_starttime')
                        <div class="error" style="color:red;">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="col-sm-4 col-12">
                    <div class="form-group">
                        <label for="timepicker-end">End Time:</label>
                        <div class="input-with-right-prefixTime">
                            <div class="left-input">
                                @php
                                $missed_delivery_end_time = $missed_delivery_time[1]??"";
                                if(isset($missed_delivery_end_time) && Str::contains($missed_delivery_end_time, 'PM')){
                                    $missed_delivery_formatted_end_time = Str::replaceLast('PM', '',$missed_delivery_end_time);
                                }else if(isset($missed_delivery_end_time) && Str::contains($missed_delivery_end_time, 'AM')){
                                    $missed_delivery_formatted_end_time = Str::replaceLast('AM', '',$missed_delivery_end_time);
                                }
                                @endphp
                                <input type="time" name="missed_delivery_endtime" class="time-input form-control" value="{{ $missed_delivery_formatted_end_time}}">
                            </div>
                            <div class="right-prefixTime">
                                <select class="ampm-input form-control" name="missedetime_type">
                                    <option value="am" @if(Str::contains($missed_delivery_end_time, 'AM')) {{"selected"}} @endif>AM</option>
                                    <option value="pm" @if(Str::contains($missed_delivery_end_time, 'PM')) {{"selected"}} @endif>PM</option>
                                </select>
                            </div>
                        </div>
                        @error('delivery_endtime')
                        <div class="error" style="color:red;">{{ $message }}</div>
                        @enderror

                        @error('delivery_date')
                        <div class="error" style="color:red;">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <label class="text-label" for="age_groups">
                                                                Age groups
                                                            </label>
                                                            <select class="form-control" name="age_groups">
                                                                <option value="">--Choose Age groups--</option>
                                                                <option value="Infant" {{!empty($settings->age_groups) == "Infant" ? 'selected' : ''}}>Infant</option>
                                                                <option value="1 to 2" {{!empty($settings->age_groups) == "1 to 2" ? 'selected' : ''}}>1 to 2</option>
                                                                <option value="2 to 3" {{!empty($settings->age_groups) == "2 to 3" ? 'selected' : ''}}>2 to 3</option>
                                                                <option value="3 to 4" {{!empty($settings->age_groups) == "3 to 4" ? 'selected' : ''}}>3 to 4</option>
                                                                <option value="5 to 7" {{!empty($settings->age_groups) == "5 to 7" ? 'selected' : ''}}>5 to 7</option>
                                                                <option value="8 to 10" {{!empty($settings->age_groups) == "8 to 10" ? 'selected' : ''}}>8 to 10</option>
                                                                <option value="11 to 14" {{!empty($settings->age_groups) == "11 to 14" ? 'selected' : ''}}>11 to 14</option>
                                                            </select>
                                                            @error('age_groups')
                                                            <div class="error" style="color:red;">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <label class="text-label" for="">
                                                                Max age of child served
                                                            </label>
                                                            <input type="number" class="form-control" name="max_age_of_child_served" onKeyPress="if(this.value.length==2) return false;" value={{data_get($settings,'max_age_of_child_served')}}>
                                                            @error('max_age_of_child_served')
                                                            <div class="error" style="color:red;">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>

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

                                <div class="inner-div">
                                    <div class="form-group">
                                        <div class="d-flex justify-content-end">
                                            <button type="submit" class="btn btn-primary btn-form">Submit</button>
                                        </div>
                                    </div>
                                </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>
</div>
@endsection
@section('customScripts')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<!-- Include Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<!-- Include Bootstrap Datepicker JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

<!-- Include Bootstrap Timepicker JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js"></script>

<script>
    $(document).ready(function() {
        // Initialize the Datepicker
        $('#datepicker').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayHighlight: true
        });

        // Initialize the Timepicker
        $('#timepicker-start, #timepicker-end').timepicker({
            // format: 'hh:mm a',
            minuteStep: 1,

            format: 'hh:mm A', // AM/PM format
            showMeridian: true // Show AM/PM selection
            // showMeridian: false
        });

        // Handle button click
        $('#submitBtn').click(function() {
            var selectedDate = $('#datepicker').val();
            var startTime = $('#timepicker-start').val();
            var endTime = $('#timepicker-end').val();

            console.log('Selected Date:', selectedDate);
            console.log('Start Time:', startTime);
            console.log('End Time:', endTime);

            // Perform any further processing or AJAX requests here
        });
    });

</script>

<script>
    $(document).ready(function() {
        // Add Date button click event
        var i = '';

        $("#addDateBtn").click(function() {

            ++i;
            var newDateRow =    `<div class=" row date-row">
                                <div class="col-sm-4 col-12 ">
                                <div class="form-group">
                                    <label>Select Date:</label>
                                    <input type="date" class="date-input form-control" name="pickup_dates[${i}][date]">
                                </div>
                                </div>
                                <div class="col-sm-3 col-12">
                                    <div class="form-group">
                                        <label for="timepicker-start">Start Time:</label>
                                        <div class="input-with-right-prefixTime">
                                            <div class="left-input">
                                                <input type="time" class="time-input form-control" name="pickup_dates[${i}][start_time]">
                                            </div>
                                            <div class="right-prefixTime">
                                                <select class="ampm-input form-control" name="pickup_dates[${i}][start_time_type]">
                                                    <option value="am">AM</option>
                                                    <option value="pm">PM</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-3 col-12">
                                    <div class="form-group">
                                        <label for="timepicker-start">End Time: </label>
                                        <div class="input-with-right-prefixTime">
                                            <div class="left-input">
                                                <input type="time" class="time-input form-control" name="pickup_dates[${i}][end_time]">
                                            </div>
                                            <div class="right-prefixTime">
                                                <select class="ampm-input form-control" name="pickup_dates[${i}][end_time_type]">
                                                    <option value="am">AM</option>
                                                    <option value="pm">PM</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-2 col-12">
                                    <div class="form-group">
                                        <label for="timepicker-start">Limit: </label>
                                        <div class="left-input">
                                            <input type="text" id="" class="form-control" name="pickup_dates[${i}][max_limit]">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-12 col-12">
                                    <div class="form-group">
                                        <button type="button" class="btn btn-danger remove-btn">Remove</button>
                                    </div>
                                </div></div>`;
            $("#dateContainer").append(newDateRow);
        });

        // Remove button click event (event delegation)
        $("#dateContainer").on("click", ".remove-btn", function() {
            $(this).closest(".date-row").remove();
        });

    });


</script>

@endsection