<style>

    /* ---------------Animation---------------- */

    .slit-in-vertical {
        -webkit-animation: slit-in-vertical 0.45s ease-out both;
        animation: slit-in-vertical 0.45s ease-out both;
    }

    @-webkit-keyframes slit-in-vertical {
        0% {
            -webkit-transform: translateZ(-800px) rotateY(90deg);
            transform: translateZ(-800px) rotateY(90deg);
            opacity: 0;
        }
        54% {
            -webkit-transform: translateZ(-160px) rotateY(87deg);
            transform: translateZ(-160px) rotateY(87deg);
            opacity: 1;
        }
        100% {
            -webkit-transform: translateZ(0) rotateY(0);
            transform: translateZ(0) rotateY(0);
        }
    }
    @keyframes slit-in-vertical {
        0% {
            -webkit-transform: translateZ(-800px) rotateY(90deg);
            transform: translateZ(-800px) rotateY(90deg);
            opacity: 0;
        }
        54% {
            -webkit-transform: translateZ(-160px) rotateY(87deg);
            transform: translateZ(-160px) rotateY(87deg);
            opacity: 1;
        }
        100% {
            -webkit-transform: translateZ(0) rotateY(0);
            transform: translateZ(0) rotateY(0);
        }
    }

    /*---------------#region Alert--------------- */

    #dialogoverlay{
        display: none;
        opacity: .8;
        position: fixed;
        top: 0px;
        left: 0px;
        background: #707070;
        width: 100%;
        z-index:99999;
    }

    #dialogbox{
        display: none;
        position: absolute;
        background: rgb(0, 47, 43);
        border-radius:7px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.575);
        transition: 0.3s;
        width: 40%;
        z-index: 999999999;
        top:0;
        left: 0;
        right: 0;
        margin: auto;
    }

    #dialogbox:hover {
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.911);
    }

    .container {
        padding: 2px 16px;
    }

    .pure-material-button-contained {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        border: none;
        border-radius: 4px;
        padding: 0 16px;
        min-width: 64px;
        height: 36px;
        vertical-align: middle;
        text-align: center;
        text-overflow: ellipsis;
        text-transform: uppercase;
        color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
        background-color: rgb(var(--pure-material-primary-rgb, 0, 77, 70));
        /* background-color: rgb(1, 47, 61) */
        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
        font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
        font-size: 14px;
        font-weight: 500;
        line-height: 36px;
        overflow: hidden;
        outline: none;
        cursor: pointer;
        transition: box-shadow 0.2s;
    }

    .pure-material-button-contained::-moz-focus-inner {
        border: none;
    }

    /* ---------------Overlay--------------- */

    .pure-material-button-contained::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
        opacity: 0;
        transition: opacity 0.2s;
    }

    /* Ripple */
    .pure-material-button-contained::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        border-radius: 50%;
        padding: 50%;
        width: 32px; /* Safari */
        height: 32px; /* Safari */
        background-color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
        transition: opacity 1s, transform 0.5s;
    }

    /* Hover, Focus */
    .pure-material-button-contained:hover,
    .pure-material-button-contained:focus {
        box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
    }

    .pure-material-button-contained:hover::before {
        opacity: 0.08;
    }

    .pure-material-button-contained:focus::before {
        opacity: 0.24;
    }

    .pure-material-button-contained:hover:focus::before {
        opacity: 0.3;
    }

    /* Active */
    .pure-material-button-contained:active {
        box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
    }

    .pure-material-button-contained:active::after {
        opacity: 0.32;
        transform: translate(-50%, -50%) scale(0);
        transition: transform 0s;
    }

    /* Disabled */
    .pure-material-button-contained:disabled {
        color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
        background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.12);
        box-shadow: none;
        cursor: initial;
    }

    .pure-material-button-contained:disabled::before {
        opacity: 0;
    }

    .pure-material-button-contained:disabled::after {
        opacity: 0;
    }

    #dialogbox > div{
        background:#FFF;
        margin:8px;
    }

    #dialogbox > div > #dialogboxhead{
        background: rgb(0, 77, 70);
        font-size:19px;
        padding:10px;
        color:rgb(255, 255, 255);
        font-family: Verdana, Geneva, Tahoma, sans-serif ;
    }

    #dialogbox > div > #dialogboxbody{
        background:rgb(0, 47, 43);
        padding:20px;
        color:#FFF;
        font-family: Verdana, Geneva, Tahoma, sans-serif ;
    }

    #dialogbox > div > #dialogboxfoot{
        background: rgb(0, 47, 43);
        padding:10px;
        text-align:right;
    }
    /*#endregion Alert*/
