@extends('layouts.index')
@section('title')
Edit Event
@endsection
@section('css')
<link href="{{ asset('back') }}/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css" rel="stylesheet" />
<link href="{{ asset('back') }}/libs/jquery-steps/jquery.steps.css" rel="stylesheet" />
<link href="{{ asset('back') }}/libs/jquery-steps/steps.css" rel="stylesheet" />
<link href="{{ asset('back') }}/libs/select2/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .l2 {
        padding-left: 1em;
    }

    .l3 {
        padding-left: 2em;
    }

    label.error {
        color: #F94687;
        font-size: 13px;
        font-size: .875rem;
        font-weight: 400;
        line-height: 1.5;
        margin-top: 5px;
        padding: 0;
    }

    input.error {
        color: #F94687;
        border: 1px solid #F94687;
    }

    select.error {
        color: #F94687;
        border: 1px solid #F94687;
    }

    .colored-toast.swal2-icon-success {
        background-color: #a5dc86 !important;
    }

    .colored-toast.swal2-icon-error {
        background-color: #f27474 !important;
    }

    .colored-toast.swal2-icon-warning {
        background-color: #f8bb86 !important;
    }

    .colored-toast.swal2-icon-info {
        background-color: #3fc3ee !important;
    }

    .colored-toast.swal2-icon-question {
        background-color: #87adbd !important;
    }

    .colored-toast .swal2-title {
        color: white;
    }

    .colored-toast .swal2-close {
        color: white;
    }

    .colored-toast .swal2-html-container {
        color: white;
    }
</style>
@endsection
@section('content')
<div class="page-titles">
    <div class="row">
        <div class="col-lg-8 col-md-6 col-12 align-self-center">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 d-flex align-items-center">
                    <li class="breadcrumb-item">
                        <a href="index.html" class="link"><i class="ri-home-3-line fs-5"></i></a>
                    </li>
                    <li class="breadcrumb-item" aria-current="page">
                        <a href="{{ route('event.index') }}">Event</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        Edit
                    </li>

                </ol>
            </nav>
            <h1 class="mb-0 fw-bold">Edit Event</h1>
        </div>
    </div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================= -->
