@extends('layouts.admin')

@section('title')
    Ananas | Add New Membership
@endsection

@section('Memberships')
    active {{session('sidebar_color')}}
@endsection

@section('breadcrumb')
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
            <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="javascript:;">Pages</a></li>
            <li class="breadcrumb-item text-sm text-dark active" aria-current="page">Add New Membership</li>
        </ol>
        <h6 class="font-weight-bolder mb-0">Add New Membership</h6>
    </nav>
@endsection

@section('style')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    <style>
        .fixed-plugin .badge {
            border: 1px solid #fff;
            border-radius: 50%;
            cursor: pointer;
            display: inline-block!important;
            height: 32px;
            margin-right: 5px;
            position: relative;
            width: 32px;
            transition: all 0.2s ease-in-out;
        }

        .containerXX {
            display: block;
            position: relative;
            padding-left: 35px;
            margin-bottom: 12px;
            margin-right: 15px;
            cursor: pointer;
            width: auto;
            font-size: inherit;
            white-space: nowrap;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* Hide the browser's default checkbox */
        .containerXX input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        /* Create a custom checkbox */
        .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 25px;
            width: 25px;
            background-color: #eee;
            margin-left: 6px;
        }

        /* On mouse-over, add a grey background color */
        .containerXX:hover input ~ .checkmark {
            background-color: #ccc;
        }

        /* When the checkbox is checked, add a blue background */
        .containerXX input:checked ~ .checkmark {
            background-color: #2196F3;
        }

        /* Create the checkmark/indicator (hidden when not checked) */
        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        /* Show the checkmark when checked */
        .containerXX input:checked ~ .checkmark:after {
            display: block;
        }

        /* Style the checkmark/indicator */
        .containerXX .checkmark:after {
            left: 9px;
            top: 5px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }
        .form-select {
            width: 99%!important;
        }
    </style>
@endsection

