@extends('dashboard.components.main')
@section('content')
    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content warehousesPageContainer">
        <div class="page-content">
            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-flex align-items-center justify-content-between">
                        <h4 class="page-title mb-0 font-size-18">@lang('dashboard_warehouses.services')</h4>
                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item active"> @lang('dashboard_clients.welcome_platform')</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end page title -->
            <!-- Errors -->
            @include('dashboard.components.errors')
            <!-- Success Message -->
            @if (session()->has('message'))
                <p class="alert alert-success text-center">
                    {{ session()->get('message') }}
                </p>
            @endif

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <a class="popup-form btn btn-primary" href="#addservice" disabled>
                                @lang('dashboard_warehouses.add_new_service') </a>
                        </div>
                    </div>
                </div>
            </div>
            {{-- add new service --}}
            <div class="card mfp-hide mfp-popup-form mx-auto" id="addservice">
                <div class="card-body">
                    <h4 class="mt-0 mb-4">@lang('dashboard_warehouses.add_new_service') </h4>
                    <form class="servicePopupForm" id="addServiceForm" action="{{ route('dashboard.services.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        {{-- <div class="row allRequiredFieldsContainer mb-3">
                            <div class="text-danger">
                                <div class="col-lg-12">
                                    <p class="text-danger mb-0">
                                        @lang('dashboard_invoices.please_fill_all') : 
                                    </p>
                                    <br> 
                                    <div class="mt-1 mb-3 text-danger">
                                        <b class="my-1"> 
                                            Name, Selling Price
                                        </b>
                                    </div>
                                    
                                </div>
                            </div>
                        </div> --}}
            
                        <div class="repeater">
                            <div data-repeater-list="service" id="prods">
                                <div data-repeater-item class="row">
                                    <div class="row addServiceRow">
                                        <div class="col-lg-2 ">
                                            <div class="form-group">
                                                <label>@lang('dashboard_warehouses.paid_type') </label>
                                                <select class="form-control select2" required onchange="PaidTypeSerivceChanged(this)"
                                                    name="paid_type" style="width: 100%">
                                                    <option disabled selected value="{{ null }}">
                                                        @lang('dashboard_warehouses.select_if_paid') </option>
                                                    <option value="yes">Yes</option>
                                                    <option value="no">No</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-2 ">
                                            <div class="form-group">
                                                <label for="name">@lang('dashboard_warehouses.name')</label>
                                                <input type="text" name="name" required class="form-control" id="name"
                                                    placeholder="@lang('dashboard_warehouses.name')">
                                            </div>
                                        </div>
                                        <div class="col-lg-2 ">
                                            <div class="form-group">
                                                <label>@lang('dashboard_warehouses.sku')</label>
                                                <input type="text" name="sku" required class="form-control"
                                                    placeholder="@lang('dashboard_warehouses.sku')">
                                            </div>
                                        </div>
                                        <div class="col-lg-3 form-group">
                                            <label for="">@lang('dashboard_warehouses.quantity_unit')</label>
                                            <select name="unit" onchange="addServiceUnitChanged(this)"
                                            required class="form-control select2" style="width: 100%">
                                                <option value="piece">Piece</option>
                                                <option value="box">Box</option>
                                                <option value="kg">KG</option>
                                                <option value="g">G</option>
                                                <option value="other">Other</option>
                                            </select>
                                        </div>
                                        <div class="col-lg-3 form-group" hidden>
                                            <label for="">@lang('dashboard_warehouses.quantity_unit')</label>
                                            <input type="text" name="custom_unit" class="form-control custom_unit" id="custom_unit">
                                        </div>
                                        
                                        <div class="col-lg-3">

                                            <div class="form-group">
                                                <label for="project">@lang('dashboard_warehouses.branched_from')</label>
                                                <select class="form-control select2" name="parent" style="width: 100%">
                                                    <option disabled selected>@lang('dashboard_warehouses.select_service')
                                                    </option>
                                                    @foreach ($services_parents as $parent)
                                                    <option value="{{ $parent->id }}"
                                                        {{ old('parent') == $parent->id ? 'selected' : '' }}>
                                                        {{ $parent->name }}
                                                    </option>
                                                    @endforeach 
                                                </select>
                                                <small class="mb-0"
                                                style="color: red">@lang('dashboard_warehouses.leave_it_if_not_branched_from_other_serivce')</small>
                                            </div>
                                        </div>
                                        
                                        <h5 class="col-lg-12">@lang('dashboard_warehouses.selling')</h5>
                                        <div class="col-lg-2 ">
                                            <div class="form-group">
                                                <label for="sku">@lang('dashboard_warehouses.selling_information') </label>
                                                <input type="text" name="selling_information" class="form-control" id="name"
                                                    placeholder="@lang('dashboard_warehouses.selling_information')">
                                            </div>
                                        </div>
                                        <div class="col-lg-2 ">
                                            <div class="form-group">
                                                <label for="sku">@lang('dashboard_warehouses.selling_price') </label>
                                                <input type="number" required min="0"  step="any" name="selling_price"
                                                    class="form-control" id="name"
                                                    placeholder="@lang('dashboard_warehouses.selling_price') ">
                                            </div>
                                        </div>
                                        <div class="col-lg-2 ">
                                            <div class="form-group">
                                                <label for="project">@lang('dashboard_warehouses.selling_account')</label>
                                                <select class="form-control select2" required name="selling_account_id" style="width: 100%">
                                                    <option disabled selected value="{{ null }}">@lang('dashboard_warehouses.select_account')
                                                    </option>
                                                     @foreach ($accounts->where('account_type_id', 12) as $account)
                                                        <option value="{{ $account->id }}">{{ $account->name }}
                                                        </option>
                                                    @endforeach 
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-2 ">
                                            <div class="form-group">
                                                <label for="sku">@lang('dashboard_warehouses.selling_description')</label>
                                                <input type="text" name="selling_description" class="form-control" id="name"
                                                    placeholder="Description">
                                            </div>
                                        </div>
                                        <div class="col-lg-2 ">
                                            <div class="form-group">
                                                <label for="project">@lang('dashboard_warehouses.selling_tax')</label>
                                                <select class="form-control select2"  style="width: 100%" onchange="" name="selling_tax_id">
                                                    <option selected value="{{ null }}">
                                                        @lang('dashboard_warehouses.select_tax')</option>
                                                     @foreach ($taxes as $tax)
                                                        <option value="{{ $tax->id }}">
                                                            {{ $tax->name . ' (' . $tax->percentage . ' )' }}
                                                        </option>
                                                    @endforeach 
                                                </select>
                                            </div>
                                        </div>
                                        <h5 class="col-lg-12 purchaseservice" hidden>@lang('dashboard_warehouses.purchase')
                                        </h5>
                                        <div class="form-group col-lg-2 purchaseservice" hidden>
                                            <label for="pruchase">@lang('dashboard_warehouses.purchase_information')</label>
                                            <input type="text" name="purchase_information" class="form-control" id="name"
                                                placeholder="@lang('dashboard_warehouses.purchase_information')">
                                        </div>
                                        <div class="form-group col-lg-2 purchaseservice" hidden>
                                            <label for="quantity">@lang('dashboard_warehouses.purchase_price')</label>
                                            <input type="number" min="0" step="any" name="purchase_price"
                                                class="form-control purchasePrice"
                                                placeholder="@lang('dashboard_warehouses.purchase_price')">
                                        </div>
                                        <div class="col-lg-2 form-group purchaseservice" hidden>
                                            <label for="project">@lang('dashboard_warehouses.purchase_account')</label>
                                            <select required class="form-control select2 purchaseAccount" name="purchase_account_id" style="width: 100%">
                                                <option disabled selected>@lang('dashboard_warehouses.select_account')
                                                </option>
                                                 @foreach ($accounts->where('account_type_id', 13) as $account)
                                                    <option value="{{ $account->id }}">{{ $account->name }}
                                                    </option>
                                                @endforeach 
                                            </select>
                                        </div>
                                        <div class="col-lg-2 form-group purchaseservice" hidden>
                                            <label for="sku">@lang('dashboard_warehouses.purchase_description') </label>
                                            <input type="text" name="pruchase_description" class="form-control" id="name"
                                                placeholder="Description">
                                        </div>
                                        <div class="col-lg-2 form-group purchaseservice" hidden>
                                            <label for="project">@lang('dashboard_warehouses.purchase_tax')</label>
                                            <select class="form-control select2 " onchange="" name="pruchase_tax_id" style="width: 100%">
                                                <option selected value="{{ null }}">@lang('dashboard_warehouses.select_tax')
                                                </option>
                                                @foreach ($taxes as $tax)
                                                    <option value="{{ $tax->id }}">
                                                        {{ $tax->name . ' (' . $tax->percentage . ' )' }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-lg-10">
                                            <label for="">@lang('dashboard_warehouses.select_image')</label>
                                            <input class="col-lg-9" type="file" name="photo" id="">
                                        </div>
                                        <div class="col-lg-2 align-self-center">
                                            {{-- <input type="checkbox" name="delete"
                                                class="del form-group" id="checkbox"> --}}
                                            <button type="button" data-repeater-delete class="btn btn-primary deleteRow"
                                                aria-label="Profile">
                                                <i class="mdi mdi-delete-alert" aria-hidden="true"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <!-- Seperator -->
                                    <div class="seperator mt-4" style="height: 1px; width: 100%; background: #ccc; margin-bottom: 20px"></div>
                                </div>
                            </div>
                            <input data-repeater-create type="button" class="btn btn-success mt-3 mt-lg-2"
                                value="@lang('dashboard_warehouses.add')" onclick="handleAddServiceSaveButton(this)" />
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="text-right">
                                    <button type="submit"
                                        class="btn btn-primary addServiceSaveButton">@lang('buttons.execute')</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            {{-- end add service --}}
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        {{-- @if(session('message'))
                        <div class="alert alert-success" style="text-align: center"> {{ session()->get('message') }}</div>
                        @elseif(session('error'))
                        <div class="alert alert-danger" style="text-align: center"> {{ session()->get('error') }}</div>
                    
                        @endif --}}
                        <div class="card-body">
                            <h4 class="card-title">@lang('dashboard_warehouses.services')</h4>
                            <p class="card-title-desc">@lang('dashboard_warehouses.show_all_services')</p>
                            
                            {{-- {{ dd($services[0]) }} --}}

                            <table id="datatable-buttons" class="table table-striped table-bordered table-responsive nowrap "
                                style="border-collapse: collapse; border-spacing: 0;">
                                <thead>
                                    <tr>
                                        <th data-priority="1">@lang('dashboard_warehouses.service')</th>
                                        <th data-priority="1">@lang('dashboard_warehouses.paid_type') </th>
                                        <th data-priority="1">@lang('dashboard_invoices.sku')</th>
                                        <th data-priority="1">@lang('dashboard_warehouses.selling_price')</th>
                                        <th style="width: 50px; white-space: normal" data-priority="1">
                                            @lang('dashboard_warehouses.selling_tax')</th>
                                        <th data-priority="1">@lang('dashboard_warehouses.purchase_price')</th>
                                        <th style="width: 50px; white-space: normal" data-priority="1">
                                            @lang('dashboard_warehouses.purchase_tax')</th>
                                        <th style="white-space: normal">@lang('buttons.process')</th>
                                    </tr>
                                </thead>
                                <tr>
                                    @foreach ($services as $service)

                                    <td style="width: 250px; white-space: normal">{{ $service->name }}</td>
                                    <td> @if ($service->purchase_price) Yes @else No @endif</td>
                                    <td>{{ $service->sku }}</td>
                                    <td>{{ $service->selling_price }}</td>
                                    <td style="width: 50px; white-space: normal">
                                        {{ @$service->sellingTax->percentage }} @if(@$service->sellingTax->percentage) % @endif 
                                    </td>
                                    <td>{{ $service->purchase_price  }}</td>
                                    <td style="width: 50px; white-space: normal" data-priority="1">
                                        {{ @$service->purchaseTax->percentage  }} @if(@$service->purchaseTax->percentage) % @endif 

                                    </td>
                                    <td style="width: 300px">
                                        <div class="btn-group dropdown" role="group">
                                            <button id="btnGroupVerticalDrop1" type="button"
                                                class="text-primary border-0 bg-transparent dropdown-toggle "
                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                                title="Options">
                                                <i class="mdi  mdi-dots-vertical mdi-16px"></i>
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
                                                <a class="dropdown-item popup-form"
                                                    href="#editService{{ $service->id }}">@lang('dashboard_warehouses.edit')</a>
                                                    <form id="serviceDelete{{ $service->id }}" action="{{ route('dashboard.services.delete',$service) }}" method="POST">
                                                     @csrf
                                                     @method('DELETE')
                                                        <a class="dropdown-item" onclick="document.getElementById('serviceDelete{{ $service->id }}').submit();" href="#">
                                                            @lang('dashboard_warehouses.delete')</a>
                                                        
                                                        </form>
                                            </div>
                                        </div>
                                    </td>
                                </tr>


                                        {{-- Edit service --}}
                                        <div class="card mfp-hide mfp-popup-form mx-auto" id="editService{{ $service->id }}">
                                            <div class="card-body">
                                                <h4 class="mt-0 mb-4">@lang('dashboard_warehouses.edit') @lang('dashboard_warehouses.service') </h4>
                                                <form class="servicePopupForm" id="editServiceForm{{ $service->id }}" action="{{ route('dashboard.services.update',$service->id) }}" method="POST"
                                                    enctype="multipart/form-data">
                                                    @csrf
                                                    @method('PUT')
                                                    <div class="row">
                                                    </div>
                                                    <div >
                                                        <div  id="prods">
                                                            <div  class="row addServiceRow">
                                                                <div class="row">
                                                                    <div class="col-lg-2 ">
                                                                        <div class="form-group">
                                                                            <label>@lang('dashboard_warehouses.paid_type')
                                                                            </label>
                                                                            <select class="form-control select2 paidTypeDropdown"
                                                                                onchange="PaidTypeSerivceChanged(this)"
                                                                                name="paid_type" required style="width: 100%">
                                                                                <option disabled selected
                                                                                    value="{{ null }}">
                                                                                    @lang('dashboard_warehouses.select_if_paid')
                                                                                </option>
                                                                                <option @if ($service->purchase_price) selected @endif value="yes">Yes</option>
                                                                                <option @if (!$service->purchase_price) selected @endif value="no">No</option>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-2 ">
                                                                        <div class="form-group">
                                                                            <label
                                                                                for="name">@lang('dashboard_warehouses.name')</label>
                                                                            <input type="text" name="name"
                                                                                class="form-control" id="name" required
                                                                                placeholder="@lang('dashboard_warehouses.name')"
                                                                                value="{{ $service->name }}"
                                                                                >
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-2 ">
                                                                        <div class="form-group">
                                                                            <label>@lang('dashboard_warehouses.sku')</label>
                                                                            <input type="text" name="sku" required
                                                                                class="form-control"
                                                                                placeholder="@lang('dashboard_warehouses.sku')"
                                                                                value="{{ $service->sku }}"
                                                                                >
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-3 form-group">
                                                                        <label
                                                                            for="">@lang('dashboard_warehouses.quantity_unit')</label>
                                                                        <select name="unit" onchange="editServiceUnitChanged(this)"
                                                                            class="form-control select2 unitDropdown" style="width: 100%">
                                                                            <option @if ($service->unit == 'piece') selected @endif value="piece">Piece</option>
                                                                            <option @if ($service->unit == 'box') selected @endif value="box">Box</option>
                                                                            <option @if ($service->unit == 'kg') selected @endif value="kg">KG</option>
                                                                            <option @if ($service->unit == 'g') selected @endif value="g">G</option>

                                                                            <option value="other"
                                                                            @if ($service->unit != 'piece' || $service->unit != 'box' || $service->unit != 'kg' || $service->unit != 'g')
                                                                                selected
                                                                            @endif
                                                                            >Other</option>
                                                                        </select>
                                                                    </div>
                                                                    <div class="col-lg-3 form-group" @if ($service->unit == 'piece' || $service->unit == 'box' || $service->unit == 'kg' || $service->unit == 'g') hidden @endif>
                                                                        <label
                                                                            for="">@lang('dashboard_warehouses.quantity_unit')</label>
                                                                        <input type="text" class="form-control" name="custom_unit"
                                                                            id="custom_unit" value="{{ $service->unit }}">
                                                                    </div>

                                                                    <div class="col-lg-2 ">
                                                                        <div class="form-group">
                                                                            <label
                                                                                for="project">@lang('dashboard_warehouses.branched_from')</label>
                                                                            <select class="form-control select2"
                                                                                name="parent" style="width: 100%">
                                                                                <option disabled value="{{ null }}" selected>
                                                                                    @lang('dashboard_warehouses.select_service')
                                                                                </option>
                                                                                @foreach ($services_parents as $parent)
                                                                                    <option value="{{ $parent->id }}"
                                                                                        {{ $service->parent == $parent->id ? 'selected' : '' }}>
                                                                                        {{ $parent->name }}
                                                                                    </option>
                                                                                @endforeach
                                                                                
                                                                            </select>
                                                                            <small
                                                                                style="color: red">@lang('dashboard_warehouses.leave_it_if_not_branched_from_other_serivce')</small>
                                                                        </div>
                                                                    </div>
                                                                    <h5 class="col-lg-12">
                                                                        @lang('dashboard_warehouses.selling')</h5>
                                                                    <div class="col-lg-2 ">
                                                                        <div class="form-group">
                                                                            <label
                                                                                for="sku">@lang('dashboard_warehouses.selling_information')
                                                                            </label>
                                                                            <input type="text" name="selling_information"
                                                                                class="form-control" id="name"
                                                                                placeholder="@lang('dashboard_warehouses.selling_information')"
                                                                                value="{{ $service->selling_information }}">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-2 ">
                                                                        <div class="form-group">
                                                                            <label
                                                                                for="sku">@lang('dashboard_warehouses.selling_price')
                                                                            </label>
                                                                            <input type="number" required min="0"  step="any"
                                                                                name="selling_price" class="form-control"
                                                                                id="name"
                                                                                placeholder="@lang('dashboard_warehouses.selling_price') "
                                                                                value="{{ $service->selling_price }}">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-2 ">
                                                                        <div class="form-group">
                                                                            <label
                                                                                for="project">@lang('dashboard_warehouses.selling_account')</label>
                                                                            <select class="form-control select2"
                                                                                name="selling_account_id" required style="width: 100%">
                                                                                <option disabled selected value="{{ null }}">
                                                                                    @lang('dashboard_warehouses.select_account')
                                                                                </option>
                                                                                
                                                                                @foreach ($accounts->where('account_type_id', 12) as $account)
                                                                                    <option value="{{ $account->id }}" {{ ($service->selling_account_id == $account->id) ? 'selected' : '' }}>
                                                                                        {{ $account->name }}
                                                                                    </option>
                                                                                @endforeach
                                                                                
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-2 ">
                                                                        <div class="form-group">
                                                                            <label
                                                                                for="sku">@lang('dashboard_warehouses.selling_description')</label>
                                                                            <input type="text" name="selling_description"
                                                                                class="form-control" id="name"
                                                                                placeholder="Description"
                                                                                value="{{ $service->selling_description }}"
                                                                                >
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-2 ">
                                                                        <div class="form-group">
                                                                            <label
                                                                                for="project">@lang('dashboard_warehouses.selling_tax')</label>
                                                                            <select class="form-control select2 "
                                                                                onchange="" name="selling_tax_id" style="width: 100%">
                                                                                <option selected disabled value="{{ null }}">
                                                                                    @lang('dashboard_warehouses.select_tax')
                                                                                </option>
                                                                                
                                                                                @foreach ($taxes as $tax)
                                                                                    <option value="{{ $tax->id }}"  {{ ($service->selling_tax_id == $tax->id) ? 'selected' : '' }}>
                                                                                        {{ $tax->name . ' (' . $tax->percentage . ' )' }}
                                                                                    </option>
                                                                                @endforeach
                                                                                
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                    <h5 class="col-lg-12 purchaseservice"   @if (!$service->purchase_price) hidden @endif>
                                                                        @lang('dashboard_warehouses.purchase')
                                                                    </h5>
                                                                    <div class="form-group col-lg-2 purchaseservice" @if (!$service->purchase_price) hidden @endif>
                                                                        <label
                                                                            for="pruchase">@lang('dashboard_warehouses.purchase_information')</label>
                                                                        <input type="text" name="purchase_information"
                                                                            class="form-control" id="name"
                                                                            placeholder="@lang('dashboard_warehouses.purchase_information')"
                                                                            value="{{ $service->purchase_information }}">
                                                                    </div>
                                                                    <div class="form-group col-lg-2 purchaseservice" @if (!$service->purchase_price) hidden @endif>
                                                                        <label
                                                                            for="quantity">@lang('dashboard_warehouses.purchase_price')</label>
                                                                        <input type="number" min="0" step="any" name="purchase_price"
                                                                            class="form-control purchasePrice"
                                                                            placeholder="@lang('dashboard_warehouses.purchase_price')"
                                                                            value="{{ $service->purchase_price }}">
                                                                    </div>
                                                                    <div class="col-lg-2 form-group purchaseservice" @if (!$service->purchase_price) hidden @endif>
                                                                        <label
                                                                            for="project">@lang('dashboard_warehouses.purchase_account')</label>
                                                                        <select class="form-control select2 purchaseAccount"
                                                                            name="purchase_account_id" style="width: 100%">
                                                                            <option disabled selected>
                                                                                @lang('dashboard_warehouses.select_account')
                                                                            </option>
                                                                             @foreach ($accounts->where('account_type_id', 13) as $account)
                                                                                <option value="{{ $account->id }}" {{ ($service->purchase_account_id == $account->id) ? 'selected' : '' }}>
                                                                                    {{ $account->name }}
                                                                                </option>
                                                                            @endforeach
                                                                            
                                                                        </select>
                                                                    </div>
                                                                    <div class="col-lg-2 form-group purchaseservice" @if (!$service->purchase_price) hidden @endif>
                                                                        <label
                                                                            for="sku">@lang('dashboard_warehouses.purchase_description')
                                                                        </label>
                                                                        <input type="text" name="pruchase_description"
                                                                            class="form-control" id="name"
                                                                            placeholder="Description"
                                                                            value="{{ $service->purchase_description }}">
                                                                    </div>
                                                                    <div class="col-lg-2 form-group purchaseservice" @if (!$service->purchase_price) hidden @endif>
                                                                        <label
                                                                            for="project">@lang('dashboard_warehouses.purchase_tax')</label>
                                                                        <select class="form-control select2 " onchange=""
                                                                            name="pruchase_tax_id" style="width: 100%">
                                                                            <option selected value="{{ null }}">
                                                                                @lang('dashboard_warehouses.select_tax')
                                                                            </option>
                                                                            @foreach ($taxes as $tax)
                                                                                <option value="{{ $tax->id }}"  {{ ($service->purchase_account_id == $tax->id) ? 'selected' : '' }}>
                                                                                    {{ $tax->name . ' (' . $tax->percentage . ' )' }}
                                                                                </option>
                                                                            @endforeach
                                                                            
                                                                        </select>
                                                                    </div>
                                                                    <div class="col-lg-10">
                                                                        @if($service->image)
                                                                        <img src="{{ asset($service->image) }}" width="100" height="100" alt="">
                                                                        <br>
                                                                        @endif
                                                                        <label
                                                                            for="">@lang('dashboard_warehouses.select_image')</label>
                                                                        <input class="col-lg-9" type="file" name="photo" id="" >
                                                                    </div>
                                                                    <div class="col-lg-2 align-self-center">
                                                                        {{-- <input
                                                                            type="checkbox" name="delete"
                                                                            class="del form-group" id="checkbox">
                                                                        --}}
                                                                       
                                                                    </div>
                                                                </div>
                                                                <!-- Seperator -->
                                
                                                            </div>
                                                        </div>
                                                        
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-12">
                                                            <div class="text-right">
                                                                <button type="submit"
                                                                    class="btn btn-primary addServiceSaveButton">@lang('buttons.execute')</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                        {{-- XX Edit service
                                        XX--}}
                                @endforeach

                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- end col -->
            </div>
            <!-- end row -->
            <!-- end row -->
        </div>
        <!-- End Page-content -->
    @endsection
    @section('custom_script')
        <script>
            $(document).ready(function(){
                $('.paidTypeDropdown').each(function(index,dropdownElement){
                    let selectedValue = $(dropdownElement).val()
                    $(dropdownElement).val(selectedValue).change()
                })
            })
            function PaidTypeSerivceChanged(paid) {
                let currentPopupContainer = $(paid).parent().parent().parent()
                if (paid.value == 'yes') {
                    $(currentPopupContainer).find('.purchaseservice').removeAttr('hidden');
                    /* add required for purchase account and price */
                    $(currentPopupContainer).find('.purchasePrice').attr('required', true)
                    $(currentPopupContainer).find('.purchaseAccount').attr('required', true)
                } else {
                    $(currentPopupContainer).find('.purchaseservice').attr('hidden', 'true');
                    /* remove required for purchase account and price */
                    $(currentPopupContainer).find('.purchasePrice').removeAttr('required')
                    $(currentPopupContainer).find('.purchaseAccount').removeAttr('required')
                }
            }


    /* disable or enable the save button depending on the count of the rows */
    function handleAddServiceSaveButton(){
        setTimeout(() => {
            /* loop through all modals */
            $('.servicePopupForm').each(function(index,serviceForm){
               let rowsCount =  $(serviceForm).find('.addServiceRow').length
               if (rowsCount ==0){
                /* disable save button */
                $(serviceForm).find('.addServiceSaveButton').attr('disabled', true)
            } else {
                $(serviceForm).find('.addServiceSaveButton').removeAttr('disabled')
            }
            })
            
            $('.select2').select2()
        },500);
    }


    /* Handle if unit type changed */
    function addServiceUnitChanged(unitDropdown){
        let dropdownName = unitDropdown.name.split('service[')[1]
        
        let rowIndex = dropdownName.split("][unit]")[0]
        let customInput = $(`input[name='service[${rowIndex}][custom_unit]']`) 
        
            let selectedValue = $(unitDropdown).val()
            /* if other selected .. change name of custom_unit */
            if (selectedValue == 'other'){
                let oldName = $(customInput).attr('name')
                let newName= oldName.replace('custom_unit', 'unit')

                $(customInput).parent().removeAttr('hidden')
                $(customInput).attr('name',newName)
                
                $(unitDropdown).parent().remove()
            }
            
    }


    function editServiceUnitChanged(unitDropdown){
        
        let customInput = $("input[name='custom_unit']") 
        
            let selectedValue = $(unitDropdown).val()
            /* if other selected .. change name of custom_unit */
            if (selectedValue == 'other'){
                let oldName = $(customInput).attr('name')
                $(customInput).parent().removeAttr('hidden')
                $(customInput).attr('name',"unit")
                
              //  $(unitDropdown).parent().remove()
            } else {
                $(customInput).parent().attr('hidden', true)
            }
            
    }

   /*  $(document).ready(){
        setTimeout(() => {
            $(".unitDropdown").change()
        }, 200);
    } */
        </script>
    @endsection