@extends('layouts.admin')
@section('title','Auto-Approval Code Manager')
@section('page_title','')

@section('page_level_css')
<link href="{{asset('assets/vendors/custom/datatables/datatables.bundle.css')}}" rel="stylesheet" type="text/css" />
<style>
    .pdf-error-message {
        font-weight: bold !important;
        color: red;
    }
   .showDeleteModal{
    cursor: pointer;
   }
</style>
@endsection

@section('content')
<div class="kt-content kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor pt-2" id="kt_content">

    <!-- begin:: Content -->
    <div class="kt-container kt-container--fluid kt-grid__item kt-grid__item--fluid">

        <!-- begin:: Page -->
        <div class="kt-grid kt-grid--ver kt-grid--root ">
            <div class="top_main_title">
                <div class="labpair-title">
                    <p>
                        <span class="title">AUTO-APPROVAL CODE MANAGER</span>
                    </p>
                </div>
            </div>
        </div>
        <!-- end:: Page -->

        <div class="inner-main-section mt-3 pt-3">
            <div class="row">
                <div class="col-12">
                    <div class="example-preview">
                        <ul class="nav nav-pills mb-0 pl-md-5" id="myTab1" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" href="#">
                                    <span class="nav-text">Auto-Approval Code Manager</span>
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent1">
                            <div class="tab-pane fade show active" id="home-1" role="tabpanel" aria-labelledby="home-tab-1">
                                <div class="info-section">
                                    <p>
                                        <strong>EXPLANATION:</strong>
                                        Use this component to manage and view all LabPair auto-approval codes. Use these codes so that certain individuals or groups of individuals can bypass the account verification step.
                                    </p>
                                </div>

                                <div class="search-section mt-2 mb-2 row">
                                    <div class="col-sm-12">
                                        <div class="form-group mb-2">
                                            <div class="input-group">
                                                <button href="javascript:void(0);" id="createNewAd" class="primary-btn" data-toggle="modal" data-target="#createAdModal">Add New Code</button>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <div class="input-group col-sm-2">
                                        <input type="text" class="coustom-form-control ads-search-input" id="search_company_name" placeholder="Code">
                                    </div>
                                    <div class="input-group col-sm-2">
                                        <input type="text" class="coustom-form-control form-control-sm ads-search-input" name="search_start_date" id="search_start_date" >
                                    </div>
                                    <div class="input-group col-sm-2">
                                        <input type="text" class="coustom-form-control form-control-sm ads-search-input" name="search_end_date" id="search_end_date" >
                                    </div> -->
                                </div>

                                <div class="search-section mt-2 mb-2">
                                    <table class="table search-input-table">
                                        <tr>
                                            <td colspan="2" scope="col" width="8%">
                                                <input type="text" class="form-control" placeholder="Code" id="search_code">
                                            </td>
                                            <td colspan="2" scope="col" width="15%">
                                                <input type="text" class="form-control" placeholder="Title of Promo" id="search_title">
                                            </td>
                                            <td scope="col" width="10%">
                                                <div class="input-group">
                                                    <input type="text" class="form-control"  id="search_begin_date" placeholder="MM/DD/YY">
                                                    <div class="input-group-append search_begin_date">
                                                        <span class="input-group-text">
                                                            <i class="la la-calendar-check-o"></i>
                                                        </span>
                                                    </div>
                                                </div>
                                            </td>
                                            <td scope="col" width="10%">
                                                <div class="input-group">
                                                    <input type="text" class="form-control"  id="search_end_date" placeholder="MM/DD/YY">
                                                    <div class="input-group-append search_end_date">
                                                        <span class="input-group-text">
                                                            <i class="la la-calendar-check-o"></i>
                                                        </span>
                                                    </div>
                                                </div>
                                            </td>
                                            <td scope="col" colspan="2" width="20%"></td>
                                            <td scope="col" width="10%"><button class="primary-btn" id="clearSearchInputbox">Clear</button></td>
                                        </tr>
                                    </table>
                                </div>

                                <div class="some-custom-datatable">
                                    <div class="kt-portlet__body bg-white adding-table w-100 h-100 th-white">
                                        <!--begin: Datatable -->
                                        <table class="table table-striped- table-hover table-checkable" id="dataTableList">
                                            <thead>
                                                <tr>
                                                   
                                                    <th>Code #</th>
                                                    <th>Title of Promo</th>
                                                    <th>Begin Date</th>
                                                    <th>End Date</th>
                                                    <th>Status</th>
                                                    <th>Uses</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                        </table>
                                        <!--end: Datatable -->

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- end:: Content -->
    <button type="button" class="showGeneralMemberModal" data-toggle="modal" data-target="#showGeneralMemberInformation" style="display: none;">Show General Member Details</button>
    <button type="button" class="showDeclineModal" data-toggle="modal" data-target="#showDeclineUserModal" style="display: none;">Show Decline Modal</button>
