@extends('layouts.main_investor')
@section('content')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>

{{-- {{dd($car)}} --}}
    <!-- Desktop Breadcrumb -->
    <section class="py-md-4 py-2">
        <div class="container">
            <nav class="breadcrumb-container" aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="{{ route('invst.home') }}"> @lang('site.home') </a>
                    </li>


                    <li class="breadcrumb-item" aria-current="page">
                        <a href="javascript:void(0)"> @lang('site.ad') </a>
                    </li>


                    <li class="breadcrumb-item text-gray-4" aria-current="page">
                        @lang('site.add_external_booking')
                    </li>
                </ol>
            </nav>
        </div>
    </section>
    <section class="add-booking-investor mb-5 mt-lg-0 mt-4">
        <div class="container d-flex justify-content-center">
            <div class="booking_investor_card">
                <form action="{{ route('invst.add_extcarbooking') }}" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-12">
                            <h2 class="mb-4 text-gray "> @lang('site.add_external_booking') </h2>
                        </div>
                        <div class="col-lg-8">
                            @if (is_null($car->fixed_price))
                             
                                <div class="form-group mb-4">
                                  <label for="">
                                    @lang('site.date_of_arrival')
                                    <span class="text-danger">( @lang('site.mandatory') )</span>
                                </label>
                                  <div class="position-relative">
                                    <input placeholder=" @lang('site.date_of_arrival') " type="text" name="delivery_date"
                                        id="datepicker"  class="form-control calendar " required />
                                    <span class="date-icon">
                                        <i class="fal fa-calendar-alt"></i>
                                    </span>
                                </div> 
                                <br>
                                    <label for="">
                                        @lang('site.day_numbers')
                                        <span class="text-danger">( @lang('site.mandatory') )</span>
                                    </label>
                                    <input type="hidden" name="amount1" id="amount1" value="" />
                                    <input type="hidden" name="day_num" id="day_num" value="" />
                                    <input type="hidden" name="car_id" value="{{ $car->id }}" />
                                    <input type="hidden" name="user_id" id="user_id" value="{{$car->user_id}}">
                                    <input type="hidden" name="total_price" id="total_price" value="" />                       
                                    <input type="hidden" name="day_count" id="day_count" value="" />
                                    <select class="select2" name="changed_price" id="changed_price">
                                        <option value="0">@lang('site.select')</option>
                                        @for ($x = 0; $x <= count($car->changed_price->price) - 1; $x++)
                                            <option value="{{ $car->changed_price->price[$x] }}">
                                                {{ $car->changed_price->day_num[$x] }}</option>
                                        @endfor

                                    </select>


                                </div>
                            @endif
                            @if (!is_null($car->fixed_price))
                                <div class="form-group mb-4">
                                    <label for="">
                                        @lang('site.date_of_arrival')
                                        <span class="text-danger">( @lang('site.mandatory') )</span>
                                    </label>
                                    <input type="hidden" name="amount" id="amount" value="{{ $car->fixed_price }}" />
                                    <input type="hidden" name="fixed_price" id="fixed_price" value="{{ $car->fixed_price }}" />
                                    <input type="hidden" name="car_id" value="{{ $car->id }}" />
                                    <input type="hidden" name="user_id" id="user_id" value="{{$car->user_id}}">
                                    <input type="hidden" name="total_price" id="total_price" value="" />

                                    <input type="hidden" name="day_count" id="day_count" value="" />

                                    <div class="position-relative">
                                        <input placeholder=" @lang('site.date_of_arrival') " type="text" name="delivery_date"
                                            id="datepicker"  class="form-control calendar " required />
                                        <span class="date-icon">
                                            <i class="fal fa-calendar-alt"></i>
                                        </span>
                                    </div>      
                                </div>
                                <div class="form-group mb-4">
                                    <label for="">
                                        @lang('site.date_of_departure')
                                        <span class="text-danger">( @lang('site.mandatory') )</span>
                                    </label>
                                    <div class="position-relative">
                                        <input placeholder=" @lang('site.date_of_departure') " type="text" name="reciept_date"
                                            id="datepicker1"  class="form-control calendar  mb-2 "
                                            onchange="get_diff()"  required/>
                                        <span class="date-icon">
                                            <i class="fal fa-calendar-alt"></i>
                                        </span>
                                    </div>

                                </div>
                            @endif

                            <div class="form-group mb-4">
                                <label for="">
                                    @lang('site.client_name')
                                    <span class="text-danger">( @lang('site.mandatory') )</span>
                                </label>
                                <input placeholder=" @lang('site.write_your_name') " name="customer_name" type="text"
                                    required/>
                            </div>
                            <div class="form-group mb-4">
                                <label for="">
                                    @lang('site.client_phone_number')
                                    <span class="text-danger">( @lang('site.mandatory') )</span>
                                </label>
                                <input placeholder=" @lang('site.write_your_phone_number') " name="customer_phone" type="number"
                                   required />
                            </div>

                        </div>
                        <div class="col-lg-4">
                            <div class="ads_investor_card all-days-card mb-3">
                                <div class="booking-days text-center mb-3">
                                    @lang('site.daynumber') :<span id="days"></span>
                                </div>
                                <div class="booking-days text-center mb-3">
                                    @lang('site.total_price') :<span id="total"></span>
                                </div>
                                <div class="text-center">
                                    <a href="{{ route('invst.conditions') }}"
                                        class="cancel-booking-link">@lang('site.Reservation and cancellation policy')</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 mb-lg-0 mb-3">
                            <label for="" class="pb-2 ads-card-lbl">
                                @lang('site.add_your_inquiry')
                                <span class="text-danger">( @lang('site.optional') )</span>
                            </label>

                            <div class="form-group">
                                <textarea class="form-control txtarea-ads p-3 mt-2" placeholder=" @lang('site.add_whatever_you_want') " rows="6"
                                    name="note"></textarea>
                            </div>
                            <div class="d-flex justify-content-center mt-lg-5 mt-0">
                                <div class="booking-now-btn  d-flex justify-content-center align-items-center">
                                    <button type="submit" class="btn"><i class="fa fa-plus p-1"></i>
                                        @lang('site.add')</button>
                                </div>
                            </div>
                        </div>


                    </div>
                </form>
                <script>
                  $(document).ready(function() {
                      $('#datepicker').datepicker({
                          changeYear: false,
                          dateFormat: "yy-m-d",
                          minDate: 0
                      });
                      $('#datepicker1').datepicker({
                          changeYear: false,
                          dateFormat: "yy-m-d",
                          minDate: 0
                      });
                  });
                  $(document).ready(function() {
                      $('#datepicker').change(function() {
                          const oneDayInMilliseconds = 1000 * 60 * 60 * 24;
                          startDate = $(this).datepicker('getDate');
                          startDate.setTime(startDate.getTime() + oneDayInMilliseconds);
                          // alert(startDate);
                          $("#datepicker1").datepicker("option", "minDate", startDate);
                      });
                  });
              </script>
            </div>
        </div>
    </section>

@endsection


@section('scripts')
    <script>
        $('#changed_price').on('change', function(e) {
            var price = e.target.value;
            // alert(price);
            var day_num = $("#changed_price option:selected").text();
            // alert(day_num);
            $("#total").text(price);
            $("#amount1").val(price);
            $("#day_num").val(day_num);
            $("#day_count").val(day_num);
            $("#total_price").val(price);
            $("#days").text(day_num);



        })


        function get_diff()
        {
            var start = $('#datepicker').val();
            var end = $('#datepicker1').val();

            var start = new Date(start);
            var end = new Date(end);

            var diffDate = (end - start) / (1000 * 60 * 60 * 24);
            var days = Math.round(diffDate);

            $("#days").text(days);
            var amount = $('#amount').val();
            if (amount) {

                var total = amount * days;

                $("#total").text(total);

                $("#total_price").val(total);
                $("#day_count").val(days);
            } else {
                var amount1 = $('#amount1').val();
                var total = amount1;

                $("#total").text(total);

                $("#total_price").val(total);
                $("#day_count").val(day_num);

            }

        }
    </script>
@endsection