@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])
<div class="card shadow-lg mx-4">
    <div class="card-body p-3">
        <div class="row gx-4">
            <div class="col-lg">
                <div class="nav-wrapper">
                    {{-- button back --}}
                    <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1">
                        </i><span class="font-weight-bold">Kembali</button>
                    {{-- check authorize add --}}
                    @if ($authorize->add == '1')
                    {{-- button save --}}
                    <button class="btn btn-primary mb-0"
                        onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();"><i
                            class="fas fa-floppy-disk me-1"> </i><span class="font-weight-bold">Simpan</button>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="card-body">
                        <p class="text-uppercase text-sm">Insert {{ $title_menu }}</p>
                        <hr class="horizontal dark mt-0">
                        <div class="row">
                            {{-- retrieve table header --}}
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="example-text-input" class="form-control-label">ID</label>
                                    <input class="form-control readonly" type="text" value="" name="id"
                                        maxlength="25" readonly="readonly">
                                </div>
                                <div class="form-group">
                                    <label for="example-text-input" class="form-control-label">Employee</label>
                                    <select class="form-select" name="employee_id" id="employee_id"
                                        onchange="checkEmployee()">
                                        <option value="">
                                        </option>
                                        @foreach ($list_employee as $emp)
                                        <option value="{{ $emp->nik }}">
                                            {{ $emp->nama }}
                                        </option>
                                        @endforeach
                                    </select>
                                    <small>Pilih Employee</small>
                                </div>
                                {{-- <div class="form-group">
                                        <label for="nama" class="form-label">Nama Karyawan<span
                                                class="text-danger">*</span></label>
                                        <select name="employee_id" id="employee_id" class="form-select form-select-lg mb-3"
                                            aria-label="Nama" required onchange="checkEmployee()">
                                            <option value="" selected disabled>Pilih Karyawan</option>
                                            @foreach ($list_employee as $emp)
                                                <option value="{{ $emp->nik }}">
                                {{ $emp->nama }}
                                </option>
                                @endforeach
                                </select>
                                <small>Pilih Karyawan</small>
                            </div> --}}
                            <div class="form-group">
                                <label for="example-text-input" class="form-control-label">Departemen
                                </label>
                                <input type="text" name="dept_name" id="dept-name" readonly class="form-control">
                                <input type="hidden" name="dept_id" id="dept-id">
                            </div>
                            <div class="form-group">
                                <label for="example-text-input" class="form-control-label">Type
                                </label>
                                <select class="form-select" name="type_id">
                                    <option value="">
                                    </option>
                                    @foreach ($list_uniform as $unitype)
                                    <option value="{{ $unitype->id }}">
                                        {{ $unitype->tipe_seragam }}
                                    </option>
                                    @endforeach
                                </select>
                                <small>Pilih type baju </small>
                            </div>
                            <div class="form-group">
                                <label for="example-text-input" class="form-control-label">Notes</label>
                                <input class="form-control" type="text" value="" name="description"
                                    maxlength="255">
                                <small>Tambahkan catatan (Optional)</small>
                            </div>

                            <label for="example-text-input" class="form-control-label">Jumlah Seragam : </label>
                            <div class="row">
                                <div class="form-group col-2">
                                    <label class="form-control-label">Hem Panjang</label>
                                </div>
                                <div class="form-group col-2">
                                    <label class="form-control-label">Hem Pendek</label>
                                </div>
                                <div class="form-group col-2">
                                    <label class="form-control-label">Kaos</label>
                                </div>
                                <div class="form-group col-2">
                                    <label class="form-control-label">Celana</label>
                                </div>
                                <div class="form-group col-2">
                                    <label class="form-control-label">Rok</label>
                                </div>
                                <div class="form-group col-2">
                                    <label class="form-control-label">Topi</label>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-2">
                                    <input class="form-control" type="number" value=""
                                        name="jumlah_hempanjang" id="jumlah_hempanjang" maxlength="25"
                                        min="0" onchange="checkKain()">
                                </div>
                                <div class="form-group col-2">
                                    <input class="form-control" type="number" value=""
                                        name="jumlah_hempendek" id="jumlah_hempendek" maxlength="25"
                                        min="0" onchange="checkKain()">
                                </div>
                                <div class="form-group col-2">
                                    <input class="form-control" type="number" value="" name="jumlah_kaos"
                                        id="jumlah_kaos" maxlength="25" min="0" onchange="checkKain()">
                                </div>
                                <div class="form-group col-2">
                                    <input class="form-control" type="number" value=""
                                        name="jumlah_celana" id="jumlah_celana" maxlength="25" min="0"
                                        onchange="checkKain()">
                                </div>
                                <div class="form-group col-2">
                                    <input class="form-control" type="number" value="" name="jumlah_rok"
                                        id="jumlah_rok" maxlength="25" min="0" onchange="checkKain()">
                                </div>
                                <div class="form-group col-2">
                                    <input class="form-control" type="number" value="" name="jumlah_topi"
                                        id="jumlah_topi" maxlength="25" min="0">
                                </div>
                                <small>Masukkan Jumlah</small>
                            </div>
                            <label for="example-text-input" class="form-control-label">Ukuran fitting standard :
                            </label>
                            <div class="row">
                                <div class="form-group col-6">
                                    <label for="example-text-input" class="form-control-label">Size
                                        Atasan</label>
                                    <input class="form-control" type="text" value="" name="size_atasan"
                                        maxlength="25">
                                </div>
                                <div class="form-group col-6">
                                    <label for="example-text-input" class="form-control-label">Size
                                        Bawahan</label>
                                    <input class="form-control" type="text" value=""
                                        name="size_bawahan" maxlength="25">
                                </div>
                                <small>Contoh S, M, L, XL</small>
                            </div>

                            <label for="example-text-input" class="form-control-label">Fitting Atasan : </label>
                            <div class="row">
                                <div class="form-group col-2">
                                    <label for="example-text-input" class="form-control-label">Panjang
                                        Badan </label>
                                </div>
                                <div class="form-group col-2">
                                    <label for="example-text-input" class="form-control-label">Lingkar
                                        Dada</label>
                                </div>
                                <div class="form-group col-2">
                                    <label for="example-text-input" class="form-control-label">Skaur</label>
                                </div>
                                <div class="form-group col-2">
                                    <label for="example-text-input"
                                        class="form-control-label panjang_lengan_pendek"> Lengan
                                        (Pendek) </label>
                                </div>
                                <div class="form-group col-2">
                                    <label for="example-text-input"
                                        class="form-control-label panjang_lengan_panjang"> Lengan
                                        (Panjang)</label>
                                </div>

                            </div>
                            <div class="row">
                                <div class="form-group col-2">
                                    <input class="form-control" type="number" value=""
                                        name="panjang_badan" id="panjang_badan" maxlength="25" min="0"
                                        onchange="calculateKain()">
                                </div>
                                <div class="form-group col-2">
                                    <input class="form-control" type="number" value=""
                                        name="lingkar_dada" maxlength="25" min="0">
                                </div>
                                <div class="form-group col-2">
                                    <input class="form-control" type="number" value="" name="skaur"
                                        maxlength="25" min="0">
                                </div>
                                <div class="form-group col-2">
                                    <input class="form-control panjang_lengan_pendek" type="number"
                                        value="" name="panjang_lengan_pendek" id="panjang_lengan_pendek"
                                        maxlength="25" min="0" onchange="calculateKain()">
                                </div>
                                <div class="form-group col-2">
                                    <input class="form-control panjang_lengan_panjang" type="number"
                                        value="" name="panjang_lengan_panjang" id="panjang_lengan_panjang"
                                        maxlength="25" min="0" onchange="calculateKain()">
                                </div>
                                <small>Masukkan dalam satuan cm</small>
                            </div>

                            <label for="example-text-input" class="form-control-label">Fitting Bawahan : </label>
                            <div class="row">
                                <div class="form-group col-2">
                                    <label for="example-text-input" class="form-control-label">Lingkar
                                        Pinggang</label>
                                </div>
                                <div class="form-group col-2">
                                    <label for="example-text-input" class="form-control-label">Ukuran
                                        Pinggul</label>
                                </div>
                                <div class="form-group col-2">
                                    <label for="example-text-input" class="form-control-label">Kres
                                    </label>
                                </div>
                                <div class="form-group col-2">
                                    <label for="example-text-input" class="form-control-label">Ungkar
                                        Paha</label>
                                </div>
                                <div class="form-group col-2">
                                    <label for="example-text-input" class="form-control-label">Lingkar
                                        Bawah </label>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-2">
                                    <input class="form-control" type="number" value=""
                                        name="lingkar_pinggang" id="lingkar_pinggang" maxlength="25"
                                        min="0">
                                </div>
                                <div class="form-group col-2">
                                    <input class="form-control" type="number" value=""
                                        name="ukuran_pinggul" id="ukuran_pinggul" maxlength="25" min="0">
                                </div>
                                <div class="form-group col-2">
                                    <input class="form-control" type="number" value="" name="kres"
                                        maxlength="25" min="0">
                                </div>
                                <div class="form-group col-2">
                                    <input class="form-control" type="number" value="" name="ungkar_paha"
                                        maxlength="25" min="0">
                                </div>
                                <div class="form-group col-2">
                                    <input class="form-control" type="number" value="" id="lingkar_bawah"
                                        name="lingkar_bawah" maxlength="25" min="0">
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group col-6">
                                    <label for="example-text-input" class="form-control-label">Panjang
                                        Celana</label>
                                    <input class="form-control" type="text" value=""
                                        id="panjang_celana" name="panjang_celana" maxlength="25"
                                        onchange="calculateKain()">
                                </div>
                                <div class="form-group col-6">
                                    <label for="example-text-input" class="form-control-label">Tinggi rok
                                        pendek</label>
                                    <input class="form-control" type="text" value=""
                                        id="tinggi_rok_pendek" name="tinggi_rok_pendek" maxlength="25"
                                        onchange="calculateKain()">
                                </div>
                                <small>Masukkan dalam satuan cm</small>
                            </div>


                            <div class="form-group">
                                <label for="kain">Total Kain atasan</label>
                                <input type="number" id="kain_atasan" name="kain_atasan" id="kain_atasan"
                                    class="form-control" step="0.01" readonly>
                                <small>Kain atasan didapatkan dengan ((panjang lengan + panjang badan)* 2) +
                                    (panjang lengan + panjang badan) * 0.1 * jumlah hem
                                </small>
                            </div>
                            <div class="form-group">
                                <label for="kain">Total Kain bawahan</label>
                                <input type="number" id="kain_bawahan" name="kain_bawahan" id="kain_bawahan"
                                    class="form-control" step="0.01" readonly>
                                <small>Kain bawahan didapatkan dengan ((ukuran pinggul + panjang celana )* 2) +
                                    (ukuran pinggul + panjang celana) * 0.1 * jumlah celana
                                </small>
                            </div>

                            <div class="form-group">
                                <label for="kain">Total Kain</label>
                                <input type="number" id="total_kain" name="total_kain" id="total_kain"
                                    class="form-control" step="0.01" readonly>
                                <small>Total kain didapatkan dengan kain atasan + kain bawahan</small>
                            </div>
                        </div>
                    </div>
            </div>
            </form>
        </div>
    </div>
    <div class="col-md-4">
        @php
        $table_result = DB::table('tr_uniform')
        ->join('mst_uniformtype', 'mst_uniformtype.id', '=', 'tr_uniform.type_id')
        ->join('employees', 'employees.id', '=', 'tr_uniform.employee_id')
        ->join('departments', 'departments.id', '=', 'tr_uniform.dept_id')
        ->select('tr_uniform.id', 'name', 'tr_uniform.created_at')
        ->where('tr_uniform.isactive', '1')
        ->get();
        $count_table_result = DB::table('tr_uniform')
        ->join('mst_uniformtype', 'mst_uniformtype.id', '=', 'tr_uniform.type_id')
        ->join('employees', 'employees.id', '=', 'tr_uniform.employee_id')
        ->join('departments', 'departments.id', '=', 'tr_uniform.dept_id')
        ->select('tr_uniform.id', 'name', 'tipe_seragam')
        ->where('tr_uniform.isactive', '1')
        ->count();
        // dd($count_table_result);
        @endphp
        <div class="card">
            <div class="card-body">
                <p class="text-uppercase text-sm">History {{ $title_menu }}</p>
                <hr class="horizontal dark mt-0">
                <div class="table-responsive">
                    <table class="table display" id="list_history">
                        @if ($count_table_result != 0)
                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                            <tr>
                                <th>Action</th>
                                @foreach ($table_result as $result)
                                @php
                                $sAsArray = array_keys((array) $result);
                                @endphp
                                @endforeach

                                @foreach ($sAsArray as $modal_h)
                                @if ($modal_h != 'id')
                                <th>{{ $modal_h }}</th>
                                @endif
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                        @endif
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<hr class="horizontal dark">
</div>

