@extends('main')

@section('css')
    
@endsection

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

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <!-- left column -->
          <div class="col-md-12">
            <!-- general form elements -->
            <div class="card card-primary mt-3">
              <div class="card-header">
                <h3 class="card-title">Add New Client</h3>
              </div>
              <!-- /.card-header -->
              <!-- form start -->
              <form method="POST">
                @csrf
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 col-sm-12">
                            <div class="form-group">
                            <label>First Name*</label>
                            <input type="text" class="form-control" name="first_name" required>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12">
                            <div class="form-group">
                            <label>Last Name</label>
                            <input type="text" class="form-control" name="last_name">
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12">
                            <div class="form-group">
                            <label>Email</label>
                            <input type="email" class="form-control" name="email">
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12">
                            <div class="form-group">
                            <label>No. Telepon*</label>
                            <input type="number" class="form-control" name="phone" required>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12">
                            <div class="form-group">
                            <label>Alamat</label>
                            <textarea name="address" class="form-control"></textarea>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12">
                            <div class="form-group">
                            <label>Status Order*</label>
                            <select name="status_order" class="form-control" required>
                                <option value="" selected disabled>--Choose--</option>
                            </select>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12">
                            <div class="form-group">
                            <label>Kategori Bisnis</label>
                            <select name="kategori_bisnis" class="form-control">
                                <option value="" selected disabled>--Choose--</option>
                            </select>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12">
                            <div class="form-group">
                            <label>Lead Source</label>
                            <select name="lead_source" class="form-control">
                                <option value="" selected disabled>--Choose--</option>
                            </select>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12">
                            <div class="form-group">
                            <label>Masuk Dari Mana</label>
                            <select name="masuk_dari_mana" class="form-control">
                                <option value="" selected disabled>--Choose--</option>
                            </select>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12">
                            <div class="form-group">
                            <label>Area</label>
                            <select name="area" class="form-control">
                                <option value="" selected disabled>--Choose--</option>
                            </select>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12">
                            <div class="form-group">
                            <label>Tanggal Meeting</label>
                            <input type="date" name="tgl_meeting" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12">
                            <div class="form-group">
                            <label>Jam Meeting</label>
                            <input type="time" name="jam_meeting" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12">
                            <div class="form-group">
                            <label>Note</label>
                            <textarea name="note" class="form-control"></textarea>
                            </div>
                        </div>
                        <div class="col-md-10 col-sm-12">
                            <div class="form-group">
                            <label>Jasa</label>
                            <select name="jasa" class="form-control jasa-val" required>
                                <option value="" selected disabled>--Choose--</option>
                            </select>
                            </div>
                        </div>
                        <div class="col-md-2 col-sm-12">
                            <div class="form-group">
                            <label>New Jasa</label><br>
                            <button type="button" class="btn btn-warning btn-new-jasa">New Jasa</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- /.card-body -->

                <div class="card-footer text-right">
                  <button type="submit" class="btn btn-success btn-submit-add">Add</button>
                </div>
              </form>
            </div>
            <!-- /.card -->

          </div>
          <!--/.col (left) -->
        </div>
        <!-- /.row -->
      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
     <!-- Modal -->
</div>
<div class="modal fade modal-jasa" id="modal-default" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="New Jasa"></h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <input type="text" class="form-control new-jasa-val" placeholder="New Jasa">
            </div>             
            <div class="modal-footer">
                <button type="button" class="btn btn-success btn-add-jasa">Add Jasa</button>
            </div>
        </div>  
        <!-- /.modal-content -->
    </div>