@section('content')

    <div class="row marginT1">
        <div class="col-md-12 col-sm-12 col-xxl-8 offset-xxl-2 col-xl-10 offset-xl-1 ">

            @if(true)
                <div class="card  mt-7">

                <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                    <div class="{{session('sidebar_color')}}  border-radius-lg pt-4 pb-3">
                        <h6 class="text-white text-capitalize ps-3">Membership</h6>
                    </div>
                </div>
                <div class="card-body px-0 pb-2">
                    <form method="post" action="{{route('membership.store')}}" >
                        @csrf
                        <div class="d-flex col-12 row ms-1">
                            <div class="form-group col-lg-8 col-md-8 col-sm-12 col-xs-12 pe-0">
                                <label for="title">Membership title</label>
                                <input type="text" class="form-control" id="title" name="title" aria-describedby="title"  required>
                            </div>
                            <div class="form-group col-lg-4 col-md-4 col-sm-12 col-xs-12 ps-0">
                                <label for="month">Membership month</label>
                                <input type="text" class="form-control" id="month" name="month" aria-describedby="month"  required>
                            </div>
                        </div>
                        <div class="d-flex col-12 row ms-1">
                            <div class="form-group col-lg-8 col-md-8 col-sm-12 col-xs-12 ">
                                <label for="currency">Currency</label>
                                <select class="form-select" id="currency" name="currency" aria-label="Default select example" required>
                                    <option value="usd">USD</option>
                                    <option value="rial">Rial</option>
                                </select>
                            </div>
                            <div class="form-group col-lg-4 col-md-4 col-sm-12 col-xs-12 ps-0">
                                <label for="type">Type</label>
                                <select class="form-select" id="type" name="type" aria-label="Default select example" required>
                                    <option value="subscription">subscription</option>
                                    <option value="invoice">invoice</option>
                                </select>
                            </div>
                        </div>
                        <div class="d-flex col-12 row ms-1 mt-3">
                            <div class="form-group col-lg-8 col-md-8 col-sm-12 col-xs-12 pe-0">
                                <label for="price">Membership Price</label>
                                <input type="text" class="form-control" id="price" name="price" aria-describedby="price"  required>
                            </div>
                            <div class="form-group col-lg-4 col-md-4 col-sm-12 col-xs-12 ps-0">
                                <label for="popular">Popular</label>
                                <select class="form-select" id="popular" name="popular" aria-label="Default select example" required>
                                    <option value="0">No</option>
                                    <option value="1">Yes</option>
                                </select>
                            </div>
                        </div>
                        <div class="d-flex col-12 row ms-1 mt-3">
                            <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12 pe-0">
                                <label for="price_rial">Access</label>
                            </div>
                            <div class="form-group d-flex col-lg-12 col-md-12 col-sm-12 col-xs-12 pe-0" style="flex-wrap: wrap;">
                                <label class="containerXX">آزمون تعیین سطح
                                    <input type="hidden" name="placement_test_title" value="آزمون تعیین سطح">
                                    <input type="hidden"   value='off' name="placement_test" >
                                    <input type="checkbox" value='on' name="placement_test" checked="checked">
                                    <span class="checkmark"></span>
                                </label>
                                <label class="containerXX">دسترسی به ویدیوهای آیلتس تافل
                                    <input type="hidden" name="IELTS_TOEFL_title" value="دسترسی به ویدیوهای آیلتس تافل">
                                    <input type='hidden'   value='off' name="IELTS_TOEFL">
                                    <input type="checkbox" value='on' name="IELTS_TOEFL">
                                    <span class="checkmark"></span>
                                </label>
                                <label class="containerXX">دسترسی به ویدیوهای گرامر
                                    <input type="hidden" name="grammer_title" value="دسترسی به ویدیوهای گرامر">
                                    <input type="hidden"   value='off' name="grammer">
                                    <input type="checkbox" value='on' name="grammer">
                                    <span class="checkmark"></span>
                                </label>
                                <label class="containerXX">دسترسی به ویدیوهای موضوعی
                                    <input type="hidden" name="thematic_videos_title" value="دسترسی به ویدیوهای موضوعی">
                                    <input type="hidden"   value='off' name="thematic_videos" checked="checked">
                                    <input type="checkbox" value='on' name="thematic_videos" checked="checked">
                                    <span class="checkmark"></span>
                                </label>
                            </div>

                            <div class="form-group d-flex col-lg-12 col-md-12 col-sm-12 col-xs-12 pe-0" style="flex-wrap: wrap;">
                                <label class="containerXX">دسترسی به چت های عمومی
                                    <input type="hidden" name="public_chat_title" value="دسترسی به چت های عمومی">
                                    <input type="hidden"   value='off' name="public_chat">
                                    <input type="checkbox" value='on' name="public_chat">
                                    <span class="checkmark"></span>
                                </label>
                                <label class="containerXX">دسترسی به چت های موضوعی
                                    <input type="hidden" name="thematic_chats_title" value="دسترسی به چت های موضوعی">
                                    <input type="hidden"   value='off' name="thematic_chats">
                                    <input type="checkbox" value='on' name="thematic_chats">
                                    <span class="checkmark"></span>
                                </label>
                                <label class="containerXX">دسترسی به کوییزهای Elementary
                                    <input type="hidden" name="elementary_quiz_title" value="دسترسی به کوییزهای Elementary">
                                    <input type="hidden"   value='off' name="elementary_quiz">
                                    <input type="checkbox" value='on' name="elementary_quiz" checked="checked">
                                    <span class="checkmark"></span>
                                </label>
                                <label class="containerXX">دسترسی به همه کوییزها
                                    <input type="hidden" name="all_quiz_title" value="دسترسی به همه کوییزها">
                                    <input type="hidden"   value='off' name="all_quiz" >
                                    <input type="checkbox" value='on' name="all_quiz" >
                                    <span class="checkmark"></span>
                                </label>
                                <label class="containerXX">کارائوکه
                                    <input type="hidden" name="karaoke_title" value="کارائوکه">
                                    <input type="hidden"   value='off' name="karaoke">
                                    <input type="checkbox" value='on' name="karaoke" checked="checked">
                                    <span class="checkmark"></span>
                                </label>
                            </div>

                        </div>
                        <div class="d-flex  col-12 row ms-1 justify-content-end  mt-2">
                            <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 mt-4 float-end ">
                                <button type="submit" class="btn {{session('sidebar_color')}} float-end me-3 mt-2">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            @endif
        </div>
    </div>

@endsection

@section('footer')
    <script>
        /*$('input[type="checkbox"]').on('change', function(){
            this.value = this.checked ? 1 : 0;
            // alert(this.value);
        }).change();*/
    </script>
@endsection