@extends('customer.layouts.new-app')
@section('title')
    Customer Care:Report & Request
@endsection
@section('css')
    <style>
        .select2-results__option {
            color: black !important;
        }
    </style>
@endsection
@section('content')
    <div class="container">
        <div class="row  g-2">
            <div class="col-md-3">
                @include('customer.customer_care.sidebar')
            </div>
            <div class="col-9">
                <div class=" mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
                    <h1>REPORTS & REQUESTS</h1>
                    <p>Any issues relating to your apartment are important to us. You can report these here and we will
                        endeavour to assist in an efficient and satisfactory manner. Please note the defects procedure can
                        be found under the ‘My Building’ section.</p>
                    @if (count($intercom) > 0 || count($meter) > 0 || count($gym) > 0 || count($complaint) > 0 || count($general) > 0)
                        <p>
                            <a href="{{ url('customer/customer-care/sent-report') }}" class="btn btn-primary">
                                View Reports »
                            </a>
                        </p>
                    @endif
                    <p>Once submitted you will receive an initial confirmation that the matter has been registered. You will
                        receive a unique reference number which should be quoted in any future correspondence.</p>
                    <select name="ref" id="form_ref" onchange="onChange()" class="form-control select2">
                        <option value="0">Please Choose...</option>
                        <option value="intercom">Intercom Programming</option>
                        <option value="meter">Meter Reading</option>
                        <option value="maintenance">Maintenance/Fixflo</option>
                        <option value="gym">Gym Access</option>
                        <option value="complaint">Complaint</option>
                        <option value="other">Other</option>
                    </select>
                    <div id="intercom" style="display: none;" class="mt-2">
                        <div class="card m-2 bg-primary">
                            <div class="card-body text-white">
                                <h3>Intercom Programming Request</h3>
                                <p>Once you have submitted your request it can take up to 72 hours for the intercom to be
                                    connected to the number provided. The intercom can be connected for up to three numbers.
                                </p>
                                <form action="{{ url('customer/customer-care/intercom') }}" method="POST">
                                    @csrf
                                    <p><strong>Contact One</strong></p>
                                    <p>Name <input type="text" class="form-control" name="name" required></p>
                                    <p>Number <input type="tel" class="form-control" name="number" required></p>
                                    <p><strong>Contact Two</strong></p>
                                    <p>Name <input type="text" class="form-control" name="name2"></p>
                                    <p>Number <input type="tel" class="form-control" name="number2"></p>
                                    <p><strong>Contact Three</strong></p>
                                    <p>Name <input type="text" class="form-control" name="name3"></p>
                                    <p>Number <input type="tel" class="form-control" name="number3"></p>
                                    <p>Message
                                        <textarea class="form-control  sz_100" name="message" rows="6"></textarea>
                                    </p>
                                    <p class="alignright">
                                        <button class="btn btn-dark" type="submit">Send Request »</button>
                                    </p>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div id="meter" style="display: none;" class="mt-2">
                        <div class="card m-2 bg-primary">
                            <div class="card-body text-white">
                                <h3>Meter Reading Request</h3>
                                <p>Once you have submitted your request it can take up to 48 hours for the reading to be
                                    provided. If you require a photo of the meter please specify this below, this may delay
                                    the reading being taken. We are unable to provide back-dated readings for either
                                    electric or water meters. If your meter is at fault, please contact your energy provider
                                    directly.</p>
                                <form action="{{ url('customer/customer-care/meter') }}" method="POST">
                                    @csrf
                                    <input type="checkbox" id="water_meter_cbx" name="water_meter" value="1" required>
                                    <label
                                        for="water_meter_cbx">Water</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <small id="water_photo_text">Photo Required?</small>

                                    <select name="water_photo" id="water_photo" class="form-control select2">
                                        <option value="0">No</option>
                                        <option value="1">Yes</option>
                                    </select>
                                    <br>
                                    <input type="checkbox" id="elec_meter_cbx" name="elec_meter" value="1" required>
                                    <label for="elec_meter_cbx">Electricity</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <small id="elec_photo_text">Photo Required?</small>
                                    <select name="elec_photo" id="elec_photo" class="form-control select2">
                                        <option value="0">No</option>
                                        <option value="1">Yes</option>
                                    </select>
                                    <p>Special Request</p>
                                    <p class="mb20">
                                        <textarea class="inp form-control sz_100" name="description" rows="6" required></textarea>
                                    </p>
                                    <p>Message
                                        <textarea class="form-control  sz_100" name="message" rows="6"></textarea>
                                    </p>
                                    <p class="alignright">
                                        <button class="btn btn-dark" id="meter" type="submit">Send Request »</button>
                                    </p>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div id="maintenance" style="display: none;" class="mt-2">
                        <div class="card m-2 bg-primary">
                            <div class="card-body text-white">
                                <h3>Maintenance/Fixflo</h3>
                                <p>To access FixFlo, our repair reporting system please click on the following link.
                                    https://testserver.com.</p>
                            </div>
                        </div>
                    </div>
                    <div id="gym" style="display: none;" class="mt-2">
                        <div class="card m-2 bg-primary">
                            <div class="card-body text-white">
                                <h3>Gym Access Request</h3>
                                <p>To request gym access, please fill in the form below. You will also be required to
                                    download and fill in a questionnaire, then bring this to the concierge along with some
                                    photo ID.</p>
                                <p><strong>Contact Information</strong></p>
                                <form action="{{ url('customer/customer-care/gym') }}" method="POST">
                                    @csrf
                                    Name<input class="inp form-control sz_100" required="" type="text"
                                        name="name"
                                        value="{{ Auth::user()->first_name }} {{ Auth::user()->last_name }}">
                                    Apt No.<input class="inp form-control sz_100" type="text" name="apartment_number"
                                        value="Floor{{ $apart->floor_no }} {{ $apart->name }}">
                                    Email<input class="inp form-control sz_100" type="email" name="email"
                                        value="{{ Auth::user()->email }}">
                                    Phone<input class="inp form-control sz_100" type="tel" name="phone"
                                        value="{{ Auth::user()->mobile }}">
                                    <label>Tenant <input type="radio" name="occupier_status" id="tenant"
                                            value="Tenant" checked></label>
                                    <label>Owner <input type="radio" name="occupier_status" id="owner"
                                            value="Owner"></label>
                                    <p>Message
                                        <textarea class="form-control  sz_100" name="message" rows="6"></textarea>
                                    </p>
                                    <p class="alignright">
                                        <button class="btn btn-dark" type="submit">Send Request »</button>
                                    </p>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div id="complaint" style="display: none;" class="mt-2">
                        <div class="card m-2 bg-primary">
                            <div class="card-body text-white">
                                <h3>Complaint</h3>
                                <p>Please be aware that the information you submit here can be seen by the onsite concierge
                                    team, building manager and proprty manager for this development. If you do not want your
                                    complaint viewed by any of the aforementioned parties, please email head office directly
                                    on info@testserver.com</p>
                                <p><strong>Contact Information</strong></p>
                                <form action="{{ url('customer/customer-care/complaint') }}" method="post">
                                    @csrf
                                    <table class="text-white">
                                        <tbody>
                                            <tr>
                                                <td>Name</td>
                                                <td><input class="inp form-control sz_100" required="" type="text"
                                                        name="name"
                                                        value="{{ Auth::user()->first_name }} {{ Auth::user()->last_name }}">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Apt No.</td>
                                                <td><input class="inp form-control sz_100" required="" type="text"
                                                        name="apartment_number"
                                                        value="Floor{{ $apart->floor_no }} {{ $apart->name }}"></td>
                                            </tr>
                                            <tr>
                                                <td>Email</td>
                                                <td><input class="inp form-control sz_100" required="" type="email"
                                                        name="email" value="{{ Auth::user()->email }}"></td>
                                            </tr>
                                            <tr>
                                                <td>Phone</td>
                                                <td><input class="inp form-control sz_100" required="" type="text"
                                                        name="phone" value="{{ Auth::user()->mobile }}"></td>
                                            </tr>

                                            <tr>
                                                <td></td>
                                                <td><label class="pr30">Tenant <input type="radio"
                                                            name="occupier_status" checked="" value="Tenant"></label>
                                                    <label>Owner <input type="radio" name="occupier_status"
                                                            value="Owner"></label>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <p><strong>Details of Complaint</strong></p>
                                    <p>Type</p>
                                    <select name="complaint_type" required="" class="form-control select2">
                                        <option value="">Please Choose...</option>
                                        <option value="Noise">Noise</option>
                                        <option value="Smell">Smell</option>
                                        <option value="Other">Other</option>
                                    </select>

                                    <p>Date &amp; time of the incident / event</p>
                                    <p class="mb20">
                                        <textarea class="inp form-control sz_100" name="complaint_time" rows="3"></textarea>
                                    </p>
                                    <p>Are you able to identify where the cause of the nuisance is coming from?</p>
                                    <p class="mb20">
                                        <textarea class="inp form-control sz_100" name="complaint_location" rows="3"></textarea>
                                    </p>
                                    <p>Please provide full details of the complaint / nuisance</p>
                                    <p class="mb20">
                                        <textarea class="inp form-control sz_100" name="complaint_details" rows="8"></textarea>
                                    </p>
                                    <p>Message
                                        <textarea class="form-control  sz_100" name="message" rows="6"></textarea>
                                    </p>
                                    <p class="alignright">
                                        <button class="btn btn-dark" type="submit">Send Request »</button>
                                    </p>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div id="other" style="display: none;" class="mt-2">
                        <div class="card m-2 bg-primary">
                            <div class="card-body">
                                <h1>General Request</h1>
                                <p class="text-white"><strong>Contact Information</strong></p>
                                <form action="{{ url('customer/customer-care/general-request') }}" method="post">
                                    @csrf
                                    <table class="text-white">
                                        <tbody>
                                            <tr>
                                                <td>Name</td>
                                                <td><input class="inp form-control sz_100 valid" required=""
                                                        type="text" name="name"
                                                        value="{{ Auth::user()->first_name }} {{ Auth::user()->last_name }}">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Apt No.</td>
                                                <td><input class="inp form-control sz_100" required="" type="text"
                                                        name="apartment_number"
                                                        value="Floor{{ $apart->floor_no }} {{ $apart->name }}"></td>
                                            </tr>
                                            <tr>
                                                <td>Email</td>
                                                <td><input class="inp form-control sz_100" required="" type="email"
                                                        name="email" value="{{ Auth::user()->email }}"></td>
                                            </tr>
                                            <tr>
                                                <td>Phone</td>
                                                <td><input class="inp form-control sz_100" required="" type="text"
                                                        name="phone" value="{{ Auth::user()->mobile }}"></td>
                                            </tr>
                                            <tr>
                                                <td></td>
                                                <td>
                                                    <label>Tenant <input type="radio" name="occupier_status"
                                                            checked="" value="Tenant"></label>
                                                    <label>Owner <input type="radio" name="occupier_status"
                                                            value="Owner"></label>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <p class="text-white"><strong>Details of Request</strong></p>
                                    <p class="mb20">
                                        <textarea class="inp form-control sz_100" required="" name="description" rows="6"></textarea>
                                    </p>
                                    <p class="text-white">Message
                                        <textarea class="form-control  sz_100" name="message" rows="6"></textarea>
                                    </p>
                                    <p class="alignright">
                                        <button class="btn btn-dark" type="submit">Send Request »</button>
                                    </p>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script>
        function onChange() {
            var x = document.getElementById("form_ref").value;
            if (x == 'intercom') {
                $('#intercom').show();
                $('#meter').hide();
                $('#maintenance').hide();
                $('#gym').hide();
                $('#other').hide();
                $('#complaint').hide();
            } else if (x == 'meter') {
                $('#meter').show();
                $('#intercom').hide();
                $('#maintenance').hide();
                $('#gym').hide();
                $('#other').hide();
                $('#complaint').hide();
            } else if (x == 'maintenance') {
                $('#maintenance').show();
                $('#meter').hide();
                $('#intercom').hide();
                $('#gym').hide();
                $('#other').hide();
                $('#complaint').hide();
            } else if (x == 'gym') {
                $('#gym').show();
                $('#meter').hide();
                $('#intercom').hide();
                $('#maintenance').hide();
                $('#other').hide();
                $('#complaint').hide();
            } else if (x == 'complaint') {
                $('#complaint').show();
                $('#meter').hide();
                $('#intercom').hide();
                $('#maintenance').hide();
                $('#gym').hide();
                $('#other').hide();
            } else if (x == 'other') {
                $('#other').show();
                $('#complaint').hide();
                $('#meter').hide();
                $('#intercom').hide();
                $('#maintenance').hide();
                $('#gym').hide();
            } else {
                $('#other').hide();
                $('#complaint').hide();
                $('#meter').hide();
                $('#intercom').hide();
                $('#maintenance').hide();
                $('#gym').hide();
            }
        }
    </script>
@endsection