@extends('Partners.Layouts.Page')

@section('styles')
    <style>
        #validation-step-2 {
            display: none;
        }

        #validate-national[disabled=true] {
            background-color: #ffffff;
        }
    </style>
@endsection

@section('content')

    <!-- National ID Modal -->
    <div class="modal fade" id="national-id-modal" tabindex="-1" aria-labelledby="national-id-modal-label" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title" id="cancel-booking-title">توثيق الهوية</h5>

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div id="validation-step-1">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="">برجاء ادخال رقم الهوية:</label>
                            <input id="national-id" class="form-control form-control-lg" type="number" />
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button id="validate-national" class="btn btn-lg btn-success">توثيق الهوية</button>
                    </div>
                </div>

                <div id="validation-step-2">
                    <iframe width="100%" height="300px" src=""></iframe>
                </div>
            </div>
        </div>
    </div>

    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto"><a href="{{partner_route()}}">الرئيسية /</a></h4>
                <h4 class="content-title mb-0 my-auto"><a href="{{partner_route('contracts.index')}}">الحساب الشخصي /</a></h4>
                <span class="text-muted mt-1 tx-13 ms-2 mb-0">{{$page_title}}</span>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h4 class="card-title">{{$page_title}}</h4>
        </div>

        <div id="agreement-wrapper" style="padding:1rem;">
            @include('Pages.Agreement')
        </div>

        @if(!partner_auth()->user()->nafath_validated)
            <div class="card-footer text-center">
                <button class="btn btn-lg btn-success" data-bs-toggle="modal" data-bs-target="#national-id-modal">توقيع الاتفاقية</button>
            </div>
        @elseif(is_null(partner_auth()->user()->signed_at))
            <div class="card-footer text-center">
                <button class="btn btn-lg btn-success" id="sign-contract">توقيع الاتفاقية</button>
            </div>
        @endif

    </div>
@endsection

@section('scripts')
    <script src="https://js.pusher.com/8.2.0/pusher.min.js"></script>

    <script>
        $.ajaxSetup({
            headers: {
                "Authorization": `Bearer `+localStorage.getItem('access_token')
            }
        });

        const Step1 = $('#validation-step-1'),
              Step2 = $('#validation-step-2');

        $.get('/get-token')
            .done((res) => {
                localStorage.setItem('access_token', res.token)

                $.ajaxSetup({
                    headers: {
                        "Authorization": `Bearer `+res.token
                    }
                });
            })

        @if(!partner_auth()->user()->nafath_validated)
            const ValidationNational = $('#validate-national');

            ValidationNational.on('click', () => {

                ValidationNational.addClass('disabled').attr('disabled', true)

                    $.post('/api/v1/nafath/send-request', {
                        national_id: $('#national-id').val()
                    })
                    .done((res) => {
                        Step1.hide();
                        Step2.show();

                        $('iframe').attr('src', res.data.link);
                    })
                    .fail(function (data){
                        ValidationNational.removeClass('disabled').attr('disabled', false)
                        toastr.error("برجاء التأكد من ادخال رقم الهوية.")
                    })
                })

            // Enable pusher logging - don't include this in production
            Pusher.logToConsole = false;

            var pusher = new Pusher('42b65279291fa0d064b4', {
                cluster: 'ap1'
            });

            var channel = pusher.subscribe('nafath.partner.{{partner_auth()->id()}}');

            channel.bind('NafathPartnerValidation', function() {
                window.location.reload();
            });
        @else
            $('#sign-contract').on('click', function () {
                $(this).attr('disabled', true)

                $.post('/api/v1/contract-signed', {
                    national_id: $('#national-id').val()
                })
                    .done((res) => {
                        window.location.href = '/agreement/success';
                    })
            })
        @endif

    </script>
@endsection