@extends('layouts.app')
@section('content')
    <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>Application No - {{ $application->app_number }} </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">
                                            {{-- @dump($application) --}}
                                            <form class="m-form m-form--state" name="frm-create" id="frm-create" method="POST" action="{{ route('backend.applications.update', $application->id) }}">
                                                @csrf
                                                @method('PUT')
                                                <div class="outer-div">
                                                    <div class="inner-div">
                                                        <div class="form-group row">

                                                            <div class="col-sm-6">
                                                                <div class="form-group">
                                                                    <label class="text-label" for="address">
                                                                        Address
                                                                    </label>
                                                                    <input type="text" name="address" id="address" value="{{ $application->address}}" class="form-control @error('address') is-invalid @enderror">
                                                                    <input type="hidden" class="form-control" name="address_validate" id="address_validate" placeholder="Enter address" value="false">

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

                                                                    @error('address')
                                                                        <div class="error" style="color:red;">{{ $message }}</div>
                                                                    @enderror
                                                                    <span id="ziperror" style="color:red"></span>
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-6">
                                                                <div class="form-group" id="latitudeArea">
                                                                    <label>Latitude</label>
                                                                    <input type="text" id="latitude" name="latitude" class="form-control">
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-6">
                                                                <div class="form-group" id="longtitudeArea">
                                                                    <label>Longitude</label>
                                                                    <input type="text" name="longitude" id="longitude" class="form-control">
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-6">
                                                                <div class="form-group" id="cityArea">
                                                                    <label>city</label>
                                                                    <input type="text" id="city" name="city" class="form-control">
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-6">
                                                                <div class="form-group" id="stateArea">
                                                                    <label>state</label>
                                                                    <input type="text" id="state" name="state" class="form-control">
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-6">
                                                                <div class="form-group" id="zipArea">
                                                                    <label>zip</label>
                                                                    <input type="text" id="zip" name="zip" class="form-control">
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-6">
                                                                <div class="form-group">
                                                                    <label class="text-label" for="first_name">
                                                                        First Name
                                                                    </label>

                                                                    <input type="text" name="first_name" value="{{ $application->first_name }}" class="form-control @error('first_name') is-invalid @enderror">
                                                                    @error('first_name')
                                                                        <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="last_name">
                                                                        Last Name
                                                                    </label>

                                                                    <input type="text" name="last_name" value="{{ $application->last_name }}" class="form-control @error('last_name') is-invalid @enderror">
                                                                    @error('last_name')
                                                                        <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="contact_no">
                                                                        Phone
                                                                    </label>

                                                                    <input type="text" name="contact_no" value="{{ $application->contact_no }}" class="form-control @error('contact_no') is-invalid @enderror" >
                                                                    @error('contact_no')
                                                                        <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="email">
                                                                        Email
                                                                    </label>
                                                                    <input id="email" type="email" name="email" value="{{ $application->email }}"  class="form-control @error('last_name') is-invalid @enderror" >
                                                                    @error('email')
                                                                        <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="unit_no">
                                                                        Unit Number
                                                                    </label>
                                                                    <input id="unit_no" type="text" class="form-control" name="unit_no" value="{{ $application->unit_no }}"  @error('unit_no') is-invalid @enderror>
                                                                    @error('unit_no')
                                                                        <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="gate_code">
                                                                        Gate Code
                                                                    </label>

                                                                    <input id="gate_code" type="text" class="form-control" name="gate_code" value="{{ $application->gate_code }}"  @error('gate_code') is-invalid @enderror>
                                                                    @error('gate_code')
                                                                        <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="household_no">
                                                                        How many people live in your household ?
                                                                    </label>
                                                                    <input id="household_no" type="number" class="form-control" name="household_no" value="{{ $application->no_of_people_lived }}" @error('household_no') is-invalid @enderror>
                                                                    @error('household_no')
                                                                        <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="christmas_household">
                                                                        @php $max_age = data_get($settings,'max_age_of_child_served'); @endphp
                                                                        How many members of the household will be {{ $max_age}} years of age or under on or before Christmas Day of this year ?
                                                                    </label>
                                                                    <input id="christmas_household" type="number" class="form-control" name="christmas_household" value="{{ $application->member_of_household }}" @error('christmas_household') is-invalid @enderror>
                                                                    @error('christmas_household')
                                                                        <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="relationship_type">
                                                                        Are you the parent or legal guardian of the child or children listed below?
                                                                    </label>
                                                                    <input id="relationship_type" type="text" class="form-control" name="relationship_type" value="{{ $application->relationship_type }}" @error('relationship_type') is-invalid @enderror>
                                                                    @error('relationship_type')
                                                                        <div class="error" style="color:red;">{{ $message }}</div>
                                                                    @enderror
                                                                </div>
                                                            </div> -->

