@extends('admin.layouts.app')
@section('content')
    <style>
        .input-group-sm>.form-control:not(textarea) {
            height: 35px;
        }
        .input-group-sm>.form-control{
            border-radius: 0;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #444;
            line-height: 20px;
        }
        .select2-container--default .select2-selection--single {
            display: block;
            width: 100%;
            padding: 0.6rem 1rem;
            border-radius: 0;
            font-size: 1rem;
            height: 35px;
            /* line-height: 35px; */
            border: 1px solid #e2e5ec;
            color: #898b92;
        }

        .select2-container {
            width: 100% !important;
        }

    </style>
    <div class="content-wrapper">
        <section class="content-header">
            <div class="container-fluid">
                <div class="row m-1">
                    <div class="col-sm-6">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">Dashboard</a></li>
                            <li class="breadcrumb-item active">@isset($page_title) {{$page_title}} @endisset</li>
                        </ol>
                    </div>
                    @can('property-create')
                        <div class="col-sm-6">
                            <a href="{{route('admin.property.create')}}" class="btn btn-primary float-right">Add Property <i class="fas fa-plus"></i></a>
                        </div>
                    @endcan
                </div>
            </div>
        </section>
        <section class="content">
            <div class="container-fluid">
                <div class="card card-outline card-primary">
                    <form id="search_form">
                        <div class="row">
                            <div class="col-md-3 mb-2">
                                <label>Project Name</label>
                                <div class="input-group input-group-sm">
                                    <select name="search_project" id="search_project" class="form-control select2" onchange="getPhase()">
                                        <option value="">Select Project...</option>
                                        @foreach (App\Models\Admin\Project::orderBy('name','asc')->get() as $project)
                                            <option value="{{$project->id}}">{{$project->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            {{-- <div class="col-md-3 mb-2">
                                <label>Bed Room</label>
                                <div class="input-group input-group-sm">
                                    <select name="search_bedroom" class="form-control select2" onchange="fillter()">
                                        <option value="">Select Bed Room...</option>
                                        @for ($i=1;$i<=8;$i++)
                                            <option value="{{$i}}" @if($search_bedroom == $i) selected @endif>{{$i}}</option>
                                        @endfor
                                    </select>
                                </div>
                            </div> --}}
                            {{-- <div class="col-md-3 mb-2">
                                <label>Room Type</label>
                                <div class="input-group input-group-sm">
                                    <select name="search_room_type" class="form-control select2" onchange="fillter()">
                                        <option value="">Select Room Type...</option>
                                        <option value="furnished" @if($search_room_type == 'furnished') selected @endif>Furnished</option>
                                        <option value="unfurnished" @if($search_room_type == 'unfurnished') selected @endif>Unfurnished</option>
                                        <option value='semi-unfurnished' @if($search_room_type == 'semi-unfurnished') selected @endif>Semi-Unfurnished</option>
                                    </select>
                                </div>
                            </div> --}}
                            <div class="col-md-3 mb-2">
                                <label>Phase</label>
                                <div class="input-group input-group-sm">
                                    <select name="search_phase" id="search_phase" class="form-control select2" onchange="fillter()">
                                        <option value="">Select Phase...</option>
                                    </select>
                                </div>
                            </div>
                            {{-- <div class="col-md-3 mb-2">
                                <label>Property</label>
                                <div class="input-group input-group-sm">
                                    <select name="search_property" class="form-control select2" onchange="fillter()">
                                        <option value="">Select Property...</option>
                                        <option value="flat_apartment" @if($search_property == 'flat_apartment') selected @endif>Flat/ Apartment</option>
                                        <option value="residental_house" @if($search_property == 'residental_house') selected @endif>Residential House</option>
                                        <option value='commerical_space' @if($search_property == 'commerical_space') selected @endif>Commercial Space</option>
                                        <option value="plot" @if($search_property == 'plot') selected @endif>Plot</option>
                                    </select>
                                </div>
                            </div> --}}
                            {{-- <div class="col-md-3 mb-2">
                                <label>Price</label>
                                <div class="input-group input-group-sm">
                                    <select name="search_price" class="form-control select2" onchange="fillter()">
                                        <option value="">Select Price...</option>
                                        <option value="price_high_low" @if($search_price == 'price_high_low') selected @endif>Price(High > Low)</option>
                                        <option value="price_low_high" @if($search_price == 'price_low_high') selected @endif>Price(Low > High)</option>
                                        <option value='carpet_high_low' @if($search_price == 'carpet_high_low') selected @endif>Carpet Area(High > Low)</option>
                                        <option value="carpet_low_high" @if($search_price == 'carpet_low_high') selected @endif>Carpet Area(Low > High)</option>
                                    </select>
                                </div>
                            </div> --}}
                            <div class="col-md-3 mb-2">
                                <label>Booking Status</label>
                                <div class="input-group input-group-sm">
                                    <select name="search_booking_status" class="form-control select2" onchange="fillter()">
                                        <option value="">Select Booking Status...</option>
                                        <option value="available" @if($search_booking_status == 'available') selected @endif>Available</option>
                                        <option value="on_hold" @if($search_booking_status == 'on_hold') selected @endif>On Hold</option>
                                        <option value="reserved" @if($search_booking_status == 'reserved') selected @endif>Reserved</option>
                                        <option value="booked" @if($search_booking_status == 'booked') selected @endif>Booked</option>
                                        <option value="registred" @if($search_booking_status == 'registred') selected @endif>Registred</option>
                                        <option value="sold" @if($search_booking_status == 'sold') selected @endif>Sold</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3 mb-2">
                                <label>Status</label>
                                <div class="input-group input-group-sm">
                                    <select name="search_status" class="form-control select2" onchange="fillter()">
                                        <option value="">Select Status...</option>
                                        <option value="1" @if($search_status == '1') selected @endif>Available</option>
                                        <option value="0" @if($search_status == '0') selected @endif>Not Available</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3 mb-2 mt-1">
                                <label>Search</label>
                                <div class="input-group input-group-sm">
                                    <input type="text" name="search_key" value="{{$search_key}}" class="form-control float-right" placeholder="Search..." onkeyup="fillter()">
                                    <div class="input-group-append">
                                        <button type="submit" class="btn btn-default">
                                            <i class="fas fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="card-body table-responsive p-2" id="table">
                        @include('admin.property.table')
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script src="{{ asset('backend/js/jquery.min.js') }}"></script>

    <script>

        @if($search_project)
            $(getPhase());
        @endif

        function getPhase() {
                var project_id = $('#search_project').val();
                $.ajax({
                    type: 'GET',
                    url: "{{route('admin.get.phase','')}}/"+project_id,
                    success: function(data) {
                        $('#search_phase').empty();
                        $('#search_phase').append("<option value=''>Select Phase...</option>");
                        $.each(data, function(key, val) {
                            $('#search_phase').append("<option value="+val.id+">"+val.name+"</option>");
                        });
                        fillter();
                    }
                });
            }

        function fillter(){
            $('tbody').addClass('loading')
            $.ajax({
                type: 'GET',
                url: "{{route('admin.property.index')}}",
                data: $('#search_form').serialize(),
                success: function(data) {
                    $('tbody').removeClass('loading')
                    $('#table').html(data)
                }
            });
        }

    </script>

@endsection