@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;
    }

    .user:hover {
        background: #112240;
        color: #fff;
    }
</style>
@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> Listes des demande retraits effectués par les clients valider ou en cours de
                                validation.</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">
                            <table id="categoriedatatable-buttons"
                                class="table table-responsive-xs table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>N°</th>
                                        <th> retrait</th>
                                        <th>Client</th>
                                        <th>Moyen de paiement</th>
                                        <th>Numéro de réception</th>
                                        <th>Montant</th>
                                        <th>Devise</th>
                                        <th>Statut demande</th>
                                        <th>Date de validation</th>
                                        <th>Action:</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php $i=1; @endphp
                                    @foreach($retraits as $retrait)
                                    @php
                                    $boutique='';
                                    if(count($retrait->user->boutique)>0){
                                    foreach ($retrait->user->boutique as $boutique_){
                                    $boutique.=$boutique_->nom_boutique.',';
                                    }
                                    }
                                    @endphp
                                    <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: #e65c2b;color: #fff;"> en
                                                cours</span> @endif</td>
                                        <td class="user" style="cursor:pointer;" data-boutique="{{$boutique}}"
                                            data-firstname="{{$retrait->user->first_name}}"
                                            data-lastname="{{$retrait->user->last_name}}"
                                            data-email="{{$retrait->user->email}}"
                                            data-phone="{{$retrait->user->telephone}}">{{$retrait->user->first_name}}
                                            {{$retrait->user->last_name}}</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>@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: #e65c2b;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: #e65c2b;color: #fff;"> en cours</span> @endif</td>
                                        <td>
                                            @if($retrait->status_retrait==false)
                                            <div class="btn-group" style="white-space: normal">
                                                <button style="background: #375980;" type="button"
                                                    class="btn btn-primary btn-sm dropdown-toggle"
                                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    Actions <span class="caret"></span></button>
                                                <ul class="dropdown-menu">
                                                    <li><a href="#" class="details_retrait"
                                                            data-status_demande="{{$retrait->status_demande}}"
                                                            data-date_validate="{{\Illuminate\Support\Carbon::create($retrait->date_validate)->format('d / m / Y à H:i')}}"
                                                            data-status_retrait="{{$retrait->status_retrait}}"
                                                            data-motif="{{$retrait->motif}}"
                                                            data-montant="{{$retrait->montant}}"
                                                            data-numero="{{$retrait->numero}}"
                                                            data-compte="{{$retrait->compte_bancaire}}"
                                                            data-moyen="{{$retrait->moyen_paiement}}"
                                                            data-create="{{$retrait->created_at->format('d-m-y à H:i')}}">
                                                            Détails retrait</a></li>

                                                    @if($retrait->status_demande==false)
                                                    <li><a href="#" class="demande_validate" style="color: #112240;"
                                                            data-slug="{{$retrait->slug}}"
                                                            data-url="{{route('demanderetraitvalidate')}}"><i
                                                                class="fa fa-check-circle"></i> Valider la demande</a>
                                                    </li>
                                                    @else
                                                    <li><a href="#" class="retrait_validate" style="color: #005548;"
                                                            data-slug="{{$retrait->slug}}"
                                                            data-url="{{route('retraitvalidate')}}"><i
                                                                class="fa fa-check-circle"></i> Valider le retrait</a>
                                                    </li>
                                                    @endif
                                                </ul>
                                            </div>
                                            @else
                                            <span CLASS="badge badge-dark"
                                                style="background: #005548;color: #fff;">Validé</span>
                                            @endif
                                        </td>
                                    </tr>

                                    @endforeach
                                </tbody>
                            </table>
                            <div style="float: right !important;">
                                {{ $retraits->links() }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>


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

<div id="RetraitDetailsDataModal" class="modal fade">
    <div class="modal-md modal-dialog">
        <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>
                    Détails de la demande de retrait du
                    <span id="create_at_details" class="badge badge-primary"></span>
                    <span id="status"></span>
                </h4>

            </div>
            <div class="modal-body">
                <div id="retrait_detail">
                    <div class="row" style="padding-top: 30px;padding-bottom: 10px;">

                        <div class="form-group col-sm-12 text-center">
                            <span id="moyen_paiement"></span>
                        </div>
                        <div class="form-group col-sm-12" id="compte_panel">
                            <label> Numéro de compte bancaire du client</label><br>
                            <input type="text" id="compte_details" disabled class="form-control" style="width: 100%;">
                        </div>

                        <div class="form-group col-sm-12" id="mobile_panel">
                            <label> Numéro de téléphone ou compte client</label><br>
                            <input type="text" id="phone_details" disabled class="form-control" style="width: 100%;">
                        </div>

                        <div class="form-group col-sm-12">
                            <label> Montant à retirer</label><br>
                            <div class="input-group">
                                <input type="number" id="price_details" disabled class="form-control"
                                    style="width: 100%;">
                                <span class="input-group-addon">XOF</span>
                            </div>

                        </div>



                        <div class="form-group col-sm-12">
                            <label> Motif du retrait</label><br>
                            <textarea class="form-control" name="motif" disabled id="motif_details" 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>


<div id="UserRetraitModal" class="modal fade">
    <div class="modal-md modal-dialog">
        <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>
                    Détails du client
                </h4>
            </div>
            <div class="modal-body">
                <div id="userretrait_detail">
                    <div class="row" style="padding-top: 30px;padding-bottom: 10px;">

                        <div class="form-group col-sm-6">
                            <label> Nom</label><br>
                            <input type="text" id="first_name_details" disabled class="form-control"
                                style="width: 100%;">
                        </div>

                        <div class="form-group col-sm-6">
                            <label> Prenom</label><br>
                            <input type="text" id="last_name_details" disabled class="form-control"
                                style="width: 100%;">
                        </div>


                        <div class="form-group col-sm-6">
                            <label> Email</label><br>
                            <input type="text" id="user_email_details" disabled class="form-control"
                                style="width: 100%;">
                        </div>

                        <div class="form-group col-sm-6">
                            <label> Numéro de téléphone </label><br>
                            <input type="text" id="user_phone_details" disabled class="form-control"
                                style="width: 100%;">
                        </div>

                        <div class="form-group col-sm-12">
                            <h6>Boutique de l'utilisateur</h6>
                        </div>

                        <div class="form-group col-sm-12" id="user_boutique">

                        </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>


<div id="RetraitMotifDataModal" class="modal fade">
    <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">
                            <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>


@endsection