@extends('admin.partial.admin_master')
@section('title')
    <title>Create Project | Aplikasi Project Management</title>
@endsection
@section('css')
    <link href="{{ asset('backend/assets/css/vendor/frappe-gantt.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('backend/assets/css/icons.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('backend/assets/css/app.min.css') }}" rel="stylesheet" type="text/css" id="app-style" />    
    <link rel="stylesheet" href="{{ asset('jqueryui113/jquery-ui.css') }}">
    <link rel="stylesheet" href="{{ asset('datepicker/bootstrap-datepicker.css') }}">
    <style nonce="{{ csp_nonce() }}">
        .note-icon-caret:before{
            content: '';
        }
    </style>
@endsection
@section('main')
@can('Add Project')
        <!-- Start Content-->
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box">
                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item">Dashboard</li>
                                <li class="breadcrumb-item">Manage Project</li>
                                <li class="breadcrumb-item active"><a href="#">Create Project</a></li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end page title -->
    
            <div class="row">
                <div class="col-lg-12">
                    <div class="row">
                        <form action="{{ route('project.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="col-lg-6">
                                <div class="mb-3">
                                    <label for="example-password" class="form-label">Project Code</label>
                                    <input type="text" class="form-control" placeholder="Auto Number" disabled>
                                    <input type="hidden" class="form-control" name="series" value="{{ $series->id }}"
                                        placeholder="Auto Number">
                                </div>
    
                             
    
                                <div class="mb-3">
                                    <label for="example-email" class="form-label">Portofolio<span class="text-danger">*</span></label>
                                    <select class="form-control" name="portofolio" id="portofolio_select">
                                        <option value="">Select Portofolio</option>
                                        @foreach ($portofolio as $row)
                                            <option value="{{ $row->name }}" data-portofolio_id="{{ $row->id ?? '' }}">
                                                {{ $row->name }}</option>
                                        @endforeach
                                        @if ($errors->has('portofolio'))
                                            <span class="text-danger">{{ $errors->first('portofolio') }}</span>
                                        @endif
                                    </select>
                                </div>
    
                                <div class="mb-3">
                                    <label for="example-email" class="form-label">Group Tag<span class="text-danger">*</span></label>
                                    <select class="form-control select2" data-toggle="select2" name="grouptag[]" multiple
                                        id="group_tag_select">
                                        <option disabled>Select Group Tag</option>
                                    </select>
                                </div>
    
    
    
                                <div class="mb-3">
                                    <label for="example-password" class="form-label">Project Name<span class="text-danger">*</span></label>
                                    <input type="text" name="project_name" class="form-control"
                                        value="{{ old('project_name') }}">
                                    @if ($errors->has('project_name'))
                                        <span class="text-danger">{{ $errors->first('project_name') }}</span>
                                    @endif
                                </div>
    
                                <div class="mb-3">
                                    <label for="example-password" class="form-label">Project Budget</label>
                                    <input type="number" name="project_budget" class="form-control" id="budget" readonly>
                                    <small class="text-danger">Auto Calculate from Capex + Opex</small>
                                </div>
    
                                <div class="mb-3">
                                    <label for="example-password" class="form-label">Capex<span class="text-danger">*</span></label>
                                    <input type="number" name="investasi" class="form-control" id="investasi"
                                        placeholder="Investation Value">
                                </div>
    
                                <div class="mb-3">
                                    <label for="example-password" class="form-label">Opex<span class="text-danger">*</span></label>
                                    <input type="number" name="cost" class="form-control" id="cost"
                                        placeholder="Cost Value">
                                </div>
    
                                <div class="mb-3">
                                    <label for="example-password" class="form-label">Start Date<span class="text-danger">*</span></label>
                                    <input type="text" autocomplete="off" class="fromdate form-control" name="start_date">
                                    @if ($errors->has('start_date'))
                                        <span class="text-danger">{{ $errors->first('start_date') }}</span>
                                    @endif
                                </div>
    
                                <div class="mb-3">
                                    <label for="example-password" class="form-label">Target Date<span class="text-danger">*</span></label>
                                    <input type="text" autocomplete="off" class="todate form-control" name="end_date">
                                    @if ($errors->has('end_date'))
                                        <span class="text-danger">{{ $errors->first('end_date') }}</span>
                                    @endif
                                </div>
    
    
    
                                <div class="mb-3">
                                    <label for="example-password" class="form-label">Duration (Est.)</label>
                                    <input type="number" name="duration" class="duration form-control" readonly>
                                </div>
    
                                <div class="mb-3">
                                    <label for="example-password" class="form-label">Project Description<span class="text-danger">*</span></label>
                                    <textarea name="project_description"  class="form-control" rows="4"></textarea>
                                    @if ($errors->has('project_description'))
                                        <span class="text-danger">{{ $errors->first('project_description') }}</span>
                                    @endif
                                </div>
    
    
    
                                <div class="mb-3">
                                    <label for="example-password" class="form-label">Project Charter<span class="text-danger">*</span></label>
                                    <input type="file" name="project_doc" class="form-control" required>
                                    <small class="text-danger">Accepted file : png,jpg,jpeg,pdf,doc,docs,xls,xlsx,ppt,pptx|max:10Mb</small>
                                    @if ($errors->has('project_doc'))
                                        <span class="text-danger">{{ $errors->first('project_doc') }}</span>
                                    @endif
                                </div>
    
                                <div class="mb-3">
                                    <label for="example-password" class="form-label">Risk Profile</label>
                                    <input type="file" name="risk_doc" class="form-control">
                                    @if ($errors->has('risk_doc'))
                                        <span class="text-danger">{{ $errors->first('risk_doc') }}</span>
                                    @endif
                                </div>
    
                                <div class="mb-3">
                                    <label for="project_owner" class="form-label">Project Owner<span class="text-danger">*</span></label>
                                    
                                    <select class="select2 form-control" data-toggle="select2" name="project_owner" id="pilihan">
                                        
                                        <option>Select Project Owner</option>
                                        @foreach ($employee as $row)
                                            <option value="{{ $row->email }}">{{ $row->name ?? '' }} |
                                                {{ $row->position_title ?? '' }} | {{ $row->email ?? '' }} 
                                            </option>
                                          
                                            
                                        @endforeach
                                    </select>
                                    
                                   
                                    @if ($errors->has('project_owner'))
                                        <span class="text-danger">{{ $errors->first('project_owner') }}</span>
                                    @endif
                                </div>
                                <div class="mb-3">
                                    <label for="project_manager" class="form-label">Project Manager<span class="text-danger">*</span></label>
                                    <select class="select2 form-control" data-toggle="select2" name="project_manager">
                                        <option>Select Project Manager</option>
                                        @foreach ($employee as $row)
                                            <option value="{{ $row->email }}">{{ $row->name ?? '' }} |
                                                {{ $row->position_title ?? '' }} | {{ $row->email ?? '' }} </option>
                                        @endforeach
                                    </select>
                                    @if ($errors->has('project_manager'))
                                        <span class="text-danger">{{ $errors->first('project_manager') }}</span>
                                    @endif
                                </div>

                                <div class="mb-3">
                                    <label for="team_member" class="form-label">Team Members<span class="text-danger">* (one or more value)</span></label>
                                    <select class="select2 form-control" data-toggle="select2" name="team_member[]" multiple required>
                                        <option>Select Team Members</option>
                                        @foreach ($employee as $row)
                                            <option value="{{ $row->email }}">{{ $row->name ?? '' }} |
                                                {{ $row->position_title ?? '' }} | {{ $row->email ?? '' }} </option>
                                        @endforeach
                                    </select>
                                    @if ($errors->has('team_member'))
                                        <span class="text-danger">{{ $errors->first('team_member') }}</span>
                                    @endif
                                </div>
                                <small class="text-danger">* required</small>
                                
    
    
                            </div>
                            
                    </div>
    
                    <a href="{{ route('project.index') }}"class="btn btn-primary">Cancel</a>
                    <button type="submit" class="btn btn-success">Submit</button>
                    </form>
                </div>
            </div>
    
    
        </div> <!-- container -->
