@extends('layouts.app')
@section('plugin-styles')
    <link rel="stylesheet" href="{{ asset('vendors/jquery-file-upload/uploadfile.css') }}">
    <link type="text/css" rel="stylesheet" href="{{ asset('vendors/daterangepicker/css/daterangepicker.css') }}" />
@stop

@section('content')
    @php
        $category = $machinery->machinery_category_id;
    @endphp
    <div class="content">

        <form id="form" name="maintenances-form" action="{{ url('machineries/' . $machinery->id) }}"
            method="POST">

            <x-content.header title="{{ __('machineries.maintenance') }}">
                <x-slot:headerRight>

                    <button type="submit" class="btn-primary-base btn-save">
                        {{ trans('forms.lbl_save') }}
                    </button>

                    @can('delete', $machinery)
                        <button type="submit" class="btn-secondary-base btn-delete"
                            data-uri="{{ url('machineries/' . $machinery->id) }}" data-id="{{ $machinery->id }}"
                            data-redirect="{{ route('machineries.index') }}">
                            <x-svg-icon icon="icon-trash" /> {{ trans('forms.lbl_delete') }}
                        </button>
                    @endcan

                    <a href="{{ url()->previous() }}"
                        class="btn-tertiary-base">{{ trans('forms.lbl_back') }}</a>
                </x-slot:headerRight>
            </x-content.header>

            <div class="w-full mt-8">
                <div class="flex flex-col lg:flex-row gap-4">

                    <div class="w-full flex flex-col gap-5">
                        @include('machinery::form', [
                            'edit' => true,
                        ])
                    </div>
                </div>
            </div>
        </form>
    </div>
@stop

@section('footer-script')
    <script type="text/javascript" src="{{ asset('vendors/daterangepicker/js/daterangepicker.js') }}"></script>

    <script src="{{ asset('vendors/jquery-file-upload/jquery.uploadfile.min.js') }}"></script>

    <script src="{{ asset('js/jquery-file-upload.js') }}"></script>

    <script type="text/javascript">
        let workstations = {!! $workstations !!},
        workstation_id = {{ $machinery->workstation_id ? $machinery->workstation_id : 0 }};

        let date = date_end =
            '{{ request()->has('date') && request()->get('date') != '' ? date(request()->get('date')) : '' }}';

        date = (date != "") ? moment(date, "{{ getDateFormat() }}") : moment();
        date_end = (date_end != "") ? moment(date_end, "{{ getDateFormat() }}") : moment();

        @if ($machinery->getFirstMedia('cover_image'))
            drEvent.on('dropify.beforeClear', function(event, element) {
                if (confirm("{{ trans('forms.do_you_really_want_delete') }}")) {
                    return PDRequest({
                        type: "DELETE",
                        url: "{{ route('assets.destroy', $machinery->getFirstMedia('cover_image')->id) }}"
                    }).then(function(response) {
                        return true;
                    });
                } else {
                    return false;
                }
            });
        @endif

        $(".btn-save, .btn-complete").on("click", function(event) {
            event.preventDefault();
            if ($("#form").valid()) {
                data = $('#form').serializeFiles();

                PDRequest({
                    type: "POST",
                    url: $("#form").prop("action"),
                    data: data,
                    event: event
                }).then((response) => {
                    window.location = response.redirect;
                });
            }
        });

        function getWorkstations() {

            let model = $('#workstation'),
                locations = $('#locations').val();

            if (typeof locations === 'string') {
                locations = [locations];
            }

            model.empty();

            model.append("<option value=''>" + "{{ __('forms.lbl_select_workstation') }}" + "</option>");

            $.each(locations, function(index, element) {
                $.each(workstations[element], function(index, element) {
                    let selected = (workstation_id == element.id) ? "selected" : "";
                    model.append("<option " + selected + " value='" + element.id + "'>" + element.name +
                        "</option>");
                });
            })
        }

        getWorkstations();

        // $("#replies-"+response.case_id).append("<li id='reply-"+response.case_id+"'>"+response.html+"</li>");

        $('.reportrange').daterangepicker({
            // autoUpdateInput : false,
            opens: 'left',
            autoApply: true,
            autoUpdateInput: false,
            // startDate       : date,
            // endDate         : date_end,
            locale: {
                format: "{{ getDateFormat() }}",
                customRangeLabel: "{{ trans('label.pick_date_range') }}",
                "firstDay": 1,
                "daysOfWeek": daysOfWeek,
                "monthNames": monthNames
            },
            //ranges: rangeFilters,
            alwaysShowCalendars: true,
            showDropdowns: true,
            showWeekNumbers: true
        }, function(start, end) {
            $('.reportrange span.date-text').html(start.format('D MMM, YYYY') + ' - ' + end.format('D MMM, YYYY'));
            $(document).trigger('onRangeChanged');
        });

        $('.reportrange').on('apply.daterangepicker', function(ev, picker) {
            $("input[name='range']").val(picker.startDate.format("{{ getDateFormat() }}") + ' - ' + picker.endDate
                .format("{{ getDateFormat() }}"));
            getItems($('#machineries-activity'),
                "{{ route('machineries.maintenances.index', $machinery->id) }}");
        });

        $('.reportrange').on('cancel.daterangepicker', function(ev, picker) {
            $("input[name='range']").val('');
        });

        $("body").on("click", ".pagination a", function(event) {

            event.preventDefault();

            getItems($('#machineries-activity'), $(this).attr('href'));

        });

        $('body').on("change", 'select[name="supplier"]', function(event) {
            event.preventDefault();

            let contact = $(this).find('option:selected').data('contact');

            if(contact) {
                $("input[name='contact_info']").val((contact.address ? contact.address + ", " : '') + (contact.phone ? contact.phone : ''));
            } else {
                $("input[name='contact_info']").val('');
            }
        });

        callBackFunc = _.debounce(function(data) {
            getItems($('#machineries-activity'), "{{ route('machineries.maintenances.history', $machinery->id) }}");
        }, 500);

        $("body").on("keydown", "#search", function() {
            callBackFunc();
        });
    </script>
@stop