<?php
use Cake\I18n\Time;
?>
<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="modal fade" id="card_<?php echo $i;?>" tabindex="-1" role="dialog" aria-labelledby="defaultModalLabel" aria-hidden="true">
            <div class="modal-dialog box-ads">
                <a class="close-modal" data-dismiss="modal">X </a>
                <div class="container login-container">
                    <div class="">
                        <div class="owl-carousel owl-theme" data-plugin-options="{'items': 1}">
                            <div class="row rotate270 form_1">
                                <div class="form_1-card-img">
                                    <?php echo $this->Html->image('/img/core/img/card-bg-front@3x.png', array('div' => false, 'class' => 'img-responsive img-rounded','style' => '')); ?>
                                </div>
                                <div class="row date-name">
                                    <div class="col-xs-8 ">
                                        <br>
                                        <div>
                                            <label>id</label>
                                        </div>
                                        <div>
                                            <?php echo $value['card_code'] ?>
                                        </div>
                                        <div>
                                            <labe>ชื่อ</label>
                                                <?php echo $value['prefix_name_th'].$value['firstname_th'].' '.$value['lastname_th'] ?>
                                        </div>
                                    </div>
                                    <div class="col-xs-4">
                                        <img src="/img/core/img/user-profile@3x.png" class="img-responsive">
                                    </div>
                                </div>
                                <div class="row date-position">
                                    <div class="col-xs-12">
                                        <label>ตำแหน่ง</label>
                                        <?php echo $value['position_name'] ?>
                                    </div>
                                </div>
                                <div class="row text-center date-time">
                                    <div class="col-xs-6">
                                        <?php 
											$now = new Time($value['date_issued']);
											$dateIssued = $now->i18nFormat('yyyy-MM-dd');
											echo $this->DateFormat->formatDateThai($dateIssued);                  
										?>
                                    </div>
                                    <div class="col-xs-6">
                                        <?php 
											$now = new Time($value['date_expiry']);
											$dateExpiry = $now->i18nFormat('yyyy-MM-dd');
											echo $this->DateFormat->formatDateThai($dateExpiry);                  
										?>
                                    </div>
                                </div>
                                <div class="row text-center date-label">
                                    <div class="col-xs-6">
                                        <label>วันออกบัตร</label>
                                    </div>
                                    <div class="col-xs-6">
                                        <label>วันหมดออายุ</label>
                                    </div>
                                </div>
                            </div>
                            <!--/ .font-card-->
                            <div>
                                <?php  echo $this->Html->image('/img/core/img/card-bg-back@3x.png', array('div' => false, 'class' => 'img-responsive img-rounded','style' => '')); ?>
                            </div>
                            <!--/ .back-card-->
                        </div>
                        <!--/.owl-carousel-->
                    </div>
                </div>
                <!--/.container -->
            </div>
            <!--/.box-ads -->
        </div>
        <!--/.defaultModal -->
    </div>
    <!--/.col-xs-12 -->
</div>
<!--/row modal card-->

<style>

    .form_1 {
        width: 100%;
        height: 100%;
        margin: auto;
        padding: auto;
    }
    .form_1-card-img {
        position: absolute;
        width: 100%;
        margin: auto;
        padding: auto;
    }
    .form_1-card-img img {
        position: relative;
        width: 100%;
    }

/* iPads (landscape) ----------- */
@media screen and (min-width: 1024px) {
    .rotate270 .row {
        font-size: 28px !important;
    }
    .form_1 .date-name {
        width: 500px;
        margin: 55% 0% 0% -40%;
        border-bottom: 0px solid red;
        position: absolute;
        z-index: 9999;
        display: block;
    }
    .date-name div div {
        height: 35px;
    }
    .form_1 .date-position {
        width: 500px;
        margin: 70% 0% 0% -15%;
        position: absolute;
        border-bottom: 0px solid #000;
        display: block;
    }
    .form_1 .date-time {
        width: 500px;
        margin: 70% 0% 0% 12%;
        border-bottom: 0px solid #000;
    }
    .form_1 .date-label {
        width: 500px;
        margin: 70% 0% 0% 20%;
        border-bottom: 0px solid #000;
    }
}

/* Add your styles for devices with a maximum width of 768 */
@media screen and (max-width: 768px){
    .rotate270 .row {
        font-size: 25px !important;    
    }
    .form_1 .date-name {
        width: 500px;
        margin: 55% 0% 0% -40%;
        border-bottom: 0px solid red;
        position: absolute;
        z-index: 9999;
        display: block;
    }
    .date-name div div {
        height: 35px;
    }
    .form_1 .date-position {
        width: 500px;
        margin: 70% 0% 0% -15%;
        position: absolute;
        border-bottom: 0px solid #000;
        display: block;
    }
    .form_1 .date-time {
        width: 500px;
        margin: 70% 0% 0% 12%;
        border-bottom: 0px solid #000;
    }
    .form_1 .date-label {
        width: 500px;
        margin: 70% 0% 0% 20%;
        border-bottom: 0px solid #000;
    }
    
}

/* Add your styles for devices with a maximum width of 480 */
@media screen and (max-width: 480px){ 

    .rotate270 .row {
        font-size: 22px !important;
    } 
    .form_1 .date-name {
        width: 450px;
        margin: 55% 0% 0% -45%;
        border-bottom: 0px solid red;
        position: absolute;
        z-index: 9999;
        display: block;
    }
    .date-name div div {
        height: 35px;
    }
    .form_1 .date-position {
        width: 450px;
        margin: 70% 0% 0% -18%;
        position: absolute;
        border-bottom: 0px solid #000;
        display: block;
    }
    .form_1 .date-time {
        width: 450px;
        margin: 70% 0% 0% 5%;
        border-bottom: 0px solid #000;
    }
    .form_1 .date-label {
        width: 450px;
        margin: 70% 0% 0% 15%;
        border-bottom: 0px solid #000;
    }
}

 /* Add your styles for devices with a maximum width of 320 */
 @media screen and (max-width: 320px) {
    .rotate270 .row {
        font-size: 20px !important;
    }
   
    .form_1 .date-name {
        width: 400px;
        margin: 50% 0% 0% -40%;
        border-bottom: 0px solid red;
        position: absolute;
        z-index: 9999;
        display: block;
    }
    .date-name div div {
        height: 35px;
    }
    .form_1 .date-position {
        width: 400px;
        margin: 68% 0% 0% -12%;
        border-bottom: 0px solid #000;
    }
    .form_1 .date-time {
        width: 400px;
        margin: 70% 0% 0% 5%;
        border-bottom: 0px solid #000;
    }
    .form_1 .date-label {
        width: 400px;
        margin: 70% 0% 0% 15%;
        border-bottom: 0px solid #000;
    }
}




</style>