@extends('app-new')

@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/wizard/bs-stepper.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/pickadate/pickadate.css">
    <!-- END: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/responsive.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/vendors.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.css">
    <link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css">
    <link rel="stylesheet" href="/assets/css/daterangepicker.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css">

    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">
    <!-- END: Page CSS-->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">{{trans('dsr/dsr.dsr')}}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/home">{{trans('common/common.home')}}</a>
                    </li>
                    <li class="breadcrumb-item"><a href="/member/{!! $alias !!}/dsr">{{trans('dsr/dsr.dsr')}}</a>
                    </li>
                    <li class="breadcrumb-item active">
                    @if(isset($visit) && ($dsr->id))
                        {{trans('common/common.edit')}}
                    @else
                        {{trans('common/common.add_new')}}
                    @endif
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')

 <!-- Basic multiple Column Form section start -->
 {!! Form::model($dsr, ['method' => isset($dsr) && $dsr->id ? 'put' : 'post', 'enctype' => 'multipart/form-data']) !!}
 <section id="multiple-column-form">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <!-- <div class="card-header">
                    <h4 class="card-title">Multiple Column</h4>
                </div> -->
                <div class="card-body">
                        <div class="row">
                            <div class="col-md-4 col-12">
                                <div class="form-group">
                                    <label for="title" class="required"> Dsr Title <span style="color:red;"> *</span> </label>
                                    {!! Form::text('title', 
                                        isset($dsr) && $dsr->title ? $dsr->title : old('title'), 
                                        ['class' => 'form-control',
                                        'id' => 'title']) 
                                    !!}
                                    {!! $errors->first('title', '<label class="control-label error" for="title">:message</label>')!!}
                                </div>         
                            </div>

                            <div class="col-md-4 col-12">
                                <div class="form-group {{{ $errors->has('visit_id') ? 'has-error' : '' }}}">
                                    <label for="visit_id">Select Visit</label>
                                    <select class="form-control select2" id="visit_id" name="visit_id" onchange="getVisitDetails(this.value)">
                                    <option value="">--Select Visit --</option>
                                        @foreach($visit as $val)
                                            <option value="{{$val->id}}" @if(isset($val) && ($val->id == $dsr->visit_id)) selected @endif>
                                                {{$val->name}}
                                            </option>
                                            @endforeach    
                                    </select>
                                    {!! $errors->first('visit_id', '<label class="control-label error" for="visit_id">:message</label>')!!}
                                </div>
                            </div>
                            <div class="col-md-4 col-12">
                                <div class="form-group {{{ $errors->has('visit_name') ? 'has-error' : '' }}}">
                                    <label for="visit_id">Enter Visit Name</label>
                                    <input type="text" id="visit_name" name="visit_name" class="form-control" value="{{$dsr->visit_name}}" placeholder="Enter Visit Name">
                                    {!! $errors->first('visit_name', '<label class="control-label error" for="visit_name">:message</label>')!!}
                                </div>
                            </div>
                        </div>
                        <div class="row mt-1">
                            <div class="col-md-4">
                                <div class="form-group{{{ $errors->has('purpose_id') ? 'has-error' : '' }}}" id="purpose_id-div">
                                    <label for="purpose_id">Purpose</label>
                                    <br>
                                    <select class="form-control select2 " id="purpose_id" name="purpose_id">
                                        <option value="">--Select Purpose --</option>
                                        @foreach($purposes as $val)
                                            <option value="{{$val->id}}" @if(isset($val) && ($val->id == $dsr->purpose_id)) selected @endif>
                                                {{$val->name}}
                                            </option>
                                        @endforeach    
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for=""> Venue </label>
                                    {!! Form::text('venue', 
                                        isset($dsr) && $dsr->venue ? $dsr->venue : old('venue'), 
                                        ['class' => 'form-control',
                                        'id' => 'venue']) 
                                    !!}
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Status</label>
                                    <select class="form-control select2" id="status" name="status">
                                    @if(isset($dsr->id)){
                                        <option value="{{$dsr->id}}" @if(isset($dsr) && ($dsr->id == $dsr->status)) selected @endif> {{ $dsr->status }}</option>
                                    }
                                    @else{
                                        <option value="{{$dsr->id}}" @if(isset($dsr) && ($dsr->id == $dsr->status)) selected @endif>
                                            {{$dsr->name}}
                                        </option>   
                                    }
                                    @endif
                                        <option value="pending">Pending</option>
                                        <option value="completed">Completed</option>
                                        <option value="cancelled">Cancelled</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-1">
                            <div class="form-group col-md-4 {{{ $errors->has('from_time') ? 'has-error' : '' }}}" style="display">
                                <label>Visit From</label> 
                                @if(isset($fromTime))
                                    {!! Form::text('from_time',$fromTime,['class' => 'form-control', 'id' => 'from_time']) !!}
                                @else
                                    {!! Form::text('from_time', isset($dsr) && $dsr->from_time ? $dsr->from_time : old('from_time'),['class' => 'form-control', 'id' => 'from_time']) !!}
                                @endif
                            </div>
                            <div class="form-group col-lg-4 {{{ $errors->has('to_time') ? 'has-error' : '' }}}" style="display">
                                <label>Visit Till</label> 
                                @if(isset($toTime))
                                    {!! Form::text('to_time',$toTime,['class' => 'form-control', 'id' => 'to_time']) !!}
                                @else
                                    {!! Form::text('to_time', isset($dsr) && $visit->to_time ? $dsr->to_time : old('to_time'),['class' => 'form-control', 'id' => 'to_time']) !!}
                                @endif
                            </div>
                        </div> 
                        
                        <div class="row mt-1">
                            <div class="form-group col-md-4 {{{ $errors->has('customer_id') ? 'has-error' : '' }}}" style="display">
                                <label for="customer_id">Customer</label>
                                <br>
                                <select class="form-control select2" id="customer_id" name="customer_id" onchange="getCustomerDetails(this.value)">
                                    <option value="">--Select Customer --</option>
                                    @foreach($customers as $customer)
                                        <option value="{{$customer->id}}" @if(isset($customer) && ($customer->id == $dsr->customer_id)) selected @endif>
                                            {{$customer->name}}
                                        </option>
                                    @endforeach    
                                </select>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">Mobile Number</label>
                                    @if(isset($customers) && ($dsr->id))
                                    <div class="form-control" id="mobile" style="height: 37px;"></div>
                                    @else
                                        <input type="hidden" name="" id="" >
                                        <div class="form-control" id="mobile" value='mobile' style="height: 37px;"></div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">Email Id</label>
                                    @if(isset($customers) && ($dsr->id))
                                    <div class="form-control" id="email" style="height: 37px;"></div>
                                    @else
                                        <input type="hidden" name="" id="" >
                                        <div class="form-control" id="email" value = 'email' style="height: 37px;"></div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="row mt-1"> 
                            <div class="col-md-6">
                                <div class="form-group {{{ $errors->has('address') ? 'has-error' : '' }}}">
                                    <label for="address">Address</label>
                                    {!! Form::textarea('address', isset($dsr->address) ? $dsr->address : old('address'), 
                                        ['class' => 'form-control', 'id' => 'address', 'rows' => 3, 'style' => 'resize:none;']) !!} 
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group {{{ $errors->has('geo_address') ? 'has-error' : '' }}}">
                                    <label for="geo_address">Geo Address</label>
                                    {!! Form::textarea('geo_address', isset($dsr->geo_address) ? $dsr->geo_address : old('geo_address'), 
                                        ['class' => 'form-control', 'id' => 'geo_address', 'rows' => 3, 'style' => 'resize:none;']) !!} 
                                    
                                </div>
                            </div>        
                        </div>
                        
                            <div class="row mt-1">
                                <div class="form-group col-md-4 {{{ $errors->has('type') ? 'has-error' : '' }}}">
                                    <label for="type">Type</label>
                                    @if(isset($currEmp) && (($currEmp->employee_type=="employee") || ($currEmp->employee_type=="workman") ))
                                        <select class="form-control select2" id="type" name="type" disabled>
                                    @else
                                        <select class="form-control select2" id="type" name="type">
                                    @endif
                                        <option value="" selected>Select Type</option>
                                        <option value="employee"  @if((old('type') == 'employee' ) || ($currEmp->employee_type == 'employee')) selected @endif>Employee</option>                                                        
                                        <option value="workman"  @if((old('type') == 'workman' ) || ($currEmp->employee_type == 'workman')) selected @endif>Workman</option>                                                        
                                    </select>
                                    {!! $errors->first('type', '<label class="control-label error" for="type">:message</label>')!!}
                                </div>
                                <div class="form-group col-md-4 {{{ $errors->has('employee_id') ? 'has-error' : '' }}}" id="employee-div" style="display: @if((old('type')=='employee') || ($currEmp->employee_type == 'employee')) block @else none @endif;">
                                    <label for="employee_id">Employee</label>
                                    <br>
                                    @if(isset($currEmp) && ($currEmp->employee_type == 'employee'))
                                        <select class="form-control select2" id="employee_id" name="employee_id" disabled>
                                    @else
                                        <select class="form-control select2" id="employee_id" name="employee_id">
                                    @endif
                                        <option value="" selected>Select Employee</option>
                                        @foreach($employees as $employee)
                                            <option value="{{$employee->id}}"  @if((old('employee_id') == $employee->id ) || (isset($dsr->employee_id) && $dsr->employee_id == $employee->id) || (isset($currEmp->id) && $currEmp->id == $employee->id)) selected @endif>{{ ucfirst($employee->name).' ('.$employee->employee_code.')'}}</option>                      
                                        @endforeach
                                        </select>
                                    {!! $errors->first('employee_id', '<label class="control-label error" for="employee_id">:message</label>')!!}
                                </div>
                               
                                <div class="form-group col-md-4 {{{ $errors->has('workman_id') ? 'has-error' : '' }}}" id="workman-div" style="display: @if((old('type')=='workman') || ($currEmp->employee_type == 'workman')) block @else none @endif;">
                                    <label for="workman_id">Workman</label>
                                    <br>
                                    @if(isset($currEmp) && ($currEmp->employee_type == 'workman'))
                                        <select class="form-control select2" id="workman_id" name="workman_id" disabled>
                                    @else
                                        <select class="form-control select2" id="workman_id" name="workman_id">
                                    @endif
                                        <option value="" selected>Select Workman</option>
                                        @if($user->employee_type == "workman")
                                        <option value="{{$user->id}}" selected>{{$user->name}}</option> 
                                        @foreach($workmans as $workman)
                                            <option value="{{$workman->id}}"  @if((old('workman_id') == $workman->id ) || (isset($dsr->employee_id) && $dsr->employee_id == $workman->id) || (isset($currEmp->id) && $currEmp->id == $employee->id)) selected @endif>{{ ucfirst($workman->name).' ('.$workman->employee_code.')' }}</option>                      
                                        @endforeach
                                        @else
                                        @foreach($workmans as $workman)
                                            <option value="{{$workman->id}}"  @if((old('workman_id') == $workman->id ) || (isset($dsr->employee_id) && $dsr->employee_id == $workman->id) || (isset($currEmp->id) && $currEmp->id == $employee->id)) selected @endif>{{ ucfirst($workman->name).' ('.$workman->employee_code.')' }}</option>                      
                                        @endforeach
                                        @endif
                                        </select>
                                    {!! $errors->first('workman_id', '<label class="control-label error" for="workman_id">:message</label>')!!}
                                </div>
                            </div>


                            <div class="row mt-1">
                                <div class="col-lg-6">
                                    <div class="form-group {{{ $errors->has('description') ? 'has-error' : '' }}}">
                                        <label for="description" class="required">Description<span style="color:red;"> *</span></label>
                                        {!! Form::textarea('description', isset($dsr->description) ? $dsr->description : old('description'), ['class' => 'form-control', 'id' => 'description', 'rows' => 3, 'style' => 'resize:none;']) !!} 
                                        {!! $errors->first('description', '<label class="control-label error" for="description">:message</label>')!!}
                                    </div>
                                </div>
                            </div>

                        
                        <div class="row mt-2">
                            <div class="col-md-6 col-12 mt-2">
                                <label class="form-label">Attachment<span style="color:grey">(can attach more than one)</span></label> 
                                    <div class="form-group {{{ $errors->has('attachments[]') ? 'has-error' : '' }}}">
                                        <div class="row">
                                            <div class="col-md-2">
                                                <button type="button" id="add_more" class="btn btn-primary" style="line-height:15px;width: max-content;"><i class="fa fa-plus" aria-hidden="true"></i> Add Attachment</button>
                                            </div>
                                        </div>
                                        @if($dsr->attachments)
                                            @foreach($dsr->getMedia('attachments') as $attachment)
                                            <div style="display:inline-block; position:relative; margin: 7px 7px 0 0;">
                                                @if($attachment->mime_type=="application/msword" || $attachment->mime_type=="appplication/docx" || $attachment->mime_type=="appplication/doc")
                                                    <a href="{{$attachment->getUrl()}}" target="_blank"><img src="/assets/img/docx-icon.jpg" alt="attachment" style="height: 200px; width:200px; object-fit: contain;"></a> 
                                                @elseif($attachment->mime_type=="application/pdf")
                                                    <a href="{{$attachment->getUrl()}}" target="_blank"><img src="/assets/img/pdf-icon.jpg" alt="attachment" style="height: 200px; width:200px; object-fit: contain;"></a> 
                                                @else
                                                    <a href="{{$attachment->getUrl()}}" target="_blank"><img src="{{$attachment->getUrl()}}" alt="attachment" style="height: 200px; width:200px; object-fit: contain;"></a> 
                                                @endif
                                                <p class="text-center">{{$attachment->file_name}}</p>
                                                <a onclick="delAttached.call(this,{{$attachment->id}})" style='cursor:pointer; color:red; position: absolute; right: 5px; top: 5px' title="Delete Image"> <i class="fa fa-times-circle" style="font-size:18px;"></i></a>
                                            </div>
                                            @endforeach
                                        @endif
                                        {!! $errors->first('attachments[]', '<label class="control-label error" for="attachments[]">:message</label>')!!}
                                    </div>
                            </div>
                        </div>
                        <input type="hidden" name="deleted_attachemnts" id="deleted_attachemnts" value=[] />
                        
                        
                        <div class="row float-right">
                            <div class="col-12 mt-2">
                                <button type="submit" id="save-form" class="btn btn-primary me-1">{{trans('common/common.save')}}</button> 
                            </div>
                        </div>        
                </div>
            </div>
        </div>
    </div>
