@section('title','Edit Poll')
@include('layout.header')
@include('layout.sidebar')
<style>
    .error {
        color: red;
    }

    .input-group .form-control {
        padding-right: 2.5rem;
        /* Adjust this value as needed */
    }

    .input-group-text-start {
        background: transparent;
        border: none;
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        /* Adjust this value as needed */
    }

    .input-group-text-end {
        background: transparent;
        border: none;
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        /* Adjust this value as needed */
    }

    .input-group-append {
        position: relative;
        width: 0;
        height: 50px;
    }
</style>

<div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
    <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
        <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Edit Poll</h1>
        <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
            <li class="breadcrumb-item text-muted">
                <a href="{{ url('Poll')}}" class="text-muted text-hover-primary">Poll</a>
            </li>
            <li class="breadcrumb-item">
                <span class="bullet bg-gray-500 w-5px h-2px"></span>
            </li>
            <li class="breadcrumb-item text-muted">Edit Poll</li>
        </ul>
    </div>

</div>
<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-xxl">
        <div class="card mb-5 mb-xl-8">
            <div class="card-body py-3">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="english-tab" data-bs-toggle="tab" data-bs-target="#english"
                            type="button" role="tab" aria-controls="home" aria-selected="true">English</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="hindi-tab" data-bs-toggle="tab" data-bs-target="#hindi"
                            type="button" role="tab" aria-controls="profile" aria-selected="false">Hindi</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="gujarati-tab" data-bs-toggle="tab" data-bs-target="#gujarati"
                            type="button" role="tab" aria-controls="contact" aria-selected="false">Gujarati</button>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <form action="{{ url('Poll/edit-poll/'.$lang.'/'.encrypt($poll->id)) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="tab-pane fade show active" id="english" role="tabpanel" aria-labelledby="home-tab">
                            <div class="mt-5">
                                <div class="row mt-6">
                                    <div class="col-md-6 mt-3">
                                        <label for="title_en" class="form-label">Title<span class="error"> *
                                            </span></label>
                                        <textarea type="text" class="form-control" id="title_en" name="title_en"
                                            placeholder="Title">{{ $poll->title_en }}</textarea>
                                    </div>
                                    <div class="col-md-6 mt-3">
                                        <label for="start_date_en" class="form-label">Start<span class="error"> *
                                            </span></label>
                                        <div class="input-group">
                                            <input type="text" class="form-control " id="start_date_en"
                                                name="start_date_en" placeholder="Start Date" value="{{
                                               date('d-m-Y', strtotime($poll->start_date));
                                                 }}">
                                            <div class="input-group-append">
                                                <span class="input-group-text-start" id="text-start-en"><i
                                                        class="fas fa-calendar-alt"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mt-3">
                                        <label for="end_date_en" class="form-label">End Date<span class="error"> *
                                            </span></label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="end_date_en" name="end_date_en"
                                                placeholder="End Date" value="{{
                                             date('d-m-Y', strtotime($poll->end_date));
                                                 }}" />
                                            <div class="input-group-append">
                                                <span class="input-group-text-end" id="text-end-en"><i
                                                        class="fas fa-calendar-alt"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mt-3">
                                        <label for="status" class="form-label">Status</label>
                                        <div class="form-group mb-5" id="status_div_en">
                                            <select class="form-select" name="status" data-control="select2"
                                                data-placeholder="Select Status">
                                                <option></option>
                                                <option value="Active"      {{ $poll->status == "Active"  ? 'selected' : ''}}>Active</option>
                                                <option value="In-Active"   {{ $poll->status == "In-Active"  ? 'selected' : ''}}>In-Active</option>
                                          </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3 mt-3">
                                        <button type="submit" class="form-control btn btn-primary">Submit</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade d-none" id="hindi" role="tabpanel" aria-labelledby="profile-tab">
                            <div class="mt-5">
                                <div class="row mt-6">
                                    <div class="col-md-6 mt-3">
                                        <label for="title_hi" class="form-label">Title<span class="error"> *
                                            </span></label>
                                        <textarea type="text" class="form-control" id="title_hi" name="title_hi"
                                            placeholder="शीर्षक">{{ $poll->title_hi }}</textarea>
                                    </div>
                                    <div class="col-md-6 mt-3">
                                        <label for="start_date_hi" class="form-label">Start<span class="error"> *
                                            </span></label>
                                        <div class="input-group">
                                            <input type="text" class="form-control " id="start_date_hi"
                                                name="start_date_hi" placeholder="आरंभ करने की तिथि"
                                                value="{{ $start_date=date('d-m-Y', strtotime($poll->start_date));  }}" />
                                            <div class="input-group-append">
                                                <span class="input-group-text-start" id="text-start-hi"><i
                                                        class="fas fa-calendar-alt"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mt-3">
                                        <label for="end_date_hi" class="form-label">End Date<span class="error"> *
                                            </span></label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="end_date_hi" name="end_date_hi"
                                                placeholder="अंतिम तिथि" value="{{ $end_date=date('d-m-Y',
                                                strtotime($poll->end_date));
                                            }}" />
                                            <div class="input-group-append">
                                                <span class="input-group-text-end" id="text-end-hi"><i
                                                        class="fas fa-calendar-alt"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mt-3">
                                        <label for="status" class="form-label">Status</label>
                                        <div class="form-group mb-5" id="status_div_hi">
                                        </div>
                                    </div>
                                    <div class="col-md-3 mt-3">
                                        <button type="submit" class="form-control btn btn-primary">Submit</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade d-none" id="gujarati" role="tabpanel" aria-labelledby="contact-tab">
                            <div class="mt-5">
                                <div class="row mt-6">
                                    <div class="col-md-6 mt-3">
                                        <label for="title_gu" class="form-label">Title<span class="error"> *
                                            </span></label>
                                        <textarea type="text" class="form-control" id="title_gu" name="title_gu"
                                            placeholder="શીર્ષક">{{ $title_gu=$poll->title_gu;}}</textarea>
                                    </div>
                                    <div class="col-md-6 mt-3">
                                        <label for="start_date_gu" class="form-label">Start<span class="error"> *
                                            </span></label>
                                        <div class="input-group">
                                            <input type="text" class="form-control " id="start_date_gu"
                                                name="start_date_gu" placeholder="પ્રારંભ તારીખ" value="{{
                                                    $start_date=date('d-m-Y', strtotime($poll->start_date));
                                                }}" />
                                            <div class="input-group-append">
                                                <span class="input-group-text-start" id="text-start-gu"><i
                                                        class="fas fa-calendar-alt"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mt-3">
                                        <label for="end_date_en" class="form-label">End Date<span class="error"> *
                                            </span></label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="end_date_gu" name="end_date_gu"
                                                placeholder="અંતિમ તારીખ" value="{{
                                                    $end_date = date('d-m-Y', strtotime($poll->end_date));
                                                       }}" />
                                            <div class="input-group-append">
                                                <span class="input-group-text-end" id="text-end-gu"><i
                                                        class="fas fa-calendar-alt"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mt-3">
                                        <label for="status" class="form-label">Status</label>
                                        <div class="form-group mb-5" id="status_div_gu">
                                        </div>
                                    </div>
                                    <div class="col-md-3 mt-3">
                                        <button type="submit" class="form-control btn btn-primary">Submit</button>
                                    </div>
                                </div>
                            </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>


