@extends('layouts.user')
@section('page-title', 'Customers Testmonial')
@section('page-title-body', 'Customers Testmonial')
@section('active-link-7', 'active-link')

@section('main-theme')
    <div id="dashboard-container-view">
        <h2>
            <span>Customer Testmonials</span>

            <button type="button" class="btn-h2" id="btnaddtestmonial"><i class="far fa-plus-square" style="margin:0px 8px 0px 0px"></i>Add Testmonial</button>
            <button type="button" class="btn-h2 btn-h2-active" id="btntestmoniallist"><i class="far fa-list-alt" style="margin:0px 8px 0px 0px"></i>Testmonial List</button>

        </h2>
        <div class="block-cont"></div>
        <article class="display-block" id="testmonial-list">
            <div class="table-responsive">
                <table class="table table-hover align-middle" id="table-first">
                    <thead class="thead-light">
                        <tr><th>Created At</th><th>Customer Name</th><th>Travel From-To</th><th>Testmonial</th><th>Status</th><th></th></tr>
                    </thead>
                    <tbody>
                        @foreach($testmonial as $data)
                            <tr>
                                <td>{{ date_format(date_create($data->created_at), 'd M Y')}}</td><td>{{$data->customer_name}}</td><td>{{$data->travell_from}}</td>
                                <td class="width-35">{{$data->texts}}</td>
                                <td>
                                    @if($data->status == 0)
                                      <span class="status-active"><i class="fas fa-check-circle" style="margin: 0px 3px 0px 0px"></i>Active</span>
                                    @else
                                      <span class="status-unactive"><i class="fas fa-exclamation-circle" style="margin: 0px 3px 0px 0px"></i> Inactive</span>
                                    @endif
                                </td>
                                <td>
                                    @if($data->status == 0)
                                    <a href="{{route('ban-testmonial', [$data->id, 1])}}"><button type="button" data-status="1" data-id="{{$data->id}}" class="btnbanunactive tablebtn">
                                            <i class="fa fa-ban"></i>
                                        </button></a>
                                  @else
                                  <a href="{{route('ban-testmonial', [$data->id, 0])}}"><button class="btnbanactive tablebtn">
                                        <i class="fa fa-ban"></i>
                                    </button></a>
                                  @endif
                                    <a href="{{route('delete-testmonial', [$data->id])}}"><button type="button" data-status="0" data-id="{{$data->id}}" class="btntrash tablebtn">
                                        <i class="fa fa-trash"></i>
                                    </button></a>
                                    
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </article>

        <article class="display-none" id="add-testmonial">
            <form action="{{route('create-testmonial')}}" method="POST" enctype="multipart/form-data">
                @csrf
                <section class="view-col-half-left">
                    <h5>Customer Name</h5>
                    <input type="text" name="name" class="form-control" required placeholder="Customer full name">
                </section>
                <section class="view-col-half-right">
                    <h5>Travel From</h5>
                    <input type="text" name="route" class="form-control" required placeholder="Eg. Dar es salaam">
                </section>
                <section class="view-col-full">
                    <h5>Testmonial</h5>
                    <textarea name="text" class="form-control" required placeholder="Write anythings about aifola Express..."></textarea>
                </section>

                <section class="view-col-full">
                    <br>
                    <button type="submit" class="btn btn-success text-white w-25 p-10">Add Testmonial</button>
                </section>
            </form>
        </article>

        
        <div class="block-cont"></div>
    </div>


@endsection

<!-- js script -->
@push('scripts')
<script>
    $(function(){

        //add-testmonial
        //

        $(document).on('click', '#btnaddtestmonial', function(){
            $('#add-testmonial').css({"display":"block"});
            $('#testmonial-list').css({"display":"none"});

            $('h2 button').removeClass('btn-h2-active');
            $(this).addClass('btn-h2-active');

            $('h2 span').empty();
            $('h2 span').text("New Customer testmonials");
        });

        
        $(document).on('click', '#btntestmoniallist', function(){
            $('#add-testmonial').css({"display":"none"});
            $('#testmonial-list').css({"display":"block"});

            $('h2 button').removeClass('btn-h2-active');
            $(this).addClass('btn-h2-active');

            $('h2 span').empty();
            $('h2 span').text("Customer Testmonials");
        });




        var db = $('#table-first').dataTable({
            columnDefs: [ 
            { 
                type: 'date',
                'targets':[1]
            }],
        order: [[ 1, 'desc' ]]
        });


    });

</script>
@endpush