</style>


<div class="row">
    <div class="container">
        <ol class="breadcrumb">
            <li><a href="#"> الفايده</a></li>
            <li><a href="FaidaDireController.php">تقرير فايده العملاء للمدير </a></li>
            <li class="active"> عرض فايده العملاء للمدير</li>

        </ol>


        <div class="panel panel-default panel-m">
            <div class="panel-heading" style="padding:5px 15px 15px">
                <h3 class="panel-title" style="display: inline-block;">عرض فايده العملاء للمدير</h3>
                <a href="{$youtubes[19]->url}" target="_blank" class="hidden-print"><img src="../views/default/assets/img/youtube.png" class="pull-left" alt="Youtube" style="width: 2%;"></a>

                <!--<a href="FaidaController.php"><input type="button"  id="submit"  class="btn btn-primary pull-left" value="إضافة جديد"/></a>-->
            </div>

            <!--<div class="form-group">-->
            <!--<div class="col-lg-offset-2 col-lg-4" style="margin-right: -25.333333%;">-->
            <!--<a href="premiumController.php"><input type="button"  id="submit"  class="btn btn-primary pull-left" value="إضافة جديد"/></a>-->
            <!--</div>-->
            <!--</div>-->

            <div>
                {if $message != ""}
                {$message}
                {/if}
            </div>

            <ul class="nav nav-tabs">
                <li class="active"><a href="#all" data-toggle="tab">الكل</a></li>
                <li><a href="#approvall" data-toggle="tab">الفايده الموافق عليها</a></li>
                <li><a href="#refusall" data-toggle="tab">الفايده المرفوضه </a></li>


            </ul>

            <div class="tab-content">

                <div class="tab-pane active" id="all"><!-- start the 1st tab -->
                    <div class="panel-body">


                        <table class="table table-black dataTableClass">
                            <thead>
                            <tr>
                                <th class="hidden-print">
                                    <input type="checkbox" name="checkAll" id="checkAll"/></th>
                                <th>اسم العميل</th>
                                <th>اسم المستخدم</th>
                                <th class="hidden-print">تفاصيل</th>
                                <th class="hidden-print">موافقه</th>
                                <th class="hidden-print">رفض</th>
                            </tr>
                            </thead>
                            <tbody>
                            {assign var=i value=1}
                            {foreach $allfaida as $data}

                            <tr class="noprint">
                                <td class="hidden-print">
                                    <input type="checkbox" name="choosedItem[]" id="checked{$i}" class="choosenItem" value=""/>
                                </td>
                                <td>{$data->clientname}</td>
                                <td>{$data->username}</td>
                                <td class="noprint"><a href="FaidaController.php?do=details&id={$data->id}" type="button"
                                                       class="btn btn-default btn-lg notesicon"></a></td>

                                <td class="hidden-print">
                                    <a class="btn btn-info" href="#" data-id="{$data->id}" id="approval" data-toggle="modal"
                                       data-target="#myModal" role="button" {if $data->conditions == 1}disabled{/if}>موافقه</a>
                                </td>

                                <td class="hidden-print"><a class="btn btn-info" href="#" data-id="{$data->id}" id="Refusal" data-toggle="modal"
                                                            data-target="#myModalRefusal" role="button">رفض</a></td>

                            </tr>
                            {assign var="i" value=$i+1}
                            {/foreach}

                            </tbody>

                        </table>

                        <div class="clearfix"></div>
                    </div>

                </div>

                <div class="tab-pane" id="approvall"><!-- start the 1st tab -->

                    <table class="table table-black" id="approvalTable">
                        <thead>
                        <tr>
                            <!--<th>م</th>-->
                            <th>رقم</th>
                            <th>اسم العميل</th>
                            <th>اسم المستخدم</th>
                            <th>التفاصيل</th>
                            <!--<th>المدفوع</th>-->
                            <!--<th class="hidden-print">مراجعة</th>-->
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>

                <div class="tab-pane" id="refusall"><!-- start the 1st tab -->

                    <table class="table table-black" id="RefusalTable">
                        <thead>
                        <tr>
                            <!--<th>م</th>-->
                            <th>رقم</th>
                            <th>اسم العميل</th>
                            <th>اسم المستخدم</th>
                            <th>التفاصيل</th>
                            <th>موافقه</th>
                            <!--<th>المدفوع</th>-->
                            <!--<th class="hidden-print">مراجعة</th>-->
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>

            </div>


        </div>

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog" style="width:800px;">
                <div class="modal-content">
                    <div class="modal-header text-center">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true"
                                                                                       class="text-left">&times;</span><span
                                class="sr-only"></span></button>
                        <h3 class="modal-title" id="myModalLabel">موافقه المدير على الفايده</h3>
                    </div>
                    <div class="modal-body">
                        <form action="FaidaDireController.php?do=approval" method="post"
                              class="form-horizontal nameToBeChecked">

                            <!-- المخرجات -->
                            <div class="card">

                                <div >
                                    <h4 style="margin-bottom: 21px;">موافقه المدير على الفايده</h4>
                                </div>

                                <input type="hidden" name="faida_id" class="faida_id" value=""/>

                                <div class="table-responsive">
                                    <div class="form-group ">
                                        <label class="col-lg-2 control-label">اسم العميل</label>
                                        <div class="col-lg-4">
                                            <input type="text" name="clientid" class="client" readonly disabled value=""/>
                                        </div>

                                        <label class="col-lg-1 control-label">المخزن</label>
                                        <div class="col-lg-4">
                                            <input type="text" name="storeid" class="store" readonly disabled value=""/>
                                        </div>
                                    </div>



                                    <!-- hidden ===============================-->
                                    <input type="hidden" name="billnameid" id="billnameid" value="{$billnameid}"/>
                                    <input type="hidden" name="settingreturn" id="settingreturn"
                                           value="{$billsettingsData[0]->billsettingsvalue}"/>
                                    <input type="hidden" name="settingclient" id="settingclient"
                                           value="{$billsettingsData[1]->billsettingsvalue}"/>
                                    <input type="hidden" name="settingstore" id="settingstore"
                                           value="{$billsettingsData[2]->billsettingsvalue}"/>
                                    <input type="hidden" name="settingseller" id="settingseller"
                                           value="{$billsettingsData[3]->billsettingsvalue}"/>
                                    <input type="hidden" name="settingparcode" id="settingparcode"
                                           value="{$billsettingsData[4]->billsettingsvalue}"/>
                                    <input type="hidden" name="settingdate" id="settingdate"
                                           value="{$billsettingsData[5]->billsettingsvalue}"/>
                                    <input type="hidden" name="settingnewproduct" id="settingnewproduct"
                                           value="{$billsettingsData[6]->billsettingsvalue}"/>
                                    <input type="hidden" name="settingcomment" id="settingcomment"
                                           value="{$billsettingsData[7]->billsettingsvalue}"/>
                                    <input type="hidden" name="settingdiscount" id="settingdiscount"
                                           value="{$billsettingsData[8]->billsettingsvalue}"/>
                                    <input type="hidden" name="settingQuantitiyFocus" id="settingQuantitiyFocus"
                                           value="{$billsettingsData[9]->billsettingsvalue}"/>
                                    <input type="hidden" name="settingUnit" id="settingUnit"
                                           value="{$billsettingsData[10]->billsettingsvalue}"/>

                                    <!-- end of hidden ===============================-->
                                    <!--<div class="clearfix"></div>-->
                                    <!--<div class="margintop"></div>-->

                                    <!-- =================================================   -->
                                    <div class="row pro" >

                                    </div>

                                    <br/>

                                    <div class="form-group">
                                        <label for="textDetails" class="col-lg-2 control-label"> المقدم</label>
                                        <div class="col-lg-4">

                                            <input type="text" class="form-control presenter" name="presenter" readonly>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="textDetails" class="col-lg-2 control-label">الاقساط</label>
                                        <div class="col-lg-4">
                                            <select class="select2 wdt100 prem" name="Installment_duration" disabled>

                                                <option value="0">اختر القسط</option>
                                                <option value="{$Programsettingdata->three_months}">3 شهور</option>
                                                <option value="{$Programsettingdata->six_months}">6 شهور</option>
                                                <option value="{$Programsettingdata->twelve_months}">12 شهر</option>
                                                <option value="{$Programsettingdata->eighteen_months}">18 شهر</option>
                                                <option value="{$Programsettingdata->twentyfour_months}">24 شهر</option>
                                                <option value="{$Programsettingdata->thirty_months}">30 شهر</option>
                                                <option value="{$Programsettingdata->sixthirty_months}">36 شهر</option>
                                                <option value="{$Programsettingdata->fortytwo_months}">42 شهر</option>
                                                <option value="{$Programsettingdata->fortyeight_months}">48 شهر</option>
                                            </select>

                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="textDetails" class="col-lg-2 control-label">نسبه الزيادة</label>
                                        <div class="col-lg-4">

                                            <input type="text" class="form-control premium" name="premium" readonly required>
                                        </div>
                                    </div>


                                    <div class="form-group">
                                        <label for="textDetails" class="col-lg-2 control-label">الاجمالي العام</label>
                                        <div class="col-lg-4">

                                            <input type="text" class="form-control totalafteprem" name="total_amount" readonly>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="textDetails" class="col-lg-2 control-label">التعليق</label>
                                        <div class="col-lg-4">

                                            <textarea class="form-control textDetails" rows="3" name="textDetails" readonly></textarea>

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




                            </div>
                            <!-- end of title row-->

                            <div class="row  hidden-print m10">
                                <div class="col-lg-12 text-center">
                                    <button type="submit"  class="btn btn-primary">
                                        <i class="glyphicon glyphicon-ok "></i> موافقه
                                    </button>

                                    <!--<a href="#" class="btn btn-primary" id="#ref" onclick="customAlert.alert()">رفض</a>-->
                                    <button class="btn btn-primary" onclick="customAlert.alert('This is a custom alert with heading.','Heads Up!')">
                                        رفض
                                    </button>
                                </div>


                            </div>
                            <!-- end of fifth row-->

                        </form>
                    </div>

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


        <div class="modal fade" id="myModalRefusal" tabindex="-1" role="dialog" aria-labelledby="myModalLabelRefusal"
             aria-hidden="true">
            <div class="modal-dialog" style="width:800px;">
                <div class="modal-content">
                    <div class="modal-header text-center">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true"
                                                                                       class="text-left">&times;</span><span
                                class="sr-only"></span></button>
                        <h3 class="modal-title" id="myModalLabelRefusal">موافقه المدير على الفايده</h3>
                    </div>
                    <div class="modal-body">
                        <form action="FaidaDireController.php?do=approval" method="post"
                              class="form-horizontal nameToBeChecked">

                            <!-- المخرجات -->
                            <div class="card">

                                <div >
                                    <h4 style="margin-bottom: 21px;">موافقه المدير على الفايده</h4>
                                </div>

                                <input type="hidden" name="faida_id" class="faida_id" value=""/>

                                <div class="table-responsive">
                                    <div class="form-group ">
                                        <label class="col-lg-2 control-label">اسم العميل</label>
                                        <div class="col-lg-4">
                                            <input type="text" name="clientid" class="client" readonly disabled value=""/>
                                        </div>

                                        <label class="col-lg-1 control-label">المخزن</label>
                                        <div class="col-lg-4">
                                            <input type="text" name="storeid" class="store" readonly disabled value=""/>
                                        </div>
                                    </div>



                                    <!-- hidden ===============================-->
                                    <input type="hidden" name="billnameid" id="billnameid" value="{$billnameid}"/>
                                    <input type="hidden" name="settingreturn" id="settingreturn"
                                           value="{$billsettingsData[0]->billsettingsvalue}"/>
                                    <input type="hidden" name="settingclient" id="settingclient"
                                           value="{$billsettingsData[1]->billsettingsvalue}"/>
                                    <input type="hidden" name="settingstore" id="settingstore"
                                           value="{$billsettingsData[2]->billsettingsvalue}"/>
                                    <input type="hidden" name="settingseller" id="settingseller"
                                           value="{$billsettingsData[3]->billsettingsvalue}"/>
                                    <input type="hidden" name="settingparcode" id="settingparcode"
                                           value="{$billsettingsData[4]->billsettingsvalue}"/>
                                    <input type="hidden" name="settingdate" id="settingdate"
                                           value="{$billsettingsData[5]->billsettingsvalue}"/>
                                    <input type="hidden" name="settingnewproduct" id="settingnewproduct"
                                           value="{$billsettingsData[6]->billsettingsvalue}"/>
                                    <input type="hidden" name="settingcomment" id="settingcomment"
                                           value="{$billsettingsData[7]->billsettingsvalue}"/>
                                    <input type="hidden" name="settingdiscount" id="settingdiscount"
                                           value="{$billsettingsData[8]->billsettingsvalue}"/>
                                    <input type="hidden" name="settingQuantitiyFocus" id="settingQuantitiyFocus"
                                           value="{$billsettingsData[9]->billsettingsvalue}"/>
                                    <input type="hidden" name="settingUnit" id="settingUnit"
                                           value="{$billsettingsData[10]->billsettingsvalue}"/>

                                    <!-- end of hidden ===============================-->
                                    <!--<div class="clearfix"></div>-->
                                    <!--<div class="margintop"></div>-->

                                    <!-- =================================================   -->
                                    <div class="row pro">

                                    </div>

                                    <br/>

                                    <div class="form-group">
                                        <label for="textDetails" class="col-lg-2 control-label"> المقدم</label>
                                        <div class="col-lg-4">

                                            <input type="text" class="form-control presenter" name="presenter" readonly>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="textDetails" class="col-lg-2 control-label">الاقساط</label>
                                        <div class="col-lg-4">
                                            <select class="select2 wdt100 prem" name="Installment_duration" disabled>

                                                <option value="0">اختر القسط</option>
                                                <option value="{$Programsettingdata->three_months}">3 شهور</option>
                                                <option value="{$Programsettingdata->six_months}">6 شهور</option>
                                                <option value="{$Programsettingdata->twelve_months}">12 شهر</option>
                                                <option value="{$Programsettingdata->eighteen_months}">18 شهر</option>
                                                <option value="{$Programsettingdata->twentyfour_months}">24 شهر</option>
                                                <option value="{$Programsettingdata->thirty_months}">30 شهر</option>
                                                <option value="{$Programsettingdata->sixthirty_months}">36 شهر</option>
                                                <option value="{$Programsettingdata->fortytwo_months}">42 شهر</option>
                                                <option value="{$Programsettingdata->fortyeight_months}">48 شهر</option>
                                            </select>

                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="textDetails" class="col-lg-2 control-label">نسبه الزيادة</label>
                                        <div class="col-lg-4">

                                            <input type="text" class="form-control premium" name="premium" readonly required>
                                        </div>
                                    </div>


                                    <div class="form-group">
                                        <label for="textDetails" class="col-lg-2 control-label">الاجمالي العام</label>
                                        <div class="col-lg-4">

                                            <input type="text" class="form-control totalafteprem" name="total_amount"  readonly>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="textDetails" class="col-lg-2 control-label">التعليق</label>
                                        <div class="col-lg-4">

                                            <textarea class="form-control textDetails" rows="3" name="textDetails" readonly></textarea>

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

                                </div>


                            </div>
                            <!-- end of title row-->

                            <div class="row  hidden-print m10">
                                <div class="col-lg-12 text-center">
                                    <!--<button type="submit"  class="btn btn-primary">-->
                                    <!--<i class="glyphicon glyphicon-ok "></i> موافقه-->
                                    <!--</button>-->

                                    <!--<a href="#" class="btn btn-primary" id="#ref" onclick="customAlert.alert()">رفض</a>-->
                                    <button class="btn btn-primary" onclick="customAlert.alert('This is a custom alert with heading.','Heads Up!')">
                                        رفض
                                    </button>
                                </div>


                            </div>
                            <!-- end of fifth row-->

                        </form>
                    </div>

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

        <div class="hidden-print">
            <div class="col-lg-12">
                <div class="form-group">
                    <div class="col-lg-4">
                        <!--<button type="button" onclick="print_Custom('mycustomheader');" class="btn btn-success pull-right">طباعة</button>-->
                    </div>
                </div>
            </div>

            <div class="clearfix"></div>
        </div>
        <div class="clearfix"></div>
    </div>

</div>

