@extends('layouts.master')

@section('page_title', "{$display_term}")
@section('title', 'Add Target User Wise')
@section('main_item', "{$display_term}")
@section('sub_item', ' Add Target')

@section('content')
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <h4 class="mt-0 header-title">Add Targert User Wise</h4>
                <p class="text-muted mb-3"></p>
                <form class="form-parsley" method="POST" action="{{ url('reseller/store') }}">
                    @csrf
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold">User</label>
                                <select class="form-control select2" id="user_id" name="user_id" required="">
                                    <option value="">Select User</option>
                                    @foreach ($users as $user)
                                        @php
                                            $status = App\TargetSelling::select('user_id', 'target_Expiration')
                                                ->where('user_id', $user->id)
                                                ->first();
                                        @endphp
                                        <option value="{{ $user->id }}">
                                            {{ $user->username }}</option>
                                    @endforeach
                                </select>
                                @if (!empty($status->target_Expiration))
                                    {{ $status->target_Expiration != 'Expir' ? '' : 'disabled' }}
                                @endif
                            </div>
                        </div>
                        @foreach ($users as $user)
                            @php
                                $status = App\TargetSelling::select('user_id', 'target_Expiration')
                                    ->where('user_id', $user->id)
                                    ->first();
                            @endphp
                        @endforeach
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold">Target Type</label>
                                <select class="form-control select2" id="target_type" name="target_type" required>
                                    <option value="">Select User</option>
                                    <option id="dy" value="day_target" class="day">Day Target</option>
                                    <option id="wk" value="weekly_target">
                                        Weekly Target</option>
                                    <option id="mn" value="monthly_target"
                              
                                        >
                                        Monthly Target</option>
                                        
                                </select>

                                          {{-- @if (!empty($status->target_Expiration)) {{ $status->target_Expiration != 'Expir' ? '' : 'disabled' }}  @endif --}}
                                <span id="day" style="color: red;"><b>Day Target is Already assigned</b></span><br>
                                <span id="weekly" style="color: red;"><b>Weekly Target is Already assigned</b></span><br>
                                <span id="mouthly" style="color: red;"><b>Monthly Target is Already
                                        assigned</b></span><br>
                            </div>
                        </div>
                        <div class="col-md-4" id="target_completed_price">
                            <div class="form-group">
                                <label style="font-weight: bold" for="landmark">Target Completed Price</label>
                                <input type="number" class="form-control" placeholder="Target Completed Price"
                                    id="target_completed_price" name="target_completed_price">
                            </div>
                        </div>
                        <div class="col-md-4" id="target_not_completed_price">
                            <div class="form-group">
                                <label style="font-weight: bold" for="landmark">Target Not Completed Price</label>
                                <input type="number" class="form-control" placeholder="Target Not Completed Price"
                                    id="target_not_completed_price" name="target_not_completed_price">
                            </div>
                        </div>
                        <div class="col-md-4" id="return_order_price">
                            <div class="form-group">
                                <label style="font-weight: bold" for="landmark">Return Order Target Price</label>
                                <input type="number" class="form-control" placeholder="Return Order Price Price"
                                    id="return_order_price" name="return_order_price">
                            </div>
                        </div>
                        <div class="col-md-4" id="start_date">
                            <div class="form-group">
                                <label style="font-weight: bold" for="date-format" style="font-weight: bold">Start
                                    Date</label>
                                <input type="date" class="form-control mdate" placeholder="" id="mdate"
                                    name="start_date">
                            </div>
                        </div>
                        <div class="col-md-4" id="end_date">
                            <div class="form-group">
                                <label style="font-weight: bold" for="date-format" style="font-weight: bold">End
                                    Date</label>
                                <input type="date" class="form-control end_date @error('end_date') is-invalid @enderror"
                                    placeholder="" id="end_date" name="end_date">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold" for="ref_no" style="font-weight: bold">Ref ID</label>
                                <input type="text" class="form-control" id="ref_no" name="ref_no">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold" for="landmark">Target pieces QTY</label>
                                <input type="number" class="form-control" placeholder="Target pieces QTY"
                                    id="target_pieces_qty" name="target_pieces_qty" required="">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 text-right">
                            <button type="submit" class="btn btn-primary px-5 py-2" id="btn_save">Save</button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
@endsection
@section('scripts')
    <script>

        // $(document).ready(function () {
        //         // Event listener for the change event on the select element
        //         $('#user_id').on('change', function () {
        //             // Get the selected value
        //             var selectedUserId = $(this).val();

        //             // Log or use the selected value as needed
        //             console.log('Selected User ID:', selectedUserId);
        //         });
        //     });

        $('#mdate').val(moment(new Date()).format("YYYY-MM-DD"));
        $('#end_date').val(moment(new Date()).format("YYYY-MM-DD"));

        $('#day').prop('hidden', true);
        $('#mouthly').prop('hidden', true);
        $('#weekly').prop('hidden', true);
        $(document).on('change', '#user_id', function() {
            var user_id = $(this).val();
            let url = "{{ route('get_user_deatils') }}";
            $.ajax({
                method: 'POST',
                url: url,
                data: {
                    "_token": "{{ csrf_token() }}",
                    'user_id': user_id,
                },
                success: function(response) {
                    $('#user_id_input').val(response.user_id);
                    var user_id_input_value = $('#user_id_input').val();
                    if (response.html == 'day') {
                        // $('#btn_save').prop('disabled', true);
                        $('#day').prop('hidden', false);
                    }
                    if (response.html == 'none_day') {
                        // $('#btn_save').prop('disabled', false);
                        $('#day').prop('hidden', true);
                    }
                    if (response.weekly == 'week') {
                        $('#weekly').prop('hidden', false);
                    }
                    if (response.weekly == 'none_week') {
                        $('#weekly').prop('hidden', true);
                    }
                    if (response.mothly == 'mounth') {
                        $('#mouthly').prop('hidden', false);
                    }
                    if (response.mothly == 'none_mounth') {
                        $('#mouthly').prop('hidden', true);
                    }
                }
            });
        });
        $(document).on('change', '#target_type', function() {
            var target_type = $('#target_type').val();
            if (target_type == 'day_target') {
                $('#start_date').prop('hidden', true);
                $('#end_date').prop('hidden', true);
                $('#target_not_completed_price').prop('hidden', false);
                $('#target_completed_price').prop('hidden', false);
                $('#return_order_price').prop('hidden', false);
            }
            if (target_type == 'weekly_target') {
                $('#start_date').prop('hidden', true);
                $('#end_date').prop('hidden', true);
                $('#target_not_completed_price').prop('hidden', true);
                $('#target_completed_price').prop('hidden', true);
                $('#return_order_price').prop('hidden', true);
            }
            if (target_type == 'monthly_target') {
                $('#start_date').prop('hidden', false);
                $('#end_date').prop('hidden', false);
                $('#target_not_completed_price').prop('hidden', true);
                $('#target_completed_price').prop('hidden', true);
                $('#return_order_price').prop('hidden', true);
            }
        });
        $(document).ready(function() {
            var clicks = 0;
            $('#btn_save').click(function() {
                clicks++;
                if (clicks === 2) {
                    $(this).prop('disabled', true);
                }

            });
        });
        // setTimeout(function() {
        //     $('#target_type').prop('disabled', false);
        // }, 10000);
    </script>
@endsection