@extends('user.layouts.main')
@push('style')
<!-- Flatpickr CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

@endpush
@section('contents')
    <div class="dashboard_wrapper border_start p-3">
        <div class="card border-0">
            <div class="user_dashboard">
                <div class="car">
                    <div class="card-header bg-white">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h5 class="card-title my-2"> Start New Escrow </h5>
                            </div>
                            <div class="media m-0">
                                <img class="mr-1 align-self-center" src="{{asset( $ad->thumbnail) }}" alt="Seller Profile">
                                <div class="media-body">
                                    <h5 class="mt-0 mb-1"> {{ $ad->title }} </h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="user_wrapper">
                            <form action="{{ route('user.escrow.store' ,$ad->id) }}" method="post" enctype="multipart/form-data">
                                @csrf
                                <div class="row">

                                    <input type="hidden" name="ad_id" id="ad_id" value="{{ $ad->id }}">
                                    <input type="hidden" name="participant_id" id="participant_id" value="{{ auth()->user()->id }}">
                                    <input type="hidden" name="seller_id" id="seller_id" value="{{ $ad->user_id }}">

                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">The Seller’s email address <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <input id="email" class="form-control" placeholder="Email Address" value="{{ $ad->email }}" readonly required>
                                            <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="The buyer will use this email address to sign in to SafeguKShd and view the transaction." data-bs-original-title="" title="">
                                        <i class="fa-solid fa-circle-question"></i>
                                    </span>
                                        </div>
                                    </div>
                                    {{-- <div class="col-md-6">
                                        <label class="form-label">The Seller’s phone number (if known)</label>
                                        <div class="input-group mb-3">
                                            <input type="tel" class="form-control" id="phone_number" value="{{ $ad->phone }}" placeholder="Phone Number" readonly required>
                                            <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="This number will be used to inform the seller about a new transaction." data-bs-original-title="" title="">
                                        <i class="fa-solid fa-circle-question"></i>
                                    </span>
                                        </div>
                                    </div> --}}

                                    <div class="col-md-6">
                                        <label class="form-label">The Seller’s phone number (if known)</label>
                                        <div class="input-group mb-3">
                                            <span class="input-group-text">+254</span>
                                            <input type="tel" class="form-control" id="phone_number" value="{{ $ad->phone }}" placeholder="Phone Number" readonly required>
                                            <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="This number will be used to inform the seller about a new transaction.">
                                                <i class="fa-solid fa-circle-question"></i>
                                            </span>
                                        </div>
                                    </div>


                                        <div class="col-md-6 mb-3">
                                            <label class="form-label">Price(KSh)<span class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <input type="number" class="form-control" name="price" id="price" value="{{ $ad->price }}" placeholder="0.00 KSh" onkeyup="updateEscrowFee()" required>
                                            </div>
                                            <label class="form-label">
                                                <p class="text-danger ml-5" id="escrow-fee-message">
                                                    Escrow Fee is {{ $fee->escrow_fee }}%, The fee will be KSh {{ $ad->price * $fee->escrow_fee / 100 }}
                                                </p>
                                            </label>
                                        </div>

                                        <div class="col-md-6 mb-3">
                                            <label class="form-label">Buyer confirmation due date <span class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <input type="datetime" class="form-control datepick" name="confirmation_due_date" id="datepick" value="" placeholder="dd-mm-yy" required>
                                                <span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="The date until which transaction is available for approval by participant">
                                                    <i class="fa-solid fa-circle-question"></i>
                                                </span>
                                            </div>
                                        </div>




                                    {{-- <div class="col-md-6 mb-3">
                                        <label class="form-label">Price in KSh <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <input type="number" class="form-control" name="price" id="price" value="{{ $ad->price }}" placeholder="0.00 KSh ">
                                        </div>
                                        <label class="form-label">
                                            <p class="text-danger ml-5">Escrow Fee is {{ $fee->escrow_fee }}%, The fee will be KSh {{ $ad->price* $fee->escrow_fee/100 }}</p>
                                        </label>
                                    </div> --}}

                                    <div class="col-12 mb-3">
                                        <label class="form-label">Who will pay the Escrow fee?</label>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="fee_pay_strategy" value="Buyer" id="buyer" checked="">
                                            <label class="form-check-label" for="buyer">
                                                Buyer
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" id="seller" type="radio" name="fee_pay_strategy" value="Seller">
                                            <label class="form-check-label" for="seller">
                                                Seller
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="fee_pay_strategy" value="Seller and Buyer" id="sellerorbuyer">
                                            <label class="form-check-label" for="sellerorbuyer">
                                                50% Buyer / 50% Seller
                                            </label>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        {{-- <input  type="hidden" name="inspection_period" value="1"> --}}
                                        {{-- <label class="form-label">Length of inspection period (Calendar days)</label>
                                        <div class="input-group mb-3 select2-input-inspection">
                                            <select name="inspection_period" id="inspection_period" class="form-control">
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                                <option value="10">10</option>
                                                <option value="11">11</option>
                                                <option value="12">12</option>
                                                <option value="13">13</option>
                                                <option value="14">14</option>
                                                <option value="15">15</option>
                                                <option value="16">16</option>
                                                <option value="17">17</option>
                                                <option value="18">18</option>
                                                <option value="19">19</option>
                                                <option value="20">20</option>
                                                <option value="21">21</option>
                                                <option value="22">22</option>
                                                <option value="23">23</option>
                                                <option value="24">24</option>
                                                <option value="25">25</option>
                                                <option value="26">26</option>
                                                <option value="27">27</option>
                                                <option value="28">28</option>
                                                <option value="29">29</option>
                                                <option value="30">30</option>
                                            </select>
                                        </div> --}}
                                    </div>
                                    <div class="conditional_inputs">
                                        <div class="cargo_field d-none" id="cargo_field">
                                            <div class="col-12 mb-3">
                                                <label class="form-label">Who will pay for the shipping?<span class="text-danger">*</span></label>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="shipping_cost_carry" value="Buyer" id="shipping_buyer" checked="">
                                                    <label class="form-check-label" for="shipping_buyer">
                                                        Buyer
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="shipping_cost_carry" value="Seller" id="shipping_seller">
                                                    <label class="form-check-label" for="shipping_seller">
                                                        Seller
                                                    </label>
                                                </div>
                                            </div>
                                            {{-- <div class="col-md-6">
                                                <label class="form-label">Shipping cost in KSh <span class="text-danger">*</span></label>
                                                <div class="input-group mb-3">
                                                    <input type="number" class="form-control" name="shipping_cost" id="shipping_cost" placeholder="0.00">
                                                </div>
                                            </div> --}}
                                        </div>

                                        <div class="col-12 mb-3" data-input_id="7">
                                            <label class="form-label">Title <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="title" id="title" value="{{$ad->title}}" placeholder="Title" readonly>
                                        </div>
                                    </div>
                                    <div class="col-12 mb-3">
                                        <label class="form-label">Describe the product you are buying (up to 500
                                            characters)
                                            <span class="text-danger">*</span>
                                            <p class="text-danger ml-5">Please make sure this is an accurate
                                                description of the goods. This description will be referenced in the
                                                instance of a dispute</p>
                                        </label>
                                        <textarea type="text" class="form-control" name="description" id="description" placeholder="Description" style="height: 100px;" required></textarea>
                                    </div>

                                    <div class="col-12">
                                        <div class="mb-3 transaction_btn text-center mt-4">
                                            {{--<button type="submit" class="btn btn-primary border-0"> Start Transaction </button>--}}
                                            {{-- <a href="{{route('user.escrow.index')}}" class="btn btn-primary border-0 text-decoration-none"> Start Transaction </a> --}}
                                            <button class="btn btn-primary border-0 text-decoration-none" type="submit">Start Transaction</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    function updateEscrowFee() {
        var price = parseFloat(document.getElementById('price').value) || 0; // Get price or default to 0 if empty
        var escrowFeePercent = {{ $fee->escrow_fee }}; // Assuming the fee percentage is available from PHP

        // Calculate the escrow fee
        var escrowFee = price * escrowFeePercent / 100;

        // Update the message with the new escrow fee calculation
        document.getElementById('escrow-fee-message').innerHTML =
            `Escrow Fee is ${escrowFeePercent}%, The fee will be KSh ${escrowFee.toFixed(2)}`;
    }
</script>
<script>
  document.addEventListener("DOMContentLoaded", function () {
            flatpickr("#datepick", {
                dateFormat: "d-m-Y",
                minDate: "today",
                enableTime: false,
            });
        });

        flatpickr("#servicetime", {
            enableTime: true,
            noCalendar: true,
            dateFormat: "h:i K", // 12-hour format with AM/PM
            time_24hr: false     // Set true if you prefer 24-hour format
        });

        $(document).ready(function() {
            const $description = $('#description');
            const $charCount = $('#charCount');
            const maxLength = 500;

            $description.on('input', function() {
                let currentLength = $description.val().length;

                // Trim excess characters
                if (currentLength > maxLength) {
                    $description.val($description.val().substring(0, maxLength));
                    currentLength = maxLength;
                }

                // Update the character count display
                $charCount.text(`(${currentLength} / ${maxLength} characters)`);

                // Change color if reaching the limit
                if (currentLength >= maxLength) {
                    $charCount.removeClass('text-muted').addClass('text-danger');
                } else {
                    $charCount.removeClass('text-danger').addClass('text-muted');
                }
            });
        });

</script>
@endpush