@extends("../dashboard._blank")

@section("sidebar")
    @include("../dashboard._sidebar")
@endsection

@section('css_add')
    <style>


        .activation{
            display: block;
        }

        #description_include_livraison{
            display: none;
        }

        #button{
    display:block;
    margin:20px auto;
    padding:10px 30px;
    background-color:#eee;
    border:solid #ccc 1px;
    cursor: pointer;
    }

    .is-hide{
    display:none;
    }

        ul {
            list-style-type: none;
        }

        li {
            display: inline-block;
        }

        input[type="checkbox"][id^="myCheckbox"] {
            display: none;
        }

        label {
            border: 1px solid #fff;
            padding-top: 10px;
            display: block;
            position: relative;
            margin-top: 10px;

        }

        label:before {
            background-color: white;
            color: white;
            content: " ";
            display: block;
            border-radius: 50%;
            border: 1px solid grey;
            position: absolute;
            top: -5px;
            left: -5px;
            width: 25px;
            height: 25px;
            text-align: center;
            line-height: 28px;
            transition-duration: 0.4s;
            transform: scale(0);
        }

        label img {
            height: 100%;
            width: 100%;
            transition-duration: 0.2s;
            transform-origin: 50% 50%;
        }

        :checked + label {
            border-color: #ddd;
        }

        :checked + label:before {
            content: "✓";
            background-color: grey;
            transform: scale(1);
        }

        :checked + label img {
            transform: scale(0.9);
            /* box-shadow: 0 0 5px #333; */
            z-index: -1;
        }

        .card-1 {
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
            transition: all 0.3s cubic-bezier(.25,.8,.25,1);
            border: 1px solid #2a3f54;
        }

        .card-1:hover {
            box-shadow: 0 14px 28px rgba(6, 14, 28, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
            transition: all 1000ms ease;
            border: 1px solid #060e1c;
        }

        .motif:hover{
            background: #2a3f54;
            color: #fff;
            cursor: pointer;
        }
    </style>
    <script>
        const second = 1000,
            minute = second * 60,
            hour = minute * 60,
            day = hour * 24;
        let countDown=0;
        let target=0;
        let dt=0;
        let $day = 0;
        let $hour = 0;
        let min= 0;
        let seconde=0;
        let distance=0;
        let now=0;
        function add_months(dt, n)
        {
            return new Date(dt.setMonth(dt.getMonth() + n)).getTime();
        }
    </script>
    @endsection
@section("content")
    <div class="right_col" role="main">
        <div class="">
            <div class="clearfix"></div>
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2 class="col-xs-12 col-md-8"><img src="{{asset('images/retrait.png')}}" alt="" width="40px"> Retrait <small>Faire un retrait de vos actifs vers un compte ou un numero mobile.</small></h2>
                            <a disabled style="border-radius: 0px;color: #112240;" class="btn btn-default btn-sm col-xs-12 col-md-4"><span style="color: #112240;">Total des retraits effectués</span> = <span  style="font-weight: bold;color: #e65c2b;">{{$total_retrait}} XOF</span></a>

                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            @if ($errors->any())

                                <div class="col-sm-12 alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            @if(session("success"))
                                <div class="col-sm-12 alert alert-success">
                                    {{session('success')}}
                                </div>
                            @elseif(session("error"))
                                <div class="col-sm-12  alert alert-danger">
                                    {{session('error')}}
                                </div>
                            @endif

                                <div class="row">
                                    <a href="{{route('boutique')}}" class="btn btn-default default" style="border: 1px solid #000; color: #0D3349;text-align: center;"><i class="fa fa-arrow-circle-left"></i></a>
                                <button class="btn btn-dark retrait" style="cursor:pointer;border-radius: 0px"><span   class="btn-gr"> <i class="fa fa-money"></i> Faire une demande de retrait</span>   </button>

                            </div>
<div class="row">
        <table id="categoriedatatable-buttons"  class="table table-responsive-xs table-striped table-bordered">
            <thead>
            <tr>
                <th>N°</th>
                <th>Statut de retrait</th>
                <th>Moyen de paiement</th>
                <th>Numéro ou compte de réception </th>
                <th>Montant du retrait</th>
                <th>Devise</th>
                <th>Motif</th>
                <th>Statut de la demande</th>
                <th>Date de validation</th>
                <th>Emis le :</th>
            </tr>
            </thead>
            <tbody>
            @php $i=1;  @endphp
            @foreach($retraits as $retrait)
                <tr>
                    <td>{{$i++}}</td>
                    <td>@if($retrait->status_retrait==true) <span class="badge badge-success" style="background: green;color: #fff;"> validé </span> @else <span class="badge badge-warning" style="background: #757A86;color: #fff;"> en cours</span> @endif</td>
                    <td>{{$retrait->moyen_paiement}}</td>
                    <td>@if($retrait->moyen_paiement=='mobile_money'){{$retrait->numero}} @else {{$retrait->compte_bancaire}} @endif</td>
                    <td>{{$retrait->montant}} {{$retrait->devise}}</td>
                    <td>{{$retrait->devise}} </td>
                    <td class="motif" data-motif="{{$retrait->motif}}" title="{{$retrait->motif}}">{{\Illuminate\Support\Str::limit($retrait->motif,10)}}</td>
                    <td>@if($retrait->status_demande==true) <span class="badge badge-success" style="background: green;color: #fff;"> validé </span> @else <span class="badge badge-warning" style="background: #757A86;color: #fff;"> en cours</span> @endif</td>
                    <td>@if(isset($retrait->date_validate) && $retrait->date_validate!=null) <span class="badge badge-success" style="background: green;color: #fff;">{{\Illuminate\Support\Carbon::create($retrait->date_validate)->format('d / m / Y à H:i')}} </span> @else <span class="badge badge-warning" style="background: #757A86;color: #fff;"> en cours</span> @endif</td>
                    <td>{{$retrait->created_at->format('d-m-y à H:i')}}</td>
                </tr>

            @endforeach
            </tbody>
        </table>
        <div class="col-md-12">
            {{ $retraits->links() }}
        </div>
            </div>
           
            </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
    <!-- /page content -->


    <div id="RetraitMotifDataModal" class="modal fade" data-backdrop="static" data-keyboard="false">
        <div class="modal-md modal-dialog">
                @csrf
                <div class="modal-content" style="border-radius: 0px;background: #ffffff;border-right: 5px solid #2a3f54;">
                    <div class="modal-header" style="background: #2a3f54;border-radius: 0px">
                        <h4 class="modal-title text-left" style="color: #f1f1f1;"><i class="fa fa-hand-lizard"></i> Motif du retrait <span id="name_details_header"></span></h4>

                    </div>
                    <div class="modal-body">
                        <div id="retrait_detail">
                            <div class="row" style="padding-top: 30px;padding-bottom: 10px;" id="livraison_panel">
                                <div class="form-group col-sm-12 col-xs-12">
                                    <textarea id="motif_area" disabled class="form-control"  rows="5" style="width: 100%"></textarea>
                                 </div>

                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12 text-right" style="margin-top: 20px;">
                                 <button type="button" class="btn btn-default" data-dismiss="modal" style="border-radius: 0px;cursor: pointer;">Fermer</button>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>


    @if(\Illuminate\Support\Facades\Session::get('user')['doc_validated'])
        @include('dashboard.paiement_box.retrait')
    @endif

@endsection