<div class="container-fluid">
    <!-- ============================================================= -->
    <!-- Start Page Content -->
    <!-- ============================================================= -->
    <form method="POST" action="{{ route('event.update', $team->id) }}" id="updateForm" enctype="multipart/form-data">
        @csrf
        @method('put')
        <div class="row">
            <section id="tabs">
                <div class="card">
                    <div class="card-body">
                        <!-- Nav tabs -->
                        <div class="d-flex">
                            <h4>Edit Event</h4>
                        </div>
                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div class="p-3">


                                <div class="col-12 col-md-12 mb-2">
                                    <div class="col-12 col-sm-12">
                                        <h5 class="mt-2 mb-1 mt-sm-0"></h5>
                                        <div class="row">
                                            <div class="row">
                                                <div class="col-md-6 mt-3">
                                                    <div class="row">
                                                        <div class="col-sm-12">
                                                            <div class="d-flex flex-column">
                                                                <div class="form-group">
                                                                    <div class="controls">
                                                                        <label>Event Name</label>
                                                                        <input type="text" id="edit_name" name="edit_name"
                                                                        value="{{ $team->name }}" class="form-control"
                                                                            placeholder="Event Name">
                                                                    </div>
                                                                    <label id="error_edit_name" class="error" style="display: none;"></label>
                                                                </div>
                                                                <div class="form-group mt-3">
                                                                    <div class="controls">
                                                                        <label>Event Type</label>
                                                                        <select name="edit_type" class="form-select" id="edit_type">
                                                                            <option value="">Choose Event Type</option>
                                                                            <option value="annual" {{ $team->type == 'annual' ? 'selected' : '' }}>Annual</option>
                                                                            <option value="emerging" {{ $team->type == 'emerging' ? 'selected' : '' }}>Emerging</option>
                                                                        </select>
                                                                    </div>
                                                                    <label id="error_edit_type" class="error" style="display: none;"></label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    
                                                </div>

                                                <div class="col-md-6 mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label>Description</label>
                                                            <textarea class="form-control" name="edit_description"
                                                                id="edit_description" cols="30" rows="5"
                                                                placeholder="Description">{{ $team->description }}</textarea>
                                                        </div>
                                                    </div>
                                                    <label id="error_edit_description" class="error"
                                                        style="display: none;"></label>
                                                </div>

                                                <div class="col-md-6 mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label>Team</label>
                                                            <select name="edit_team_id[]" id="edit_team_id"
                                                                class="select2 form-control custom-select"
                                                                style="width: 100%; height: 36px" multiple>
                                                                <option value="">-- Choose Team --</option>
                                                                @foreach ($pegawai as $item)
                                                                <option value="{{ $item->id }}">
                                                                    {{ $item->nama_lengkap }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-md-6 mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label>Person In Charge</label>
                                                            <select class="form-select" name="edit_person_in_charge"
                                                                id="edit_person_in_charge">
                                                                <option value="">Choose</option>
                                                                @foreach($pegawai as $data)
                                                                <option value="{{ $data->id }}"
                                                                    {{ $data->id == $team->person_in_charge ? 'selected' : ''}}>
                                                                    {{ $data->nama_lengkap }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <label id="error_edit_person_in_charge" class="error"
                                                        style="display: none;"></label>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="border-bottom title-part-padding">
                        <h4 class="mb-0">Budgeting</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-2">
                                <h5>Description</h5>
                            </div>
                            <div class="col-sm-2">
                                <h5>Volume</h5>
                            </div>
                            <div class="col-sm-2">
                                <h5>Unit Cost</h5>
                            </div>
                            <div class="col-sm-2">
                                <h5>Total (IDR)</h5>
                            </div>
                            <div class="col-sm-2">
                                <h5>Total (USD)</h5>
                            </div>


                        </div>
                        <div id="education_fields" class=""></div>

                        @forelse($team->event_budget as $key => $data)
                        <input type="hidden" name="edit_budget_id[]" value="{{ $data->id }}">
                        <div class="row removeclass{{ $key }}">
                            <div class="col-sm-2">
                                <div class="mb-3">
                                    <input type="text" class="form-control" name="edit_description_budget[]" value="{{ $data->description }}"
                                        placeholder="Description" />
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="mb-3">
                                    <input type="number" class="form-control" name="edit_volume[]" onkeyup="convertToUsdVolume(this.value, '{{ $key }}')" id="volume{{ $key }}" value="{{ $data->volume }}"
                                        placeholder="Volume" />
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="mb-3">
                                    <input type="number" class="form-control" name="edit_unit_cost[]" onkeyup="convertToUsd(this.value, '{{ $key }}')" id="unitCost{{ $key }}" value="{{ $data->unit_cost }}"
                                        placeholder="Unit Cost" />
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="mb-3">
                                    <input type="text" class="form-control" name="edit_total_idr[]" id="totalIdr{{ $key }}" value="{{ $data->total_idr }}"
                                        placeholder="Total Amount (IDR)" readonly />
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="mb-3">
                                    <input type="text" class="form-control" name="edit_total_usd[]" id="usdValue{{ $key }}" value="{{ $data->total_usd }}"
                                        placeholder="Total Amount (USD)" readonly />
                                </div>
                            </div>
                            @if ($key == 0 && $team->event_budget->count() > 1)
                                <div class="col-sm-1">
                                    <div class="mb-3"> <button
                                            class="btn rounded-pill px-4 btn-light-danger text-danger font-weight-medium waves-effect waves-light"
                                            type="button" onclick="remove_education_fields({{ $key }}, {{ $data->id }});"> <i
                                                class="ri-delete-bin-line fs-5"></i> </button> </div>
                                </div>
                            @else
                                <div class="col-sm-1">
                                    <div class="mb-3">
                                        <button onclick="education_fields();"
                                            class="
                            btn
                            rounded-pill
                            px-4
                            btn-light-success
                            text-success
                            font-weight-medium
                            waves-effect waves-light
                        "
                                            type="button">
                                            <i class="ri-add-circle-line fs-5"></i>
                                        </button>
                                    </div>
                                </div>
                            @endif
                        </div>
                        @empty
                        <div class="row removeclass0">
                            <div class="col-sm-2">
                                <div class="mb-3">
                                    <input type="text" class="form-control" name="edit_description_budget[]"
                                        placeholder="Description" />
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="mb-3">
                                    <input type="number" class="form-control" id="volume0" name="edit_volume[]"
                                        placeholder="Volume" onkeyup="convertToUsdVolume(this.value, '0')" />
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="mb-3">
                                    <input type="number" class="form-control" id="unitCost0" name="edit_unit_cost[]"
                                        placeholder="Unit Cost" onkeyup="convertToUsd(this.value, '0')"/>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="mb-3">
                                    <input type="text" class="form-control" id="totalIdr0" name="edit_total_idr[]"
                                        placeholder="Total Amount (IDR)" readonly />
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="mb-3">
                                    <input type="text" class="form-control" name="edit_total_usd[]"
                                        placeholder="Total Amount (USD)" id="usdValue0" readonly />
                                </div>
                            </div>
                                <div class="col-sm-1">
                                    <div class="mb-3">
                                        <button onclick="education_fields();"
                                            class="
                            btn
                            rounded-pill
                            px-4
                            btn-light-success
                            text-success
                            font-weight-medium
                            waves-effect waves-light
                        "
                                            type="button">
                                            <i class="ri-add-circle-line fs-5"></i>
                                        </button>
                                    </div>
                                </div>
                        </div>
                        @endforelse
                    </div>
                </div>
                
            </section>

            <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
                <a href="{{ route('event.show', $team->id) }}" class="btn btn-outline-primary me-md-2">Back</a>
                <button class="btn btn-primary me-md-2" type="submit">Save</button>
            </div>
        </div>
    </form>

    <!-- ============================================================= -->
    <!-- End PAge Content -->
    <!-- ============================================================= -->
</div>
@endsection
@section('js')
<!--This page plugins -->
<script src="{{ asset('back') }}/extra-libs/datatables.net/js/jquery.dataTables.min.js"></script>
<!-- start - This is for export functionality only -->
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
<script src="{{ asset('back') }}/js/pages/datatable/datatable-advanced.init.js"></script>

<script src="{{ asset('back') }}/libs/jquery-steps/build/jquery.steps.min.js"></script>
<script src="{{ asset('back') }}/libs/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.19.0/additional-methods.js"></script>
<script src="{{ asset('back') }}/libs/select2/dist/js/select2.full.min.js"></script>
<script src="{{ asset('back') }}/libs/select2/dist/js/select2.min.js"></script>
<script src="{{ asset('back') }}/js/pages/forms/select2/select2.init.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!--This page JavaScript -->
<script src="{{ asset('back') }}/libs/jquery.repeater/jquery.repeater.min.js"></script>
<script src="{{ asset('back') }}/extra-libs/jquery.repeater/repeater-init.js"></script>
{{-- <script src="{{ asset('back') }}/extra-libs/jquery.repeater/dff.js"></script> --}}

<script>
    function convertToUsdVolume(value, increment) {
        var calculate = value * $("#unitCost" + increment).val();
        $("#totalIdr" + increment).val(calculate);

        $.ajax({
            url: "{{ route('program.convert-to-usd') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                total_money: calculate
            },
            success: function(result) {
                $("#usdValue" + increment).val(result);
            }
        });
    }

    function convertToUsd(value, increment) {
        var calculate = $("#volume" + increment).val() * value;
        $("#totalIdr" + increment).val(calculate);

        $.ajax({
            url: "{{ route('program.convert-to-usd') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                total_money: calculate
            },
            success: function(result) {
                $("#usdValue" + increment).val(result);
            }
        });
    }