@include('layout.footer')
<script>
    $(document).ready(function() {
        var attributeValue = '{{$lang}}';
        if(attributeValue == 'English'){
            $('#english-tab').click();
        }
        if(attributeValue == 'Hindi'){
            $('#hindi-tab').click();
        }
        if(attributeValue == 'Gujarati'){
            $('#gujarati-tab').click();
        }
    }); 
    $("#recipe_category_form").validate({
    debug: true,
    rules: {
        category_name_en: {
            required: true,
            remote: {
                        url:"{{ url('RecipeCategory/is-available-recipe-category') }}",
                        type: "get",
                        async: false,
                        data: {
                            category_name_en: function() {
                            return $( "#category_name_en" ).val();
                                   }
                               }
                             }
        },
        category_name_hi: {
            required: true,
            remote: {
                        url:"{{ url('RecipeCategory/is-available-recipe-category') }}",
                        type: "get",
                        async: false,
                        data: {
                            category_name_en: function() {
                            return $( "#category_name_en" ).val();
                                   }
                               }
                             }
        },category_name_gu: {
            required: true,
            remote: {
                        url:"{{ url('RecipeCategory/is-available-recipe-category') }}",
                        type: "get",
                        async: false,
                        data: {
                            category_name_en: function() {
                            return $( "#category_name_en" ).val();
                                   }
                               }
                             }
        },
        status: {
            required: true
        }
    },
    messages: {
        category_name_en: {
            required: 'Category Name!!',
            remote:"Category alredy exist!!"
        },
        category_name_hi: {
            required: 'Category Name!!',
            remote:"Category alredy exist!!"
        },
        category_name_gu: {
            required: 'Category Name!!',
            remote:"Category alredy exist!!"
        },
        status: {
            required: 'Required'
        }
    },
    errorPlacement: function (error, element) {
        error.insertAfter(element);
    },
    submitHandler: function(form) {
        $(".submit").attr("disabled", true);
      form.submit();
    }

});
$('#english-tab').click(function(event) {
    $('#english').removeClass("d-none");
    $('#hindi').addClass("d-none");
    $('#gujarati').addClass('d-none');
    $('#english').addClass('d-block');
    $('#status_div_hi').empty();
    $('#status_div_gu').empty();
    $('#status_div_en').empty();
    $('#status_div_en').append('<select class="form-select" name="status" data-control="select2"data-placeholder="Select Status">'+
                            '<option></option>'+
                            '<option value="Active"  {{ $poll->status == "Active"  ? 'selected' : ''}}>Active</option>'+
                            '<option value="In-Active"   {{ $poll->status == "In-Active"  ? 'selected' : ''}}>In-Active</option>'+
                            '</select>')
});
$('#hindi-tab').click(function(event) {
    $('#hindi').removeClass("d-none");
    $('#hindi').addClass("d-block");
    $('#gujarati').addClass('d-none');
    $('#english').addClass('d-none');
    $('#status_div_en').empty();
    $('#status_div_hi').empty();
    $('#status_div_gu').empty();
    $('#status_div_hi').append('<select class="form-select" name="status" data-control="select2"data-placeholder="Select Status">'+
                            '<option></option>'+
                            '<option value="Active"  {{ $poll->status == "Active"  ? 'selected' : ''}}>Active</option>'+
                            '<option value="In-Active"   {{ $poll->status == "In-Active"  ? 'selected' : ''}}>In-Active</option>'+
                            '</select>')

});
$('#gujarati-tab').click(function(event) {
    $('#gujarati').removeClass("d-none");
    $('#hindi').addClass("d-none");
    $('#english').addClass('d-none');
    $('#gujarati').addClass('d-block');
    $('#status_div_en').empty();
    $('#status_div_hi').empty();
    $('#status_div_gu').empty();
    $('#status_div_gu').append('<select class="form-select" name="status" data-control="select2"data-placeholder="Select Status">'+
                            '<option></option>'+
                            '<option value="Active"  {{ $poll->status == "Active"  ? 'selected' : ''}}>Active</option>'+
                            '<option value="In-Active"   {{ $poll->status == "In-Active"  ? 'selected' : ''}}>In-Active</option>'+
                            '</select>')
});