</section>
{!! Form::close() !!} 
<!-- Basic Floating Label Form section end -->

@endsection 

@push('footer-script')

<!-- BEGIN: Page Vendor JS-->
<script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></script>
<script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
<script src="/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
<script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.time.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
<!-- END: Page Vendor JS-->
<script src="/app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/dataTables.bootstrap5.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/responsive.bootstrap5.js"></script>
<script src="/app-assets/js/scripts/ui/ui-feather.js"></script>
<script src="/assets/js/moment.min.js"></script>
<script src="/assets/js/daterangepicker.js"></script>

<script src="/app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/datatables.buttons.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/jszip.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/pdfmake.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/vfs_fonts.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/buttons.html5.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/buttons.print.min.js"></script>
<script src="/app-assets/vendors/js/tables/datatable/dataTables.rowGroup.min.js"></script>
<script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>
<script src="/app-assets/js/scripts/tables/table-datatables-basic.js"></script>
<script src="/app-assets/js/scripts/tables/table-datatables-advanced.js"></script>
<!-- BEGIN: Page JS-->
<script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
<script src="/app-assets/js/scripts/forms/form-validation.js"></script>
<script src="/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>

<script src="/assets/plugins/bower_components/bootstrap-select/bootstrap-select.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/core-js-bundle/minified.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('app.js_google_map_key')}}&libraries=drawing,places&v=weekly" defer></script>
<script src="http://maps.googleapis.com/maps/api/geocode/json?latlng=44.4647452,7.3553838&sensor=true"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" type="text/javascript"></script>

