{{-- Extends layout --}}
@extends('layout.default')

@section('styles')

    <!--begin::Page Custom Styles(used by this page)-->
		

	<!--end::Page Custom Styles-->
@endsection

{{-- Content --}}
@section('content')

    <!--begin::Card-->
    <div class="card card-custom card-stretch gutter-b">
        @if (session('status'))

            {{-- Success Alert --}}
            <div class="alert alert-custom alert-notice alert-light-danger fade show gutter-b" role="alert">
                <div class="alert-icon"><i class="flaticon2-check-mark"></i></div>
                <div class="alert-text">{{session('status')}}</div>
                <div class="alert-close">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true"><i class="ki ki-close"></i></span>
                    </button>
                </div>
            </div>

        @endif

        <div class="card-header">
            <div class="card-title">
                <h3 class="card-label">Create New Outlet</h3>
            </div>
        </div>
        
        <!--begin::Form-->
        <form method="POST" action="{{route('outlet.store')}}" id="uppy_form" enctype="multipart/form-data">
            @csrf
            <div class="card-body">
                
                <!--begin::Outlet Name-->
                <div class="form-group row">
                    <label class="col-form-label text-right col-lg-4 col-sm-12">Outlet Name</label>
                    <div class="col-lg-8 col-md-9 col-sm-12">
                        <input type="text" class="form-control" placeholder="Example- Vai Vai Traders" name="outlet_name"/>
                    </div>
                </div>

                
                <!--begin::Location Type-->
                <div class="form-group row">
                    <label class="col-form-label text-right col-lg-4 col-sm-12">Location Type</label>
                    <div class="col-lg-8 col-md-9 col-sm-12">
                        <select class="form-control" id="location_type_selector">
                            <option selected hidden disabled>Select a type</option>
                            @foreach ($locationCategories as $type)
                                <option value="{{$type->Id}}">{{$type->Name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!--begin::Location Details-->
                <div class="form-group row">
                    <label class="col-form-label text-right col-lg-4 col-sm-12">Location Name</label>
                    <div class="col-lg-8 col-md-9 col-sm-12">
                        <div class="form-group mb-0">
                            <select class="form-control" id="create_outlet_location_select2" name="location_id">
                                <option value="0">Select The Location</option>
                            </select>
                        </div>
                        <span class="form-text text-muted mt-3">Can't find the location? <a href="{{route('location.create')}}">Create new</a></span>
                    </div>
                </div>

                <!--begin::Address-->
                <div class="form-group row">
                    <label class="col-form-label text-right col-lg-4 col-sm-12">Address</label>
                    <div class="col-lg-8 col-md-9 col-sm-12">
                        <input type="text" class="form-control" placeholder="Example - Mirpur-12, Dhaka" name="address"/>
                    </div>
                </div>

                <!--begin::Contact Person-->
                <div class="form-group row">
                    <label class="col-form-label text-right col-lg-4 col-sm-12">Contact Person</label>
                    <div class="col-lg-8 col-md-9 col-sm-12">
                        <input type="text" class="form-control" placeholder="Example - Zahid Rahman" name="contact_person"/>
                    </div>
                </div>

                <!--begin::Outlet Number-->
                <div class="form-group row">
                    <label class="col-form-label text-right col-lg-4 col-sm-12">Contact Number</label>
                    <div class="col-lg-8 col-md-9 col-sm-12">
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text">+88</span></div>
                            <input type="text" class="form-control" placeholder="Example - 0177000000" name="contact_number"/>
                        </div>
                    </div>
                </div>

                <!--begin::Outlet Fridge-->
                <div class="form-group row">
                    <label class="col-form-label text-right col-lg-4 col-sm-12">Fridge Number <span class="text-muted">(Optional)</span></label>
                    <div class="col-lg-8 col-md-9 col-sm-12">
                        <input type="text" class="form-control" placeholder="Example - AML/UGUR/200/21/413" name="fridge_number"/>
                    </div>
                </div>


                <!--begin::Outlet Fridge-->
                <div class="form-group row">
                    <label class="col-form-label text-right col-lg-4 col-sm-12">fridge Size <span class="text-muted">(Optional)</span></label>
                    <div class="col-lg-8 col-md-9 col-sm-12">
                        <div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text">Ltr</span></div>
                            <input type="text" class="form-control" placeholder="Example - 100" name="fridge_size"/>
                        </div>
                    </div>
                </div>
                

                <div class="form-group row">
                    <label class="col-form-label text-right col-lg-4 col-sm-12">Remarks <span class="text-muted">(Optional)</span></label>
                    
                    <div class="col-lg-8 col-md-9 col-sm-12">
                        <textarea class="form-control form-control-solid" name='remarks' rows="3"></textarea>
                        <span class="form-text text-muted">Write down comment if necessary</span>
                    </div>
                </div>

            </div>

            <div class="card-footer pt-0 border-0">
                <div class="row">
                    <div class="col-lg-4"></div>
                    <div class="col-lg-6">
                        <button type="submit" class="btn btn-primary">Submit</button>
                        <button type="reset" class="btn btn-secondary ml-3" data-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </div>
        </form>
        <!--end::Form-->

    </div>
    <!--end::Card-->

@endsection

{{-- Scripts Section --}}
@section('scripts')



    <!--begin::Page Scripts(used by this page)-->
    <script src="{{ asset("js/pages/custom/outlet/select2.js") }}" type="module"></script>
    <script src="{{ asset("js/pages/crud/forms/widgets/bootstrap-datepicker.js") }}"></script>
    <script src="{{ asset("plugins/custom/uppy/uppy.bundle.js") }}"></script>

    <script>
        $('#location_type_selector').change(function(){
            var locationTypeId = $('#location_type_selector').val();
            console.log(locationTypeId);

            $.ajax({
                url: "/location-category/location-category-ajax",
                type: "POST",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                },
                dataType: "json",
                data: {
                    locationTypeId: locationTypeId
                },

                success: function(response) {
                    if (response) {
                        console.log(response.locationDetails);

                        
                        response.locationDetails.forEach(location => {
                            $('#create_outlet_location_select2').append(`<option value="${location.Id}">${location.Name}<option>`)
                        });
                    }
                }
            });

            
        })
    </script>
	<!--end::Page Scripts-->
@endsection