<label class="text-label" for="relationship_type">
    Please provide information on each child
</label>
<div class="row" id="dateContainer">
    <div class="col-12 col-sm-12 date-row">
        <div class="row">
            @php $count = 1;
            @endphp
            @if($child_info)
            @php $count = count($child_info);  @endphp
            @foreach($child_info as $key => $value)
            <div class="col-sm-3 col-12">
                <div class="form-group">
                    <input type="text" name="ch_info[{{$key}}][first_name]" value="{{ $value->first_name }}" class="form-control" placeholder="First Name">
                </div>
                <div class="form-group">
                    <!-- Display child details here -->
    
                    <!-- Add the Delete button with data-child-id attribute -->
                    <button type="button" class="btn btn-danger delete-child" data-child-id="{{ $value->id }}">X</button>
                </div>
            </div>
            <div class="col-sm-3 col-12">
                <div class="form-group">
                    <div class="input-with-right-prefixTime">
                        <input type="text" name="ch_info[{{$key}}][last_name]" value="{{ $value->last_name }}" class="form-control" placeholder="Last Name">
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-12">
                <div class="form-group">
                    <div class="input-with-right-prefixTime">
                        <select name="ch_info[{{$key}}][toy_type]" class="form-control">
                            <option value="">Toy preference for this child?</option>

                            <option value="boy_toys" {{ (!empty($value->toy_type) && $value->toy_type == 'boy_toys') ? 'selected' : '' }} >Boy Toys</option>
                            <option value="girl_toys" {{ (!empty($value->toy_type) && $value->toy_type == 'girl_toys') ? 'selected' : '' }} >Girl Toys</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="col-sm-3 col-12">
                <div class="form-group">
                    <div class="input-with-right-prefixTime">
                        {{-- <input type="date" name="ch_info[{{$key}}][dob]" value="{{ date('Y-m-d', strtotime($value->dob)) }}" class="form-control" max="{{ date('Y-m-d') }}"> 
                        <input type="date" name="ch_info[{{$key}}][dob]" value="{{ \Carbon\Carbon::createFromFormat('m-d-Y', $value->dob)->format('Y-m-d') }}" class="form-control" max="{{ date('Y-m-d') }}"> --}}
                        <select class="form-control" name="ch_info[{{$key}}][age_group]">
                            <option value="">Age of Child</option>
                            <option value="1" {{ (!empty($value->age_group) && $value->age_group == '1') ? 'selected' : '' }}>Less than 1</option>
                            <option value="2" {{ (!empty($value->age_group) && $value->age_group == '2') ? 'selected' : '' }}>1 - 2</option>
                            <option value="3" {{ (!empty($value->age_group) && $value->age_group == '3') ? 'selected' : '' }}>3 - 4</option>
                            <option value="4" {{ (!empty($value->age_group) && $value->age_group == '4') ? 'selected' : '' }}>5 - 7</option>
                            <option value="5" {{ (!empty($value->age_group) && $value->age_group == '5') ? 'selected' : '' }}>8 - 10</option>
                            <option value="6" {{ (!empty($value->age_group) && $value->age_group == '6') ? 'selected' : '' }}>11 - 14</option>
                        </select>
                    </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</button>
                </div>
            </div>

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

                                                            <div class="col-sm-12">
                                                                <div class="form-group">
                                                                    <label class="text-label" for="relationship_type">
                                                                        Would you like to pick up your Blue Santa package or have it delivered to the address above ?
                                                                    </label>
                                                                    <ul class="check-lists2 size3">
                                                                        @php
                                                                        $pickupDate = $application->pickup_date;
                                                                        $pickupTime = $application->pickup_time;

                                                                        $applicationPickupDate = $pickupDate." ".$pickupTime;

                                                                        @endphp
                                                                         @if(!empty($finaldate))
                                                                        <li>

                                                                            <input type="radio" class="custom-radio-s2 pickup_d" id="tat1" name="theaddress" value='yes' @if($application->pickup_date) checked @endif>
                                                                            <label for="tat1"> Pick up at the Blue Santa Warehouse (select a date)</label>
                                                                        </li>
                                                                        @foreach($finaldate as $key => $value)
                                                                            <li class="shw_pickup ml-4">

                                                                               @php
                                                                                $data = explode("between",$value);
                                                                                $newDate = date("Y-m-d", strtotime($data[0]));
                                                                                $newTime = date("Y-m-d", strtotime($data[1]));
                                                                                $pickupDateFormat = $newDate.$data[1];

                                                                                @endphp
                                                                                <input type="radio" class="custom-radio-s2" id="tat1" name="pickup_custom_date" value="{{$value}}" {{ old('pickup_custom_date')== $value ? 'checked=' .'"'.'checked'.'"' : '' }} @if($applicationPickupDate== $pickupDateFormat) checked @endif >
                                                                                <label for="tat1"> {{ $value}}</label>
                                                                            </li>
                                                                        @endforeach
                                                                        @endif
                                                                        @error('pickup_custom_date')
                                                                        <div class="error" style="color:red;">{{ $message }}</div>
                                                                        @enderror
                                                                        <li>
                                                                            @php

                                                                            $delivery_date = date("F j, Y", strtotime(data_get($settings,'delivery_date')));
                                                                            $delivery_time = data_get($settings,'delivery_time'); $date_time = $delivery_date." ".$delivery_time; @endphp
                                                                            <input type="radio" class="custom-radio-s2 delivery_d" id="tat2" name="theaddress" value='no' {{ old('theaddress')=="no" ? 'checked=' .'"'.'checked'.'"' : '' }} @if($application->delivery_date) checked @endif>
                                                                            <label for="tat2">Delivery to your home address on {{ $delivery_date }} between {{$delivery_time}}</label>
                                                                        </li>
                                                                        <input type ="hidden" name="delivery_date" value="{{data_get($settings,'delivery_date')}}" >
                                                                        <input type="hidden" name="delivery_time" value="{{$delivery_time}}">
                                                                    </ul>
                                                                    @error('theaddress')
                                                                    <div class="error" style="color:red;">{{ $message }}</div>
                                                                    @enderror
                                                                </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-btn">Submit</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            var i = '';

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

            ++i;
            var newDateRow =    `<div class=" row date-row">
                <div class="col-sm-3 col-12">
                <div class="form-group">
                    <input type="text" name="ch_info[${i}][first_name]" class="form-control" placeholder="First Name">
                </div>
            </div>
            <div class="col-sm-3 col-12">
                <div class="form-group">
                    <div class="input-with-right-prefixTime">
                        <input type="text" name="ch_info[${i}][last_name]" class="form-control" placeholder="Last Name">
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-12">
                <div class="form-group">
                    <div class="input-with-right-prefixTime">
                        <select name="ch_info[${i}][toy_type]" class="form-control">
                            <option value="">Toy preference for this child?</option>
                            <option value = "boy_toys">Boy Toys</option>
                            <option value = "girl_toys">Girl Toys</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="col-sm-3 col-12">
                <div class="form-group">
                    <div class="left-input">
                        <select class="form-control" name="ch_info[${i}][age_group]">
                            <option value="">Age of Child</option>
                            <option value="1">Less than 1</option>
                            <option value="2">1 - 2</option>
                            <option value="3">3 - 4</option>
                            <option value="4">5 - 7</option>
                            <option value="5">8 - 10</option>
                            <option value="6">11 - 14</option>
                        </select>
                    </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);
        });
        // Check the number of delete buttons
        const deleteButtons = $('.delete-child');

        // If there's only one delete button, hide it
        if (deleteButtons.length === 1) {
            deleteButtons.hide();
        }

        $('.delete-child').click(function() {
            // Get the child ID from the data-child-id attribute
            const childId = $(this).data('child-id');
            $.ajax({
                url: "{{ route('backend.delete-child-detail') }}",
                type: 'POST',
                data: {
                    "_token": "{{ csrf_token() }}",
                    "id": childId
                },
                success: function() {

                    location.reload();
                },
                error: function() {
                    
                }
            });
        });

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


            function getCurrentDate() {
                var today = new Date();
                var day = today.getDate();
                var month = today.getMonth() + 1;
                var year = today.getFullYear();

                if (day < 10) {
                    day = '0' + day;
                }
                if (month < 10) {
                    month = '0' + month;
                }
                return year + '-' + month + '-' + day;
            }


        });
    </script>
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyAvzZMHoOxBNefqUmzqJkKv1hlcY49huLM&libraries=places"></script>
    <script>
        $(document).ready(function () {
            $("#latitudeArea").addClass("d-none");
            $("#longtitudeArea").addClass("d-none");
            $("#cityArea").addClass("d-none");
            $("#stateArea").addClass("d-none");
            $("#zipArea").addClass("d-none");

        });
    </script>
<script>
google.maps.event.addDomListener(window, 'load', initAutocomplete);

let autocomplete;
let address1Field;

let postalField;



function initAutocomplete() {
  address1Field = document.querySelector("#address");
  postalField = document.querySelector("#zip");

  // Create the autocomplete object, restricting the search predictions to
  // addresses in the US and Canada.
  autocomplete = new google.maps.places.Autocomplete(address1Field, {
    componentRestrictions: { country: "us" },
    fields: ["address_components", "geometry"],
    types: ["address"],
  });


  //address1Field.focus();
  // When the user selects an address from the drop-down, populate the
  // address fields in the form.
  autocomplete.addListener("place_changed", fillInAddress);

}

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  //console.log(place);
  $('#latitude').val(place.geometry['location'].lat());
  $('#longitude').val(place.geometry['location'].lng());

  //$("#latitudeArea").removeClass("d-none");
  //$("#longtitudeArea").removeClass("d-none");

  let address1 = "";
  let postcode = "";
  let street = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components) {
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }


      case "postal_code": {
        postcode = component.long_name;
        break;
      }

    //   case "postal_code_suffix": {
    //     postcode = component.long_name;
    //     break;
    //   }

      case "locality":
        document.querySelector("#city").value = component.long_name;
        break;

      case "administrative_area_level_1": {
        document.querySelector("#state").value = component.short_name;
        break;
      }
      // case "country":
      //   document.querySelector("#country").value = component.long_name;
      //   break;
    }
  }
  postalField.value = postcode;
  address1Field.focus();

  $('#address_validate').val('false');

//   validateZip();
}


</script>
<script>
    $(document).ready(function () {
        // $('#postal_code').keyup(function(){
        //     var postal_code = $('#postal_code').val();
        //     $('#address_validate').val('false');
        //     validateZip();
        // });
        $('#address').keyup(function(){
            var address = $('#address').val();
            $.ajax({
                url: "{!! route('backend.addressValidation') !!}",
                type: 'POST',
                data: {
                    "_token": "{{ csrf_token() }}",
                    address: address
                },
                success: function(result) {
                    console.log(result);

                }
            });
        });
    });

    //check zip code
    function validateZip(){
        var zipcode = $('#zip').val();
        var state = $('#state').val();


        if(state != 'TX'){

            $('#ziperror').html("The address must be located in the Austin Police Department’s service area.");
            $("#address").addClass("border border-danger");
            $('#address_validate').val('true');
            $("#addserver").html("");
            zip_err  = true;
            return false;
        }


        if(zipcode==75217){
            $('#address_validate').val('true');
            $('#ziperror').html("The address must be located in the Austin Police Department’s service area.");
            $("#address").addClass("border border-danger");
            $("#addserver").html("");
            zip_err  = true;
            return false;
        }

        else if(zipcode==78626){
            $('#address_validate').val('true');
            $('#ziperror').html("The address must be located in the Austin Police Department’s service area.");
            $("#address").addClass("border border-danger");
            $("#addserver").html("");
            $('.submit-btn').prop('disabled', true);
            zip_err  = true;
            return false;
        }
        else{
            $('.submit-btn').prop('disabled', false);
        }

        if(zipcode == '') {
            $("#addserver").html("");
            $('#address_validate').val('true');
            $('#ziperror').html("The address must be located in the Austin Police Department’s service area.");
            $("#address").addClass("border border-danger");
            zip_err  = true;
            return false;
        }
    }
</script>
<script>
    $(document).ready(function() {
        //$(".shw_pickup").addClass('d-none');

        if ($('.pickup_d').prop('checked')) {
            $(".shw_pickup").removeClass('d-none');
        }
        $(".pickup_d").click(function(){
           $(".shw_pickup").removeClass('d-none');
        })
        $(".delivery_d").click(function(){
           $(".shw_pickup").addClass('d-none');
        })
    });
</script>

@endsection