@extends('layouts.app')


{{-- Important Variable --}}



@section('title')
    {{ $breadcrumbCurrentName }}
@stop
{{-- 
@section('top-bar')
    @include('includes.top-bar')
@stop
@section('left-sidebar')
    @include('includes.left-sidebar')
@stop --}}
@section('content')

    <style type="text/css">
        .table-responsive>table {


            font-size: 12px;


        }

        table .dropdown-menu .print_icon .material-icons {
            position: relative;
            top: 5px;
            left: 3px;
        }
        
    </style>



    <section {{-- class="content" --}}>
        <div class="container-fluid">


            <ol class="breadcrumb breadcrumb-col-cyan pull-left">
                <li class="active"><i class="material-icons">{{ $breadcrumbCurrentIcon }}</i>{{ $breadcrumbCurrentName }}
                </li>
            </ol>



            {{-- Search start --}}
            <!-- Inline Layout | With Floating Label -->
            <div class="row clearfix">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="card">
                        <div class="header card-header-padding">
                            <h4>Search Criteria</h4>
                            <hr>
                            <div class="body">
                                <form class="form" method="get" id="form_validation"
                                    action="{{ route($ParentRouteName) }}">
                                    {{ csrf_field() }}



                                    <div class="row">


                                        <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 field_area">
                                            <div class="form-group form-float">
                                                <div class="form-line focused">
                                                    <select data-live-search="true" class="form-control show-tick"
                                                        id="branch_id" name="branch">
                                                        <option value="">Select Project</option>
                                                        @foreach (App\Models\Branch::all() as $branch)
                                                            <option {{ request()->get('branch') == $branch->id ? 'selected' : '' }}
                                                                value="{{ $branch->id }}">{{ $branch->name }}</option>
                                                        @endforeach
                                                    </select>
                                                    <label class="form-label">Project</label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 field_area">
                                            <div class="form-group form-float">
                                                <div class="form-line focused">
                                                    <select data-live-search="true" class="form-control show-tick"
                                                        id="block_id" name="block_id">
                                                        <option value="">Select Blocks</option>
                                                    </select>
                                                    <label class="form-label">Blocks</label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 field_area">
                                            <div class="form-group form-float">
                                                <div class="form-line focused">
                                                    <select data-live-search="true" class="form-control show-tick"
                                                        id="flat_size" name="flat_size">
                                                        <option value="">Select Size</option>
                                                    </select>
                                                    <label class="form-label">Size</label>
                                                </div>
                                            </div>
                                        </div>


                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"  id="product_unique_id">
                                            <div class="form-group form-float">
                                                <div class="form-line focused">
                                                    <input type="text" class="form-control" name="product_unique_id"
                                                    value=" {{request()->get('product_unique_id')}}"
                                                        placeholder="Product No.">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                           
                                    <div class="row {{(Request::is('available-inventory') ?'hide' :  'show')}} " >
                                        <div class="col-lg-12 col-md-12 col-sm-12 text-center"  >
                                            <h1 class="text-{!! $items->status=='AVAILABLE' ? 'success':'danger' !!}">UNIT {!! $items->status =='AVAILABLE'?$items->status :  'NOT AVAILABLE' !!}</h1>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-2  margin-buttom-zero">
                                            <div class="form-line pull-right">
                                                <button type="submit" class="btn btn-primary m-t-15 waves-effect">
                                                    Search
                                                </button>
                                                <a class="btn m-t-15 btn-default waves-effect" href="javascript:void(0)"
                                                    onclick="clearForm(this)">Clear</a>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>


                </div>
                <!-- #END# Inline Layout | With Floating Label -->
            </div>
            {{-- Search end --}}


            <!-- Hover Rows -->
            <!-- #END# Hover Rows -->
        </div>
    </section>
@stop

@push('include-css')
    <!-- Wait Me Css -->
    <link href="{{ loadAsset('asset/plugins/waitme/waitMe.css') }}" rel="stylesheet" />

    <!-- Colorpicker Css -->
    <link href="{{ loadAsset('asset/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.css') }}" rel="stylesheet" />

    <!-- Dropzone Css -->
    <link href="{{ loadAsset('asset/plugins/dropzone/dropzone.css') }}" rel="stylesheet">

    <!-- Multi Select Css -->
    <link href="{{ loadAsset('asset/plugins/multi-select/css/multi-select.css') }}" rel="stylesheet">

    <!-- Bootstrap Spinner Css -->
    <link href="{{ loadAsset('asset/plugins/jquery-spinner/css/bootstrap-spinner.css') }}" rel="stylesheet">

    <!-- Bootstrap Tagsinput Css -->
    <link href="{{ loadAsset('asset/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css') }}" rel="stylesheet">

    <!-- Bootstrap Select Css -->
    <link href="{{ loadAsset('asset/plugins/bootstrap-select/css/bootstrap-select.css') }}" rel="stylesheet" />

    <!-- Bootstrap Material Datetime Picker Css -->
    <link href="{{ loadAsset('asset/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css') }}"
        rel="stylesheet" />

    <!-- Bootstrap DatePicker Css -->
    <link href="{{ loadAsset('asset/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css') }}" rel="stylesheet" />

    <link href="{{ loadAsset('asset/css/badges.css') }}" rel="stylesheet" />
