<style>
    @media (min-width: 768px){
        .form-horizontal .form-group {
            margin-right: -10px;
            margin-left:-10px;
        }

        .m10{
            margin: 10px
        }
        h4{
            font-size: 17px;
            font-weight: bold;
            color: #000000;
            margin: 10px 0 15px;
            font-family: sans-serif;
        }
        hr {
            margin: 20px ;
            border: 0;
            border-top: 2px solid #d7d7d7;

        }
        .card{
            box-shadow: 0 4px 16px rgba(0,0,0,.12);
            padding: 10px;
            margin: 40px 0;
            border-radius: 5px
        }

    }
    .wdt230{
        width:230px
    }
    .billtable thead>tr>th {
        color: #eeecda;
        background-color: #0081a8;
    }
    .add i{
        font-size: 20px;
        color: #607D8B;
    }
    .wdt50{
        width:50px
    }
    .mt-10{
        margin-top: 10px
    }
    .data-search{
        margin: 10px 15px 0;
    }
    .btn-dark {
        color: #fff;
        background-color: #636262;
        border-color: #646464;
    }
    .data-search .form-control{
        border-radius:3px
    }

</style>




<div class="row">
    <div class="container">
        <ol class="breadcrumb">
            <li><a href="#">اقساط عميل </a></li>
            <li><a href="#">قسط عميل</a></li>
            <li class="active">تفاصيل قسط العميل</li>
        </ol>

        <div class="panel panel-default panel-m">
            <div class="panel-heading">
                <h3 class="panel-title">تفاصيل قسط العميل</h3>
            </div>

            <div class="panel-body">

                <form action="premiumautomaticController.php?do=show" method="post"  class="form-horizontal nameToBeChecked">


                    <!-- المكونات -->
                    <div class="card">
                        <div class="col-lg-6">
                            <h4>بيانات العميل</h4>
                        </div>
                        <div class="col-lg-3 ">
                            <div class="form-group mt-10">
                                <label class="col-lg-3"> العميل</label>
                                <div class="col-lg-9">
                                    <select class=" select2 clientID" name="clientID" disabled>
                                        <option value="-1">اختر العميل</option>
                                        {foreach $clientsData as $item}
                                        <option value="{$item->clientid}" {if $alldata->clientId == $item->clientid}selected{/if}>{$item->clientname}</option>
                                        {/foreach}
                                    </select>
                                </div>

                            </div>
                        </div>

                        <div class="table-responsive">
                            <table class="table billtable table-bordered table-black " id="table">
                                <thead>
                                <tr>
                                    <th class="wdt300">اسم العميل</th>
                                    <th class="wdt120 ">رقم  الموبيل</th>
                                    <th class="wdt120">المنطقه</th>
                                    <th  class="wdt120" >نوع العميل</th>
                                    <th  class="wdt120">مديونيه العميل</th>
                                    <th class="wdt120">التعليق</th>
                                </tr>
                                </thead>
                                <tbody>
                                <td>{$clientData->clientname}</td>
                                <td>{$clientData->clientmobile}</td>
                                <td>{$clientData->areaName}</td>
                                <td>{$clientData->typeName}</td>
                                <td>{$clientData->clientdebt}</td>
                                <td>{$clientData->clientdetails}</td>
                                </tbody>
                            </table>
                        </div>

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

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

                        <div class="col-lg-10">
                            <h4>اقساط العميل</h4>
                        </div>


                        <div class="table-responsive">
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="control-label">اجمالي القسط</label>
                                    <input type="text" class="form-control" number="true" name="first_payment"
                                           id="first_payment" required="" value="{$alldata->totalinstallment}" readonly placeholder="احمالي القسط ">
                                </div>
                            </div>

                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="control-label">المقدم/ مباشر</label>
                                    <input type="text" class="form-control" number="true" name="payment_dir"
                                           id="payment_dir" required="" value="{$alldata->presenterDir}" readonly placeholder="المقدم مباشر">
                                </div>
                            </div>

                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="control-label">المقدم/ نسبه</label>
                                    <input type="text" class="form-control" number="true" name="payment_Per"
                                           id="payment_Per" required="" value="{$alldata->presenterPer}" readonly placeholder="المقدم نسبه">
                                </div>
                            </div>

                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="control-label">باقي المبلغ</label>
                                    <input type="text" class="form-control" number="true" name="rest_payment"
                                           id="rest_payment"  value="{$alldata->remainAmount}" readonly required=""
                                           placeholder="باقي المبلغ ">
                                </div>
                            </div>

                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="control-label">تستحق في </label>

                                    <input type="text" class="form-control date" id="installment_every_date" data-date-format="yyyy-mm-dd" required
                                           name="installment_every_date" value="{$alldata->date}" readonly>

                                </div>
                            </div>

                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="control-label"> عدد الأقساط </label>
                                    <input type="text" class="form-control cal_installment_values" digits="true" name="installment_nos"
                                           id="installment_nos" required="" value="{$alldata->installmentNos}" readonly
                                           placeholder=" عدد الاقساط">
                                </div>
                            </div>

                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="control-label"> بمعدل قسط  كل / شهر </label>
                                    <input type="text" class="form-control cal_installment_values" digits="true"
                                           name="installment_months"
                                           id="installment_months" value="{$alldata->installmentMonths}" readonly required=""
                                           placeholder=" مده التقسيط">
                                </div>
                            </div>

                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="control-label"> بمعدل قسط  كل / يوم </label>
                                    <input type="text" class="form-control cal_installment_values" digits="true"
                                           name="installment_days"
                                           id="installment_days" value="{$alldata->installmentDays}" readonly
                                           placeholder="مده التقسيط بالايام">
                                </div>
                            </div>

                        </div>

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


                        <div class="row" id="installment_show_container">

                                <div class="col-lg-6">
                                    <h4>بيانات الاقساط</h4>
                                </div>

                                <div class="table-responsive">
                                <table class="table billtable table-bordered table-black ">
                                    <thead>
                                    <tr>
                                        <th class="wdt300">رقم الاقساط </th>
                                        <th class="wdt300">تاريخ الاقساط </th>
                                        <th class="wdt300">القيمه</th>
                                        <th class="wdt230">سداد</th>
                                        <th class="wdt230">تأجيل</th>
                                        <!--<th class="wdt50"></th>-->
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {assign var=itr value=1}
                                    {foreach $installments_dates as $installment}
                                    <tr data-itr="1">

                                        <td>
                                            <input type="text" class="form-control" name="installmentitr" value="{$itr}" readonly>
                                        </td>

                                        <td>
                                            <input type="text" class="form-control"  value="{$installment->date}" name="installment_payment_date_{$itr}" readonly>
                                        </td>
                                        <td>
                                            <input type="text" class="form-control" number="true" name="installment_payment_{$itr}" data-itr="{$itr}" id="installment_payment_{$itr}" readonly value="{$installment->value}">
                                        </td>
                                        <td class="hidden-print">
                                            {if $item->payed == 0}
                                            <a class="btn btn-info" href="clientPayedDeptController.php" data-id="{$installment->idInstallment}" id="add_pay_auto" role="button" {if $installment->conditions == 1}disabled{/if}>سداد</a>
                                            {else}
                                            <a class="btn btn-info" href="clientPayedDeptController.php" data-id="{$installment->idInstallment}"  role="button" disabled>تم السداد</a>
                                            {/if}
                                        </td>
                                        <td class="hidden-print">
                                            {if $installment->conditions == 0}
                                            <a class="btn btn-info" href="#" data-id="{$installment->idInstallment}" id="delay_auto" data-toggle="modal" data-target="#myModal" role="button" {if $installment->payed == 1}disabled{/if}>تأجيل</a>
                                            {else}
                                            <a class="btn btn-info" href="#" data-id="{$installment->idInstallment}" data-toggle="modal" data-target="#myModal" role="button" disabled="">تم التأجيل</a>
                                            {/if}
                                        </td>
                                    </tr>
                                    {capture assign=itr}{$itr+1}{/capture}
                                    {/foreach}
                                    </tbody>
                                </table>

                            </div>

                        </div>


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


                    <div class="row  hidden-print m10" >
                        <div class="col-lg-12 text-center">
                            <!--<button type="submit"  id="saveBtn" class="btn btn-primary">-->
                                <!--<i class="glyphicon glyphicon-ok "></i>  حفظ</button>-->

                            <button id="rtnBtn" class="btn btn-dark">
                                <i class="glyphicon glyphicon-backward"></i>  رجوع</button>
                        </div>



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

                </form>

            </div> <!-- end of panel-body-->

        </div>  <!-- end of panel panel-default-->

    </div> <!-- end of container-->

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


