@extends('layouts.app')
@section('title', session('company_code') . ' Elite System')

@section('body')

<div class="row">
    {{-- JO CATEGORIES --}}
    <div class="col-xs-6">
        <div class="box box-default">
            <div class="box-header with-border text-bold">
                <label class="text-primary" style="font-size:16px; margin-top:6px">JO CATEGORIES</label>
                <div class="pull-right">
                    <a class="btn btn-success btn-flat" data-target="#addCategory-Modal" data-toggle="modal">
                        <i class="fa fa-plus-circle"></i> ADD JO CATEGORY
                    </a>
                </div>
            </div>

            <div class="box-body">
                <div class="row">
                    <div class="col-xs-12">
                        <table class="table table-condensed table-hover" id="table-jo-categories" style="width:100%">
                            <thead class="table-header-bg">
                                <tr>
                                    <th>Code</th>
                                    <th>Description</th>
                                    <th>Is Active</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>

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

    {{-- JO REASONS --}}
    <div class="col-xs-6">
        <div class="box box-default">
            <div class="box-header with-border text-bold">
                <label class="text-primary" style="font-size:16px; margin-top:6px">JO REASONS</label>
                <div class="pull-right">
                    <button class="btn btn-success btn-flat" data-target="#addReason-Modal" data-toggle="modal"><i class="fa fa-plus fa-fw"></i> ADD JO REASON</button>
                </div>
                <div class="pull-right" style="width:300px; margin-right:3px">
                    <select id="filter-by-category" class="form-control select2 select2-hidden-accessible" data-placeholder="JO CATEGORY" style="width: 100%;" aria-hidden="true">
                        <option></option>
                        @foreach($categories AS $c)
                        <option value="{{ $c->code }}">{{ strtoupper($c->description) }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="box-body">
                <div class="row">
                    <div class="col-xs-12">
                        <table class="table table-condensed table-hover" id="table-jo-reasons" style="width:100%">
                            <thead class="table-header-bg">
                                <tr>
                                    <th>Category Code</th>
                                    <th>Description</th>
                                    <th>Is CR</th>
                                    <th>Is Active</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{-- Populate with JO reasons --}}
                            </tbody>
                        </table>
                    </div>
                </div>

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

<!-- ADD CATEGORY MODAL -->
<div class="modal fade" id="addCategory-Modal" data-backdrop="static" data-keyboard="false" role="dialog">
    <div class="modal-dialog modal-sm" role="document" table>
        <div class="modal-content">
            <div class="modal-body">
                <div class="form-row">
                    <h5 class="text-primary" style="margin-top:0px;"><strong><i class="fa fa-plus-square"></i> Add Category</strong></h5>
                </div>

                <div class="form-row">
                    <div class="form-group col">
                        <label for="add_code"><strong>Category Code</strong></label>
                        <input type="text" class="form-control" idewqq="add_cat_code" placeholder="Code">
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group col">
                        <label for="add_description"><strong>Category Description</strong></label>
                        <input type="text" class="form-control" id="add_cat_desc" placeholder="Description">
                    </div>
                </div>

                <div class="form-group">
                    <button type="button" class="btn btn-default btn-flat waves-effect btn-sm" onclick="clearInputs()" data-dismiss="modal">
                        Cancel
                    </button>
                    <button type="button" class="btn btn-success btn-flat waves-effect waves-light btn-sm addCategory-btn">
                        <i class="fa fa-check"></i> Save
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- EDIT CATEGORY MODAL -->
<div class="modal fade" id="editCategory-Modal" data-backdrop="static" data-keyboard="false" role="dialog">
    <div class="modal-dialog modal-sm" role="document" table>
        <div class="modal-content">
            <div class="modal-body">
                <div class="form-row">
                    <h5 class="text-primary" style="margin-top:0px;"><strong><i class="fa fa-pencil-square"></i> Edit Category</strong></h5>
                </div>
                <input type="hidden" id="hidden_cat_id">

                <div class="form-row">
                    <div class="form-group col">
                        <label for="edit_code"><strong>Category Code</strong></label>
                        <input type="text" class="form-control" id="edit_cat_code" placeholder="Code">
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group col">
                        <label for="edit_description"><strong>Category Description</strong></label>
                        <input type="text" class="form-control" id="edit_cat_desc" placeholder="Description">
                    </div>
                </div>

                <div class="form-group">
                    <button type="button" class="btn btn-default btn-flat waves-effect btn-sm" onclick="clearInputs()" data-dismiss="modal">
                        Cancel
                    </button>
                    <button type="button" class="btn btn-success btn-flat waves-effect waves-light btn-sm editCategory-btn">
                        <i class="fa fa-check"></i> Save
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>




