@extends('layouts.master')
@section('content')
<style>
    .pt-7 {
        padding-top: 7px !important
    }

    .mb-4 {
        margin-bottom: 4px !important
    }

    .font11 {
        font-size: 11px !important
    }

    .headingDB {
        padding: 15px 20px !important;
        margin-left: -5px
    }

</style>
<div class="row mt-2 mb-3">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <h2 class="_head01">Add <span> New Distributor</span></h2>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6">
        <ol class="breadcrumb">
            <li><a href="#"><span>Distributors</span></a></li>
            <li><span>Add</span></li>
        </ol>
    </div>
</div>
<div class="row">
    <div class="col-md-8 mb-30">
        <div class="card mb-30">
            <div class="header">
                <h2>Distributor <span> Details</span></h2>
            </div>
            <div class="body PT-15">
                <div id="floating-label">
                    <div class="form-wrap p-0">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label mb-10">Distributor Name*</label>
                                    <input type="text" id="" name="distributor_name" class="form-control" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-6 pt-7">
                                <div class="form-group">
                                    <label class="control-label mb-10">Phone</label>
                                    <input type="text" id="" name="phone" placeholder="03XXXXXXXXX" class="form-control" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-6 pt-7">
                                <div class="form-group">
                                    <label class="control-label mb-10">Email</label>
                                    <input type="text" id="" name="email" class="form-control" placeholder="">
                                </div>
                            </div>

                            <div class="col-md-12 pt-10">
                                <div class="form-group">
                                    <label class="control-label mb-10">Address </label>
                                    <input type="text" id="" name="address" class="form-control" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="font11 mb-4">Distributor Type*</label>
                                <div class="form-s2">
                                    <select class="form-control formselect SubDsitributor" placeholder="select Type" name="type" id="type" >
                                        <option disabled value="0" selected>Select Type</option>
                                        @foreach ($types as $type)
                                            <option data-flag="{{$type->distributor_flag}}" data-dist_type="{{$type->dist_type}}" value="{{$type->id}}">{{$type->distributor_type_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6 parent_id" style="display: none">
                                <label class="font11 mb-4">Parent/Sole Distributor</label>
                                <div class="form-s2">
                                    <select class="form-control formselect" placeholder="select Parent/Sole Distributor" name="parent_id" id="parent_id1">
                                        <option  value="0" selected>Select Parent/Sole Distributor</option>
                                        @foreach ($parents as $thisrow)
                                            <option   value="{{$thisrow->id}}">{{$thisrow->distributor_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="font11 mb-4">Distributor Region*</label>
                                <div class="form-s2">
                                    <select class="form-control formselect" onchange="fetchAllRegionAreas(this.value)" placeholder="select Region" id="region_id" name="region_id">
                                        <option selected disabled value="0">Select Region</option>
                                        @foreach ($regions as $data)
                                            <option  value="{{$data->id}}">{{$data->region_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <label class="font11 mb-4">Distributor Area/Zone*</label>
                                <div class="form-s2">
                                    <select class="form-control formselect" onchange="fetchAllAreaTerritories(this.value)" placeholder="select Area" name="area_id" id="area_id">
                                        <option selected disabled value="0">Select Area/Zone</option>
                                    </select>
                                </div>
                            </div>


                            <div class="col-md-6">
                                <label class="font11 mb-4">Distributor Territory*</label>
                                <div class="form-s2">
                                    <select class="form-control formselect"   placeholder="select Territory" name="territory_id" id="territory_id">
                                        <option selected disabled value="0">Select Territory</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="font11 mb-4">Distributor City/Town*</label>
                                <div class="form-s2">
                                    <select class="form-control formselect" name="city_id" id="city_id" placeholder="select City/Town">
                                        <option value="0" disabled selected>Select City/Town</option>
{{--                                        @foreach ($cities as $city)--}}
{{--                                            <option value="{{$city->id}}">{{$city->name}}</option>--}}
{{--                                        @endforeach--}}
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="font11 mb-4">Fulfilment By</label>
                                <div class="form-s2">
                                    <select class="form-control formselect" placeholder="Select Fulfilment By" name="fulfilment_by">
                                        <option selected disabled value="0">Select Fulfilment By</option>
                                        <option value="1">Company</option>
                                        <option value="2">Sole Distributor</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-12 p-0 pb-15">
                                <div class="header headingDB">
                                    <h2>Geolocation</h2>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label mb-10">Distributor Latitude*</label>
                                    <input type="text" id="" name="latitude" class="form-control" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label mb-10">Distributor Longitude*</label>
                                    <input type="text" id="" name="longitude" class="form-control" placeholder="">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label mb-10">Attendance Radius</label>
                                    <input type="text" id="attendance_radius" name="attendance_radius" class="form-control" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-12 p-0 mb-10">
                                <div class="header headingDB">
                                    <h2>Additional <span>Details</span></h2>
                                </div>
                            </div>
                            <div class="col-md-6 pt-7">
                                <div class="form-group">
                                    <label class="control-label mb-10">NTN </label>
                                    <input type="text" name="ntn" id="" class="form-control" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-6 pt-7">
                                <div class="form-group">
                                    <label class="control-label mb-10">STRN </label>
                                    <input type="text" name="strn" id="" class="form-control" placeholder="">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="font11 mb-4">Payment Terms</label>
                                <div class="form-s2">
                                    <select class="form-control formselect" placeholder="select Payment Terms" name="payment_type">
                                        <option selected disabled value="0">Select Payment Terms</option>
                                        <option value="Advance">Advance</option>
                                        <option value="Cash">Cash</option>
                                        <option value="Bill to Bill">Bill to Bill</option>
                                        <option value="Credit">Credit</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6 pt-7">
                                <div class="form-group">
                                    <label class="control-label mb-10">Lead Time</label>
                                    <input type="number" name="lead_time" id="" class="form-control" placeholder="">
                                </div>
                            </div>

                            <div class="col-md-12 pt-10">
                                <label class="font11 mb-5">Warehouse Images</label>
                                <form action="/distributor_warehouse_images" class="dropzone" id="dropzonewidgetwarehouseImages" method="POST"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <input type="text" hidden value="add" name="operation" class="operation" />
                                    <input type="text" value="{{$random_string}}" hidden class="doc_key" name="doc_key" />
                                </form>
                            </div>


                            <div class="col-md-12 pt-10">
                                <label class="font11 mb-5">DAF Images</label>
                                <form action="/distributor_DAF_images" class="dropzone" id="dropzonewidgetDAFImages" method="POST"
                                      enctype="multipart/form-data">
                                    @csrf
                                    <input type="text" hidden value="add" name="operation" class="operation" />
                                    <input type="text" value="{{$random_string}}" hidden class="doc_key_daf" name="doc_key" />
                                </form>
                            </div>


                            <div class="col-md-12 pt-10">
                                <label class="font11 mb-5">MOU Images</label>
                                <form action="/distributor_MOU_images" class="dropzone" id="dropzonewidgetMOUImages" method="POST"
                                      enctype="multipart/form-data">
                                    @csrf
                                    <input type="text" hidden value="add" name="operation" class="operation" />
                                    <input type="text" value="{{$random_string}}" hidden class="doc_key_mou" name="doc_key" />
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- <div class="card">
            <div class="header">
                <h2>T.S.O <span> Assignments</span></h2>
            </div>
            <div class="body PT-15">
                <div id="floating-label">
                    <div class="form-wrap p-0">
                        <div class="row">
                            <div class="col-md-3">
                                <label class="font11 mb-4">Select ASM/RSM</label>
                                <div class="form-s2">
                                    <select class="form-control formselect asm_rsm_id" placeholder="select ASM/RSM" name="asm_rsm">
                                        <option selected disabled value="0">Select ASM/RSM</option>
                                        @foreach ($employees as $emp)
                                    <option value="{{$emp->employee_id}}">{{$emp->employee_first_name}} {{ $emp->employee_last_name ? $emp->employee_last_name : '' }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <input type="text" class="rpt_emp" hidden value="{{$reporting_employees}}"/>
                            <div class="col-md-3">
                                <label class="font11 mb-4">Distributor T.S.O</label>
                                <div class="form-s2">
                                    <select class="form-control formselect tso_id" placeholder="select T.S.O" name="tso">
                                        <option selected disabled value="0">Select T.S.O</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="font11 mb-4">Order Booker</label>
                                <div class="form-s2">
                                    <select class="form-control formselect order_booker_id" placeholder="Select Booker" name="order_booker">
                                        <option selected disabled value="0">Select Booker</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3 PT-20">
                                <button type="button" class="btn btn-primary m-0 mt-5 w-100 assign_assignment">Assign</button>
                            </div>
                            <div class="col-md-12 PT-15 tso_list_div">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> --}}
    </div>
    <div class="col-md-4 mb-30">
        <form id="saveNewDistributorForm" enctype="multipart/form-data">
            @csrf
            <input name="operation" class="operation" value="add" id="operation" hidden type="text" />
            <input name="new_distributor_id" hidden type="text" />
            <input type="text" value="{{$random_string}}" hidden class="doc_key" name="doc_key" />
            <div class="card mb-30">
                <div class="header">
                    <h2>Distributor <span> User</span></h2>
                </div>
                <div class="body PT-15">
                    <div id="floating-label">
                        <div class="form-wrap p-0">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="control-label mb-10">Username*</label>
                                        <input type="text" id="" name="dUserName" class="form-control" placeholder="">
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="control-label mb-10">Password*</label>
                                        <input type="password" id="" name="dPassword" class="form-control" placeholder="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-30">
                <div class="header">
                    <h2>POC <span> Details</span></h2>
                </div>
                <div class="body PT-15">
                    <div id="floating-label">
                        <div class="form-wrap p-0">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="control-label mb-10">POC Name</label>
                                        <input type="text" id="" name="poc_name" class="form-control" placeholder="">
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="control-label mb-10">POC Phone No</label>
                                        <input type="text" id="" name="poc_phone" class="form-control" placeholder="">
                                    </div>
                                </div>


                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="control-label mb-10">POC CNIC No</label>
                                        <input type="text" id="" name="poc_cnic" class="form-control" placeholder="">
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-wrap p-0">
                                        <label class="font11 mb-5">Profile Image</label>
                                        <div class="upload-pic" id="ProfileDiv"></div>
                                    </div>
                                </div>
                                <div class="col-md-12 p-0 mb-10">
                                    <div class="header headingDB">
                                        <h2>POC <span>CNIC Images</span></h2>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-wrap p-0">
                                        <label class="font11 mb-5">Frontside</label>
                                        <div class="upload-pic" id="CNIC_front"></div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-wrap p-0">
                                        <label class="font11 mb-5">Backside</label>
                                        <div class="upload-pic" id="CNIC_back"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="col-12 text-center">
    <button type="button" class="btn btn-primary m-0 mt-5 save_new_distributor">Save Distributor</button>
    <a href="/" class="btn btn-primary m-0 mt-5 ml-2 btn-cancel">Cancel</a>
</div>

@endsection