@extends('layouts.index')
@section('title')
    Edit Delegated Job
@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" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.min.css"
        integrity="sha512-EZSUkJWTjzDlspOoPSpUFR0o0Xy7jdzW//6qhUkoZ9c4StFkVsp9fbbd0O06p9ELS3H486m4wmrCELjza4JEog=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <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;
        }

        textarea.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;
        }

        .dropify-wrapper {
            border: 1px solid #e2e7f1;
            border-radius: .3rem;
            height: 220px;
            margin-bottom: 10px;
        }

        .dropify-wrapper .dropify-message p {
            margin: 5px 410px 0 !important;
        }
    </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('delegated-job.index') }}">Delegated Job</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            Edit
                        </li>

                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Edit Delegated Job</h1>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <!-- ============================================================= -->
    <div class="container-fluid">
        <!-- ============================================================= -->
        <!-- Start Page Content -->
        <!-- ============================================================= -->

        <div class="row">

            <form method="POST" action="{{ route('delegated-job.update', $delegated_job->id) }}" id="createForm"
                enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <section id="tabs">

                    <div class="card">
                        <div class="card-body">
                            <!-- Nav tabs -->
                            <div class="d-flex">
                                <h4>Edit Delegated Job</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="form-group">
                                                            <div class="controls">
                                                                <label>Job Name <span class="text-danger">*</span></label>
                                                                <input type="text" id="name" name="name"
                                                                    value="{{ old('name', $delegated_job->name) }}"
                                                                    class="form-control" placeholder="Job Name">
                                                            </div>
                                                            <label id="error_name" class="error"
                                                                style="display: none;"></label>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-6 mt-3">
                                                        <div class="form-group">
                                                            <div class="controls">
                                                                <label>Delegated To <span
                                                                        class="text-danger">*</span></label>
                                                                <select name="edit_team_id[]" id="edit_team_id"
                                                                    class="select2 form-control custom-select"
                                                                    style="width: 100%; height: 36px" multiple required>
                                                                    <option value="">-- Choose Emoloyee --</option>
                                                                    @foreach ($pegawai as $item)
                                                                        <option value="{{ $item->id }}">
                                                                            {{ $item->nama_lengkap }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            <label id="error_edit_team_id[]" class="error"
                                                                style="display: none;"></label>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-6 mt-3">
                                                        <div class="form-group">
                                                            <div class="controls">
                                                                <label>Start Date</label>
                                                                <input type="date" id="start_date" name="start_date"
                                                                    value="{{ old('start_date', $delegated_job->start_date) }}"
                                                                    class="form-control" placeholder="Start Date">
                                                            </div>
                                                            <label id="error_start_date" class="error"
                                                                style="display: none;"></label>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-6 mt-3">
                                                        <div class="form-group">
                                                            <div class="controls">
                                                                <label>End Date</label>
                                                                <input type="date" id="end_date" name="end_date"
                                                                    value="{{ old('end_date', $delegated_job->end_date) }}"
                                                                    class="form-control" placeholder="End Date">
                                                            </div>
                                                            <label id="error_end_date" class="error"
                                                                style="display: none;"></label>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-6 mt-3">
                                                        <div class="form-group">
                                                            <div class="controls">
                                                                <label>Link</label>
                                                                <input type="text" id="link" name="link"
                                                                    value="{{ old('link', $delegated_job->link) }}"
                                                                    class="form-control" placeholder="Link">
                                                            </div>
                                                            <label id="error_link" class="error"
                                                                style="display: none;"></label>
                                                        </div>
                                                    </div>
                                                    {{-- <div class="col-md-6 mt-3">
                                                        <div class="form-group">
                                                            <div class="controls">
                                                                <label>Realization</label>
                                                                <input type="number" name="realization"
                                                                    value="{{ old('realization', $delegated_job->realization) }}" class="form-control"
                                                                    placeholder="Realization">
                                                            </div>
                                                            <label id="error_realization" class="error"
                                                                style="display: none;"></label>
                                                        </div>
                                                    </div> --}}

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

                                                    {{-- <div class="col-md-6 mt-3">
                                                        <div class="form-group">
                                                            <div class="controls">
                                                                <label>Attachment</label>
                                                                <input type="file" class="dropify" name="attachment"
                                                                    data-allowed-file-extensions="png jpg jpeg svg"
                                                                    data-show-remove="false">
                                                            </div>
                                                        </div>
                                                    </div> --}}

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

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

        </div>
        <!-- ============================================================= -->
        <!-- 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 src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js"
        integrity="sha512-8QFTrG0oeOiyWo/VM9Y8kgxdlCryqhIxVeRpWSezdRRAvarxVtwLnGroJgnVW9/XBRduxO/z1GblzPrMQoeuew=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script>
        $('.dropify').dropify({
            messages: {
                'default': '',
            }
        });
    </script>

    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                }
            });
            $("#createForm").validate({
                rules: {
                    name: {
                        required: true
                    },
                    assigned_to_id: {
                        required: true,
                    }
                },
                messages: {
                    name: {
                        required: "Name is required",
                    },
                    assigned_to_id: {
                        required: "Assigned To is required"
                    }
                },
                submitHandler: function(form) {
                    $("#tambahButton").prop('disabled', true);
                    form.submit();
                }
            });
        });
    </script>

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