<div class="container containerSupplier" >
<style>
    input.profitCenterSelectCheckbox{
        margin-right: 5px;
    }
</style>
    <x-contact-add-popup></x-contact-add-popup>

    <form class="supplierForm needs-validation" enctype="multipart/form-data">
        @csrf
        <br><br><br>


        <div class="form-group row">
            <label for="supplierName" class="col-sm-2 col-form-label">Név:</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="supplierName"
                       placeholder="Írja be a nevét" name="name" required
                       data-required="true"

                >
            </div>
        </div>
        <div class="form-group row">
            <label for="supplierHooreycaId" class="col-sm-2 col-form-label" >Hooreyca ID:</label>
            <div class="col-sm-4">
                <input  type="text" class="form-control" id="supplierHooreycaId" placeholder="ID" name="hooreycaId" maxlength="6" required>
            </div>
            <label for="supplierNameId" class="col-sm-1 col-form-label text-right">betűkód:</label>
            <div class="col-sm-5">
                <input   type="text" class="form-control" id="supplierNameId" placeholder="Írja be a betűkódot" name="nameId" maxlength="6" required>
            </div>
        </div>

        <div class="form-group row">
            <label for="supplierProductGroups" class="col-sm-2 col-form-label">Termék kategóriák:</label>
            <div class="col-sm-10">
                <select class="productCategorySelect" name="productGroup"  multiple="multiple" style="width: 100%" >
                    <optgroup label="Food">
                        @foreach($productGroup as $groupData)
                            @if($groupData['type']=='F' && $groupData['depth']==2)
                                <option value="{{$groupData['name']}}"
                                >{{$groupData['name']}}</option>
                            @endif
                        @endforeach
                    </optgroup>
                    <optgroup label="Non Food">
                        @foreach($productGroup as $groupData)
                            @if($groupData['type']=='N' && $groupData['depth']==2)
                                <option value="{{$groupData['name']}}">{{$groupData['name']}}</option>
                            @endif
                        @endforeach
                    </optgroup>

                </select>
            </div>
        </div>

        <div class="form-group row">
            <label for="supplierProductGroups" class="col-sm-2 col-form-label">Szolgáltatások:</label>
            <div class="col-sm-10">
                <select class="serviceSelect" name="supplierService"  multiple="multiple" style="width: 100%" >

                        @foreach($service as $serviceData)
                                <option value="{{$serviceData['name']}}"
                                >{{$serviceData['name']}}</option>
                        @endforeach

                </select>
            </div>
        </div>

        <div class="form-group row">
            <label for="supplierContacts" class="col-sm-2 col-form-label">Kapcsolattartók:</label>
            <div class="col-sm-10">
                <div class="form-group row">
                    <div class="col-sm-10">
                        <button type="button" class="btn btn-primary buttonNewContact"  >Új kapcsolattartó hozzáadása</button>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col">
                        <table class="table table-striped table-hover table-sm contactTable">
                            <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Név</th>
                                <th scope="col">Email</th>
                                <th scope="col">Telefon</th>
                                <th scope="col">Akció</th>
                            </tr>
                            </thead>
                            <tbody>

                            <template data-name="supplierContactTableRow">
                                <tr>
                                    <th scope="row">[[rowNum]]
                                        <input type="text" name="contactId" value="[[id]]" style="width: 2em;display: none"/>
                                    </th>
                                    <td>[[name]]</td>
                                    <td>[[email]]</td>
                                    <td>[[phone]]</td>
                                    <td>
                                        <button type="button" class="btn btn-danger buttonDelete"  data-toggle="tooltip" data-placement="bottom" title="Törlés">
                                            <span class="fas fa-trash"></span>
                                        </button>
                                        <button type="button" class="btn btn-info buttonEdit" data-toggle="tooltip" data-placement="bottom" title="Szerkeszt">
                                            <span class="fas fa-pencil-alt"></span>
                                        </button>
                                    </td>
                                </tr>
                            </template>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>


        <div class="form-group row">
            <label for="OrderEmail" class="col-sm-2 col-form-label" >E-mail:</label>
            <div class="col-sm-10">
                <input name="orderEmail" type="text"
                       class="form-control" id="OrderEmail"
                       placeholder="Írja be az e-mail címet"
                       data-inputmask="'alias': 'email'"
                       data-required="true"
                       required

                >
            </div>
        </div>

        <div class="form-group row">
            <label for="OrderEmail2" class="col-sm-2 col-form-label">E-mail2:</label>
            <div class="col-sm-10">
                <input name="orderEmail2" type="text"
                       class="form-control" id="OrderEmail2"
                       placeholder="Írja be az e-mail címet"
                       data-inputmask="'alias': 'email'"
                       data-required="true"
                >
            </div>
        </div>

        <div class="form-group row">
            <label for="Address" class="col-sm-2 col-form-label">Székhely:</label>
            <div class="col-sm-10">
                <input name="address" type="text"
                       class="form-control" id="Address"
                       placeholder="Írja be a beszállító székhely címét"
                >
            </div>
        </div>
        <div class="form-group row">
            <label for="MailingAddress" class="col-sm-2 col-form-label">Levelézésicím:</label>
            <div class="col-sm-10">
                <input name="mailingAddress" type="text"
                       class="form-control" id="MailingAddress"
                       placeholder="Írja be a beszállító levelezési címét"
                >
            </div>
        </div>

        <div class="form-group row">
            <label for="Phone" class="col-sm-2 col-form-label">Telefonszám:</label>
            <div class="col-sm-10">
                <input name="phone" type="text"
                       class="form-control" id="Phone"
                       placeholder="Írja be a telefonszámot"
                       data-inputmask="'alias': 'phoneNumber'"
                >
            </div>
        </div>