</div>

<!--begin::Modal-->

<div class="modal fade" id="createAdModal" data-backdrop="false">
    <div class="modal-dialog edit-popup pop-up style-1">
        <div class="modal-content" style="background-color: #f5f5f5;">
            <div class="modal-header blue-header">
                <h5 class="modal-title" id="exampleModalLabel">NEW Auto-Approve Code</h5>
                <button type="button" class="close resetPostButton" data-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <form action="{{getAURL('auto-approval')}}" method="POST" enctype="multipart/form-data" id="addEditForm">
                @csrf
                <input type="hidden" name="id_for_update" id="id_for_update">
                <input type="hidden" name="id_for_preview" id="id_for_preview">

                <div class="modal-body padd-left-10 padd-right-10 pt-0 pb-0">
                    <div class="kt-section__body m-3">
                        <div class=" align-items-center mt-2">
                            <label class=" text-lg-right label">Enter New Code :</label>
                            <p style="font-weight: 200;">Code must have 8 characters with atleast two numbers and one special character; Non case-sensitive</p>
                            <div class="form-detail">
                                <input type="text" name="code" id="code" class="form-control inputAdsModule" placeholder="Code">
                            </div>
                        </div>

                        <div class=" align-items-center mt-3">
                            <label class=" text-lg-right label">Enter the title of the promotional event:</label>
                            <p style="font-weight: 200;">Indicate the group, event, or promotion that the code was created for</p>
                            <div class="form-detail">
                                <input type="text" name="title" id="title" class="form-control inputAdsModule" placeholder="Title of Promo">
                            </div>
                        </div>

                        <div class=" align-items-center mt-3">
                            <label class=" text-lg-right label">Begin Date:</label>
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="MM/DD/YY" id="begin_date" name="begin_date">
                                <div class="input-group-append begin_date">
                                    <span class="input-group-text">
                                        <i class="la la-calendar-check-o"></i>
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class=" align-items-center mt-3">
                            <label class=" text-lg-right label">End Date:</label>
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="MM/DD/YY" id="end_date" name="end_date">
                                <div class="input-group-append end_date">
                                    <span class="input-group-text">
                                        <i class="la la-calendar-check-o"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    
                        <div class="row justify-content-between mt-5">
                            <div class="button-left col-sm-12 col-md-12 col-lg-12 text-lg-right">
                                <button type="reset" id="resetPostButton" class="primary-btn disabled mr-2 mb-2 resetPostButton">Cancel</button>
                                <button type="submit" id="" class="primary-btn mb-2 ">Submit</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="deleteModal" data-backdrop="false">
    <div class="modal-dialog edit-popup pop-up style-1">
        <div class="modal-content" style="background-color: #f5f5f5;">
            <div class="modal-header blue-header">
                <h5 class="modal-title" id="exampleModalLabel">Delete Auto-Approve Code</h5>
                <button type="button" class="close resetPostButton" data-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <form action="" method="POST" enctype="multipart/form-data" id="deleteForm">
                @csrf
                @method('delete')
                <div class="modal-body padd-left-10 padd-right-10 pt-0 pb-0">
                    <div class="kt-section__body m-3">
                        <p class="text-center">Are you sure want to delete this auto-approve code?</p>
                        <div class="p-3" style="border: 2px solid #7f7f7f;border-radius:20px">
                            <div class="ml-3">
                            <p><span>Code :</span> <b id="d_code"></b> </p>
                            <p><span>Title of Promotional Event :<span> <b id="d_title"></b></p>
                            <p><span>Begin Date :<span> <b id="d_begin_date"></b></p>
                            <p><span>End Date :<span> <b id="d_end_date"></b></p>
                        </div>
                        </div>
                        <div class="row justify-content-between mt-5">
                            <div class="button-left col-sm-12 col-md-12 col-lg-12 text-lg-right">
                                <button type="reset" id="resetPostButton" class="primary-btn disabled mr-2 mb-2 resetPostButton">Cancel</button>
                                <button type="submit" id="" class="primary-btn mb-2 ">Delete Code</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!--end::Modal-->
@endsection

@section('page_level_js')
<script src="{{asset('assets/vendors/custom/datatables/datatables.bundle.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/js/demo1/pages/crud/datatables/basic/paginations.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/js/admin/auto-approval.js')}}" type="text/javascript"></script>
@endsection

@push('footerscript')
<script>
    $(document).on("blur", '#addEditForm .inputAdsModule', function() {
        checkAdsRequired([]);
    });
    $('#addEditForm .inputPaymentModule').change(function() {
        checkAdsRequired([]);
    });
    $(document).ready(function() {
        checkAdsRequired([]);
    });

    $(document).ready(function() {
        if ($("#id_for_preview").val() != "") {
            fillModalData($("#id_for_preview").val());
            window.history.replaceState({}, url, url + "auto-approval");
        }
    });
</script>
@endpush