<!-- /.modal-dialog -->
</div>
@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script>
  $(document).ready(function() {

    $.ajax({
        type: 'GET',
        url: 'https://crm.bintorocorp.co.id/ApiBinggo/getStatusOrder',
        data: {},
        success(res) {
            let status_order = JSON.parse(res)
            let status_order_options = '';
            for(let i = 0; i <= status_order.length - 1; i++) {
                status_order_options += `
                    <option value="${status_order[i].name_status_order}${status_order[i].ket_status_order ? ` - ${status_order[i].ket_status_order}` : ''}">${status_order[i].name_status_order}${status_order[i].ket_status_order ? ` - ${status_order[i].ket_status_order}` : ''}</option>
                `
            }

            $('body').find('[name="status_order"]').append(status_order_options)
        }
    })

    $.ajax({
        type: 'GET',
        url: 'https://crm.bintorocorp.co.id/ApiBinggo/getMasukDariMana',
        data: {},
        success(res) {
            let masuk_dari_mana = JSON.parse(res)
            let masuk_dari_mana_options = '';
            for(let i = 0; i <= masuk_dari_mana.length - 1; i++) {
                masuk_dari_mana_options += `
                    <option value="${masuk_dari_mana[i].name_order_come}">${masuk_dari_mana[i].name_order_come}</option>
                `
            }

            $('body').find('[name="masuk_dari_mana"]').append(masuk_dari_mana_options)
        }
    })

    $.ajax({
        type: 'GET',
        url: 'https://crm.bintorocorp.co.id/ApiBinggo/getLeadSource',
        data: {},
        success(res) {
            let lead_source = JSON.parse(res)
            let lead_source_options = '';
            for(let i = 0; i <= lead_source.length - 1; i++) {
                lead_source_options += `
                    <option value="${lead_source[i].name_lead_source}">${lead_source[i].name_lead_source}</option>
                `
            }

            $('body').find('[name="lead_source"]').append(lead_source_options)
        }
    })

    $.ajax({
        type: 'GET',
        url: 'https://crm.bintorocorp.co.id/ApiBinggo/getKategoriBisnis',
        data: {},
        success(res) {
            let kategori_bisnis = JSON.parse(res)
            let kategori_bisnis_options = '';
            for(let i = 0; i <= kategori_bisnis.length - 1; i++) {
                kategori_bisnis_options += `
                    <option value="${kategori_bisnis[i].name_kategori_bisnis}">${kategori_bisnis[i].name_kategori_bisnis}</option>
                `
            }

            $('body').find('[name="kategori_bisnis"]').append(kategori_bisnis_options)
        }
    })

    $.ajax({
        type: 'GET',
        url: 'https://crm.bintorocorp.co.id/ApiBinggo/getArea',
        data: {},
        success(res) {
            let area = JSON.parse(res)
            let area_options = '';
            for(let i = 0; i <= area.length - 1; i++) {
                area_options += `
                    <option value="${area[i].name_area}">${area[i].name_area}</option>
                `
            }

            $('body').find('[name="area"]').append(area_options)
        }
    })

    $.ajax({
        type: 'GET',
        url: 'https://crm.bintorocorp.co.id/ApiBinggo/getJasa',
        data: {},
        success(res) {
            if(res) {
                let jasa = JSON.parse(res)
                let jasa_options = '';
                for(let i = 0; i <= jasa.length - 1; i++) {
                    jasa_options += `
                        <option value="${jasa[i].form_binggo_jasa}">${jasa[i].form_binggo_jasa}</option>
                    `
                }

                $('body').find('[name="jasa"]').append(jasa_options)
            }
        }
    })

    $('form').on('submit', function(e) {
        e.preventDefault();

        let first_name = $('body').find('[name="first_name"]').val()
        let last_name = $('body').find('[name="last_name"]').val()
        let email = $('body').find('[name="email"]').val()
        let telp = $('body').find('[name="phone"]').val()
        let address = $('body').find('[name="address"]').val()
        let status_order = $('body').find('[name="status_order"]').val().split(' - ')[0];
        let ket_order = $('body').find('[name="status_order"]').val().split(' - ').length > 1 ? $('body').find('[name="status_order"]').val().split(' - ')[1] : '';
        let kategori_bisnis = $('body').find('[name="kategori_bisnis"]').val()
        let lead_source = $('body').find('[name="lead_source"]').val()
        let masuk_dari_mana = $('body').find('[name="masuk_dari_mana"]').val()
        let area = $('body').find('[name="area"]').val()
        let tgl_meeting = $('body').find('[name="tgl_meeting"]').val()
        let jam_meeting = $('body').find('[name="jam_meeting"]').val()
        let note = $('body').find('[name="note"]').val()
        let jasa = $('body').find('[name="jasa"]').val()

        $.ajax({
            type: 'POST',
            url: 'https://crm.bintorocorp.co.id/ApiBinggo/insertNew',
            data: {
                first_name,
                last_name,
                email,
                telp,
                address,
                status_order,
                ket_order,
                kategori_bisnis,
                lead_source,
                masuk_dari_mana,
                area,
                tgl_meeting,
                jam_meeting,
                note,
                jasa
            },
            beforeSend() {
                $('body').find('.btn-submit-add').text('loading...')
            },
            success(res) {
                window.location = "{{ route('crm.index') }}"
            }

        })

    })


    $('.btn-new-jasa').on('click', function() {
        $('.new-jasa-val').val('')
        $('.modal-jasa').modal('show')
    })

    $('.btn-add-jasa').on('click', function() {
        let jasa = $('.new-jasa-val').val()
        $('body').find('.jasa-val').replaceWith(`
            <input type="text" class="form-control jasa-val" name="jasa" value="${jasa}" readonly>
        `)
        $('.modal-jasa').modal('hide')
    })

  })
</script>
@endsection