{{--        <div class="form-group row">
            <label for="Fax" class="col-sm-2 col-form-label">Fax:</label>
            <div class="col-sm-10">
                <input name="fax" type="text"
                       class="form-control" id="Fax"
                       placeholder="Írja be a faxszámot"
                       data-inputmask="'alias': 'phoneNumber'"
                >
            </div>
        </div>--}}

        <div class="form-group row">
            <label for="CustomerService" class="col-sm-2 col-form-label">Telefonszám:</label>
            <div class="col-sm-10">
                <input name="customerServicePhone" type="text"
                       class="form-control" id="CustomerService"
                       placeholder="Írja be a vevőszolgálat számát"
                       data-inputmask="'alias': 'phoneNumber'"
                >
            </div>
        </div>


        <div class="form-group row">
            <label for="openHours" class="col-sm-2 col-form-label">Nyitva tartási idő:</label>
            <div class="col-sm-10">
                <input name="openHours" type="text"
                       class="form-control" id="openHours"
                       placeholder="Írja be a nyitva tartási időt"
                >
            </div>
        </div>

        <div class="form-group row">
            <label for="ordersDeadline" class="col-sm-2 col-form-label">Megrendelések leadási határideje:</label>
            <div class="col-sm-10">

                <textarea class="form-control" rows="3" placeholder="Írja be a megrendelések leadási határidejét" name="ordersDeadline" id="ordersDeadline"></textarea>

            </div>
        </div>

        <div class="form-group row">
            <label for="minOrderValue" class="col-sm-2 col-form-label">Minimum rendelési érték:</label>
            <div class="col-sm-10">
                <textarea class="form-control" rows="3" placeholder="Írja be a minimum rendelési értéket" name="minOrderValue" id="minOrderValue"></textarea>

            </div>
        </div>





        <div class="form-group row">
            <label for="note" class="col-sm-2 col-form-label">Megjegyzés:</label>
            <div class="col-sm-10">
                <textarea class="form-control" rows="3" placeholder="Ha kiván itt tud megjegyzést írni" name="note"></textarea>
            </div>
        </div>
        <fieldset class="form-group">
            <div class="row">
                <legend class="col-form-label col-sm-2 pt-0">E-mail csatolmány</legend>
                <div class="col-sm-10">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="emailAttachmentType" id="gridRadios1" value="pdf" checked>
                        <label class="form-check-label" for="gridRadios1">
                            PDF
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="emailAttachmentType" id="gridRadios2" value="excel">
                        <label class="form-check-label" for="gridRadios2">
                            Excel
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="emailAttachmentType" id="gridRadios2" value="none">
                        <label class="form-check-label" for="gridRadios2">
                            Nincs
                        </label>
                    </div>
                </div>
            </div>
        </fieldset>
        <div class="form-group row">
            <label for="canSee" class="col-sm-2 col-form-label">Aktív:</label>
            <div class="col-sm-10">
                <div class="input-group">
                    <div  class="btn-group customRadioBtnGroup">
                        <a class="btn btn-primary btn-sm active" data-toggle="canSee" data-title="1">Igen</a>
                        <a class="btn btn-primary btn-sm notActive" data-toggle="canSee" data-title="0">Nem</a>
                    </div>
                    <input type="hidden" name="canSee" >
                </div>

            </div>
        </div>
        <div class="form-group row">
            <label for="canSeeInOrder" class="col-sm-2 col-form-label">Megrendelésnél látható:</label>
            <div class="col-sm-10">
                <div class="input-group">
                    <div  class="btn-group customRadioBtnGroup">
                        <a class="btn btn-primary btn-sm active" data-toggle="canSeeInOrder" data-title="1">Igen</a>
                        <a class="btn btn-primary btn-sm notActive" data-toggle="canSeeInOrder" data-title="0">Nem</a>
                    </div>
                    <input type="hidden" name="canSeeInOrder" >
                </div>

            </div>
        </div>
       {{-- <div class="form-group row">
            <label for="hooreycaDataActive" class="col-sm-2 col-form-label">Hooreyca adatátadás:</label>
            <div class="col-sm-10">
                <div class="input-group">
                    <div  class="btn-group customRadioBtnGroup">
                        <a class="btn btn-primary btn-sm active" data-toggle="hooreycaDataActive" data-title="1">Igen</a>
                        <a class="btn btn-primary btn-sm notActive" data-toggle="hooreycaDataActive" data-title="0">Nem</a>
                    </div>
                    <input type="hidden" name="hooreycaDataActive" >
                </div>

            </div>
        </div>--}}
        <div class="form-group row">
            <label for="profitCenterName" class="col-sm-2 col-form-label">Profitcenterek:</label>
            <div class="col-sm-10">
                <div class="container">
                    <div class="row">
                        <div class="col"><input class="profitCenterSelectCheckboxAll" type="checkbox"  >Mind</div>
                        <div class="w-100"></div>
                @foreach(array_chunk($profitCenter, 2) as $profitCenters)
                    @foreach($profitCenters as $profitCenterData)
                                <div class="col"><input class="profitCenterSelectCheckbox" type="checkbox" name="profitCenter" value="{{$profitCenterData['name']}}">{{$profitCenterData['name']}}</div>
                    @endforeach
                        <div class="w-100"></div>
                @endforeach
                    </div>
                </div>

