@extends('frontend.app')
<!-- Main Container  -->
@section('content')
		
<div class="position-relative">
	<div id="carouselExampleIndicators" class="carousel slide" data-pause="false"  data-ride="carousel"> 
        <div class="carousel-inner">
            <div class="carousel-item active innerHeaderimg">
                <img src="/assets/frontend/images/inner-about.jpg"  />
                <div class="carousel-caption innertopHEadcaption">						
                    <div class="container">
                        <div class="row">
                            <div class="col-md-5">
                                <div class="capbg">
                                    <p>Home <i class="fa fa-angle-right mx-2"></i> Customer Zone <i class="fa fa-angle-right mx-2"></i> Status of Open Requests</p>
                                    <div class="heading-seperator innerseperatorspace"><span></span></div>
                                    <h4>Status of Open Requests</h4>
                                </div> 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
    </div>
</div>

<section>
    <div class="container">
        <div class="row">
            <div class="col-md-12 py-3">
                <div class="innerabout-content">
                    <a href="/user" class="mb-4 text-theme d-block fw-bold">
                        <i class="fa fa-angle-double-left"></i> Back to Dashboard
                    </a>
                    <p class="f-22 fw-bold mb-1">Track your Open Requests</p>
                    <p class="f-14 mb-4">
                        <span class="text-danger">*</span>
                        You can search your Open Requests using below search engine.
                    </p>
                    <form method="GET">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="fw-bold">Complaint ID <span class="text-danger">*</span></label>
                                <div class="login-form"> 
                                    <input type="text" class="form-control" name="complaint_id"  onkeypress="NumOnly(event)" onpaste="return false;" maxlength="15" value="{{ $request->complaint_id ?: '' }}" placeholder="Complaint ID" autofocus>  
                                    <i class="fa fa-file-text-o"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="fw-bold">
                                    Status <span class="text-danger">*</span>
                                </label>
                                <div class="login-form"> 
                                    <select class="form-control" name="status">
                                        <option value="">Select</option>
                                        @foreach ($master_status as $val)
                                        <option value="{{ $val }}" @if ($request->status == $val)
                                            selected
                                        @endif>{{ $val }}</option>
                                        @endforeach
                                    </select>
                                    <i class="fa fa-text-width"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="fw-bold">From Date <span class="text-danger">*</span></label>
                                <div class="login-form"> 
                                    <input type="date" class="form-control" name="from_date" value="{{ $request->from_date }}" placeholder="Enter from Date">  
                                    <i class="fa fa-calendar"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label>&nbsp;</label><br>
                            <button type="submit" class="btn btn-primary px-5">Search</button>
                        </div>
                    </div>
                    </form>
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Complaint ID</th>
                                    <th>Complaint Department</th> 
                                    <th>Category Type</th> 
                                    <th>Comment</th> 
                                    <th>Complaint Date</th> 
                                    <th>Status</th>
                                    <th>Attachment </th> 
                                    <th>Remark</th> 
                                </tr> 
                            </thead>
                            <tbody>
                                @foreach ($complaints as $complaint)
                                <tr>
                                    <td>{{ $complaint->complaint_id }}</td>
                                    <td>{{ $complaint->complaintType? $complaint->complaintType->name : '' }}</td> 
                                    <td>{{ $complaint->subComplaintType ? $complaint->subComplaintType->name : '' }}</td> 
                                    <td>{{ $complaint->comment }}</td> 
                                    <td>{!! date('M d, Y',strtotime($complaint->created_at)) !!}</td> 
                                    <td><label class="badge badge-{{ $complaint->status == 'Open' ? 'success' : 'danger'  }} f-12">{{ $complaint->status }}</label></td>
                                    <td>{!! ($complaint->document) ? '<a href="'.$complaint->document.'" target="_new"><i class="fa fa-file"></i></a>' : '-' !!} </td> 
                                    <td>{{ $complaint->remark ?: '-' }}</td> 
                                </tr> 
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    {{ $complaints->appends(request()->except('page'))->links('frontend.layouts.partials.pagination') }}
                </div>
            </div>
        </div> 
    </div>
</section>


@endsection 

@section('styles')
    
@endsection 

@section('scripts') 
	@parent
<style>
/* paginaltion css*/

.pagination_rounded,
.pagination_square {
    display: inline-block;
    margin: auto;
    width: 100%;
    text-align: right;
}

.pagination_rounded ul {
    margin: 0 auto;
    padding: 0;
    list-style: none
}

.pagination_rounded li:first-child {
    margin-left: 0px
}

.pagination_rounded ul li {
    display: inline-block;
    margin-left: 10px
}

.pagination_rounded ul li a:hover {
    background: #038ed3;
    color: #fff;
    border: 1px solid #038ed3
}

.pagination_rounded .prev {
    margin-left: 0px;
    border-radius: 50%;
    line-height: 30px;
    height: 30px;
    width: 30px;
}

.pagination_rounded ul li a {
    float: left;
    color: #8898AA;
    border-radius: 50%;
    line-height: 30px;
    height: 30px;
    width: 30px;
    text-align: center;
    margin-bottom: 10px;
    margin-top: 20px;
    background: #ffffff;
    border: 1px solid #8898AA80; 
    cursor: pointer;
}

.pagination_rounded .prev i,
.pagination_rounded .next i {
    font-size: 14px;
    line-height: 25px;
}

.pagination_rounded .next {
    border-radius: 50%;
    line-height: 30px;
    height: 30px;
    width: 30px;
}

.visible-xs {
    display: none !important
}

.add-edit-checkbox label {
    font-size: 14px !important;
    color: #272727;
    font-weight: 600 !important;
    margin-bottom: 23px;
    padding-left: 28px !important;
    padding-top: 0 !important;
}

.add-edit-checkbox [type="checkbox"].filled-in:not(:checked)+label {
    font-weight: 500 !important;
}

.innerabout-content li{
    background: none;
    padding: 0px;
}
</style>

@endsection

@section('scripts')
<script src="/assets/frontend/js/validation.js"></script>
@endsection