$(document).ready(function() {
        // Get the current date
        // var currentDate = moment().format('DD-MM-YYYY');
        // // Set the current date in the date input field
        // $('#start_date_en').val(currentDate);
        // $('#start_date_hi').val(currentDate);
        // $('#start_date_gu').val(currentDate);
        // // Initialize DateRangePicker
        $('#start_date_en, #start_date_hi, #start_date_gu').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            autoApply: true,
            minDate: moment().startOf('day'),
            locale: {
                format: 'DD-MM-YYYY'
        }});
        // }, function(start, end, label) {
        //     // Set the selected date in the input field
        //     $('#start_date_en').val(start.format('DD-MM-YYYY'));
        //     $('#start_date_hi').val(start.format('DD-MM-YYYY'));
        //     $('#start_date_gu').val(start.format('DD-MM-YYYY'));
        // });

        $('#end_date_en,#end_date_hi,#end_date_gu').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            autoApply: true,
            minDate: moment().startOf('day'),
            locale: {
                format: 'DD-MM-YYYY'
            }
        });

        $('#text-start-en').on('click', function() {
            $('#start_date_en').focus();
        });
        $('#text-end-en').on('click', function() {
            $('#end_date_en').focus();
        });
        $('#text-start-hi').on('click', function() {
            $('#start_date_hi').focus();
        });
        $('#text-end-hi').on('click', function() {
            $('#end_date_hi').focus();
        });
        $('#text-start-gu').on('click', function() {
            $('#start_date_gu').focus();
        });
        $('#text-end-gu').on('click', function() {
            $('#end_date_gu').focus();
        });
    });

</script>