<div class="modal fade" id="package_change_modal">
    <div class="modal-dialog">

        <div class="modal-content" style="width: 750px">
            <div class="modal-header">
                <h4 class="text-center">Package Change </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <form action="{{ route('userPackageChange') }}" method="POST" class="flex flex-wrap">


                    @csrf
                    <input type="hidden" name="id" id="package_change_client_id">
                    <input type="hidden" id="uuid" name="uuid" value="{{createUUID()}}">
                    <div class="row">
                        <div class="col-md-6">
                            <label for="name">Name</label>
                            <input type="text" name="name" id="package_change_client_name" class="form-control"
                                readonly>


                        </div>
                        <div class="col-md-6">
                            <label for="package">Package</label>
                            <select name="package_id" id="package_change_package" class="form-control" required>
                                <option value="">Select</option>

                            </select>


                        </div>
                    </div>


                    <button type="submit" class="btn btn-primary float-right mt-2 packageChange">Change
                        Package</button>



                </form>
            </div>

            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>


        </div>

    </div>
</div>

<div class="modal fade" id="schedule_package_change_modal">
    <div class="modal-dialog">

        <div class="modal-content" style="width: 750px">
            <div class="modal-header">
                <h4 class="text-center">Schedule A Date To Package Change </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <form action="{{ route('scheduleClientPackageChange') }}" method="POST" class="flex flex-wrap">
                    <p>Note : Package Change will be execute on selected date 11:50 P.M</p>

                    @csrf
                    <input type="hidden" name="id" id="schedule_package_change_client_id">

                    <div class="row">
                        <div class="col-md-6">
                            <label for="name">Name</label>
                            <input type="text" name="name" id="schedule_package_change_client_name" class="form-control"
                                readonly>


                        </div>
                        <div class="col-md-6">
                            <label for="package">Package</label>
                            <select name="schedule_package_id" id="schedule_package_change_package" class="form-control" required>
                                <option value="">Select</option>

                            </select>


                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="flex-1 block text-gray-700 text-sm font-bold mb-2" for="from_date">
                                    Select Date
                                </label>
                                <div class="input-group date" id="searchTo" data-target-input="nearest">
                                    <input type="text" name="schedule_date" id="schedule_date"
                                        class="form-control form-control-sm datetimepicker-input input-group-append"
                                        data-toggle="datetimepicker" data-target="#searchTo" autocomplete="off">

                                </div>
                            </div>


                        </div>
                    </div>


                    <button type="submit" class="btn btn-primary float-right mt-2 packageChange">Change
                        Package</button>



                </form>
            </div>

            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>


        </div>

    </div>
</div>