{{-- check flag js on dmenu --}}
@if ($jsmenu == '1')
@if (view()->exists("js.{$dmenu}"))
@push('addjs')
{{-- file js in folder (resources/views/js) --}}
@include('js.' . $dmenu);
@endpush
@else
@push('addjs')
<script>
    Swal.fire({
        title: 'JS Not Found!!',
        text: 'Please Create File JS',
        icon: 'error',
        confirmButtonColor: '#028284'
    });
</script>
@endpush
@endif
@endif
@endsection
@push('js')
<script>
    $(document).ready(function() {
        $("#employee_id").val('');
        $("#dept-name").val('');
        $('#employee_id').select2({
            placeholder: "Cari dan pilih nama",
            allowClear: true
        });
    });

    function checkEmployee() {
        var employee_id = $("#employee_id").val();

        $.ajax({
            url: "{{ url($url_menu) . '/ajax' }}",
            type: "GET",
            dataType: "JSON",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                employee_id: employee_id,
            },

            success: function(data) {
                $('#dept-name').val(data.dept_name.nama_departemen ?? '-');
                $('#dept-id').val(data.dept_name.dept_id ?? '');
                // Check if data contains the necessary array
                if (data && data.result.table_result) {
                    var tableBody = $("#list_history tbody");
                    tableBody.empty(); // Clear existing table rows

                    // Loop through returned data and generate table rows
                    data.result.table_result.forEach(function(item) {
                        console.log(item)
                        var row = "<tr>";
                        row +=
                            `<td><span class="btn badge bg-primary badge-lg" onclick="copyData(${item.id})"><i class="bi bi-check-circle me-1"></i> Copy</span></td>`;

                        // Loop through the fields in the item (skipping 'id')
                        Object.keys(item).forEach(function(key) {
                            if (key !== 'id') {
                                row +=
                                    `<td class="text-sm font-weight-normal">${item[key]}</td>`;
                            }
                        });

                        row += "</tr>";
                        tableBody.append(row); // Append the new row to the table
                    });
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(jqXHR.responseJSON, textStatus, errorThrown);
                Swal.fire({
                    title: 'Sorry!',
                    text: 'Error Get data!',
                    icon: 'error',
                    confirmButtonColor: '#3085d6'
                });
            }
        });
    }


    function calculateKain() {
        var jumlah_hempanjang = $("#jumlah_hempanjang").val();

        if (jumlah_hempanjang == 0) {
            $(".panjang_lengan_pendek").parent().show();
            $(".panjang_lengan_panjang").parent().hide();
            var panjangBadan = parseFloat(document.getElementById('panjang_lengan_pendek').value) || 0;
        } else if (jumlah_hempanjang > 0) {
            $(".panjang_lengan_pendek").parent().hide();
            $(".panjang_lengan_panjang").parent().show();
            var panjangBadan = parseFloat(document.getElementById('panjang_lengan_panjang').value) || 0;

        }
        if (jumlah_hempanjang > 0) {
            var panjangBadan = parseFloat(document.getElementById('panjang_badan').value) || 0;
            var panjangLengan = parseFloat(document.getElementById('panjang_lengan_panjang').value) || 0;
            var totalPanjangAtasan = (panjangBadan + panjangLengan) * 0.1;
            var kain_atasan = (((panjangBadan + panjangLengan) * 2) + totalPanjangAtasan) * $("#jumlah_hempanjang")
                .val();
            $("#kain_atasan").val(kain_atasan.toFixed(2));
            console.log(panjangBadan, panjangLengan, "lengan panjang");

        } else {
            var panjangBadan = parseFloat(document.getElementById('panjang_badan').value) || 0;
            var panjangLengan = parseFloat(document.getElementById('panjang_lengan_pendek').value) || 0;
            var totalPanjangAtasan = (panjangBadan + panjangLengan) * 0.1;
            var kain_atasan = (((panjangBadan + panjangLengan) * 2) + totalPanjangAtasan) * $("#jumlah_hempendek")
                .val();
            $("#kain_atasan").val(kain_atasan.toFixed(2));
            console.log(panjangBadan, panjangLengan, totalPanjangAtasan, kain_atasan, "lengan pendek");
        }
        var jumlah_celana = $("#jumlah_celana").val();
        var jumlah_rok = $("#jumlah_rok").val();
        var kain_bawahan = 0;

        if (jumlah_celana > 0) {
            var ukuran_pinggul = parseFloat(document.getElementById('ukuran_pinggul').value) || 0;
            var panjang_celana = parseFloat(document.getElementById('panjang_celana').value) || 0;
            var totalPanjangBawahan = (ukuran_pinggul + panjang_celana) * 0.1;
            kain_bawahan += (((ukuran_pinggul + panjang_celana) * 2) + totalPanjangBawahan) * $("#jumlah_celana").val();
        }

        if (jumlah_rok > 0) {
            var ukuran_pinggul = parseFloat(document.getElementById('ukuran_pinggul').value) || 0;
            var panjang_rok = parseFloat(document.getElementById('tinggi_rok_pendek').value) || 0;
            var totalPanjangBawahan = (ukuran_pinggul + panjang_rok) * 0.1;
            kain_bawahan += (((ukuran_pinggul + panjang_rok) * 2) + totalPanjangBawahan) * $("#jumlah_rok").val();
        }
        $("#kain_bawahan").val(kain_bawahan.toFixed(2));


        var kain = kain_atasan + kain_bawahan;
        $("#total_kain").val(kain.toFixed(2));
    }

    function checkKain() {
        var jumlah_hempanjang = $("#jumlah_hempanjang").val();
        var jumlah_hempendek = $("#jumlah_hempendek").val();
        var jumlah_kaos = $("#jumlah_kaos").val();
        var jumlah_celana = $("#jumlah_celana").val();
        var jumlah_rok = $("#jumlah_rok").val();

        if (jumlah_hempanjang == 0) {
            $(".panjang_lengan_pendek").parent().show();
            $(".panjang_lengan_panjang").parent().hide();
        } else if (jumlah_hempanjang > 0) {
            $(".panjang_lengan_pendek").parent().hide();
            $(".panjang_lengan_panjang").parent().show();
        }

        if (jumlah_hempendek == 0 && jumlah_kaos == 0) {
            $(".panjang_lengan_pendek").parent().hide();
            $(".panjang_lengan_panjang").parent().show();
        } else if (jumlah_hempendek > 0 || jumlah_hempendek > 0) {
            $(".panjang_lengan_pendek").parent().show();
            $(".panjang_lengan_panjang").parent().hide();
        }

        if (jumlah_celana == 0) {
            $("#panjang_celana").parent().hide();
        } else if (jumlah_celana > 0) {
            $("#panjang_celana").parent().show();
        }

        if (jumlah_rok == 0) {
            $("#tinggi_rok_pendek").parent().hide();
        } else if (jumlah_rok > 0) {
            $("#tinggi_rok_pendek").parent().show();
        }
        calculateKain();
    }

    function select_modal(id, name) {
        $('input[name="history"]').val(id);
        $('#searchModalHistory').modal('hide');
        fetchData(id);
    }

    $('#list_history').DataTable({
        "language": {
            "search": "Cari :",
            "lengthMenu": "Tampilkan _MENU_ baris",
            "zeroRecords": "Maaf - Data tidak ada",
            "info": "Data _START_ - _END_ dari _TOTAL_",
            "infoEmpty": "Tidak ada data",
            "infoFiltered": "(pencarian dari _MAX_ data)"
        },
        "pageLength": 5,
        responsive: true,
        dom: 'frtip'
    });

    function copyData(value) {
        var id = value;
        $.ajax({
            url: "{{ url($url_menu) . '/ajax' }}",
            type: "GET",
            dataType: "JSON",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                id: id,
            },
            success: function(data) {
                $.each(data.table_detail, function(key, value) {
                    if (key != "id") {
                        if (key == "employee_id" || key == "dept_id" || key == "type_id") {
                            $('select[name="' + key + '"]').val(value).change();
                        } else {
                            $('input[name="' + key + '"]').val(value);
                        }
                    }
                });
                calculateKain();
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(jqXHR.responseJSON);
                Swal.fire({
                    title: 'Sorry!',
                    text: 'Error Get data!',
                    icon: 'error',
                    confirmButtonColor: '#3085d6'
                });
            }
        });
    }
</script>
@endpush