</script>
<script>
    var room = 1;

    function education_fields() {
        room++;
        var objTo = document.getElementById("education_fields");
        var divtest = document.createElement("div");
        divtest.setAttribute("class", "mb-3 removeclass" + room);
        var rdiv = "removeclass" + room;
        divtest.innerHTML =
            '<div class="row"><div class="col-sm-2"><div class="mb-3"><input type="text" class="form-control" name="edit_description_budget[]" placeholder="Description"></div></div><div class="col-sm-2"> <div class="mb-3"> <input type="number" class="form-control" id="volume' + room  + '" name="edit_volume[]" onkeyup="convertToUsdVolume(this.value,`' + room + '`)" placeholder="Volume"> </div></div><div class="col-sm-2"> <div class="mb-3"> <input type="number" class="form-control"" name="edit_unit_cost[]" id="unitCost' + room  + '" onkeyup="convertToUsd(this.value,`' + room + '`)" placeholder="Unit Cost"> </div></div><div class="col-sm-2"> <div class="mb-3"> <input class="form-control" name="edit_total_idr[]" id="totalIdr' + room + '" placeholder="Total Amount (IDR)" readonly> </div></div><div class="col-sm-3"> <div class="mb-3"> <input class="form-control" name="edit_total_usd[]" id="usdValue' + room + '" placeholder="Total Amount (USD)" readonly> </div></div><div class="col-sm-1"> <div class="mb-3"> <button class="btn rounded-pill px-4 btn-light-danger text-danger font-weight-medium waves-effect waves-light" type="button" onclick="remove_education_fields(' +
            room +
            ');"> <i class="ri-delete-bin-line fs-5"></i> </button> </div></div></div>';

        objTo.appendChild(divtest);
        feather.replace();
    }

    function remove_education_fields(rid, hapus_id) {
        if(hapus_id != "") {
            $(".removeclass" + rid).remove();
            $("#updateForm").append('<input type="hidden" name="hapus_id_budget[]" value="' + hapus_id + '" />');
        } else {
            $(".removeclass" + rid).remove();
        }
    }
</script>

<script>
    $.ajax({
        url: "{{ route('team.get-team-member') }}",
        method: "POST",
        data: {
            "_token": "{{ csrf_token() }}",
            team_initiation_id: "{{ $team->id }}"
        },
        success: function (data) {
            $('#edit_team_id').val(data['team_id']).trigger('change');
        }
    });
</script>
@endsection