@extends(backpack_view('blank'))
@if (
    $crud->entity_name == 'project' ||
        $crud->entity_name == 'quotation' ||
        $crud->entity_name == 'agreement' ||
        $crud->entity_name == 'variation-order' ||
        $crud->entity_name == 'template-quotation' ||
        $crud->entity_name == 'invoice' ||
        $crud->entity_name == 'vendor')
    @section('head_scripts')
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/jquery-autogrow-textarea@1.3.0/dist/jquery.autogrow.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sticky-js@1.3.0/dist/sticky.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
    @endsection

    @section('before_styles')
        <style type="text/css">
            .bg-transition {
                transition: all .3s;
            }

            .bg-tier-one {
                background-color: #ddd !important;
            }

            .bg-tier-two {
                background-color: #adb3bb !important
            }

            .bg-tier-three {
                background-color: #d3cfeb !important;
            }
        </style>
        <style>
            #date-payment {
                position: relative;
                /* width: 150px; height: 20px; */
                color: white;
            }

            #date-payment:before {
                position: absolute;
                top: 5px;
                left: 10px;
                content: attr(data-date);
                display: inline-block;
                color: #506690;
            }

            #date-payment::-webkit-datetime-edit,
            #date-payment::-webkit-inner-spin-button,
            #date-payment::-webkit-clear-button {
                display: none;
            }

            #date-payment::-webkit-calendar-picker-indicator {
                position: absolute;
                top: 7px;
                right: 5px;
                color: #506690;
                opacity: 1;
            }
        </style>
    @endsection
@endif

@php
    $defaultBreadcrumbs = [
        trans('backpack::crud.admin') => backpack_url('dashboard'),
        $crud->entity_name_plural => url($crud->route),
        trans('backpack::crud.edit') => false,
    ];

    // if breadcrumbs aren't defined in the CrudController, use the default breadcrumbs
    $breadcrumbs = $breadcrumbs ?? $defaultBreadcrumbs;
@endphp

