@extends('layouts.master')
@section('content')
<style>
    .grayTopborder {
        border-top: solid 1px #e5e5e5
    }

    .assCatalogue-radio {
        margin: 5px;
        margin-bottom: 15px
    }

    .RrulesHeading {
        padding: 0px 20px 10px 20px !important;
        background: transparent !important;
        border-bottom: solid 1px #e5e5e5
    }

    .pt-3 {
        padding-top: 3px !important
    }

    .CataAddName .form-control:focus {
        border: solid 1px #eae9e9 !important;
        border-bottom: solid 2px #0038ba !important
    }

    ._PR_filter {
        width: 220px !important
    }

    .w160px {
        width: 130px !important
    }

    .CataAddName .col-form-label {
        font-size: 13px !important
    }

    .ProListHeight {
        height: 619px !important
    }

    .productsTbl .table img {
        float: none
    }

    .pr-400 {
        padding-right: 40px !important
    }

    .tooltip {
        font-size: 18px;
        display: block;
        color: #808080;
        z-index: 1;
        opacity: 1;
        right: -30px
    }

    .tooltip:HOVER {
        color: #0038ba;
    }

    .wy-tooltip {
        border: 1px solid #0038ba;
        color: #fff;
        background: #0038ba;
        box-shadow: 0 2px 3px #999;
        position: absolute;
        padding: 5px;
        text-align: left;
        border-radius: 2px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        font-size: 11px;
        letter-spacing: 1px;
        max-width: 250px
    }

    .wy-hide {
        display: none
    }

    .giftpicture {
        width: 377px
    }

    .giftpicture .input-group {
        font-size: 14px
    }

    .giftpicture .custom-file-label {
        border-radius: 0;
        height: 35px;
        border: none;
        line-height: 1.6;
        color: #495057;
        background-color: #f6f6f6
    }

    .giftpicture .custom-file-label::after {
        line-height: 1.6;
        color: #fff;
        background-color: #0038ba;
        border-left: 1px solid #0038ba;
        border-radius: 0;
    }
    .value_input {
        padding: 2px;
        margin: 0 !important;
        font-size: 12px;
        box-shadow: none;
        height: 20px;
        width: 100px;
    }
    .success-btn{
        background:linear-gradient(90deg, green 0%, green 100%)!important;
    }
</style>


<div class="row mt-2 mb-3">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <h2 class="_head01">POS Asset <span> Management</span></h2>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6">
        <ol class="breadcrumb">
            <li><a><span>POSM</span></a></li>
            <li><span>Assignment</span></li>
        </ol>
    </div>
</div>
<div class="row">
    <div class="col-md-12 mb-30">
        <div class="card PB-20">
            <div class="header">
                <h2>POS <span> Asset Assigment</span></h2>
            </div>
            <div id="floating-label" class="row m-0">
                <div class="form-wrap pb-0 PT-10">
                    <form id="posm-assignment-form" method="POST">
                        @csrf
                        <input type="hidden" class="material_max_qty" name="material_max_qty">
                        <input type="hidden" name="pos_id" value="{{@$records->pos_id}}">
                        <div class="row m-0">
                            <div class="col pr-0">
                                <label class="font12 mb-5">Asset*</label>
                                <div class="form-s2">
                                    <select class="form-control formselect required" name="pos_material_id" placeholder="select Material" style="width: 100%" id="material_id">
                                        <option value="">Select Asset</option>
                                        @foreach ($pos_mat as $pos)
                                        <option value="{{$pos->id}}" {{@$records->pos_id == $pos->id ? 'selected' : ''}} quantity-attr="{{$pos->quantity}}">{{$pos->title}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col pr-0">
                                <label class="font12 mb-5">Deployment From*</label>
                                <div class="form-group" style="height: auto !important">
                                    <input id="datepicker" name="deployment_from" type="text"
                                        class="form-control required datepicker deployment_from" value="{{@$records->active_from}}" style="font-size: 13px" autocomplete="off">
                                </div>
                            </div>
                            <div class="col pr-0" id="minQTyProdDiv">
                                <label class="font12 mb-5">Deployment Till*</label>
                                <div class="form-group" style="height: auto !important">
                                    <input id="datepicker" name="deployment_till" type="text"
                                        class="form-control required datepicker deployment_till" value="{{@$records->active_till}}" style="font-size: 13px" autocomplete="off">
                                </div>
                            </div>
                            <div class="col pr-0" id="freeProdDiv">
                                <label class="font12 mb-5">Visit Tracking From*</label>
                                <div class="form-group" style="height: auto !important">
                                    <input id="datepicker" name="visit_tracking_from" type="text"
                                        class="form-control required datepicker visit_tracking_from" value="{{@$records->visit_tracking_from}}" style="font-size: 13px" autocomplete="off">
                                </div>
                            </div>
                            <div class="col" id="freeProdDiv">
                                <label class="font12 mb-5">Visit Tracking Till*</label>
                                <div class="form-group" style="height: auto !important">
                                    <input id="datepicker" name="visit_tracking_till" type="text"
                                        class="form-control required datepicker visit_tracking_till" value="{{@$records->visit_tracking_till}}" style="font-size: 13px" autocomplete="off">
                                </div>
                            </div>
                            
                        </div>
                    </form>
                </div>
            </div>
            <div class="row form-wrap pt-0 PB-10">
                <div class="col-md-12">
                    <label class="font12 mb-5">Assign To*</label>
                </div>
                <div class="col-auto">
                    <div class="custom-control custom-radio">
                        <input class="custom-control-input" type="radio"
                            name="posGeoSelectRadio" id="byRegion" value="region" {{@$records->geo_tag == 1 ? 'checked' : 'checked'}}>
                        <label class="custom-control-label font13"
                            for="byRegion">Region</label>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="custom-control custom-radio">
                        <input class="custom-control-input" type="radio"
                            name="posGeoSelectRadio" id="byArea" value="area" {{@$records->geo_tag == 2 ? 'checked' : ''}}>
                        <label class="custom-control-label font13"
                            for="byArea">Area</label>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="custom-control custom-radio">
                        <input class="custom-control-input" type="radio"
                            name="posGeoSelectRadio" id="assign_by_territory"
                            value="territory" {{@$records->geo_tag == 3 ? 'checked' : ''}}>
                        <label class="custom-control-label font13"
                            for="assign_by_territory">Territory</label>
                    </div>
                </div>
            </div>
            <div class="row m-0 grayTopborder">
                <div class="col-12 p-0">
                    <div class="row m-0 retailerTable">
                        <div id="primary_products" class="col-12">
                            <div class="header RrulesHeading mt-10 mb-20" style="margin-left:-15px">
                                <h2 class="assign-to-name _w100">Regions <span>List</span>
                                </h2>
                            </div>
                            <div class="loader-sell360 tblLoader">
                                <div class="loader"> <span class="box-icon"></span> <span class="box-icon"></span>
                                <div class="loader-img"> <img src="/images/sell-360-logo.svg" alt=""> </div>
                                <span class="txt"><span></span> LOADING...</span> </div>
                            </div>
                            <input type="hidden" id="all_regions_records" value="{{json_encode($regions)}}">
                            <input type="hidden" id="all_areas_records" value="{{json_encode($areas)}}">
                            <input type="hidden" id="all_terrs_records" value="{{json_encode($terrs)}}">
                            <span class="assign-to-div">

                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 text-right PT-15">
                    <button type="button" id="saveAssignment" class="btn btn-primary mr-2">Save</button>
                    <a href="/" class="btn btn-cancel">Cancel</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('js')
    <script src="/js/custom/pos-material-assignment.js"></script>
@endpush