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

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

@section("css_add")
    <style>
        .error {
            color: red;
        }


        .inputfile {
            width: 0.1px;
            height: 0.1px;
            opacity: 0;
            overflow: hidden;
            position: absolute;
            z-index: -1;
        }

        .inputfile + label {
            font-size: 1em;
            display: inline-block;
        }

        .inputfile:focus + label,
        .inputfile + label:hover {
        }

        .inputfile + label {
            cursor: pointer; /* "hand" cursor */
        }

        .inputfile:focus + label {
            outline: 1px dotted #000;
            outline: -webkit-focus-ring-color auto 5px;
        }

        #upload:hover {
            color: #D40025;
            border: #D40025 2px solid;
        }

        #selectedFiles img {
            max-width: 125px;
            max-height: 125px;
            float: left;
            margin-bottom: 10px;
        }

        #upload2 {
        }

        #upload2:hover {
            color: #D40025;
            border: #D40025 2px solid;
        }

        #selectedFiles2 img {
            max-width: 125px;
            max-height: 125px;
            float: left;
            margin-bottom: 10px;
        }
    </style>
@endsection

@section("content")

    <style>
        @media (min-width: 768px) {
            .form-horizontal .control-label {
                text-align: left;
            }
        }

        .btn {
            border-radius: 0px;
        }

        .contact {
            border: 1px solid #ddd;
            border-radius: 50px;
        }
    </style>
    <div class="right_col" role="main">

        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel text-uppercase">
                    <div class="x_title" style="padding-left: 20px;">
                        <h5 class="col-md-12 col-sm-12 col-xs-12">RECLAMATIONS </h5>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        @if(session("success"))

                            <div class="alert alert-success">
                                {{session('success')}}
                            </div>

                        @elseif(session("error"))
                            <div class="alert alert-danger">
                                {{session('error')}}
                            </div>
                        @endif

                        <div class="row" style="margin-bottom: 10px;">
                            <button type="button" class="btn btn-secondary btn-sm" data-toggle="tooltip"
                                    data-placement="top"
                                    title="Veuillez consulter votre profile pour modifier les informations reliées à votre compte annnonceur">
                                <i class="fa fa-info-circle"></i>
                            </button>
                        </div>

                        <div class="row">
                            <table id="articledatatable-buttons" class="table table-responsive-xs table-bordered">
                                <thead>
                                <tr>
                                    <th>Action</th>
                                    <th>Status</th>
                                    <th>Slug</th>
                                    <th title="image">Image</th>
                                    <th title="Type">Transaction</th>
                                    <th title="Nom">Nom</th>
                                    <th title="Nom">Téléphone</th>
                                    <th title="Nom">Email</th>
                                    <th title="Type">Type</th>
                                    <th title="Date debut">Date de la transaction</th>
                                    <th>Créer</th>
                                </tr>
                                </thead>
                                <tbody>
                                @php $i=1; @endphp
                                @foreach($reclamations as $reclamation)
                                    <tr>
                                        <td>
                                            <div>
                                                    <a title="Détail" data-slug="{{$reclamation->slug}}"
                                                        class="detail_data btn btn-xs btn-info" style="color: #fff;"><i
                                                        class="fa fa-list"></i> 
                                                    </a>
                                                    <a title="Modifier" data-slug="{{$reclamation->slug}}"
                                                       class="modifier_reclamation btn btn-xs btn-warning"
                                                       style="color: #fff;"><i
                                                            class="fa fa-edit"></i> 
                                                    </a>
                                            </div>
                                        </td>
                                        <td>
                                           
                                                @if($reclamation->status==1) 
                                                    @if($reclamation->decision==1) 
                                                        <span style="color: green">Traité</span> 
                                                    @else
                                                        <span style="color: red">Non traité</span> 
                                                    @endif
                                                @else
                                                    <span style="color: orange">En attente</span> 
                                                @endif
                                        </td>
                                        <td>{{$reclamation->slug}}</td>
                                        <td><img src="{{$reclamation->screen}}" width="30" alt=""></td>
                                        <td>{{$reclamation->name}}</td>
                                        <td>{{$reclamation->telephone}}</td>
                                        <td>{{$reclamation->email}}</td>
                                        <td>{{$reclamation->type}}</td>
                                        <td>{{$reclamation->reference}}</td>
                                        <td>{{date("d-m-Y h:i:s",strtotime($reclamation->date))}}</td>
                                        <td>{{date("d-m-Y h:i:s",strtotime($reclamation->created_at))}}</td>
                                       
                                    </tr>
                                    @php $i++; @endphp
                                @endforeach

                                </tbody>
                            </table>

                            <div style="float: right !important;">
                                {{ $reclamations->links() }}
                            </div>
                        </div>

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

    <div id="articleDetail" class="modal fade">
        <div class="modal-dialog modal-md">
            <div class="modal-content" style="border-radius: 0px;">
                <div class="modal-header">
                    <h4 class="modal-title"><i class="fa fa-plus"></i>
                        <span>Détails</span></h4>

                </div>
                <div class="modal-body pt-4">
                    <div class="col-12">
                        <div class="row">
                            <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                <label class="text-uppercase">Reclamation: </label>
                                <div id="detail_message"></div>
                            </div>
                            <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                Decision: 
                                <div id="detail_motif"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Fermer
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="articleModal" class="modal fade">
        <div class="modal-dialog modal-lg">
            <form name="reclamation_form" method="post" id="reclamation_form" enctype="multipart/form-data"
                  action="{{route("reclamation.update_status")}}">
                @csrf
                <div class="modal-content" style="border-radius: 0px;">
                    <div class="modal-header">
                        <h4 class="modal-title"><i class="fa fa-plus"></i>
                            Mise à jour du status de la reclamation</h4>
                    </div>
                    <div class="modal-body">
                        <div>
                            <div class="row">
                                <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                    <label class="text-uppercase">Status </label>
                                    <select id="decision"  name="decision" class="form-control" placeholder="Décision" style="width: 100%;">
                                        <option value="1">Traiter</option>
                                        <option value="0">Non traiter</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                    <label class="text-uppercase">Motif du status</label>
                                    <textarea rows="3" id="motif" name="motif" class="form-control" placeholder="Motif du status" style="width: 100%;"></textarea>
                                </div>
                            </div>
                            <input type="hidden" name="slug" id="slug">
                        </div>
                        <div class="row">
                            <div class="modal-footer">
                                <input type="submit" name="action" id="action_add_article"
                                       class="btn btn-sm btn-primary"
                                       value="Enregistrer"/>
                                <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Fermer
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    <script type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        function reset() {
            $("#textTitleModel").html("Ajouter");
        }

        function visibility(text, url) {
            $.Zebra_Dialog('Etes vous sur de vouloir ' + text + ' cette publication ?', {
                'type': 'question',
                'title': 'Mise à jour ',
                'buttons': [
                    {
                        caption: 'Oui', callback: function () {

                            window.location.href = url;

                        }
                    }, {
                        caption: 'Non', callback: function () {
                            $.notify('Mise à jour annuler', 'error')
                        }
                    }
                ]
            });
        }

        $(document).ready(function () {
           
            $("form[name='reclamation_form']").validate({
                rules: {
                    title: "required",
                },
                messages: {
                    title: "Champ requis",
                },
                submitHandler: function (form) {
                    $('#action_add_article').attr('disabled', true);
                    $('#action_add_article').val('Patientez ...');
                    $('form#reclamation_form').submit();
                }
            });

            $(document).on('click', '.modifier_reclamation', function () {
                let slug = $(this).attr("data-slug");
                $.ajax({
                    url: "{{route('reclamation.get_reclamation')}}",
                    method: 'post',
                    data: {slug: slug},
                    success: function (result) {
                        $("#textTitleModel").html("Modifier");
                        $("#slug").val(result.data.slug);
                        $('#articleModal').modal('show');
                    },
                    error: function (result) {

                    },

                });
            });
            $(document).on('click', '.detail_data', function () {
                let slug = $(this).attr("data-slug");
                console.log(slug);
                $.ajax({
                    url: "{{route('reclamation.get_reclamation')}}",
                    method: 'post',
                    data: {slug: slug},
                    success: function (result) {
                        $("#detail_motif").val(result.data.motif);
                        $("#detail_message").html(result.data.message);
                        $('#articleDetail').modal('show');
                    },
                    error: function (result) {

                    },

                });
            });


        })
    </script>

@endsection