<!-- end page JS -->
<script type="text/javascript">
    function getVisitDetails (visit_id) {
        var url = "/member/{!! $alias !!}/dsr/visit";
        $.ajax({
            url: url,
            type: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                "id": visit_id},
            success: function (data) {
                $('#purpose_id').select2('destroy');
                $('#customer_id').select2("destroy");
                $('#status').select2("destroy");
                $('#type').select2("destroy");
                
                $('#venue').val(data.venue);
                $('#status').val(data.status);
                $('#from_time').val(data.from_time);
                $('#to_time').val(data.to_time);
                $('#mobile').html(data.customer.mobile);
                $('#email').html(data.customer.email);
                $('#address').html(data.customer.company_address);
                $('#geo_address').html(data.customer.geo_address);
                $('#status option[value="'+data.status+'"]').attr("selected","selected");
                $('#purpose_id option[value="'+data.agenda+'"]').attr("selected","selected");
                $('#customer_id option[value="'+data.customer_id+'"]').attr("selected","selected");
                $('#type option[value="'+data.employee.employee_type+'"]').attr("selected","selected");
                
                if (data.employee.employee_type = 'employee')
                {   
                    $("#workman_id").attr("disabled", true);
                    $('#workman_id').parent().parent().parent().hide();
                    $('#employee_id').select2('destroy');
                    $('.select-type').prop('selectedIndex',0);
                    $('#employee_id option[value="'+data.employee_id+'"]').attr("selected","selected");
                    $('#employee-div > .select-type').removeAttr("disabled");
                    $('#employee_id').removeAttr("disabled");
                    $('#employee_id').parent().parent().parent().show();
                    $('#employee_id').select2();
                }
                else{
                    $("#employee_id").attr("disabled", true);
                    $('#employee_id').parent().parent().parent().hide();
                    $('#workman_id').select2('destroy');
                    $('.select-type').prop('selectedIndex',0);
                    $('#workman_id option[value="'+data.employee_id+'"]').attr("selected","selected");
                    $('#workman-div > .select-type').removeAttr("disabled");
                    $('#workman_id').removeAttr("disabled");
                    $('#workman_id').parent().parent().parent().show();
                    $('#workman_id').select2();
                }
                
                
                }
        });
    }

    function getCustomerDetails (customer_id) {
        var url = "/member/{!! $alias !!}/dsr/customer";
        $.ajax({
            url: url,
            type: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                "id": customer_id},
            success: function (data) {
                
                $('#mobile').html(data.mobile);
                $('#email').html(data.email);
                $('#address').html(data.company_address);
                $('#geo_address').html(data.geo_address);
                }
        });
    }
    
    var imagesPreview = function(input, placeToInsertImagePreview) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(event) {
                var extension = input.files[0].name.split('.').pop().toLowerCase();
                if(extension == "pdf"){
                    $($.parseHTML('<img src="/assets/img/pdf-icon.jpg" style="height:200px; width:200px; object-fit: contain;"> <a onclick="deleteAttachment.call(this)" style="cursor:pointer; color:red; position: absolute; right: 5px; top: 5px" title="Delete Image"> <i class="fa fa-times-circle" style="font-size:18px;"></i></a><p class="text-center">'+input.files[0].name+'</p>')).appendTo(placeToInsertImagePreview);
                }
                else if(extension == "docx" || extension=="doc"){
                    $($.parseHTML('<img src="/assets/img/docx-icon.jpg" style="height:200px; width:200px; object-fit: contain;"> <a onclick="deleteAttachment.call(this)" style="cursor:pointer; color:red; position: absolute; right: 5px; top: 5px" title="Delete Image"> <i class="fa fa-times-circle" style="font-size:18px;"></i></a><p class="text-center">'+input.files[0].name+'</p>')).appendTo(placeToInsertImagePreview);
                }
                else{
                    $($.parseHTML('<img style="height:200px; width:200px; object-fit: contain;"> <a onclick="deleteAttachment.call(this)" style="cursor:pointer; color:red; position: absolute; right: 5px; top: 5px" title="Delete Image"> <i class="fa fa-times-circle" style="font-size:18px;"></i></a><p class="text-center">'+input.files[0].name+'</p>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }
            }
            reader.readAsDataURL(input.files[0]);
        }
    };

    function delAttached(attachment){
        $(this).parent().remove();
        var val = JSON.parse($('#deleted_attachemnts').val());
        val.push(attachment);
        $('#deleted_attachemnts').val(JSON.stringify(val));
    }

    function deleteAttachment(){
        $(this).parent().remove();
    }

    function preview() {
        imagesPreview(this, $(this).closest('div'));
    }

    $('#add_more').click(function(e){
        var temp = $(this).parent().parent().parent().append("<div style='display:inline-block; position:relative; margin: 7px 7px 0 0;'><input type='file' style='display:none;' class='fileinput form-control attachments' name='attachments[]' data-filename-placement='inside' title='Browse' onchange='preview.call(this)' /></div>");
        var result = temp.find('div:last input').trigger('click');
    });
    
    
    $(document).ready(function(){

        $('#from_time').datetimepicker();
        $('#to_time').datetimepicker();
        $('#type').trigger('change');


        @if(isset($customers))
            $('#customer_id').trigger('change');    
        @endif

        $('#type').change(function() {
            $(".select-type").attr("disabled", true);
            $('.select-type').parent().hide();
            var ids = $(this).val();
            //alert(ids);
            if(ids == "employee"){
            $("#workman_id").attr("disabled", true);
            $('#workman_id').parent().parent().parent().hide();
            $('#'+ids+'_id').select2('destroy');
            $('.select-type').prop('selectedIndex',0);
            $('#'+ids+'_id option:first').prop('selected',true).trigger( "change" );
            $('#'+ids+'-div > .select-type').removeAttr("disabled");
            $('#'+ids+'_id').removeAttr("disabled");
            $('#'+ids+'_id').parent().parent().parent().show();
            $('#'+ids+'_id').select2();
            }
            else if(ids == "workman"){
            $("#employee_id").attr("disabled", true);
            $('#employee_id').parent().parent().parent().hide();
            $('#'+ids+'_id').select2('destroy');
            $('.select-type').prop('selectedIndex',0);
            $('#'+ids+'_id option:first').prop('selected',true).trigger( "change" );
            $('#'+ids+'-div > .select-type').removeAttr("disabled");
            $('#'+ids+'_id').removeAttr("disabled");
            $('#'+ids+'_id').parent().parent().parent().show();
            $('#'+ids+'_id').select2();
            }
            else{
            $("#employee_id").attr("disabled", true);
            $('#employee_id').parent().parent().parent().hide();
            $("#workman_id").attr("disabled", true);
            $('#workman_id').parent().parent().parent().hide();
            }
         
        });

    })

</script>
<style>
.custom-dropdown .form-control { height: auto; padding: 0 }
.custom-dropdown .select2-container-multi.select2-container-disabled .select2-choices { background: none; padding:0; border: none }
.custom-dropdown .select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice { margin-right: 5px }
#organization tr th { /* word-break: break-all; */ 
    max-width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;}
.tbalorganiresp { overflow: scroll } 
</style>
@endpush