{{--
                <select class="profitCenterSelect" name="profitCenter"  multiple="multiple" style="width: 100%" >
                    @foreach($profitCenter as $profitCenterData)
                        <option value="{{$profitCenterData['name']}}"
                        >{{$profitCenterData['name']}}</option>
                    @endforeach
                </select>
--}}
            </div>

        </div>

        <div class="form-group row">
            <label for="logoFile" class="col-sm-2 col-form-label">Logo:</label>
            <div class="col-sm-10">
                <div class="input-group mb-3">
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" id="" name="logoFile" accept="image/*">
                        <label class="custom-file-label" for="">Válasszon fájlt</label>
                    </div>
                </div>
            </div>
            <label for="logoFileFile" class="col-sm-2 col-form-label"></label>
            <div class="col-sm-8 containerFileUploadStarted ">
                <div class="input-group mb-3 ">
                    <img class="imageLogo" src="{{url('images/icons/no-photo256.png')}}">
                </div>
            </div>
        </div>
        <div class="form-group row">
            <label for="attacheFile" class="col-sm-2 col-form-label">Fájlok:</label>
            <div class="col-sm-10">
                <div class="form-group row">
                    <div class="col-sm-8 containerFileUploadNone">
                        Fájl feltöltése csak mentett állomány esetén lehetséges!
                    </div>

                    <div class="col-sm-8 containerFileUpload d-none">
                        <div class="input-group mb-3">
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="inputGroupAttacheFile" name="attacheFile" >
                                <label class="custom-file-label" for="inputGroupAttacheFile">Válasszon fájlt</label>
                            </div>
                            <div class="input-group-append">
                                <button type="button" class="btn btn-info buttonUpload">Feltöltés</button>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-8 containerFileUploadStarted d-none">
                        <div class="input-group mb-3 ">
                            <span class="containerUploadedFileName  mx-auto">xxx</span>
                            <div class="containerUploadedSpinner ">
                                <strong class="text-success ">Feltöltés...</strong>
                                <div class="spinner-border mr-auto text-success align-middle" role="status" aria-hidden="true"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group row">

                    <div class="col">
                        <table class="table table-striped table-hover table-sm attachmentTable">
                            <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Név</th>
                                <th scope="col">Dátum</th>
                                <th scope="col">Fájl</th>
                                <th scope="col">Akció</th>
                            </tr>
                            </thead>
                            <tbody>

                            <template data-name="supplierAttachmentTableRow">
                                <tr>
                                    <th scope="row">[[rowNum]]
                                        <input type="hidden" name="attachmentId" value="[[id]]" style="width: 3em;"/>
                                    </th>
                                    <td>[[original_filename]]</td>
                                    <td>[[date]]</td>
                                    <td><a href="[[link]]" download="[[original_filename]]">Letöltés</a>

                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-danger buttonDelete"  data-toggle="tooltip" data-placement="bottom" title="Törlés">
                                            <span class="fas fa-trash"></span>
                                        </button>
                                        {{--
                                                                                <button type="button" class="btn btn-info buttonEdit" data-toggle="tooltip" data-placement="bottom" title="Szerkeszt">
                                                                                    <span class="fas fa-pencil-alt"></span>
                                                                                </button>
                                        --}}
                                    </td>
                                </tr>
                            </template>
                            </tbody>
                        </table>
                    </div>

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

        <div class="form-group row">
            <div class="col-sm-10">
                <button type="button" class="btn btn-success FormSaveButton">Mentés</button>
            </div>
        </div>
    </form>
</div>

<style>
    .contactTable .btn{
        padding: 1px 6px;
    }
    .custom-file-input ~ .custom-file-label::after {
        content: "Kiválaszt";
    }
</style>
<script>

    @isset($supplierData)
    console.log('most kell feldolgozn az adatokat, es beallitani az app supplierst');
    console.log({!! json_encode($supplierData) !!});
    APP.Supplier=new Supplier({!! json_encode($supplierData) !!});
    APP.SupplierAdmin.Supplier=APP.Supplier;
    $(document).ready(function() {
        //$(".containerSupplier .supplierForm .productCategorySelect").val(['Tojás', 'Zöldség_gyümölcs']);
        APP.SupplierAdmin.setDetailsViewData();
        $(".custom-file-input").on("change", function() {
            var fileName = $(this).val().split("\\").pop();
            $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
        });
    });
    @endisset
</script>
