@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
    }

    .add_button {
        top: -5px;
        right: 15px;
        font-size: 14px;
        padding: 5px 10px;
    }

</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 Shop</span></h2>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6">
        <ol class="breadcrumb">
            <li><a href="#"><span>Shops</span></a></li>
            <li><span>Add</span></li>
        </ol>
    </div>
</div>
<form id="saveNewRetailerForm" enctype="multipart/form-data" autocomplete="off">
    <input name="operation" id="operation" hidden type="text" />
    <input name="new_retailer_id" id="new_retailer_id" hidden type="text" />
    @csrf
    <div class="row">
        <div class="col-md-8">
            <div class="card mb-30">
                <div class="header">
                    <h2>Shop <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-6">
                                    <div class="errorMsg">
                                    <label class="font11 mb-4">Shop Code</label>
                                    <input type="text" name="shop_code" class="form-control" placeholder="0212541">
                                    </div>
                                </div>


                                <div class="col-md-6">
                                    <div class="errorMsg">
                                    <label class="font11 mb-4">Shop Name*</label>
                                    <input type="text" id="" name="retailer_name" class="form-control new-retailer-required" placeholder="">
                                    </div>
                                </div>
                                <div class="col-12">
                                    <hr class="mt-10 mb-10">
                                </div>  

                                <div class="col-md-6">
                                    <div class="errorMsg">
                                    <label class="font11 mb-4">Segment*</label>
                                    <div class="form-s2">
                                        <select class="form-control formselect" name="segment_id" placeholder="select Segment">
                                            <option disabled selected value="0">Select Segement</option>
                                            @foreach ($segments as $data)
                                                <option value="{{$data->id}}" >{{$data->name}}</option>    
                                            @endforeach
                                        </select>
                                    </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="errorMsg">
                                    <label class="font11 mb-4">Channel Type*</label>
                                    <div class="form-s2">
                                        <select class="form-control formselect new-retailer-required" name="type" placeholder="select Channel Type">
                                            <option disabled value="0" selected>Select Type</option>
                                        </select>
                                    </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="errorMsg">
                                        <label class="font11 mb-4">Registered*</label>
                                        <div class="form-s2">
                                            <select class="form-control formselect new-retailer-required" name="registered" placeholder="select Channel Type">
                                                <option @if (@$retailers_details->is_registered == 0) selected
                                                @endif value="0">No</option>
                                                <option @if (@$retailers_details->is_registered == 1) selected
                                                    @endif   value="1">Yes</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12 p-0 pb-15 mt-10">
                                    <div class="header headingDB">
                                        <h2>Owner <span> Details</span></h2>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="errorMsg">
                                        <label class="font11 mb-4">Owner Name</label>
                                        <input type="text" id="" name="owner_name" class="form-control" placeholder="">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="errorMsg">
                                        <label class="font11 mb-4">Owner CNIC</label>
                                        <input type="text" id="" name="owner_cnic"  class="form-control" placeholder="">
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="errorMsg">
                                    <label class="font11 mb-4">Owner Mobile</label>
                                    <input type="text" id="" name="owner_mobile" class="form-control" placeholder="">
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="errorMsg">
                                    <label class="font11 mb-4">NTN*</label>
                                    <input type="text" id="" name="ntn" class="form-control new-retailer-required" placeholder="">
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="errorMsg">
                                    <label class="font11 mb-4">STRN*</label>
                                    <input type="text" id="" name="strn" class="form-control new-retailer-required" placeholder="">
                                    </div>
                                </div>

                                <div class="col-md-12 p-0 pb-15">
                                    <div class="header headingDB">
                                        <h2>Location <span> Details</span></h2>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="errorMsg">
                                    <label class="font11 mb-4">Address* </label>
                                    <input type="text" id="" name="address" class="form-control new-retailer-required" placeholder="">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="errorMsg">
                                    <label class="font11 mb-4">City*</label>
                                    <div class="form-s2">
                                        <select class="form-control formselect new-retailer-required" name="city" placeholder="select City">
                                            <option selected disabled value="0">Select City</option>
                                            @foreach ($cities as $city)
                                                <option value="{{$city->id}}">{{$city->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="errorMsg">
                                    <label class="font11 mb-4">Locality*</label>
                                    <div class="form-s2">
                                        <select class="form-control formselect new-retailer-required" name="locality" placeholder="select Locality">
                                            <option selected disabled value="0">Select Locality</option>
                                        </select>
                                    </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="errorMsg">
                                    <label class="font11 mb-4">Neighborhood</label>
                                    <div class="form-s2">
                                        <select class="form-control formselect" name="neighborhood" placeholder="select Neighborhood">
                                            <option selected disabled value="0">Select Neighborhood</option>
                                            
                                        </select>
                                    </div>
                                    </div>
                                </div>
 
                            </div>
                        </div>
                    </div>
                </div>
            </div> 
        </div>

        <div class="col-md-4 mb-30">
            <div class="card mb-30">
                <div class="header">
                    <h2>Geolocation <span> </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="errorMsg">
                                    <label class="font11 mb-4">Shop Latitude*</label>
                                    <input type="text" id="" class="form-control new-retailer-required" name="latitude" placeholder="">
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="errorMsg">
                                    <label class="font11 mb-4">Shop Longitude*</label>
                                    <input type="text" id="" class="form-control new-retailer-required" name="longitude" placeholder="">
                                    </div>
                                </div>
                                <div class="col-md-12 p-0 mb-10">
                                    <div class="header headingDB">
                                        <h2>Shop <span>Picture</span></h2>
                                    </div>
                                </div>
                                <div class="col-md-12 PT-10">
                                    <div class="form-wrap p-0">
                                        <div class="upload-pic" id="RetailerImage"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="col-md-12 text-center">
            <button type="button" class="btn btn-primary mr-2 save_new_retailer">Save</button>
            <button type="button" class="btn btn-cancel cancel_new_retailer">Cancel</button>
        </div> 
    </div>
</form>
@endsection