@extends('layout')
@section('content')
    <div class="content-wrapper">
        <div class="content">

            <div id="floating-alert-container">
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show floating-alert">
                        <strong>{{ session('success') }}</strong>
                        <button type="button" class="close" data-dismiss="alert">×</button>
                    </div>
                @endif

                @if (session('error'))
                    <div class="alert alert-danger alert-dismissible fade show floating-alert">
                        <strong>{{ session('error') }}</strong>
                        <button type="button" class="close" data-dismiss="alert">×</button>
                    </div>
                @endif

                @if ($errors->any())
                    @foreach ($errors->all() as $error)
                        <div class="alert alert-danger alert-dismissible fade show floating-alert">
                            <strong>{{ $error }}</strong>
                            <button type="button" class="close" data-dismiss="alert">×</button>
                        </div>
                    @endforeach
                @endif
            </div>

            {{ Form::open(['url' => url('update-profile'), 'method' => 'POST', 'id' => 'form1']) }}

            @foreach ($data as $value)
                <div class="row">

                    <div class="form-group col-md-2">
                        <label>UOC</label>
                        <input type="text" class="form-control form-control-sm" name="org_uoc"
                            value="{{ $value->org_uoc }}" readonly>
                    </div>
                    <div class="form-group col-md-2">
                        <label>Org. Code</label>
                        <input type="text" class="form-control form-control-sm" name="org_code"
                            value="{{ $value->org_code }}" readonly>
                    </div>

                    <div class="form-group col-md-3">
                        <label>Name <span class="text-danger">*</span></label>
                        <input type="text" id="org_name" class="form-control form-control-sm" name="org_name"
                            value="{{ $value->org_name }}" data-original="{{ $value->org_name }}"
                            oninput="this.value=this.value.replace(/[^A-Za-z ]/g,'');">
                    </div>

                    <div class="form-group col-md-2">
                        <label>Org. Type</label>
                        <input type="text" class="form-control form-control-sm" value="{{ $value->org_type }}" readonly>
                    </div>

                    <div class="form-group col-md-3">
                        <label>Email <span class="text-danger">*</span></label>
                        <input type="email" id="org_email" class="form-control form-control-sm" name="org_email"
                            value="{{ $value->org_email }}" data-original="{{ $value->org_email }}">
                    </div>

                </div>


                <div class="row">

                    <div class="form-group col-md-2">
                        <input type="hidden" name="action" value="{{ $value->org_id }}">

                        <label>Contact Number <span class="text-danger">*</span></label>

                        <input type="text" id="org_contract_no" class="form-control form-control-sm"
                            name="org_contract_no" value="{{ $value->org_contract_no }}"
                            data-original="{{ $value->org_contract_no }}"
                            oninput="this.value=this.value.replace(/[^0-9]/g,'');">
                    </div>

                    <div class="form-group col-md-10">
                        <label>Address</label>
                        <input type="text" class="form-control form-control-sm" value="{{ $value->org_address }}"
                            readonly>
                    </div>

                </div>


                <div class="row">

                    <div class="form-group col-md-3">
                        <label>District</label>
                        <input type="text" class="form-control form-control-sm" value="{{ $value->org_dist_name }}"
                            readonly>
                    </div>

                    <div class="form-group col-md-1">
                        <label>PIN</label>
                        <input type="text" class="form-control form-control-sm" value="{{ $value->org_address_pin }}"
                            readonly>
                    </div>

                    <div class="form-group col-md-4">
                        <label>Contact Person Name <span class="text-danger">*</span></label>
                        <input type="text" id="contract_person" class="form-control form-control-sm"
                            name="contract_person" value="{{ $value->contract_person }}"
                            data-original="{{ $value->contract_person }}">
                    </div>

                    <div class="form-group col-md-4">
                        <label>Have you organized a camp with AVBD in the past?</label>
                        <input type="text" class="form-control form-control-sm" value="{{ $value->is_past_org }}"
                            readonly>
                    </div>

                </div>
            @endforeach


            <div class="row justify-content-center">
                <div class="col-md-3 text-center">

                    <button type="button" id="savepass" class="btn btn-solid btn-xs mr-2">
                        <i class="fas fa-check"></i> Save
                    </button>

                    <a href="{{ url('/update-profile') }}" class="btn btn-outline btn-xs">
                        <i class="fas fa-times"></i> Cancel
                    </a>

                </div>
            </div>

            {{ Form::close() }}

        </div>
    </div>


    <script>
        $(document).ready(function() {

            setTimeout(function() {
                $('.floating-alert').fadeOut('slow');
            }, 5000);



            $("#savepass").click(function() {

                var mailformat = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/;

                var org_name = $("#org_name").val();
                var org_email = $("#org_email").val();
                var org_contract_no = $("#org_contract_no").val();
                var contract_person = $("#contract_person").val();


                if (org_name == "") {
                    alert("Please enter Organization Name");
                    $("#org_name").focus();
                    return false;
                }

                if (org_email == "") {
                    alert("Please enter Organization Email");
                    $("#org_email").focus();
                    return false;
                }

                if (!org_email.match(mailformat)) {
                    alert("Invalid Email");
                    $("#org_email").focus();
                    return false;
                }

                if (org_contract_no == "") {
                    alert("Please enter Organization Contact No.");
                    $("#org_contract_no").focus();
                    return false;
                }

                if (org_contract_no.length != 10) {
                    alert("Invalid Contact No");
                    $("#org_contract_no").focus();
                    return false;
                }

                if (contract_person == "") {
                    alert("Please enter Contact person name");
                    $("#contract_person").focus();
                    return false;
                }

                /* detect changed fields */
                let changed = false;
                $("#form1 input").each(function() {
                    let original = $(this).data("original");
                    let current = $(this).val();
                    if (original !== undefined) {
                        if (original != current) {
                            changed = true;
                        }
                    }
                });
                if (!changed) {
                    alert("No changes detected");
                    return false;
                }
                $("#form1").submit();
            });
        });
    </script>
@endsection