@section('header')
    <section class="container-fluid">
        <h2>
            <span class="text-capitalize">{!! $crud->getHeading() ?? $crud->entity_name_plural !!}</span>
            <small>{!! $crud->getSubheading() ?? trans('backpack::crud.edit') . ' ' . $crud->entity_name !!}.</small>

            @if ($crud->hasAccess('list'))
                <small><a href="{{ url($crud->route) }}" class="d-print-none font-sm"><i
                            class="la la-angle-double-{{ config('backpack.base.html_direction') == 'rtl' ? 'right' : '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">
        @if (
            $crud->entity_name == 'term' ||
                $crud->entity_name == 'quotation' ||
                $crud->entity_name == 'agreement' ||
                $crud->entity_name == 'invoice' ||
                $crud->entity_name == 'variation-order' ||
                $crud->entity_name == 'template-quotation')
            <div class="col-md-12 bold-labels">
            @else
                <div class="{{ $crud->getEditContentClass() }}">
        @endif

        @include('crud::inc.grouped_errors')

        <form method="post" action="{{ url($crud->route . '/' . $entry->getKey()) }}"
            @if ($crud->hasUploadFields('update', $entry->getKey())) enctype="multipart/form-data" @endif>
            {!! csrf_field() !!}
            {!! method_field('PUT') !!}

            @if ($crud->model->translationEnabled())
                <div class="mb-2 text-right">
                    <!-- Single button -->
                    <div class="btn-group">
                        <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() . '/edit') }}?locale={{ $key }}">{{ $locale }}</a>
                            @endforeach
                        </ul>
                    </div>
                </div>
            @endif

            <!-- load the view from the application if it exists, otherwise load the one in the package -->
            @if (view()->exists('vendor.backpack.crud.form_content'))
                @include('vendor.backpack.crud.form_content', [
                    'fields' => $crud->fields(),
                    'action' => 'edit',
                ])
            @else
                @include('crud::form_content', ['fields' => $crud->fields(), 'action' => 'edit'])
            @endif

            {{-- Project --}}
            @if ($crud->entity_name == 'project')
                {{ view('app.project.payment.edit') }}
                {{--  {{ view('app.project.vendor.edit') }}  --}}
                {{ view('app.project.commission.edit') }}
            @endif

            {{-- End Project --}}

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

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

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


            {{-- Invoices --}}
            @if ($crud->entity_name == 'invoice')
                {{ view('app.invoice.edit') }}
            @endif
            {{-- End Invoices --}}

            {{-- PIC & TEAMS --}}
            @if ($crud->entity_name == 'pic-team')
                @php
                    $allSales = \App\Models\Salesman::all();
                    $items = '';
                    foreach ($allSales as $item) {
                        $items .= '<option value="' . $item->id . '">' . $item->name . '</option>';
                    }

                    $sales = $crud->entry->salesman;
                    $totalSales = $sales->count();
                    $curSales = '';

                    foreach ($sales as $key => $current) {
                        $rowIdx = $key += 1;
                        $curSales .=
                            '
                                <tr id="R' .
                            $rowIdx .
                            '">
                                    <td class="row-index text-center"> <p>' .
                            $rowIdx .
                            '</p> </td>
                                    <td>
                                        <select name="sales_id[]" class="form-control item_unit">
                                            <option value="' .
                            $current->id .
                            '" selected>' .
                            $current->name .
                            '</option>
                                            ' .
                            $items .
                            '
                                        </select>
                                    </td>
                                    <td>
                                        <div class="input-group">
                                        <input type="number" min="0" max="100" class="form-control"
                                            value="' .
                            $current->pivot->sales_percent .
                            '" name="sales_percent[]">
                                        <div class="input-group-append">
                                            <span class="input-group-text">%</span>
                                        </div>
                                        </div>
                                    </td>
                                    <td>
                                    <button type="button" name="remove" class="btn btn-danger remove">
                                        <i class="la la-remove"></i>
                                        remove
                                    </button>
                                    </td>
                                </tr>
                            ';
                    }
                @endphp
                <div class="bold-labels">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="float-left">Designer</h4>

                            <div id="addItem">
                                <a href="#" class="btn btn-primary float-right add">
                                    <i class="la la-plus"></i>
                                    Invite Designer
                                </a>
                            </div>

                        </div>
                        <div class="card-body">
                            <div>
                                <div class="table-repsonsive">
                                    <span id="error"></span>
                                    <table class="table table-bordered" id="item_table">
                                        <tr>
                                            <th>No</th>
                                            <th>Designer</th>
                                            <th>Commission(%)</th>
                                            <th>
                                                Actions
                                            </th>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <script>
                    $(document).ready(function() {

                        if ({{ $totalSales }}) {

                            $('#item_table').append(`{!! $curSales !!}`)

                        }

                        var rowIdx = {{ $totalSales }};

                        $("#addItem").on('click', '.add', function() {

                            $('html, body').animate({
                                scrollTop: $("#item_table tr:last").offset().top
                            }, 1000);

                            $("#item_table tr:last").after(
                                `<tr id="R${++rowIdx}">
                                            <td class="row-index text-center"> <p>${rowIdx}</p> </td>
                                            <td>
                                                <select name="sales_id[]" class="form-control item_unit">
                                                    {!! $items !!}
                                                </select>
                                            </td>
                                            <td>
                                                <div class="input-group">
                                                <input type="number" min="0" max="100" class="form-control"
                                                    name="sales_percent[]">
                                                <div class="input-group-append">
                                                    <span class="input-group-text">%</span>
                                                </div>
                                                </div>
                                            </td>
                                            <td>
                                                <button type="button" name="remove" class="btn btn-danger remove">
                                                    <i class="la la-remove"></i>
                                                    remove
                                                </button>
                                            </td>
                                        </tr>`)
                            if ($('#pic_percent').val() === '') {
                                $(".sales-percent").prop('disabled', true)
                            }
                            console.log($('#item_table'));

                        });

                        $(document).on('click', '.remove', function() {

                            var child = $(this).closest('tr').nextAll();

                            child.each(function() {

                                var id = $(this).attr('id');

                                var idx = $(this).children('.row-index').children('p');

                                var dig = parseInt(id.substring(1));

                                idx.html(`${dig - 1}`);

                                $(this).attr('id', `R${dig - 1}`);
                            });

                            $(this).closest('tr').remove();

                            rowIdx--;
                        });

                        function liveWrite() {
                            if ($('#pic_percent').val() === '') {
                                $(".sales-percent").prop('disabled', true)
                            }
                            let name;
                            let read = $('[pic_percent]');
                            // let write = $('[re-write]');
                            read.on('input', function() {
                                name = $(this).val();

                                if (name === '') {
                                    $(".sales-percent").prop('disabled', true)
                                    console.log(name)
                                } else {
                                    $(".sales-percent").prop('disabled', false)
                                }
                            });
                        }
                        liveWrite();

                    });
                </script>
            @endif
            {{-- END PIC & TEAMS --}}

            {{-- Template Quotation --}}
            @if ($crud->entity_name == 'template-quotation')
                {{ view('app.template.quotation.edit') }}
            @endif
            {{-- End Template Quotation --}}

            {{-- Appointment --}}
            @if ($crud->entity_name == 'lead')
                @php
                    $leadId = $entry->getKey();
                @endphp
                {{ view('app.lead.appointment', compact('leadId')) }}
            @endif
            {{-- End Appointment --}}

            @include('crud::inc.form_save_buttons')

        </form>
    </div>

    {{-- Remarks Timeline --}}
    @if ($crud->entity_name == 'lead')
        @php
            $remarks = \App\Models\LeadRemark::with('user')
                ->where('lead_id', $entry->getKey())
                ->orderByDesc('created_at')
                ->get();
        @endphp

        <div class="col-md-4 bold-labels">
            <div class="card">
                <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-block btn-light text-left">
                            Add new Remarks <i class="la la-plus float-right"></i>
                        </a>
                    </div>
                @endcanany
            </div>
        </div>
        @section('after_scripts')
            <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();

                        }
                    });

                });

                //FOR BUTTON RETURN LEAD
                $(".lead-return").click(function(e) {
                    alert("click bound directly to #test-element");
                });
            </script>
        @endsection
    @endif
    {{-- End Remarks Timeline --}}
    </div>

@endsection