@extends(backpack_view('blank'))
@section('head_scripts')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
@endsection
@php
    $defaultBreadcrumbs = [
        trans('backpack::crud.admin') => url(config('backpack.base.route_prefix'), 'dashboard'),
        $crud->entity_name_plural => url($crud->route),
        trans('backpack::crud.preview') => false,
    ];
    
    // if breadcrumbs aren't defined in the CrudController, use the default breadcrumbs
    $breadcrumbs = $breadcrumbs ?? $defaultBreadcrumbs;
    
    $test = round(count($crud->columns()) / 2);
    
@endphp

@section('header')
    <section class="container-fluid d-print-none">
        @php
            $linkPrint = 'javascript: window.print();';
            $isLink = false;
            if ($crud->entity_name == 'quotation') {
                $linkPrint = route('quotation.print', ['id' => request()->route('id')]);
                $isLink = true;
            } elseif ($crud->entity_name == 'agreement') {
                $linkPrint = route('agreement.print', ['id' => request()->route('id')]);
                $isLink = true;
            } elseif ($crud->entity_name == 'variation-order') {
                $linkPrint = route('variation-order.print', ['id' => request()->route('id')]);
                $isLink = true;
            } elseif ($crud->entity_name == 'invoice') {
                $linkPrint = route('invoice.print', ['id' => request()->route('id')]);
                $isLink = true;
            } elseif ($crud->entity_name == 'handover') {
                $linkPrint = route('handover.print', ['id' => request()->route('id')]);
                $isLink = true;
            }
        @endphp
        @if ($crud->entity_name != 'project-P&L-report')
            <a href="{{ $linkPrint }}" target="{{ $isLink ? '_blank' : '' }}"
                class="btn float-right btn-primary pt-1 pb-0 px-2"><i style="font-size: 24px;" class="la la-print"></i></a>
        @endif
        <h2>
            <span class="text-capitalize">{!! $crud->getHeading() ?? $crud->entity_name_plural !!}</span>
            <small>{!! $crud->getSubheading() ?? mb_ucfirst(trans('backpack::crud.preview')) . ' ' . $crud->entity_name !!}.</small>
            @if ($crud->hasAccess('list'))
                <small class=""><a href="{{ url($crud->route) }}" class="font-sm"><i class="la la-angle-double-left"></i>
                        {{ trans('backpack::crud.back_to_all') }} <span>{{ $crud->entity_name_plural }}</span></a></small>
            @endif
        </h2>
    </section>
@endsection

