@extends('layouts.frontapp')

@section('content')
<div class="mobile-container">
    <div class="container">
        <div class="kt-portlet" style="background: none; box-shadow: none;margin-bottom: -10px;">
            <div class="kt-portlet__body">
                <div class="row">
                    <div class="col-4">
                        <h5 class="mt-4">Laporan Harian</h5>
                    </div>
                    <div class="col-4">
                        <h4 class="text-center mt-4">Cipta Kreasi Baru</h4>
                    </div>
                    <div class="col-4 text-right">
                        <a href="{{ route('transaction') }}" class="float-right mt-4">Kembali</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="kt-portlet" style="background: none; box-shadow: none;">
            <div class="kt-portlet__body">
                <form action="{{ route('transaction.lists') }}" method="GET">
                    <div class="row">
                        <div class="col-6">
                            <label>Tgl Awal</label>
                            <input type="date" name="date_start" id="date_start" class="form-control">
                        </div>
                        <div class="col-6">
                            <label>Tgl Akhir</label>
                            <input type="date" name="date_end" id="date_end" class="form-control">
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-success mt-3 btn-block">Cari</button>
                        </div>
                    </div>
                </form>
                <div class="row">
                    <div class="col-12">
                        <p><button id="share" type="button" class="btn btn-info btn-block mt-4">Bagikan</button></p>
                        <p class="result"></p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="table-responsive">
                            <table class="table table-striped" id="kt-table">
                                <thead>
                                    <tr>
                                        <th>Tanggal</th>
                                        <th>SPK</th>
                                        <th>SA</th>
                                        <th>No. Polisi</th>
                                        <th>Warranty</th>
                                        <th>Kategori</th>
                                        <th>Pekerjaan</th>
                                        <th>Qty</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($transaction_dealers as $transaction)
                                    <tr>
                                        <td>{{ date('d/m/Y', strtotime($transaction->date)) }}</td>
                                        <td>{{ $transaction->spk }}</td>
                                        <td>{{ $transaction->sa_name }}</td>
                                        <td>{{ $transaction->police_number }}</td>
                                        <td>{{ $transaction->warranty == 1 ? 'Ya' : 'Tidak' }}</td>
                                        <td>{{ $transaction->category_name }}</td>
                                        <td>{{ $transaction->workname }}</td>
                                        <td>{{ $transaction->qty }}</td>
                                        <td>
                                            @if ($transaction->status == 1)
                                                <span class="badge badge-success">Closed</span>
                                            @else 
                                                <button class="btn btn-sm btn-warning btn-bold" data-action="{{ route('transaction.update', $transaction->transaction_id) }}" data-url="{{ route('transaction.edit', $transaction->transaction_id) }}"  onclick="editTransaction({{ $transaction->transaction_id }})" id="editTransaction{{ $transaction->transaction_id }}">Edit</button>
                                                <br><br>
                                                <a class="btn btn-danger btn-sm btn-bold" href="{{ route('transaction.destroy', $transaction->transaction_id) }}"
                                                    onclick="event.preventDefault();
                                                                document.getElementById('destroy-form').submit();">
                                                    {{ __('Hapus') }}
                                                </a>
                        
                                                <form id="destroy-form" action="{{ route('transaction.destroy', $transaction->transaction_id) }}" method="POST" class="d-none">
                                                    @csrf
                                                    @method('DELETE')
                                                </form>
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!--begin::Modal-->
<div class="modal fade" id="transactionModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form id="transactionForm" data-form="store" class="kt-form">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalHeading"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    @csrf
                    @method('PUT')
                    <div class="kt-portlet__body">
                        <div class="form-group">
                            <label>SPK</label>
                            <input type="text" class="form-control" id="spk" name="spk" placeholder="SPK" value="" autocomplete="off" />
                        </div>
                        <div class="form-group">
                            <label>Tanggal</label>
                            <input type="date" class="form-control" id="date" name="date" placeholder="Tanggal" value="" autocomplete="off" />
                        </div>
                        <div class="form-group">
                            <label>No. Polisi</label>
                            <input type="text" class="form-control" id="police_number" name="police_number" placeholder="No. Polisi" value="" autocomplete="off" />
                        </div>
                        <div class="form-group">
                            <label>Pekerjaan</label>
                            <select name="work_id" id="work_id" class="form-control">
                                @foreach ($works as $work)
                                <option value="{{ $work->id }}">{{ $work->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Qty</label>
                            <input type="number" class="form-control" id="qty" name="qty" placeholder="Qty" value="" autocomplete="off" />
                        </div>
                        <div class="form-group">
                            <label>Warranty</label>
                            <select name="warranty" id="warranty" class="form-control">
                                <option value="1">Ya</option>
                                <option value="0">Tidak</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Service Advisor</label>
                            <select name="sa_id" id="sa_id" class="form-control">
                                @foreach ($sas as $sa)
                                <option value="{{ $sa->id }}">{{ $sa->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary" id="saveBtn" value="create">Simpan</button>
                </div>
            </div>
        </form>
    </div>
</div>
<!--end::Modal-->

<div id="shareThis" style="display: none;">
    {{ $mechanic->dealer_name }}
    {{ $mechanic->name }}
    @foreach ($transaction_mechanics as $date => $trxm)
        @foreach ($trxm as $item)
            {{ date('d/m/Y', strtotime($date)) }}/{{ $item['shortname'] }} : {{ $item['qty'] }}
        @endforeach
    @endforeach
</div>

{{-- <div class="row">
    <div class="col-lg-5" style="width: 100%; text-align: center;">
        <div class="card">
            <div class="card-header">
                <h3>Transaksi</h3>
            </div>
            <div class="card-body">
                <form action="#">
                    <div class="form-group">
                        <label for="#">User</label>
                        <select name="#" id="#" class="form-control">
                            <option value="1" selected>User 1</option>
                            <option value="2">User 2</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="#">SPK</label>
                        <input type="text" class="form-control" placeholder="SPK" name="spk">
                    </div>
                    <div class="form-group">
                        <label for="#">No. Polisi</label>
                        <input type="text" class="form-control" placeholder="No. Polisi" name="nopol">
                    </div>
                    <div class="form-group">
                        <label for="#">Garansi</label>
                        <input type="text" class="form-control" placeholder="Garansi" name="guarantee">
                    </div>
                    <div class="form-group">
                        <label for="#">Kategori Pekerjaan</label>
                        <select name="#" id="#" class="form-control">
                            <option value="1" selected>Cuci</option>
                            <option value="2">Kategori 2</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="#">Pekerjaan</label>
                        <select name="#" id="#" class="form-control">
                            <option value="1" selected>Cuci</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="#">Qty</label>
                        <input type="number" class="form-control" placeholder="Quantity" name="quantity">
                    </div>
                    <button class="btn btn-primary">Simpan Perubahan</button>
                </form>
            </div>
        </div>
    </div>
    <div class="col-lg-7">
        <div class="card">
            <div class="card-header">
                <h3></h3>
            </div>
            <div class="card-body">

            </div>
        </div>
    </div>
</div> --}}
@endsection

@section('javascripts')
<script>

$("#kt-table").DataTable()

const shareData = {
    title: 'Dealer',
    text: $("#shareThis").html()
}

const btn = $('#share');
const resultPara = $('.result');
    // Share must be triggered by "user activation"
btn.click(async function() {
    try {
        await navigator.share(shareData)
        console.log('Dealer shared successfully')
    } catch(err) {
        console.log('Error: ' + err)
    }
})


function editTransaction(id) {
    let form_action = $("#editTransaction"+id).attr("data-action")
    let edit_url = $("#editTransaction"+id).attr("data-url")
    $("#transactionModal").modal("show")
    $("#transactionForm").attr('action', form_action)
    $.get(edit_url, function(res) {
        $("#transactionForm select[name='sa_id'] option[value='"+ res.data.user_sa_id +"']").prop('selected', true);
        $("#transactionForm select[name='work_id'] option[value='"+ res.data.work_id +"']").prop('selected', true);
        $("#transactionForm select[name='dealer_id'] option[value='"+ res.data.dealer_id +"']").prop('selected', true);
        $("#transactionForm select[name='warranty'] option[value='"+ res.data.warranty +"']").prop('selected', true);
        $("#transactionForm input[name='spk']").val(res.data.spk)
        var d = new Date(res.data.date);
        var day = ("0" + d.getDate()).slice(-2);
        var month = ("0" + (d.getMonth() + 1)).slice(-2);

        var date = d.getFullYear()+"-"+(month)+"-"+(day) ;
        $("#transactionForm input[name='date']").val(date)
        $("#transactionForm input[name='police_number']").val(res.data.police_number)
        $("#transactionForm input[name='qty']").val(res.data.qty)
    })
}

$("#transactionForm").submit(function(e) {
    e.preventDefault();
    $.ajax({
        url: $('#transactionForm').attr("action"),
        type: 'POST',
        data: $('#transactionForm').serialize(),
        success: function(res) {
            $("#transactionModal").modal("hide")
            $('#transactionForm').trigger("reset")
            if(res.status == 200) {      
                Swal.fire(
                    'Ubah Data',
                    'Data berhasil diubah'
                ).then((result) => {
                    document.location.reload()
                })
            }
        }
    })
})

</script>
@endsection