@extends('layouts.app')

@section('head')
@endsection

@section('content')
    <nav class="navbar navbar-expand-lg navbar-dark navbar-stick-dark" data-navbar="sticky">
      <div class="container">
        <div class="navbar-left">
          <button class="navbar-toggler" type="button">☰</button>
          <a class="navbar-brand" href="{{url('/')}}">
            <img class="logo-dark" src="assets/img/logo_dark.png" alt="logo">
            <img class="logo-light" src="assets/img/logo_light.png" alt="logo">
          </a>
        </div>
        <a class="btn btn-xs btn-round btn-success" href="{{ route('logout') }}">Logout</a>
        <!-- <a class="text-dark" href="{{ route('logout') }}"> {{Auth::user()->name}} Logout</a> -->
      </div>
    </nav>
    <section class="section">
        <div class="container">
          <div class="row gap-y">
            <div class="col-md-3 mr-md-auto">
                <div class="sidebar px-4 py-md-0">
                    <h6 class="sidebar-title text-center">Welcome <p class="text-light">{{Auth::user()->name}}</p></h6>
                    <a class="btn btn-xs btn-round btn-success" href="#" data-toggle="modal" data-target="#modal-project-2">Request Project</a>
                    <hr>
                    <h6 class="sidebar-title">How it works</h6>
                    <p class="small-3">Request For a project and Track every progress it goes through, We wil notify and update every details of your project</p>
                    <hr>
                </div>
            </div>

            <div class="col-md-8">
                <table class="table">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                    </tr>
                    </thead>
                    <tbody>
                @foreach($projects as $project)
                    @foreach($project->services as $service)
                        @foreach($service->websites as $website)
                            @foreach($website->webpages as $webpage)
                                @foreach($webpage->versions as $version)
                    <tr>
                        <th scope="row">1</th>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td><a href="{{ url('/') . '/webmaker' . $version->editorPath }}">Edit</a> | <a href="{{ url('/') . '/' . $webpage->url }}">View</a></td>
                    </tr>
                                    
                                @endforeach
                            @endforeach
                        @endforeach
                    @endforeach
                @endforeach
                    </tbody>
                </table>
            </div>

          </div>
        </div>
    </section>
   
    <!-- Footer -->
    <footer class="footer">
      <div class="container">
        <div class="row gap-y align-items-center">

          <div class="col-6 col-lg-3">
            <a href="{{url('/')}}"><img src="assets/img/logo_dark.png" alt="logo"></a>
          </div>

          <div class="col-6 col-lg-3 text-right order-lg-last">
            <div class="social">
              <a class="social-facebook" href="https://www.facebook.com/thethemeio"><i class="fa fa-facebook"></i></a>
              <a class="social-twitter" href="https://twitter.com/thethemeio"><i class="fa fa-twitter"></i></a>
              <a class="social-instagram" href="https://www.instagram.com/thethemeio/"><i class="fa fa-instagram"></i></a>
              <a class="social-dribbble" href="https://dribbble.com/thethemeio"><i class="fa fa-dribbble"></i></a>
            </div>
          </div>

          <div class="col-lg-6">
            <!-- <div class="nav nav-bold nav-uppercase nav-trim justify-content-lg-center">
              <a class="nav-link" href="uikit/index.html">Elements</a>
              <a class="nav-link" href="block/index.html">Blocks</a>
              <a class="nav-link" href="page/about-1.html">About</a>
              <a class="nav-link" href="blog/grid.html">Blog</a>
              <a class="nav-link" href="page/contact-1.html">Contact</a>
            </div> -->
          </div>

        </div>
      </div>
    </footer>
    <!-- /.footer -->
    
    <!-- Modal -->
    <div class="modal fade" id="modal-project-2" tabindex="-1" role="dialog" style="display: none;" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">

          <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
            <form>
              <h4 class="text-center">Request Project</h4>
              <p class="text-center">We will Quote best price for you {{Auth::user()->name}}</p>
              <hr class="w-10">
              <!-- <div class="form-group">
                <input class="form-control" type="text" name="name" placeholder="Your name">
              </div>

              <div class="form-group">
                <input class="form-control" type="email" name="email" placeholder="Email Address">
              </div> -->
              <input type="hidden" id="name" value="{{Auth::user()->name}}">
              <input type="hidden" id="email" value="{{Auth::user()->email}}">
              <input type="hidden" id="mobile" value="{{Auth::user()->mobile}}">
              <input type="hidden" id="user_id" value="{{Auth::user()->id}}">
              <div class="form-group">
                <label>Service Type</label>
                <select id="select_type" class="form-control">
                  <option value="android">ANDROID (Phone & Tablet) </option>
                  <option value="ios">iOS (iPhone & iPad)</option>
                  <option value="ios_and_android">Android & iOS</option>
                  <option value="webApp">Custom Web Application</option>
                  <option value="wordpress">Wordpress Customization</option>
                  <option value="backend">Ruby on Rails/PHP/JAVA/NodeJs</option>
                  <option value="frontEnd">AngularJs/Angular 2</option>
                  <option value="sap">SAP</option>
                  <option value="salesforce">Sales Force</option>
                  <option value="cms">Custom CMS</option>
                  <option value="bd">Business Development</option>
                  <option value="company_registration">Company Registration</option>
                  <option value="graphics">Graphics Design</option>
                </select>
              </div>
              <div class="form-group">
                <label>Timeframe</label>
                <select id="select_time" class="form-control">
                  <option value="asap">Asap</option>
                  <option value="1">Within 1 month</option>
                  <option value="2">Within 2 months</option>
                  <option value="3">Within 3 months</option>
                  <option value="6">Within 6 months</option>
                  <option value="dont_know">Dont' know yet</option>
                </select>
              </div>
              <div class="form-group">
                <label>Tell us more about your idea...</label>  
                <textarea id="info" class="form-control" maxlength="255" placeholder="Your message" rows="7"></textarea>
              </div>
              <button class="btn btn-lg btn-block btn-primary"id="request_btn" type="button">Request</button>

            </form>
          </div>

        </div>
      </div>
    </div>

@endsection

@section('foot')
<script>
$( document ).ready(function() {
    $("#request_btn").on("click", function(e){
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr("content")
            }
        });
        e.preventDefault();
        // var uploaderBar = document.getElementById("profileUploadBar");
        // uploaderBar.style.display = 'block';
        // $("#modal-expenses .overlay").fadeIn();
        $(".help-block").html('');
        let action = "request_by_user";
        let service_type = $("#select_type").val();
        let service_time = $("#select_time").val();
        let name = $("#name").val();
        let user_id = $("#user_id").val();
        let email = $("#email").val();
        let mobile = $("#mobile").val();
        let info = $("#info").val();
        $.ajax({
            type: "POST",
            url: baseUrl+'/service_request',
            data: { action:action,service_type:service_type,service_time:service_time,name:name,user_id:user_id,email:email,mobile:mobile,info:info}, 
        }).done(function(data, status, xhr) {
            data = $.parseJSON(data);
            console.log(data);
            if(data.status == 0) {
                // $("#modal-expenses").modal("toggle");
                // $("#createExpensesForm")[0].reset();
                // casesTable.reload();
            }
            if(data.status == 1){
                // var response = data.errors;
                // var errorString = '<ul>';
                // $.each( response, function( key, value) {
                //     errorString += '<li>' + value + '</li>';
                // });
                // errorString += '</ul>';
                // $(".help-block").append(errorString);
            }
        }).fail(function(data, status, xhr) {
            
        }).always(function(xhr, status, err) {
            // $("#modal-expenses .overlay").fadeOut();
        })
    });
});
</script>
@endsection