@section('content')
    <div class="row">
        <div class="col-md-12">
            <!-- Default box -->
            @if ($crud->model->translationEnabled())
                <div class="row">
                    <div class="col-md-12 mb-2">
                        <!-- Change translation button group -->
                        <div class="btn-group float-right">
                            <button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                                {{ trans('backpack::crud.language') }}:
                                {{ $crud->model->getAvailableLocales()[request()->input('locale') ? request()->input('locale') : App::getLocale()] }}
                                &nbsp; <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                @foreach ($crud->model->getAvailableLocales() as $key => $locale)
                                    <a class="dropdown-item"
                                        href="{{ url($crud->route . '/' . $entry->getKey() . '/show') }}?locale={{ $key }}">{{ $locale }}</a>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            @endif
            <div class=" {{ $test > 0 ? 'row' : 'col-md-6' }}">
                <div class=" col-md-6 ">
                    <table class="table table-striped table-bordered mb-0">
                        <tbody>
                            @foreach ($crud->columns() as $column)
                                <tr>
                                    @if ($column['priority'] <= $test)
                                        <td>
                                            <strong>{!! $column['label'] !!}:</strong>
                                        </td>
                                        <td>
                                            @if (!isset($column['type']))
                                                @include('crud::columns.text')
                                            @else
                                                @if (view()->exists('vendor.backpack.crud.columns.' . $column['type']))
                                                    @include('vendor.backpack.crud.columns.' . $column['type'])
                                                @else
                                                    @if (view()->exists('crud::columns.' . $column['type']))
                                                        @include('crud::columns.' . $column['type'])
                                                    @else
                                                        @include('crud::columns.text')
                                                    @endif
                                                @endif
                                            @endif
                                        </td>
                                    @endif
                            @endforeach
                        </tbody>
                    </table>
                </div><!-- /.box-body -->
                @if ($crud->entity_name == 'project-P&L-report')
                    @include('app.project-commission-report.export')
                @endif
                <div class=" col-md-6 ">
                    <table class="table table-striped table-bordered mb-0">
                        <tbody>
                            @foreach ($crud->columns() as $column)
                                <tr>
                                    @if ($column['priority'] > $test)
                                        <td>
                                            <strong>{!! $column['label'] !!}:</strong>
                                        </td>
                                        <td>
                                            @if (!isset($column['type']))
                                                @include('crud::columns.text')
                                            @else
                                                @if (view()->exists('vendor.backpack.crud.columns.' . $column['type']))
                                                    @include('vendor.backpack.crud.columns.' . $column['type'])
                                                @else
                                                    @if (view()->exists('crud::columns.' . $column['type']))
                                                        @include('crud::columns.' . $column['type'])
                                                    @else
                                                        @include('crud::columns.text')
                                                    @endif
                                                @endif
                                            @endif
                                        </td>
                                    @endif
                            @endforeach
                        </tbody>
                    </table>
                </div><!-- /.box-body -->
            </div>

            <!-- Project -->
            @if ($crud->entity_name == 'project')
                {{ view('app.project.show') }}
            @endif
            <!-- End Project -->

            <!-- Quotation Item -->
            @if ($crud->entity_name == 'quotation')
                {{ view('app.quotation.show') }}
            @endif
            <!-- End Quotation Item -->

            <!-- Agreement Item -->
            @if ($crud->entity_name == 'agreement')
                {{ view('app.agreement.show') }}
            @endif
            <!-- End Agreement Item -->

            <!-- Variation Order -->
            @if ($crud->entity_name == 'variation-order')
                {{ view('app.variation-order.show') }}
            @endif
            <!-- End Variation Order -->

            <!-- Template Quotation Item -->
            @if ($crud->entity_name == 'template_quotation')
                {{ view('app.template.quotation.show') }}
            @endif
            <!-- End Template Quotation Item -->

            <!-- Pic Team -->
            @if ($crud->entity_name == 'pic-team')
                <h2 class="mb-2 mt-4 text-capitalize">Designers</h2>

                @php
                    $designer = $crud->entry->salesman;
                @endphp

                <table class="table table-bordered table-striped text-center">
                    <thead>
                        <tr>
                            <th width="25px">No</th>
                            <th>Name</th>
                            <th>Commission(%)</th>
                            <th>Commission($)</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($designer as $key => $item)
                            <tr>
                                <td>{{ $key + 1 }}</td>
                                <td>{{ $item->name }}</td>
                                <td>{{ $item->pivot->sales_percent }}%</td>
                                <td>$ {{ $item->pivot->sales_budget }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @endif
            <!-- End Pic Team -->

            <!-- Leads -->
            @if ($crud->entity_name_plural == 'leads')
                @php
                    if ($crud->entity_name == 'lead') {
                        $remarks = \App\Models\LeadRemark::with('user')
                            ->where('lead_id', $entry->getKey())
                            ->orderByDesc('created_at')
                            ->get();
                    } elseif ($crud->entity_name == 'project') {
                        $remarks = \App\Models\LogSales::with('user')
                            ->where('project_id', $entry->getKey())
                            ->orderByDesc('created_at')
                            ->get();
                    }
                @endphp
                <div class="row">
                    <div class="col-md-6 mt-4 bold-labels">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="text-left mb-0">Appointment</h4>
                            </div>
                            <div class="card-body">
                                @php
                                    $appointments = \App\Models\Appointment::where('lead_id', $entry->getKey())
                                        ->orderBy('date', 'ASC')
                                        ->get();
                                @endphp
                                <div class="pl-3 pr-5">
                                    <ul class="timeline">
                                        @forelse ($appointments as $appointment)
                                            <li>
                                                <label
                                                    style="color: #7866e6">{{ date('Y-m-d', strtotime($appointment->date)) }}
                                                    {{ $appointment->time }}</label>
                                                <p>Venue: {{ $appointment->venue }}</p>
                                            </li>
                                        @empty
                                            <li>
                                                <label class="mb-0" style="color: #7866e6">Appointment is Empty</label>
                                            </li>
                                        @endforelse
                                    </ul>
                                </div>
                            </div>
                            <div class="card-footer">
                                <a href="{{ url('admin/appointment/create?add_from_lead_id=' . $entry->getKey()) }}"
                                    class="btn btn-light text-left">
                                    Add new Appointment <i class="la la-plus float-right mt-1 ml-2"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mt-4 bold-labels">
                        <div class="card mb-0">
                            <div class="card-header">
                                <h4 class="text-left mb-0">Remarks</h4>
                            </div>
                            <div class="card-body row">
                                <div class="pl-3 pr-5">

                                    <ul class="timeline">
                                        @php $count =0; @endphp
                                        @forelse($remarks as $remark)
                                            @if ($count == 10)
                                                @php break; @endphp
                                            @endif

                                            @if ($remark->remark_id == 0)
                                                <li>
                                                    <label
                                                        style="color: #7866e6">{{ $remark->created_at->format('Y-m-d') }}</label>
                                                    <p>{{ $remark->remarks }}</p>
                                                </li>
                                            @else
                                                <li>
                                                    <label
                                                        style="color: #7866e6">{{ $remark->created_at->format('Y-m-d') }}</label>
                                                    <p>{{ $remark->remark->name }}</p>
                                                </li>
                                            @endif

                                            @php $count++; @endphp
                                        @empty
                                            <li>
                                                <label class="mb-0" style="color: #7866e6">Remark is Empty</label>
                                            </li>
                                        @endforelse
                                    </ul>
                                </div>
                            </div>
                            @canany(['all-leads', 'lead-remarks'])
                                <div class="card-footer">
                                    <a href="{{ url('admin/lead/' . $entry->getKey() . '/remark') }} "
                                        class="btn btn-light text-left">
                                        Add new Remarks <i class="la la-plus float-right"></i>
                                    </a>
                                </div>
                            @endcanany
                        </div>
                    </div>
                </div>
                <script>
                    // Get the modal
                    var modal = document.getElementById("testModal");

                    // Get the button that opens the modal
                    var btn = document.getElementById("myBtn");

                    // Get the <span> element that closes the modal
                    var span = document.getElementsByClassName("test-close")[0];

                    // When the user clicks the button, open the modal
                    btn.onclick = function() {

                        modal.style.display = "block";
                    }

                    // When the user clicks on <span> (x), close the modal
                    span.onclick = function() {
                        modal.style.display = "none";
                    }

                    // When the user clicks anywhere outside of the modal, close it
                    window.onclick = function(event) {
                        if (event.target === modal) {
                            modal.style.display = "none";
                        }
                    }
                </script>
                <script type="text/javascript">
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });

                    $(".btn-submit").click(function(e) {
                        e.preventDefault();
                        let remarks = $("textarea[name=remarks]").val();
                        let log_id = $("input[name=log_id]").val();

                        $.ajax({
                            type: 'POST',
                            url: "{{ route($crud->entity_name . '.remark', ['id' => $entry->getKey()]) }}",
                            data: {
                                remarks: remarks,
                                log_id: log_id

                            },
                            success: function() {
                                modal.style.display = "none";
                                location.reload();
                                new Noty({
                                    type: "success",
                                    text: 'Remarks created',
                                }).show();

                            }
                        });

                    });
                </script>
            @endif
            <!-- End Leads -->

            <!-- Invoice -->
            @if ($crud->entity_name == 'invoice')
                {{ view('app.invoice.show') }}
            @endif
            <!-- End Invoice -->

            <!-- Project Commision Report -->
            @if ($crud->entity_name == 'project-P&L-report')
                {{ view('app.project-commission-report.show') }}
            @endif
            <!-- End Project Commision Report -->

            <!-- Handover Configuration -->
            @if ($crud->entity_name == 'handover-configuration')
                {{ view('app.configuration.handover-detail') }}
            @endif
            <!-- End Handover Configuration -->

            <div class="mt-4">
                @if ($crud->buttons()->where('stack', 'line')->count())
                    @include('crud::inc.button_stack', ['stack' => 'line'])
                @endif
            </div>
        </div>
        <!-- /.box -->
    </div>
    @if ($crud->entity_name_plural == 'Supplier Invoices')
        <div class="modal" tabindex="-1" role="dialog" id="modal-approve-partial">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Approve Partial</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="form-approve-partial">
                            <div class="row mt-4">
                                <input type="hidden" name="master_item_id" id="master_item_id">
                                <div class="col-md-12">
                                    <label for="">Supplier Invoice Amount</label>
                                    <input type="number" class="form-control" name="total_amount" id="total_amount"
                                        readonly>
                                </div>
                                <div class="col-md-12">
                                    <label for="">Total Approved </label>
                                    <input type="number" class="form-control" name="submitted_amount" id="submitted_amount"
                                        readonly>
                                </div>
                                <div class="col-md-12">
                                    <label for="">Percentage</label>
                                    <input type="number" class="form-control" name="percentage" id="percentage">
                                </div>
                                <div class="col-md-12">
                                    <label for="">Amount</label>
                                    <input type="number" class="form-control" name="approved_amount"
                                        id="approved_amount">
                                </div>
                                <div class="col-md-12">
                                    <label for="">Remarks</label>
                                    <textarea name="remarks" class="form-control" id="remarks" cols="30" rows="3"
                                        placeholder="Type Something"></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success" id="btn-approve-form-save">Save changes</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection


@section('after_styles')
    <link rel="stylesheet"
        href="{{ asset('packages/backpack/crud/css/crud.css') . '?v=' . config('backpack.base.cachebusting_string') }}">
    <link rel="stylesheet"
        href="{{ asset('packages/backpack/crud/css/show.css') . '?v=' . config('backpack.base.cachebusting_string') }}">
@endsection

@section('after_scripts')
    <script src="{{ asset('packages/backpack/crud/js/crud.js') . '?v=' . config('backpack.base.cachebusting_string') }}">
    </script>
    <script src="{{ asset('packages/backpack/crud/js/show.js') . '?v=' . config('backpack.base.cachebusting_string') }}">
    </script>
    @if ($crud->entity_name_plural == 'Supplier Invoices')
        <script>
            $(document).on('click', '.act-btn-supplier-invoices', function(e) {
                e.preventDefault();
                console.log('act')
                let url = $(this).data('route');
                let type = $(this).data('type');
                let id = $(this).data('id');
                let submittedAmount = $(this).data('submitted_amount');
                let totalAmount = $(this).data('amount');
                let remainingUnpaid = $(this).data('remaining-unpaid');
                let params = {};

                if (type == "approve-full") {
                    params.approved_amount = $(this).data('amount');
                    url += `?approved_amount=${remainingUnpaid}`;
                    let ajaxPost = getDataWithAjax(url, 'POST', []).done(function(res) {
                        new Noty({
                            text: res,
                            type: "success"
                        }).show();
                        location.reload();
                    })

                    ajaxPost.fail(function(e) {
                        console.log(e);
                        new Noty({
                            text: "failed to change status Supplier Invoice",
                            type: "danger"
                        }).show();
                    })
                } else if (type == "approve-partial") {
                    $(`#modal-approve-partial`).appendTo("body").modal('show');
                    $('#form-approve-partial').trigger("reset");
                    $('#submitted_amount').val(submittedAmount);
                    $('#total_amount').val(totalAmount);

                    $(document).on('click', '#btn-approve-form-save', function(e) {
                        e.preventDefault();
                        e.stopImmediatePropagation();
                        let form = $('#form-approve-partial')[0];
                        let formData = new FormData(form);
                        let ajaxPost = getDataWithAjax(url, 'POST', formData).done(function(res) {
                            new Noty({
                                text: res,
                                type: "success"
                            }).show();
                            $(`#modal-approve-partial`).modal('hide');
                            location.reload();
                        })
                        ajaxPost.fail(function(e) {
                            if (e.status == 400) {
                                new Noty({
                                    text: e.responseJSON,
                                    type: "danger"
                                }).show();
                            } else {
                                new Noty({
                                    text: "failed to approve Supplier Invoice",
                                    type: "danger"
                                }).show();
                            }


                        })
                    })

                } else if (type == "reject") {
                    window.location.replace(url);
                } else {
                    let ajaxPost = getDataWithAjax(url, 'POST', $.param(params)).done(function(res) {
                        new Noty({
                            text: res,
                            type: "success"
                        }).show();

                        location.reload();
                    })

                    ajaxPost.fail(function(e) {
                        console.log(e);
                        new Noty({
                            text: "failed to change status Supplier Invoice",
                            type: "danger"
                        }).show();
                    })
                }




            });

            $('#percentage').keyup(function() {
                let total = Number($('#total_amount').val());
                let percentage = (Number($('#percentage').val()) / 100) * total;
                $('#approved_amount').val(percentage.toFixed(2));
            });

            $('#approved_amount').keyup(function() {
                let total = Number($('#total_amount').val());
                let amount = Number($('#approved_amount').val());
                let percentage = (amount / total) * 100;
                $('#percentage').val(percentage.toFixed(2));

            });

            function getDataWithAjax(url_, method_ = 'GET', data_ = []) {
                var ajax_ = $.ajax({
                    processData: false,
                    dataType: 'json',
                    contentType: false,
                    url: url_,
                    method: method_,
                    data: data_,
                });
                return ajax_;
            }

            function isEmpty(str) {
                return (!str || str.length === 0);
            }
        </script>
    @endif

    @if ($crud->entity_name == 'lead')
        {{--  FOR SOFT DELETE LEADS  --}}
        <script>
            //ADD AND REMOVE CLASS TO BUTTON
            $("#act-void").removeClass("dropdown-item");
            $("#act-void .act-ico").removeClass("act-ico");
            $("#act-void").addClass("btn btn-danger text-white");

            $(document).on('click', '#act-void', function(e) {
                let deleteRoute = $(this).data('route');
                let dataId = $(this).data('id');
                $.ajax({
                    type: 'POST',
                    url: deleteRoute,
                    success: function(result) {
                        new Noty({
                            text: "Lead has been successfully removed",
                            type: "success"
                        }).show();
                        crud.table.ajax.reload();
                    },
                    error: function(res) {
                        new Noty({
                            text: res.responseJSON,
                            type: "danger"
                        }).show();
                    }
                });
            })

            $("#act-restore").removeClass("dropdown-item");
            $("#act-restore .act-ico").removeClass("act-ico");
            $("#act-restore").addClass("btn btn-success text-white");

            $(document).on('click', '#act-restore', function(e) {
                let deleteRoute = $(this).data('route');
                let dataId = $(this).data('id');
                $.ajax({
                    type: 'POST',
                    url: deleteRoute,
                    success: function(result) {
                        new Noty({
                            text: "Lead has been successfully restore",
                            type: "success"
                        }).show();
                        crud.table.ajax.reload();
                    },
                    error: function(res) {

                        new Noty({
                            text: typeof(res.responseJSON) === 'object' ? res.responseJSON.message :
                                res.responseJSON,
                            type: "danger"
                        }).show();
                    }
                });
            })
        </script>
    @endif
@endsection