<div  class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog"  style="width:600px;">
        <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="premiumautomaticController.php?do=addPremiumformreport" method="post" id="form1" class="form-horizontal nameToBeChecked">

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

                        <div class="col-lg-6">
                            <h4>سداد اقساط العميل</h4>
                        </div>

                        <input type="hidden" name="premiumItr" id="premiumItr" value="1"/>

                        <div class="table-responsive">
                            <table class="table billtable table-bordered table-black " id="wasteTable">
                                <thead>
                                <tr>
                                    <th class="wdt300">تاريخ الاقساط </th>
                                    <th class="wdt300">القيمه</th>
                                    <th class="wdt300">تاريخ  التأجيل </th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <input type="text" name="idInstallment" id="idInstallment">
                                    <input type="text" name="premiumauoId" id="premiumauoId">
                                    <td>
                                        <input type="text" class="form-control date" autocomplete="off" data-date-format="yyyy-mm-dd" name="date" id="date" readonly>
                                    </td>
                                    <td>
                                        <input type="number" name="Amount" id="Amount" min="0" class="form-control countAmount" value=""  readonly/>
                                    </td>
                                    <td>
                                        <input type="text" class="form-control date" autocomplete="off" data-date-format="yyyy-mm-dd" name="delayDate" id="delayDate">
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>


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


                    <div class="row  hidden-print m10" >
                        <div class="col-lg-12 text-center">
                            <button type="submit"  id="saveBtn" class="btn btn-primary">
                                <i class="glyphicon glyphicon-ok "></i>  حفظ</button>
                            <button type="button"  data-dismiss="modal"   class="btn btn-primary">
                                <i class="glyphicon glyphicon-ok "></i>  رجوع</button>
                        </div>



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

                </form>
            </div>

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