@endcan

@endsection
@section('js')

    <script src="{{ asset('backend/assets/js/jquery-3.7.1.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/app.min.js') }}"></script>
    
        <script src="{{ asset('datepicker/bootstrap-datepicker.js') }}"></script>
        <script src="{{ asset('jqueryui113/jquery-ui.min.js') }}"></script>

    <script nonce="{{ csp_nonce() }}">
        $(function() {
            $("#investasi, #cost").on("keydown keyup", budget);

            function budget() {
                $("#budget").val(Number($("#investasi").val()) + Number($("#cost").val()));
            }
        });

      
    </script>
    <script nonce="{{ csp_nonce() }}">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $(document).on('change', '#portofolio_select', function() {
            var portofolio_id = $(this).find('option:selected').attr('data-portofolio_id');
            if (portofolio_id === '') {
                $('#group_tag_select').html('');
                $('#group_tag_select').append('<option value="">Pilih Group Tag</option>');
            } else {
                $.post("{{ route('get_group_tag_by_portofolio_id') }}", {
                        portofolio_id: portofolio_id,
                    },
                    function(data, status) {
                        console.log(data);
                        $('#group_tag_select').html('');
                        $('#group_tag_select').append('<option value="">Pilih Group Tag</option>');
                        $.each(data.group_tag, function(key, value) {
                            var new_group_tag = '<option value="' + value.name + '">' + value
                                .name + '</option>';
                            $('#group_tag_select').append(new_group_tag);
                        });
                    }, 'json'
                );
            }

        });
        $('.fromdate').datepicker({
            dateFormat: 'yy-mm-dd',
            changeMonth: true,
            changeYear: true,
        });
        $('.todate').datepicker({
            dateFormat: 'yy-mm-dd',
            changeMonth: true,
            changeYear: true,
        });
        $('.fromdate').datepicker().bind("change", function() {
            var minValue = $(this).val();
            minValue = $.datepicker.parseDate("yy-mm-dd", minValue);
            $('.todate').datepicker("option", "minDate", minValue);
            calculate();
        });
        $('.todate').datepicker().bind("change", function() {
            var maxValue = $(this).val();
            maxValue = $.datepicker.parseDate("yy-mm-dd", maxValue);
            $('.fromdate').datepicker("option", "maxDate", maxValue);
            calculate();
        });

        function calculate() {
            var d1 = $('.fromdate').datepicker('getDate');
            var d2 = $('.todate').datepicker('getDate');
            var oneDay = 24 * 60 * 60 * 1000;
            var diff = 0;
            if (d1 && d2) {

                diff = Math.round(Math.abs((d2.getTime() - d1.getTime()) / (oneDay)));
            }
            $('.duration').val(diff);
        }
    </script>
    <script nonce="{{ csp_nonce() }}">
        $(document).ready(function() {
            $("#summernote").summernote({
                toolbar: [
                    ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript',
                        'subscript', 'clear'
                    ]],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ol', 'ul', 'paragraph', 'height']],
                    ['table', ['table']],
                    ['insert', ['picture', 'link']],
                    ['view', ['undo', 'redo', 'fullscreen', 'help']]
                ]
            });
            $('.dropdown-toggle').dropdown();
        });

        



    </script>
@endsection