@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>
        .form-group > .select2-container {
            width: 100% !important;
        }

        .alert {
            margin-top: 3rem;
            position: relative;
            padding: 0.75rem 1.25rem;
            margin-bottom: 1rem;
            border: 1px solid transparent;
            border-radius: 0.25rem;
        }
    </style>
@endsection
@section('content')

    <div class="content articles">
        <div class="row pt-5">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Offers</h3>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <table id="buyerTable" class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>Offer ID</th>
                                <th>Property MLS</th>
                                <th>Property Address</th>
                                <th>Buyer</th>
                                <th>Escrow Company</th>
                                <th>Escrow Officer</th>
                                <th>Type</th>
                                @if (Auth::user()->role_id === 1)
                                    <th>Registered By</th>
                                @endif
                                <th>Actions</th>
                                <th>Message</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($data as $offer)
                                <tr id='row{{$offer->id}}'>
                                    <td>{{$offer->id}}</td>
                                    <td>{{$offer->propertyMLS}}</td>
                                    <td>{{$offer->propertyZip}}</td>
                                    <td>{{$offer->buyers}}</td>
                                    <td>{{$offer->escrowCompany ? $offer->escrowCompany : ''}}</td>
                                    <td>{{$offer->escrowOfficer ? $offer->escrowOfficer : ''}}</td>
                                    <td>
                                        <label class="badge badge-info">
                                            {{$offer->type ? ucfirst($offer->type) : 'Incomplete'}}
                                        </label>
                                    </td>
                                    @if (Auth::user()->role_id === 1)
                                        <td>{{$offer->name}}</td>
                                    @endif
                                    <td>

                                        @if($offer->type === "completed")
                                            @php
                                                $offerDetail = App\Models\Offers::getOfferDetailOfferById($offer->id);
                                                $offerBuyer = \App\Models\OfferBuyers::where('offer_id', $offer->id)->first();
                                            @endphp
                                                @if (!is_null($offerBuyer->contract))
                                                    <a href="{{ route('viewOffer', $offer->id) }}">
                                                        <i class='fa fa-eye text-blue mr-2'></i>
                                                    </a>
                                                @endif
                                            <a href="javascript:void(0)" id="send-email"
                                               data-offer_id="{{ $offer->id }}"
                                               title="Buyer Send offer"><i
                                                    class='fa fa-envelope text-blue'></i></a>

                                            <a href="javascript:void(0)" id="seller-send-offer"
                                               data-offer_id="{{ $offer->id }}"
                                               data-seller_id="{{ $offer->seller_id }}"
                                               title="seller Send offer"><i
                                                    class='fa fa-user text-blue'></i></a>
                                            <a href="{{route('delete_offer',$offer->id)}}"
                                               onclick="return confirm('Are you sure you want to delete this offer?')">
                                                <i class='fa fa-trash ml-2 text-red'></i>
                                            </a>
                                        @else
                                            <a href="edit/offer/{{$offer->id}}"><i
                                                    class='fa fa-pen ml-2 text-green'></i></a>

                                            <a href="{{route('delete_offer',$offer->id)}}"
                                               onclick="return confirm('Are you sure you want to delete this offer?')">
                                                <i class='fa fa-trash ml-2 text-red'></i>
                                            </a>
                                        @endif
                                        <a href="{{route('buyer_signatures',$offer->id)}}" class="text-red"
                                           style="padding-left: 5px;">
                                            <i class="fas fa-file-signature mr-1"></i>
                                        </a>
                                    </td>
                                    <td><a href="{{route('buyer.chat',$offer->id)}}"><i class="fas fa-comment-dots"></i></a></td>
                                </tr>
                            @empty
                                <tr class="text-center">
                                    <td colspan="100%">No record found.</td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
            </div>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="sendEmailModal" data-backdrop="static" data-keyboard="false" tabindex="-1"
             aria-labelledby="sendEmailModalDropLabel" aria-hidden="true">
            <div class="modal-dialog">
                <form id="sendEmailForm" action="{{ route('sendOfferViaEmail') }}" method="POST">
                    @csrf
                    <input type="hidden" name="offer_id">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="sendEmailModalDropLabel">Offer Sender</h5>
                            <button type="button" class="close cancel-email" data-dismiss="modal"
                                    aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-12 form-group">
                                    <label for="sentToUsersEmail">Members</label>
                                    <select multiple name="sentToUsersEmail[]" class="form-control sentToUsersEmail"
                                            id="sentToUsersEmail">
                                        @if(count($usersEmail) > 0)
                                            <option disabled>Select Agent/User</option>
                                            @foreach($usersEmail as $userEmail)

                                                <option value="{{ $userEmail }}">
                                                    {{ $userEmail }}
                                                </option>
                                            @endforeach
                                        @else
                                            <option disabled selected>No user at the moment.</option>
                                        @endif
                                    </select>
                                </div>

                                <div class="col-md-12 text-center">
                                    <hr class="text-gray">
                                    <span>~~ OR ~~</span>
                                    <hr class="text-gray">
                                </div>
                                <div class="col-md-12">
                                    <div class="row initialField form-group">
                                        <div class="col-md-10">
                                            <label for="sentToUsersEmail">Other Email</label>
                                            <input type="email" name="sentToOthersEmail[]"
                                                   class="form-control sentToOthersEmail" id="sentToOthersEmail">
                                        </div>
                                        <div class="col-md-2 mt-4 add-field-div">
                                            <button type="button" class="btn btn-secondary add-field">
                                                <i class="fa fa-plus"></i>
                                            </button>
                                        </div>
                                        <div class="col-md-2 removeBtn"></div>
                                    </div>
                                    <div id="dynamicField"></div>
                                </div>

                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary cancel-email" data-dismiss="modal">Close
                            </button>
                            <button type="submit" class="btn btn-primary send-btn">Send</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!--Agent Modal -->
        <div class="modal fade" id="agentModal" data-backdrop="static" data-keyboard="false" tabindex="-1"
             aria-labelledby="agentModalDropLabel" aria-hidden="true">
            <div class="modal-dialog">
                <form id="sendSellerForm" action="{{ route('sendOfferseller') }}" method="POST">
                    @csrf
                    <input type="hidden" name="offer_id">
                    <input type="hidden" name="seller_id">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="agentModalDropLabel">Offer Sender to Agent</h5>
                            <button type="button" class="close cancel-email" data-dismiss="modal"
                                    aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-12 form-group">
                                    <label for="sentToSeller">Agents</label>
                                    <select  name="sentToSeller" class="form-control sentToSeller" id="sentToSeller">
                                        @if(count($sellers) > 0)
                                            <option disabled>Select Seller</option>
                                            @foreach($sellers as $seller)

                                                <option value="{{ $seller->id }}">
                                                    {{ $seller->name }}
                                                </option>
                                            @endforeach
                                        @else
                                            <option disabled selected>No user at the moment.</option>
                                        @endif
                                    </select>
                                </div>

                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary cancel-email" data-dismiss="modal">Close
                            </button>
                            <button type="submit" class="btn btn-primary send-btn">Send</button>
                        </div>
                    </div>
                </form>
            </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 () {

            $("#buyerTable").DataTable({
                "bSort": false, "responsive": true, "lengthChange": false, "autoWidth": false,
                "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
            }).buttons().container().appendTo('#buyerTable_wrappers .col-md-6:eq(0)');

            $(document).on('click', '#send-email', function () {

                $('[name="offer_id"]').val($(this).data('offer_id'));
                $('#sentToUsersEmail').select2();
                $('#sendEmailModal').modal('show');

                $.ajax({
                    type: "POST",
                    url: "{{route('offer_details_data')}}",
                    data: {
                        _token: '{{ csrf_token() }}',
                        offer_id: $(this).data('offer_id')
                    },
                    dataType: 'json',
                    success: function (data) {

                        // Display the offer details in the modal
                        $('#sentToUsersEmail').empty();
                        // Append new options from the returned data
                        $.each(data, function (index, user) {
                            $('#sentToUsersEmail').append($('<option>', {
                                value: user.buyer,
                                text: user.buyer
                            }));
                        });

                        // Get all option values
                        var allValues = $('#sentToUsersEmail option').map(function () {
                            return this.value;
                        }).get();

                        // Set the value of the select element to all option values
                        $('#sentToUsersEmail').val(allValues).trigger('change.select2');
                        // Refresh the select2 dropdown menu
                        // $('#sentToUsersEmail').select2('destroy').select2();

                        $('#sentToUsersEmail').on('select2:unselecting', function (e) {
                            e.preventDefault();
                            return false;
                        });
                    }
                });

            });

            $(document).on('submit', '#sendEmailForm', function (e) {
                e.preventDefault();
                let form = $(this);
                $('.send-btn').text('Sending...');
                $('.cancel-email').addClass('d-none');
                $('.remove-field, .add-field, .send-btn').attr('disabled', true);
                $('.select2-container, .sentToOthersEmail').attr("style", "pointer-events: none;");
                $.ajax({
                    type: form.attr('method'),
                    url: form.attr('action'),
                    data: form.serialize(),
                    success: function (data) {
                        $('.cancel-email').removeClass('d-none');
                        $('.send-btn').text('Send');
                        $('.remove-field, .add-field, .send-btn').attr('disabled', false);
                        $('.select2-container, .sentToOthersEmail').attr("style", "pointer-events: all;");
                        if (!data.status) {
                            return Swal.fire({
                                position: 'top-end',
                                icon: 'error',
                                title: data.message,
                                showConfirmButton: false,
                                timer: 1500
                            })
                        }
                        Swal.fire({
                            position: 'top-end',
                            icon: 'success',
                            title: data.message,
                            showConfirmButton: false,
                            timer: 1500
                        });

                        form[0].reset();
                        $('#dynamicField').empty();
                        $('#sendEmailModal').modal('hide');
                    }
                });
            });

            $(document).on('click', '.add-field', function () {
                let initialField = $('.initialField').eq(0).clone();
                initialField.find('label').remove();
                initialField.find('.add-field-div').remove();
                initialField.find('.removeBtn').append('<button type="button" class="btn btn-danger remove-field"><i class="fa fa-minus"></i></button>')
                initialField.find('input').attr({
                    required: true
                }).val('');
                $('#dynamicField').append(initialField);
            });

            $(document).on('click', '.remove-field', function () {
                $(this).parents('.row').find('.initialField:last').remove();
            });

            $(document).on('click', '.cancel-email', function () {
                $('#sendEmailForm')[0].reset();
                $('#dynamicField').empty();
            });




            //agent

            $(document).on('click', '#seller-send-offer', function () {

                var offerId = $(this).data('offer_id');
                var sellerId = $(this).data('seller_id');
                $('[name="seller_id"]').val(sellerId);
                $('[name="offer_id"]').val(offerId);
                $('#sentToSeller').select2();
                $('#agentModal').modal('show');

                $.ajax({
                    type: "POST",
                    url: "{{route('offer_agent_data')}}",
                    data: {
                        _token: '{{ csrf_token() }}',
                    },
                    dataType: 'json',
                    success: function (data) {

                        $('#sentToSeller').empty();
                        $.each(data, function (index, user) {
                            $('#sentToSeller').append($('<option>', {
                                value: user.id,
                                text: user.name
                            }));
                        });

                        var allValues = $('#sentToSeller option').map(function () {
                            return this.value;
                        }).get();

                        $('#sentToSeller').val(allValues).trigger('change.select2');
                        $('#sentToSeller').on('select2:unselecting', function (e) {
                            e.preventDefault();
                            return false;
                        });
                    }
                });

            });

            $(document).on('submit', '#sendSellerForm', function (e) {
                e.preventDefault();
                let form = $(this);
                $('.send-btn').text('Sending...');
                $('.cancel-email').addClass('d-none');
                $('.remove-field, .add-field, .send-btn').attr('disabled', true);
                $('.select2-container, .sentToOthersEmail').attr("style", "pointer-events: none;");
                $.ajax({
                    type: form.attr('method'),
                    url: form.attr('action'),
                    data: form.serialize(),
                    success: function (data) {
                        $('.cancel-email').removeClass('d-none');
                        $('.send-btn').text('Send');
                        $('.remove-field, .add-field, .send-btn').attr('disabled', false);
                        $('.select2-container, .sentToOthersEmail').attr("style", "pointer-events: all;");
                        if (!data.status) {
                            return Swal.fire({
                                position: 'top-end',
                                icon: 'error',
                                title: data.message,
                                showConfirmButton: false,
                                timer: 1500
                            })
                        }
                        Swal.fire({
                            position: 'top-end',
                            icon: 'success',
                            title: data.message,
                            showConfirmButton: false,
                            timer: 1500
                        });

                        form[0].reset();
                        $('#dynamicField').empty();
                        $('#agentModal').modal('hide');
                    }
                });
            });

        });

    </script>
@endsection