@extends('layouts.app')

@section('title', 'buyer | '.config('app.name'))
@section('style')
    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="{{ url('plugins/fontawesome-free/css/all.min.css') }}">
    <!-- DataTables -->
    <link rel="stylesheet" href="{{ url('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ url('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ url('plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">
    <!-- Theme style -->
    <link rel="stylesheet" href="{{ url('dist/css/adminlte.css') }}">
    <style>
        body{
            background-color: #fcfcfc;
        }

        .row{
            margin:auto;
            padding: 30px;
            width: 100%;
            display: flex;
            flex-flow: column;
        .card{
            margin-top: 20px;
            width: 100%;
            margin-bottom: 5px;
            display: block;
            transition: opacity 0.3s;
        }
        }


        .card-body{
            padding: 0.5rem;
        table{
            width: 100%;
        tr{
            display:flex;
        td{
        a.btn{
            font-size: 0.8rem;
            padding: 3px;
        }
        }
        td:nth-child(2){
            text-align:right;
            justify-content: space-around;
        }
        }
        }

        }

        .card-title:before{
            display:inline-block;
            font-family: 'Font Awesome\ 5 Free';
            font-weight:900;
            font-size: 1.1rem;
            text-align: center;
            border: 2px solid grey;
            border-radius: 100px;
            width: 30px;
            height: 30px;
            padding-bottom: 3px;
            margin-right: 10px;
        }

        .notification-invitation {
        .card-body {
        .card-title:before {
            color: #90CAF9;
            border-color: #90CAF9;
            content: "\f007";
        }
        }
        }

        .notification-warning {
        .card-body {
        .card-title:before {
            color: #FFE082;
            border-color: #FFE082;
            content: "\f071";
        }
        }
        }

        .notification-danger {
        .card-body {
        .card-title:before {
            color: #FFAB91;
            border-color: #FFAB91;
            content: "\f00d";
        }
        }
        }

        .notification-reminder {
        .card-body {
        .card-title:before {
            color: #CE93D8;
            border-color: #CE93D8;
            content: "\f017";
        }
        }
        }

        .card.display-none{
            display: none;
            transition: opacity 2s;
        }


    </style>
@endsection
@section('content')

    <div class="row notification-container">
        <h2 class="text-center">My Notifications</h2>
        <div class="card notification-card notification-invitation">
            <div class="card-body">
                <table id="notify-body">
                    @forelse($notify as $key => $data)
                        <tr>
                            <td style="width:70%"><div class="card-title"><b>{{ $data->buyer->name }}</b> sign offer</div></td>
                            <td style="width:20%">
                                <a href="{{route('buyer_signatures',$data->offer->id)}}" class="btn btn-primary">View</a>
                                <button type="button"  onclick="dissmissnotify({{ $data->id }})" class="btn btn-danger dismiss-notification">Dismiss</button>
                            </td>
                        </tr>
                    @empty
                        <tr class="text-center">
                            <td colspan="100%">No notification found.</td>
                        </tr>
                    @endforelse
                </table>
            </div>
        </div>

    </div>


@endsection

@section('script')

    <!-- DataTables  & Plugins -->
    <script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-buttons/js/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/jszip/jszip.min.js') }}"></script>
    <script src="{{ asset('plugins/pdfmake/pdfmake.min.js') }}"></script>
    <script src="{{ asset('plugins/pdfmake/vfs_fonts.js') }}"></script>
    <script src="{{ asset('plugins/datatables-buttons/js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-buttons/js/buttons.print.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-buttons/js/buttons.colVis.min.js') }}"></script>


    <script>
        function dissmissnotify(id) {
            $.ajax({
                type: 'POST',
                url: '{{ route('notify.dismiss') }}',
                data: {
                    id: id,
                    _token: '{{ csrf_token() }}'
                },
                success: function(data) {
                    console.log(data);
                    $('#notify-body').empty()
                    var row = '';
                    data.forEach(function (val){
                        row += '<tr>';
                        row += '<td style="width:70%"><div class="card-title"><b>'+val.buyer.name+'</b> sign offer</div></td>';
                        row += '<td style="width:20%">';
                        row += '<a href="{{route('buyer_signatures',"'+val.offer.id+'")}}" class="btn btn-primary">View</a>';
                        row += '<button type="button"  onclick="dissmissnotify('+val.id+')" class="btn btn-danger dismiss-notification">Dismiss</button>';
                        row += '</tr>';
                    })

                    $('#notify-body').prepend(row);



                }
            });
        }
    </script>

@endsection