@extends('layouts.app')
@section('title')
    {{ "Daily Works" }}
@endsection
@section('css')
    @livewireStyles
    <link rel="stylesheet" href="{{ asset('assets/css/summernote.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/nano.min.css') }}">
@endsection
@section('content')
    <section class="section">
        @if(session()->has('message'))
    <div class="alert alert-success">
        {{ session()->get('message') }}
    </div>
@endif
        <div class="section-header">
            <h1 class="page__heading">Add Work</h1>
            
        </div>
        <style>
            .after-add-more{       
                border: 1px solid #ccc;
                padding: 15px;
                margin-bottom: 2rem;
            }
        </style>
        <div class="section-body">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <form action="{{ route('dailystore') }}" method="post">
                                @csrf
                                <div class="after-add-more">
                                    <div class="row">
                                        <div class="col-sm-3 my-2">
                                            <label class="lable">Project Name</label>
                                            {{ Form::select('pname[]', [], null, ['id' => 'tmProjectId','class' => 'form-control', 'placeholder' => 'Select Project', 'required']) }}
                                        </div>  
                                        
                                        <div class="col-sm-3 my-2">
                                            <label class="lable">Task Name</label>
                                            {{ Form::select('task[]', [], null, ['id' => 'tmTaskId','class' => 'form-control', 'placeholder' => 'Select Task', 'required']) }}
                                        </div> 
                                        <div class="col-sm-3 my-2">
                                            <label class="lable">From Time</label>
                                            <input type="time" name="ftime[]" class="form-control cursor-pointer float-right" autocomplete="off">
                                        </div>
                                        <div class="col-sm-3 my-2">
                                            <label>To Time</label>
                                            <input type="time" name="ttime[]" class="form-control cursor-pointer float-right" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-12 my-2">
                                            <label>Project Description</label>
                                            <textarea class="form-control cursor-pointer float-right" name="pdescription[]"></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                         <a class="btn btn-success add-more mt-2">+ Add More</a>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                    <button type="button" class="btn btn-light">Cancel</button>
                                   
                                </div>
                            </form>    
                        <div >
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </section>
@endsection

@section('scripts')
    @livewireScripts
    <script src="{{ asset('assets/js/summernote.min.js') }}"></script>
    <script src="{{ asset('assets/js/pickr.min.js') }}"></script>
    <script src="{{ mix('assets/js/projects/project.js') }}"></script>
    <script src="{{mix('assets/js/input_price_format.js')}}"></script>
    <script>
        $(document).ready(function() {
    $("body").on("click",".add-more",function(){ 
        var html = $(".after-add-more").first().clone();
      
          $(html).find(".change").html("<label for=''>&nbsp;</label><br/><a class='btn btn-danger remove'>- Remove</a>");
      
      
        $(".after-add-more").last().after(html);
       
    });

    $("body").on("click",".remove",function(){ 
        $(this).parents(".after-add-more").remove();
    });
});
    </script>
@endsection