@extends('layouts.master')
@section('page_title', $page_title)
@section('content')
    <div class="container" >
        {{ Form::page_header($page_title, "hours") }}
        <div class="row">
            <div class="col-md-12 grey-bg-search curve_container search-container">
                <form class="row" id="search_form">
                    @include('search._grid_search_filters', ['col_width' => 4, 'filters' => [
                        ['name' => 'status', 'col_width' => 12, 'list' => \App\Models\Website_Request::$website_status_map_for_website_design_requests_grid, 'placeholder' => 'All Statuses'],
                    ]])

                    @include('search._complex_search', ['col_width' => 8])
                    @include('search._complex_search_parameter', ['sort_column' => 'company'])
                </form>
            </div>
        </div>
        @include('search._search_grid_wrapper')
    </div>
    @include('shared._assign_user', ['title'=>'Assign Developer', 'users'=>\App\Helpers\FormDataHelper::request_developers(), 'type' => 'developer' ])
    @include('shared._assign_user', ['title'=>'Assign Designer', 'users'=> \App\Helpers\FormDataHelper::request_designers(), 'type' => 'designer' ])
@endsection

@section('page_script')
    @include('shared_script._search_script_render')
    @include('shared_script._dynamic_search_columns')
    @include('shared_script._assign_user_script')
    {{ Html::script('/js/moment.min.js') }}
    {{ Html::script('/js/daterangepicker.js') }}

    <script>
        function edit_due_dates(pk) {
            @if(!(\App\Providers\AuthServiceProvider::user_has_permission(\App\Providers\AuthServiceProvider::GATE_DESIGN_MANAGER)))
                $('#mockup-due-date-'+pk).prop('disabled', true);
                $('#prototype-due-date-'+pk).prop('disabled', true);
                $('#assembled-website-due-date-'+pk).prop('disabled', true);
            @else
                init_daterangepicker_with_null_support('mockup-due-date-'+pk);
                init_daterangepicker_with_null_support('prototype-due-date-'+pk);
                init_daterangepicker_with_null_support('assembled-website-due-date-'+pk);
            @endif

            var edit_dialog = $( "#edit-dialog-"+pk );
            var mockup_due_date = $('#mockup-due-date-'+pk).val();
            var prototype_due_date = $('#prototype-due-date-'+pk).val();
            var assembled_website_due_date = $('#assembled-website-due-date-'+pk).val();

            edit_dialog.dialog({
                position: { my: "right top", at: "right bottom", of: '#due-dates-' + pk },
                resizable: false,
                draggable: false,
                width: 400,
                modal: true,
                closeOnEscape: true,
                // we want to control the close button instead of just show the default
                dialogClass: "no-close",
                buttons: [
                    {
                        text: "SAVE",
                        "class": 'bt-label bt-btn-medium uppercase bt-button edit-popup-btn',
                        "id": 'save-due-dates',
                        click: function() {
                            save_dates(pk);
                            $( this ).dialog( "close" );
                        }
                    },
                    {
                        text: "CANCEL",
                        "class": 'bt-label bt-btn-medium uppercase bt-button edit-popup-btn',
                        "id": 'cancel',
                        click: function() {
                            $( this ).dialog( "close" );
                            // reset values on cancel
                            $('#mockup-due-date-'+pk).val(mockup_due_date);
                            $('#prototype-due-date-'+pk).val(prototype_due_date);
                            $('#assembled-website-due-date-'+pk).val(assembled_website_due_date);
                        }
                    }
                ]
            });
            edit_dialog.show();
            $('#mockup-due-date-'+pk).blur();
            @if(!(\App\Providers\AuthServiceProvider::user_has_permission(\App\Providers\AuthServiceProvider::GATE_DESIGN_MANAGER)))
                $('#save-due-dates').hide();
            @endif
        }

        function save_dates(pk) {
            var mockup_due_date = $('#mockup-due-date-'+pk).val();
            var prototype_due_date = $('#prototype-due-date-'+pk).val();
            var assembled_website_due_date = $('#assembled-website-due-date-'+pk).val();

            $.ajax({
                type: "POST",
                url: '{{ action('WebsiteRequestController@save_due_dates') }}',
                data: { pk: pk, mockup_due_date: mockup_due_date, prototype_due_date: prototype_due_date, assembled_website_due_date: assembled_website_due_date },
                success: function (result) {

                }
            });
        }
    </script>
@endsection

@section('page_style')
    @include('shared_style._grid_sort_style')
    {{ Html::style('/css/daterangepicker.css') }}
    {{ Html::style('/css/daterangepicker_custom.css') }}
    <style>
        .ui-dialog-buttonset .bt-button {
            border-color: black;
            color: black;
        }

        .ui-dialog .ui-dialog-content {
            margin: 0;
            padding: 10px 24px 0;
        }

        .ui-dialog .ui-dialog-title {
            font-family: 'Open Sans';
            font-weight: 100;
        }

        .ui-dialog .ui-dialog-titlebar-close {
            display: none;
        }

        table.table.source-data-table.source-table-responsive.border-table > tbody > tr > td {
            max-width: 190px;
        }
    </style>
@endsection