@extends('layouts.frontapp')

{{-- @section('contentHead')
<div class="kt-subheader   kt-grid__item" id="kt_subheader">
    <div class="kt-container  kt-container--fluid ">
        <div class="kt-subheader__main">
            <h3 class="kt-subheader__title"> Transaksi </h3>            
        </div>
        <div class="kt-subheader__toolbar" style="width: 1000px;">
            <a href="{{ route('transaction.create') }}" id="addBtn" class="btn btn-label-success btn-bold" data-url="" data-redirect="">Tambah Transaksi</a>
        </div>
    </div>    
</div>
@endsection --}}

@section('styles')
<style>
    button.disabled {
        cursor: not-allowed !important;
        pointer-events: none;
    }
</style>
@endsection

@section('content')
<div class="mobile-container">
    <div class="container">
        <div class="row mb-4 mt-4">
            <div class="col-8">
                {{-- <h5 class="text-center mt-4">Cipta Kreasi Baru</h5> --}}
                <a href="/"><img src="{{ asset('logo-ckb.png') }}" style="width: 100%" alt="LOGO CKB"></a>
            </div>
            <div class="col-4 text-right my-auto">
                <a class="btn btn-sm btn-danger mt-3" style="background: red !important;" href="{{ route('logout') }}" onclick="logout(event)">
                    {{ __('Logout') }}
                </a>
    
                <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                    @csrf
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <!--begin::Portlet-->
                <div class="kt-portlet">
                    <div class="kt-portlet__head">
                        <div class="kt-portlet__head-label">
                            <span>{{ $mechanic->name }}</span>
                        </div>
                        <div class="kt-portlet__head-toolbar">
                            <span class="float-right">{{ $now }}</span>
                        </div>
                    </div>
                    <div class="kt-portlet__body">
                        <div class="row">
                            <div class="col-8">
                                <b>Dealer {{ $mechanic->dealer_name }}</b><br><br>
                                <a href="#">Total {{ $count_transaction_dealers }} Pekerjaan terkirim pada dealer</a><br>
                                <a href="#">Anda telah posting {{ $count_transaction_users }} pekerjaan</a>
                            </div>
                            <div class="col-4">
                                <div class="text-center mt-2"> 
                                    <a href="{{ route('transaction.lists') }}">
                                        <i style="font-size: 16px;" class="fa fa-eye"></i> 
                                        <p>Laporan harian</p>
                                    </a>
                                </div>
                                <div class="text-center mt-2"> 
                                    <a href="{{ route('transaction.recap') }}">
                                        <i style="font-size: 16px;" class="fa fa-eye"></i> 
                                        <p>Rekap Laporan</p>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @if (session('success'))
        <div class="row mt-2 mb-2">
            <div class="col-12">
                <div class="alert alert—check alert-success fade show" role="alert">
                    <div class="alert-text">{{ session('success') }}</div>
                    <div class="alert-close">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true"><i class="la la-close"></i></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        @endif
        <div class="row">
            <div class="col-12">
                <!--begin::Portlet-->
                <div class="kt-portlet">
                    <div class="kt-portlet__body">
                        <ul class="nav nav-tabs  nav-tabs-line nav-tabs-line-primary" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link @if(old('form') == 'wash') @else active @endif" data-toggle="tab" href="#work">Form Kerja</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link @if(old('form') == 'wash') active @endif" data-toggle="tab" href="#wash">Form Cuci</a>
                            </li>
                        </ul>                    
        
                        <div class="tab-content">
                            <div class="tab-pane @if(old('form') == 'wash') @else active @endif" id="work" role="tabpanel">
                                <form action="{{ route('transaction.store') }}" method="POST" id="workForm">
                                    @csrf
                                    <input type="hidden" name="form" value="work">
                                    <input type="hidden" name="mechanic_id" value="{{ $mechanic->id }}">
                                    <input type="hidden" name="dealer_id" value="{{ $mechanic->dealer_id }}">
                                    <div class="form-group row">
                                        <div class="col-6">
                                            <input type="text" name="spk_no" class="form-control @if(old('form') == 'work') @error('spk_no') is-invalid @enderror @endif" value="{{ old('spk_no') }}" placeholder="No. SPK">
                                                
                                            @if(old('form') == 'work')
                                            @error('spk_no')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{!! $message !!}</strong>
                                            </span>
                                            @enderror
                                            @endif
                                        </div>
                                        <div class="col-6">
                                            <input type="text" name="police_number" class="form-control @if(old('form') == 'work') @error('police_number') is-invalid @enderror" @endif value="{{ old('police_number') }}" placeholder="No. Polisi">
                                            @if(old('form') == 'work')
                                            @error('police_number')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{!! $message !!}</strong>
                                            </span>
                                            @enderror
                                            @endif
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-6">
                                            <select name="warranty" class="form-control @if(old('form') == 'work') @error('warranty') is-invalid @enderror @endif">
                                                <option selected>Warranty</option>
                                                <option value="1" @if(old('form') == 'work') @if(old('warranty') == 1) selected @endif @endif>Ya</option>
                                                <option value="0" @if(old('form') == 'work') @if(old('warranty') == 0) selected @endif @endif>Tidak</option>
                                            </select>
                                            @if(old('form') == 'work')
                                            @error('warranty')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{!! $message !!}</strong>
                                            </span>
                                            @enderror
                                            @endif
                                        </div>
                                        <div class="col-6">
                                            <input type="text" name="date" id="date-work" required class="form-control @if(old('form') == 'work') @error('date') is-invalid @enderror @endif" placeholder="Tanggal Pekerjaan">
                                            @if(old('form') == 'work')
                                            @error('date')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{!! $message !!}</strong>
                                            </span>
                                            @enderror
                                            @endif
                                        </div>
                                    </div>
                                    <div class="form-group mt-4">
                                        <select name="user_sa_id" class="form-control @if(old('form') == 'work') @error('user_sa_id') is-invalid @enderror @endif">
                                            <option value="" selected>Service Advisor</option>
                                            @foreach ($user_sas as $user_sa)
                                            <option @if(old('form') == 'work') @if($user_sa->id == old('user_sa_id')) selected @enderror @endif value="{{ $user_sa->id }}">{{ $user_sa->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('user_sa_id')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{!! $message !!}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                    <input type="hidden" name="category" value="work">
                                    <div class="work_multirow">
                                        @if (old('work_id') && old('form') == 'work')
                                            {{-- @php
                                                dd($errors->all());
                                            @endphp --}}
                                            <input type="hidden" class="work_field_counter" value="{{ count(old('work_id')) }}">
                                            @for ($i = 0; $i < count(old('work_id')); $i++)
                                                <div class="form-group row" id="work_field{{ $i+1 }}">
                                                    <div class="col-6">
                                                        <select name="work_id[]" id="work_work{{ $i+1 }}" class="form-control @error('work_id.'.$i)" is-invalid @enderror>
                                                            <option selected disabled>Pekerjaan</option>
                                                            @foreach ($work_works as $work)
                                                            <option value="{{ $work->id }}" @if($work->id == old('work_id.'.$i)) selected  @endif>{{ $work->name }}</option>
                                                            @endforeach
                                                        </select>
                                                
                                                        @error('work_id.'.$i)
                                                        <span class="invalid-feedback" role="alert">
                                                            <strong>{!! $message !!}</strong>
                                                        </span>
                                                        @enderror
                                                    </div>
                                                    <div class="col-4">
                                                        <input type="number" class="form-control @error('quantity.'.$i) is-invalid @enderror" value="{{ old('quantity.'.$i) }}" name="quantity[]" placeholder="Qty">
                                                        @error('quantity.'.$i)
                                                        <span class="invalid-feedback" role="alert">
                                                            <strong>{!! $message !!}</strong>
                                                        </span>
                                                        @enderror
                                                    </div>
                                                    <div class="col-2">
                                                        <button class="btn btn-danger work-btn-remove float-right" style="width: 100%;" type="button" id="workRemove1" onclick="removeFormField('work', 1)">X</button>
                                                    </div>
                                                </div>
                                            @endfor
                                        @else
                                            <input type="hidden" class="work_field_counter" value="5">
                                            <div class="form-group row" id="work_field1">
                                                <div class="col-6">
                                                    <select name="work_id[]" id="work_work1" class="form-control">
                                                        <option selected disabled>Pekerjaan</option>
                                                        @foreach ($work_works as $work)
                                                        <option value="{{ $work->id }}">{{ $work->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-4">
                                                    <input type="number" class="form-control" name="quantity[]" placeholder="Qty">
                                                </div>
                                                <div class="col-2">
                                                    <button class="btn btn-danger work-btn-remove float-right" style="width: 100%;" type="button" id="workRemove1" onclick="removeFormField('work', 1)">X</button>
                                                </div>
                                            </div>
                                            <div class="form-group row" id="work_field2">
                                                <div class="col-6">
                                                    <select name="work_id[]" id="work_work2" class="form-control">
                                                        <option selected disabled>Pekerjaan</option>
                                                        @foreach ($work_works as $work)
                                                        <option value="{{ $work->id }}">{{ $work->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-4">
                                                    <input type="number" class="form-control" name="quantity[]" placeholder="Qty">
                                                </div>
                                                <div class="col-2">
                                                    <button class="btn btn-danger work-btn-remove float-right" style="width: 100%;" type="button" id="workRemove2" onclick="removeFormField('work', 2)">X</button>
                                                </div>
                                            </div>
                                            <div class="form-group row" id="work_field3">
                                                <div class="col-6">
                                                    <select name="work_id[]" id="work_work3" class="form-control">
                                                        <option selected disabled>Pekerjaan</option>
                                                        @foreach ($work_works as $work)
                                                        <option value="{{ $work->id }}">{{ $work->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-4">
                                                    <input type="number" class="form-control" name="quantity[]" placeholder="Qty">
                                                </div>
                                                <div class="col-2">
                                                    <button class="btn btn-danger work-btn-remove float-right" style="width: 100%;" type="button" id="workRemove3" onclick="removeFormField('work', 3)">X</button>
                                                </div>
                                            </div>
                                            <div class="form-group row" id="work_field4">
                                                <div class="col-6">
                                                    <select name="work_id[]" id="work_work4" class="form-control">
                                                        <option selected disabled>Pekerjaan</option>
                                                        @foreach ($work_works as $work)
                                                        <option value="{{ $work->id }}">{{ $work->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-4">
                                                    <input type="number" class="form-control" name="quantity[]" placeholder="Qty">
                                                </div>
                                                <div class="col-2">
                                                    <button class="btn btn-danger work-btn-remove float-right" style="width: 100%;" type="button" id="workRemove4" onclick="removeFormField('work', 4)">X</button>
                                                </div>
                                            </div>
                                            <div class="form-group row" id="work_field5">
                                                <div class="col-6">
                                                    <select name="work_id[]" id="work_work5" class="form-control">
                                                        <option selected disabled>Pekerjaan</option>
                                                        @foreach ($work_works as $work)
                                                        <option value="{{ $work->id }}">{{ $work->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-4">
                                                    <input type="number" class="form-control" name="quantity[]" placeholder="Qty">
                                                </div>
                                                <div class="col-2">
                                                    <button class="btn btn-danger work-btn-remove float-right" style="width: 100%;" type="button" id="workRemove5" onclick="removeFormField('work', 5)">X</button>
                                                </div>
                                            </div>
                                        @endif
                                        <div class="row">
                                            <div class="col-10"></div>
                                            <div class="col-2">
                                                <button class="btn mb-4 btn-sm btn-primary float-right btn-add-field-work" style="width: 100%;" onclick="addFormField('work'); return false;">+</button>
                                            </div>
                                        </div>
                                    </div>
                                    <button class="btn btn-brand button-save" style="display: block; width: 100%;">Simpan</button>
                                </form>
                            </div>
                            <div class="tab-pane @if(old('form') == 'wash') active @endif" id="wash" role="tabpanel">
                                <form action="{{ route('transaction.store') }}" method="POST" id="washForm">
                                    @csrf
                                    <input type="hidden" name="form" value="wash">
                                    <input type="hidden" name="mechanic_id" value="{{ $mechanic->id }}">
                                    <input type="hidden" name="dealer_id" value="{{ $mechanic->dealer_id }}">
                                    <div class="form-group row">
                                        <div class="col-6">
                                            <input type="text" name="spk_no" class="form-control  @if(old('form') == 'wash') @error('spk_no') is-invalid @enderror @endif" value="{{ old('spk_no') }}" placeholder="No. SPK">
                                            @if(old('form') == 'wash')
                                            @error('spk_no')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{!! $message !!}</strong>
                                            </span>
                                            @enderror
                                            @endif
                                        </div>
                                        <div class="col-6">
                                            <input type="text" name="police_number" class="form-control @if(old('form') == 'wash') @error('police_number') is-invalid @enderror @endif" value="{{ old('police_number') }}" placeholder="No. Polisi">
                                            @if(old('form') == 'wash')
                                            @error('police_number')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{!! $message !!}</strong>
                                            </span>
                                            @enderror
                                            @endif
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-6">
                                            <select name="warranty" class="form-control @if(old('form') == 'wash') @error('warranty') is-invalid @enderror @endif">
                                                <option selected>Warranty</option>
                                                <option value="1" @if(old('form') == 'wash') @if(old('warranty') == 1) selected @endif @endif>Ya</option>
                                                <option value="0" @if(old('form') == 'wash') @if(old('warranty') == 0) selected @endif @endif>Tidak</option>
                                            </select>
                                            @error('warranty')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{!! $message !!}</strong>
                                            </span>
                                            @enderror
                                        </div>
                                        <div class="col-6">
                                            <input type="text" id="date-wash" name="date" class="form-control @if(old('form') == 'wash') @error('date') is-invalid @enderror @endif" placeholder="Tanggal Pekerjaan">
                                            @if(old('form') == 'wash')
                                            @error('date')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{!! $message !!}</strong>
                                            </span>
                                            @enderror
                                            @endif
                                        </div>
                                    </div>
                                    <div class="form-group mt-4">
                                        <select name="user_sa_id" class="form-control @if(old('form') == 'wash') @error('user_sa_id') is-invalid @enderror @endif">
                                            <option selected>Service Advisor</option>
                                            @foreach ($user_sas as $user_sa)
                                            <option @if(old('form') == 'wash') @if($user_sa->id == old('user_sa_id')) selected @enderror @endif value="{{ $user_sa->id }}">{{ $user_sa->name }}</option>
                                            @endforeach
                                        </select>
                                        @if(old('form') == 'wash')
                                        @error('user_sa_id')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{!! $message !!}</strong>
                                        </span>
                                        @enderror
                                        @endif
                                    </div>
                                    <input type="hidden" name="category" value="work">
                                    <div class="form-group">
                                        <label>Pekerjaan</label>
                                        <input type="text" class="form-control" disabled value="{{ $wash_work->name }}">
                                        <input type="hidden" class="form-control" name="work_id[]" value="{{ $wash_work->id }}">
                                        <input type="hidden" class="form-control" name="quantity[]" value="1">
                                    </div>
                                    <button class="btn btn-brand button-save" style="display: block; width: 100%;">Simpan</button>
                                </form>
                            </div>
                        </div>      
                    </div>
                </div>
                <!--end::Portlet-->
            </div>
        </div>
        <input type="hidden" name="ajax_work_url" value="{{ route('transaction.workcategory', ':id') }}">
        <input type="hidden" name="mechanic_id" value="{{ $mechanic->id }}">
        <input type="hidden" name="dealer_id" value="{{ $mechanic->dealer_id }}">
    </div>
</div>
@endsection

@section('javascripts')
<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    }); 

    function logout(event){
        event.preventDefault();
        Swal.fire({
            title: 'Logout?',
            text: "Anda akan keluar dari sistem!",
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#dedede',
            confirmButtonText: 'Logout'
        }).then((result) => {
            if (result.value) {
                $('#logout-form').submit();
            }
        })
    }

    function addFormField(form) {
        var id = $(`.${form}_field_counter`).val();
            id = parseInt(id) + 1;
        $(`
            <div class="form-group row" id="${form}_field${id}">
                <div class="col-6">
                    <select name="${form}_work_id[]" id="${form}_work${id}" class="form-control">
                        <option selected disabled>Pekerjaan</option>
                    </select>
                </div>
                <div class="col-4">
                    <input type="number" class="form-control" name="${form}_quantity[]" placeholder="Qty">
                </div>
                <div class="col-2">
                    <button class="btn btn-danger" onclick="removeFormField('${form}', ${id})" style="width: 100%; opacity: 1;" id="remove${id}">X</button>
                </div>
            </div>
        `).insertBefore($(".btn-add-field-"+form).parent().parent());

        let category_id = 1;
        if(form == 'wash') {
            category_id = 1;
        }else if(form == 'work') {
            category_id = 3;
        }

        let ajax_work_url = $("input[name='ajax_work_url']").val()
        ajax_work_url = ajax_work_url.replace(':id', category_id);
        getWork(ajax_work_url, form, id)

        if(id > 1) {
            $(".work-btn-remove").removeAttr('disabled')
            $(".work-btn-remove").removeClass("disabled")
            $(".work-btn-remove").css("opacity", "1")
        }

        $(`.${form}_field_counter`).val(id);
    }

    function removeFormField(form, id) {
        var attr = $(".work-btn-remove").attr('disabled');
        var id = $(`.${form}_field_counter`).val();
        if (typeof attr !== 'undefined' && attr !== false) {
        }else{
            id = parseInt(id) - 1;
            $(`.${form}_field_counter`).val(id);
            $(`#${form}_field${id}`).remove();
        }


        if(id < 2) {
            $(".work-btn-remove").attr("disabled", "disabled")
            $(".work-btn-remove").addClass("disabled")
            $(".work-btn-remove").css("opacity", "0.5")
        }
    }

    function getWork(ajax_work_url, form, id) {
        $.get(ajax_work_url, function(res) {
            $.each(res.data, function (i, item) {
                $(`#${form}_work${id}`).append($('<option>', { 
                    value: item.id,
                    text : item.name 
                }));
            });
        })
    }

    $("#workForm").submit(function(e) {
        $(".button-save").attr("disabled");
        $(".button-save").addClass("disabled");
        return true;
    })

    $("#washForm").submit(function(e) {
        $(".button-save").attr("disabled");
        $(".button-save").addClass("disabled");
        return true;
    })

    $("#date-work").datepicker()
    $("#date-wash").datepicker()

    function createTransaction(form) {
        let work_ids;
        if(form == 'work') {
            work_ids = $(`select[name='${form}_work_id[]']`).map(function (idx, elem) {
                return $(elem).val();
            }).get();
        }
        
        if(form == 'wash') {
            work_ids = $(`input[name='${form}_work_id[]']`).map(function (idx, elem) {
                return $(elem).val();
            }).get();
        }

        let quantities = $(`input[name='${form}_quantity[]']`).map(function (idx, elem) {
            return $(elem).val();
        }).get();

        let datas = [];
        for(let i = 0; i < work_ids.length; i++) {
            const data = {
                user_id         : $("input[name='mechanic_id']").val(),
                dealer_id       : $("input[name='dealer_id']").val(),
                form            : form,
                work_id         : work_ids[i],
                qty             : quantities[i],
                spk             : $(`input[name='${form}_spk_no']`).val(),
                police_number   : $(`input[name='${form}_police_number']`).val(),
                qtys            : $(`input[name='${form}_quantity']`).val(),
                warranty        : $(`select[name='${form}_warranty']`).val(),
                user_sa_id      : $(`select[name='${form}_user_sa_id']`).val(),
                date            : $(`input[name='${form}_date']`).val(),
            }
            datas.push(data)
        }
        
        $.ajax({
            url: $(`#${form}Form`).attr("action"),
            type: "POST",
            data: {
                data            : datas
            },
            success: function(res) {
                document.location.reload()
            }
        })
    }

</script>
@endsection