<!-- ADD REASON MODAL -->
<div class="modal fade" id="addReason-Modal" data-backdrop="static" data-keyboard="false" role="dialog">
    <div class="modal-dialog modal-sm" role="document" table>
        <div class="modal-content">
            <div class="modal-body">
                <div class="form-row">
                    <h5 class="text-primary" style="margin-top:0px;"><strong><i class="fa fa-plus-square"></i> Add Reason</strong></h5>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <span class="control-label text-bold">Category</span>
                        <select id="add_res_cat" class="form-control select2 select2-hidden-accessible" aria-hidden="true" style="width: 100%;">
                            @foreach($categories as $c)
                                <option value="{{ $c->code }}">{{ $c->code }} - {{ $c->description }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group col">
                        <label for="add_description"><strong>Reason Description</strong></label>
                        <input type="text" class="form-control" id="add_res_desc" placeholder="Description">
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <span class="control-label text-bold">Is Customer Related?</span>
                        <select id="add_res_cr" class="form-control select2 select2-hidden-accessible" aria-hidden="true" style="width: 100%;">
                            <option value="1">YES</option>
                            <option value="0">NO</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <button type="button" class="btn btn-default btn-flat waves-effect btn-sm" onclick="clearInputs()" data-dismiss="modal">
                        Cancel
                    </button>
                    <button type="button" class="btn btn-success btn-flat waves-effect waves-light btn-sm addReason-btn">
                        <i class="fa fa-check"></i> Save
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- EDIT REASON MODAL -->
<div class="modal fade" id="editReason-Modal" data-backdrop="static" data-keyboard="false" role="dialog">
    <div class="modal-dialog modal-sm" role="document" table>
        <div class="modal-content">
            <div class="modal-body">
                <div class="form-row">
                    <h5 class="text-primary" style="margin-top:0px;"><strong><i class="fa fa-pencil-square"></i> Edit Reason</strong></h5>
                </div>
                <input type="hidden" id="hidden_res_id">

                <div class="form-row">
                    <div class="form-group">
                        <span class="control-label text-bold">Category</span>
                        <select id="edit_res_cat" class="form-control select2 select2-hidden-accessible" aria-hidden="true" style="width: 100%;">
                            @foreach($categories as $c)
                                <option value="{{ $c->code }}">{{ $c->code }} - {{ $c->description }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group col">
                        <label for="edit_res_desc"><strong>Category Description</strong></label>
                        <input type="text" class="form-control" id="edit_res_desc" placeholder="Description">
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <span class="control-label text-bold">Is Customer Related?</span>
                        <select id="edit_res_cr" class="form-control select2 select2-hidden-accessible" aria-hidden="true" style="width: 100%;">
                            <option value="1">YES</option>
                            <option value="0">NO</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <button type="button" class="btn btn-default btn-flat waves-effect btn-sm" onclick="clearInputs()" data-dismiss="modal">
                        Cancel
                    </button>
                    <button type="button" class="btn btn-success btn-flat waves-effect waves-light btn-sm editReason-btn">
                        <i class="fa fa-check"></i> Save
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script type="text/javascript">
function clearInputs() {
    $('#hidden_id').val('');
    $('#add_code').val('');
    $('#add_description').val('');
    $('#edit_code').val('');
    $('#edit_description').val('');
}

$(document).ready(function() {
    // Initialize DataTables for JO Categories
    $('#table-jo-categories').DataTable({
        ordering: false,
        deferred: true,
        processing: true,
        serverSide: true,
        ajax: '{{ url("administrator/admin-tools/set-jo/dt-categories") }}',
        columns: [
            { data: 'code',        name: 'code' },
            { data: 'description', name: 'description' },
            { data: 'is_active',   name: 'is_active' },
            { data: 'action',      name: 'action', orderable: false, searchable: false }
        ]
    });

    // Initialize DataTables for JO Reasons
    $dt = $('#table-jo-reasons').DataTable({
        ordering: false,
        deferred: true,
        processing: true,
        serverSide: true,
        ajax: {
                url: '{{ url("administrator/admin-tools/set-jo/dt-reasons") }}',
                data: function(d) {
                    d.category_code = $('#filter-by-category').val();
                }
            },
        columns: [
            { data: 'category_code', name: 'category_code' },
            { data: 'description',   name: 'description' },
            { data: 'is_cr',         name: 'is_cr' },
            { data: 'is_active',     name: 'is_active' },
            { data: 'action',        name: 'action', orderable: false, searchable: false }
        ]
    });

    $('#filter-by-category').change(function() {
        $dt.search($('#table-jo-reasons_filter input').val()).draw();
    });

    $('#addCategory-Modal').on('shown.bs.modal', function() {
        $('#add_cat_code').focus();
    });

    $('#editCategory-Modal').on('shown.bs.modal', function() {
        $('#edit_cat_code').focus();
    });

    $('#addReason-Modal').on('shown.bs.modal', function() {
        $('#add_res_desc').focus();
    });

})
.on('click', '.addCategory-btn', function() {
    let code = $('#add_cat_code').val();
    let description = $('#add_cat_desc').val();

    if (code === '' || description === '') {
        alert('Please fill in all fields.');
        return;
    }

    $.ajax({
        url: '{{ url("administrator/admin-tools/set-jo/add-category") }}',
        method: 'POST',
        data: {
            code: code,
            description: description
        },
        success: function(response) {
            $('#addCategory-Modal').modal('hide');
            $('#table-jo-categories').DataTable().ajax.reload();
            clearInputs();
        },
        error: function(xhr) {
            alert('An error occurred while adding the category.');
        }
    });
})
.on('click', '.edit-category', function() {
    let id = $(this).data('id');
    let code = $(this).data('code');
    let description = $(this).data('description');

    $('#hidden_cat_id').val(id);
    $('#edit_cat_code').val(code);
    $('#edit_cat_desc').val(description);

    $('#editCategory-Modal').modal('show');
})
.on('click', '.editCategory-btn', function() {
    let id = $('#hidden_cat_id').val();
    let code =  $('#edit_cat_code').val();
    let description = $('#edit_cat_desc').val();

    console.log(id, code, description);
    if (id === '' || code === '' || description === '') {
        alert('Please fill in all fields.');
        return;
    }

    $.ajax({
        url: '{{ url("administrator/admin-tools/set-jo/edit-category") }}',
        method: 'POST',
        data: {
            id: id,
            code: code,
            description: description
        },
        success: function(response) {
            $('#editCategory-Modal').modal('hide');
            $('#table-jo-categories').DataTable().ajax.reload();
            clearInputs();
        },
        error: function(xhr) {
            alert('An error occurred while updating the category.');
        }
    });
})
.on('click', '.addReason-btn', function() {
    let category = $('#add_res_cat').val();
    let description = $('#add_res_desc').val();
    let is_cr = $('#add_res_cr').val();

    if (category === '' || description === '') {
        alert('Please fill in all fields.');
        return;
    }

    $.ajax({
        url: '{{ url("administrator/admin-tools/set-jo/add-reason") }}',
        method: 'POST',
        data: {
            category: category,
            description: description,
            is_cr: is_cr
        },
        success: function(response) {
            $('#addReason-Modal').modal('hide');
            $('#table-jo-reasons').DataTable().ajax.reload();
            clearInputs();
        },
        error: function(xhr) {
            alert('An error occurred while adding the reason.');
        }
    });
})
.on('click', '.edit-reason', function() {
    let id = $(this).data('id');
    let code = $(this).data('code');
    let description = $(this).data('description');
    let is_cr = $(this).data('iscr');

    $('#hidden_res_id').val(id);
    $('#edit_res_cat').val(code).trigger('change.select2');
    $('#edit_res_desc').val(description);
    $('#edit_res_cr').val(is_cr).trigger('change.select2');

    $('#editReason-Modal').modal('show');
})
.on('click', '.editReason-btn', function() {
    let id = $('#hidden_res_id').val();
    let category = $('#edit_res_cat').val();
    let description = $('#edit_res_desc').val();
    let is_cr = $('#edit_res_cr').val();

    if (id === '' || category === '' || description === '') {
        alert('Please fill in all fields.');
        return;
    }

    $.ajax({
        url: '{{ url("administrator/admin-tools/set-jo/edit-reason") }}',
        method: 'POST',
        data: {
            id: id,
            category: category,
            description: description,
            is_cr: is_cr
        },
        success: function(response) {
            $('#editReason-Modal').modal('hide');
            $('#table-jo-reasons').DataTable().ajax.reload();
            clearInputs();
        },
        error: function(xhr) {
            alert('An error occurred while updating the reason.');
        }
    });
})
.on('click', '#disable-category, #enable-category', function() {
    let id = $(this).data('id');
    let status = $(this).data('status');

    $.ajax({
        url: '{{ url("administrator/admin-tools/set-jo/category-update-status") }}',
        method: 'POST',
        data: {
            id: id,
            status: status
        },
        success: function(response) {
            $('#table-jo-categories').DataTable().ajax.reload();
        },
        error: function(xhr) {
            alert('An error occurred while disabling the category.');
        }
    });
})
.on('click', '#disable-reason, #enable-reason', function() {
    let id = $(this).data('id');
    let status = $(this).data('status');

    $.ajax({
        url: '{{ url("administrator/admin-tools/set-jo/reason-update-status") }}',
        method: 'POST',
        data: {
            id: id,
            status: status
        },
        success: function(response) {
            $('#table-jo-reasons').DataTable().ajax.reload();
        },
        error: function(xhr) {
            alert('An error occurred while disabling the reason.');
        }
    });
});
</script>
@endsection