@endpush

@push('include-js')
    {{-- <script src="{{ loadAsset('asset/js/pages/ui/modals.js') }}"></script> --}}
    <script src="{{ loadAsset('asset/plugins/autosize/autosize.js') }}"></script>

    <!-- Moment Plugin Js -->
    <script src="{{ loadAsset('asset/plugins/momentjs/moment.js') }}"></script>

    <!-- Bootstrap Material Datetime Picker Plugin Js -->
    <script src="{{ loadAsset('asset/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js') }}">
    </script>

    <script src="{{ loadAsset('asset/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js') }}"></script>

    <script src="{{ loadAsset('asset/js/pages/forms/basic-form-elements.js') }}"></script>
    <!-- Autosize Plugin Js -->

    <!-- Bootstrap Material Datetime Picker Css -->
    <link href="{{ loadAsset('asset/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css') }}"
        rel="stylesheet" />

    <!-- Bootstrap DatePicker Css -->
    <link href="{{ loadAsset('asset/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css') }}" rel="stylesheet" />

    <script>
        @if (Session::has('success'))
            toastr["success"]('{{ Session::get('success') }}');
        @endif

        @if (Session::has('error'))
            toastr["error"]('{{ Session::get('error') }}');
        @endif

        @if ($errors->any())
            @foreach ($errors->all() as $error)
                toastr["error"]('{{ $error }}');
            @endforeach
        @endif
    </script>
    <script>
        /* $(window).load(function() {
                if ($('#leftsidebar').length == 0) {
                    $('.content-footer').css({
                        "margin": "0"
                    });
                }
            }); */
        // A $( document ).ready() block.
        $(document).ready(function() {
            $(window).trigger('setup');
            if ($("[name='branch']").val() > 0) {
                getBlocks();
            }
            
        });

        function getBlocks() {
            $.ajaxSetup({
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                }
            });

            $.ajax({
                type: "post",
                dataType: "json",
                url: "{{ route('get-project-blocks') }}",
                data: {
                    id: $("[name='branch']").val(),
                },
                success: function(data) {
                    $("#block_id").selectpicker("refresh");
                    $("#block_id").empty();
                    let option = `<option value="0">Select Blocks</option>`;

                    $.each(data.blocks, function(index, val) {
                        let selected = "";
                        @if (!empty(request()->get('block_id')))
                            if (val.id == {{ request()->get('block_id') }}) {
                                selected = "selected";
                            }
                        @endif

                        option += `<option value="${val.id}" ${selected}  > ${val.name} </option>`;

                    });
                    $("#block_id").html(option);
                    $("#block_id").selectpicker("refresh");
                    if ($("[name='block_id']").val() > 0) {
                        getFlatSize();
                    }

                }
            });
        }
        function getFlatSize() {
            $.ajaxSetup({
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                }
            });

            $.ajax({
                type: "post",
                dataType: "json",
                url: "{{ route('get-blocks-flat-size') }}",
                data: {
                    branch_id: $("[name='branch']").val(),
                    block_id: $("[name='block_id']").val(),
                },
                success: function(data) {
                    $("#flat_size").selectpicker("refresh");
                    $("#flat_size").empty();
                    let option = `<option value="0">Select Size</option>`;

                    $.each(data.flat_size, function(index, val) {
                        let selected = "";
                        @if (!empty(request()->get('flat_size')))
                            if (val.flat_size == {{ request()->get('flat_size') }}) {
                                selected = "selected";
                            }
                        @endif

                        option += `<option value="${val.flat_size}" ${selected}  > ${val.flat_size} (${val.size_in}) </option>`;

                    });
                    $("#flat_size").html(option);
                    $("#flat_size").selectpicker("refresh");

                }
            });
        }

        $("[name='branch']").change(function() {
            getBlocks();
        });
        $("[name='block_id']").change(function() {
            getFlatSize();
        });

        $('#form_validation').submit(function(e) {


            if ($('[name="product_unique_id"]').val() == '') {
                toastr['error']("Please Select Product No.");
                e.preventDefault();
            }
        });
    </script>
    {{-- All datagrid --}}
    <script src="{{ loadAsset('asset/js/dataTable.js') }}"></script>
    <script>
        BaseController.init();
    </script>
@endpush
{{-- this is  edit --}}